Grafi XML A MultiTarget User Interface Builder based

Grafi. XML, A Multi-Target User Interface Builder based on Usi. XML 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) http: //www. isys. ucl. ac. be/bchi 1

Introduction and features Grafi. XML is a software used to design graphical user interface (GUI) and save them in Usi. XML format language. Features • Export GUI in – Java source (using Swing) – Xhtml 1. 0 Strict – XUL • Works on Windows, Linux and Mac. Os X • Available in English, French and Spanish • Based on plugins – – Export Import Composition Project • Allows creation of complex Context. Model 2

Main Window Tree of your projects Start a new project 3 Open a project

Project wizard • Allow the user to create a new project Choose the project type Start from an empty document or from a template Choose the language you want translate your GUI into 4

4 Layouts • Usi. XML have 4 layouts and Grafi. XML support them – – 5 Flow. Box Grid. Bag. Box Border. Box

Flow. Box add components one behind others. You can align your components at left, middle and right 6

Grid. Box contains rows and cols. You have to put your components on those cells. 7

Grid. Bag. Box allows you to place your components where you want. The placement is save using a Constraint system. 8

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) 9

Design Tab Components options Components toolbar 10 Design window

Design Tab Toolbar Buttons, togglebuttons, checkboxes and radiobuttons Text components Labels and medias Trees, tables, sliders, comboboxes, … Pickers (file, font, . . . ) Windows 11

Design Tab Multiple selection Alignment of components 12

Language Grafi. XML allows the user to create multi-language GUI Support for mnemonics and shortcuts 13

Language For text areas, you can add some rich formatted text 14

Preview At any time, you can preview the ui in the language you want 15

XML Editor Grafi. XML contains a XML editor which shows the Usi. XML specification of your work • You can edit yourself some part of the XML A click on the tree highlights the corresponding Usi. XMLEdit the Usi. XML Show attributes 16

Context. Model Editor You can create a context. Model using Drag&Drop And change the parameters of this object Select an object 17

Plugins Grafi. XML works with plugins – Install / remove using the plugins manager – Update if needed using one click And look at the plugin informations Double-click on a plugin Click on « add » to open the downloader 18 Choose the plugins you And install them want install

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

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

Thank you very much for your attention http: //www. usixml. org User Interface e. Xtensible Markup Language http: //www. similar. cc European network on Multimodal UIs For more information and downloading, http: //www. isys. ucl. ac. be/bchi Special thanks to all members of the team! 21 ICAS’ 2008 – Gosier, March 16 -21, 2008