Authors: RIEFOLO Anthony FANCHETTE Edouard

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

2. Summary • Whatis MULCE project ? • Briefpresentation. • XML corpus. • Goal of the project. • Technologicchoices. • Browse the XML. • JavaScript framework for web applications: ExtJS. • XML to ExtJS. • The interface. • Layout of the interface. • Itsimplementation.

3. Whatis MULCE project ?

4. Whatis MULCE project ? • Briefpresentation. • 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.

5. Whatis MULCE project ? • XML corpus. • XML : Extensible Mark-up Language. • Allow to structure information in treelikefields. • Structure validated by a schema.

6. Whatis MULCE project ? • XML corpus. Example XML shema of a forum act :

7. Whatis MULCE project ? • Goal of the project. • Build a visualization tool of different objects con- tained in a corpora. • Consultation of corpus with user-friendly interface

8. Technologicchoices.

9. Technologicchoices. • Browse the XML. • To gather information for traitement. • It is possible thanks to PHPusingXPATH.

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

11. Technologicchoices. • JavaScript framework for web applications: ExtJS • 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 • Examples of tools available in the framework : • grids, trees, forms, toolbar, custom search field, • combobox, and many more items.

12. Technologicchoices. • JSON : JavaScript Object Notation • - Portability • - Simplicity • - Easy integration to javaScript • - lighter treatments that with XML file • XML to ExtJS

13. Technologicchoices. For example, a menu structure description using JSON notation : • XML to ExtJS In comparison, the same example in XML format :

14. Technologicchoices. • XML to ExtJS Framework JavaScript ExtJs Corpus.xml Page.php Send Browse XML Json Object Transform into Json

15. The interface

16. The interface • Layout of the interface. List of acts Hierarchical view of tool spaces Complete visualization of the select act

17. The interface • Itsimplementation.

18. The interface • Itsimplementation.

19. The interface • Itsimplementation.

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