1. Authors: RIEFOLO Anthony FANCHETTE Edouard Tutors : BETBEDER Marie-Laure REFFAY Christophe MULCE project Interface to display XML objects 1

2. Summary I.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. 2

3. I.What is MULCE project ? 3

4. 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. Technologic choices. The interface. 4 I.What is MULCE project ?

5. b.XML corpus. What is MULCE project ? XML corpus Technologic choices. 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.

6. b.XML corpus. Example XML shema of a forum act : What is MULCE project ? XML corpus and goal of the project. Technologic choices. The interface. 6 I.What is MULCE project ?

7. 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. Technologic choices. The interface. 7 I.What is MULCE project ?

8. II.Technologic choices. 8

9. a.Browse the XML. To gather information for traitement. It is possible thanks to PHP using XPATH. What is MULCE project ? Technologic choices. Browse the XML. The interface. 9

10. a.Browse the XML. Example of XPATH query: Gather the name of an actor giving his “id” What is MULCE project ? Technologic choices. Browse the XML. 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 ”); } $xml = new Domxpath($dom); $elements = $xml->query(‘//mcesid:memberlist/mcesid:actors/mcesid:actor[@id="'.$actor_id.'"]'); foreach($elements as $noeud) { return $noeud->getAttribute(“ designation ”); } … … … … …

11. 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 ? Technologic choices. JavaScript framework for web applications: ExtJS 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.

12. c.XML to ExtJS JSON : JavaScript Object Notation - Portability - Simplicity - Easy integration to javaScript - lighter treatments that with XML file What is MULCE project ? Technologic choices. XML to ExtJS The interface. 12 II.Technologic choices.

13. c.XML to ExtJS What is MULCE project ? Technologic choices. XML to ExtJS The interface. 13 II.Technologic choices. For example, a menu structure description using JSON notation : In comparison, the same example in XML format :

14. c.XML to ExtJS Corpus.xmlPage.php Framework JavaScript ExtJs Browse XML Send Json Object Transform into Json What is MULCE project ? Technologic choices. XML to ExtJS The interface. 14 II.Technologic choices.

15. III.The interface 15

16. III.The interface Hierarchical view of tool spaces List of acts Complete visualization of the select act What is MULCE project ? Technologic choices. The interface. Layout of the interface. 16 a.Layout of the interface.

17. What is MULCE project ? Technologic choices. The interface. Its implementation. 17 III.The interface b.Its implementation.

18. What is MULCE project ? Technologic choices. The interface. Its implementation. 18 b.Its implementation. III.The interface

19. What is MULCE project ? Technologic choices. The interface. Its implementation. 19 III.The interface b.Its implementation.

20. 20 Conclusion Discovery of Xpath and framework ExtJS Some problems appears. Meeting every weeks.