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.

3

I. What is MULCE project ?

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.

8

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.

15

III. The interface

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.

20

Conclusion

• Discovery of Xpath and framework ExtJS

• Some problems appears.

• Meeting every weeks.