1 ICAS’2008 – Gosier, March 16-21, 2008 GrafiXML, A Multi-Target User Interface Builder based on UsiXML Benjamin Michotte, Jean Vanderdonckt Université catholique de Louvain (UCL) Louvain School of Management (LSM) Information Systems Unit (ISYS) Belgian Laboratory of Computer-Human Interaction (BCHI)

2 ICAS’2008 – Gosier, March 16-21, 2008 Introduction and features GrafiXML is a software used to design graphical user interface (GUI) and save them in UsiXML format language. Features Export GUI in –Java source (using Swing) –Xhtml 1.0 Strict –XUL Works on Windows, Linux and MacOs X Available in English, French and Spanish Based on plugins –Export –Import –Composition –Project Allows creation of complex ContextModel

3 ICAS’2008 – Gosier, March 16-21, 2008 Main Window Tree of your projects Open a project Start a new project

4 ICAS’2008 – Gosier, March 16-21, 2008 Project wizard Allow the user to create a new project Choose the language you want translate your GUI into Choose the project type Start from an empty document or from a template

5 ICAS’2008 – Gosier, March 16-21, Layouts UsiXML have 4 layouts and GrafiXML support them –FlowBox –GridBox –GridBagBox –BorderBox

6 ICAS’2008 – Gosier, March 16-21, 2008 FlowBox FlowBox add components one behind others. You can align your components at left, middle and right

7 ICAS’2008 – Gosier, March 16-21, 2008 GridBox GridBox contains rows and cols. You have to put your components on those cells.

8 ICAS’2008 – Gosier, March 16-21, 2008 GridBagBox GridBagBox allows you to place your components where you want. The placement is save using a Constraint system.

9 ICAS’2008 – Gosier, March 16-21, 2008 Design Tab In this area, the user can create its GUI. Drag & Drop from the toolbar Resize components Move one or several components at a time –Align tool to place components Delete one or several components Cut, copy & paste (work in progress)

10 ICAS’2008 – Gosier, March 16-21, 2008 Design Tab Design window Components toolbar Components options

11 ICAS’2008 – Gosier, March 16-21, 2008 Design Tab Toolbar Buttons, togglebuttons, checkboxes and radiobuttons Text components Labels and medias Trees, tables, sliders, comboboxes, … Pickers (file, font,...) Windows

12 ICAS’2008 – Gosier, March 16-21, 2008 Design Tab Multiple selection Alignment of components

13 ICAS’2008 – Gosier, March 16-21, 2008 Language GrafiXML allows the user to create multi-language GUI Support for mnemonics and shortcuts

14 ICAS’2008 – Gosier, March 16-21, 2008 Language For text areas, you can add some rich formatted text

15 ICAS’2008 – Gosier, March 16-21, 2008 Preview At any time, you can preview the ui in the language you want

16 ICAS’2008 – Gosier, March 16-21, 2008 XML Editor GrafiXML contains a XML editor which shows the UsiXML specification of your work You can edit yourself some part of the XML Edit the UsiXML Show attributes A click on the tree highlights the corresponding UsiXML

17 ICAS’2008 – Gosier, March 16-21, 2008 ContextModel Editor You can create a contextModel using Drag&Drop Select an object And change the parameters of this object

18 ICAS’2008 – Gosier, March 16-21, 2008 Plugins GrafiXML works with plugins –Install / remove using the plugins manager –Update if needed using one click Click on « add » to open the downloader Choose the plugins you want install And install them Double-click on a plugin And look at the plugin informations

19 ICAS’2008 – Gosier, March 16-21, 2008 Software architecture

20 ICAS’2008 – Gosier, March 16-21, 2008 Example

21 ICAS’2008 – Gosier, March 16-21, 2008 Thank you very much for your attention For more information and downloading, User Interface eXtensible Markup Language European network on Multimodal UIs Special thanks to all members of the team!