1
Authors:RIEFOLO AnthonyFANCHETTE Edouard
Tutors : BETBEDER Marie-Laure
REFFAY Christophe
MULCE project
Interface to display XML objects
2
SummaryI. What is MULCE project ?
a. Brief presentation.b. XML corpus.c. Goal of the project.
II. Technologic choices.a. Browse the XML.b. JavaScript framework for web applications: ExtJS.c. XML to ExtJS.
III. The interface.a. Layout of the interface.b. Its implementation.
a. Brief presentation.
• MULCE : The Multi-modal Learning Corpus Exchange.
• A data-sharing system which allow researches to access to different corpora.
• Goal : Provide a learning corpus sharing platform.
What is MULCE project ? Brief presentation. The interface.
4
I. What is MULCE project ?
b. XML corpus.
What is MULCE project ? XML corpus The interface.
5
I. What is MULCE project ?
• XML : Extensible Mark-up Language.
• Allow to structure information in treelike fields.
• Structure validated by a schema.
b. XML corpus.
Example XML shema of a forum act :
What is MULCE project ? XML corpus and goal of the project. The interface.
6
I. What is MULCE project ?
c. Goal of the project.
• Build a visualization tool of different objects con-tained in a corpora.
• Consultation of corpus with user-friendly interface
What is MULCE project ? Goal of the project. The interface.
7
I. What is MULCE project ?
II. Technologic choices.
a. Browse the XML.
• To gather information for traitement.
• It is possible thanks to PHP using XPATH.
What is MULCE project ?
The interface.
9
a. Browse the XML.
Example of XPATH query:
Gather the name of an actor giving his “id”What is MULCE project ?
The interface.
10
II. Technologic choices.
$xml = new Domxpath($dom);$elements = $xml->query(‘//mcesid:memberlist/mcesid:actors/mcesid:actor[@id="'.$actor_id.'"]');foreach($elements as $noeud) {
return $noeud->getAttribute(“designation”);}
…<mcesid:memberlist> <mcesid:actors> <mcesid:actor id="Al1" designation="Jane" status="learner" institution="Open University" Country="United Kindom" Gender="female" Age="46"/> <mcesid:actor id="Al2" designation="Bruce" status="learner" institution="Open University" Country="United Kindom" Gender="male" Age="42"/> <mcesid:actor id="Al3" designation="Tony" status="learner" institution="Open University" Country="United Kindom" Gender="male" Age="54"/> <mcesid:actor id="Al4" designation="Valerie" status="learner" institution="Open University" Country="United Kindom" Gender="female" Age="54"/> … </mcesid:actors></mcesid:memberlist>…
• Ext JS is a cross-browser JavaScript library for building rich internet applications. It includes:• High performance, customizable UI widgets• Well designed and extensible Component model• An intuitive, easy to use API
What is MULCE project ?
The interface.
11
II. Technologic choices.
B. JavaScript framework for web applications: ExtJS
Examples of tools available in the framework : grids, trees, forms, toolbar, custom search field, combobox, and many more items.
c. XML to ExtJS
• JSON : JavaScript Object Notation
- Portability - Simplicity- Easy integration to javaScript- lighter treatments that with XML file
What is MULCE project ?
The interface.
12
II. Technologic choices.
c. XML to ExtJS
What is MULCE project ?
The interface.
13
II. Technologic choices.
For example, a menu structure description using JSON notation :
In comparison, the same example in XML format :
c. XML to ExtJS
Corpus.xml Page.phpFrameworkJavaScript
ExtJs
Browse
XML
Send
Json Object
Transform into Json
What is MULCE project ?
The interface.
14
II. Technologic choices.
III. The interface
Hierarchical view of tool spaces
List of acts
Complete visualization of the select act
What is MULCE project ?
The interface.
Layout of the interface.
16
a. Layout of the interface.
What is MULCE project ?
The interface.
Its implementation.
17
III. The interface b. Its implementation.
What is MULCE project ?
The interface.
Its implementation.
18
b. Its implementation.
III. The interface
What is MULCE project ?
The interface.
Its implementation.
19
III. The interface
b. Its implementation.