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) http://www.isys.ucl.ac.be/bchi

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

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

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

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

Allow the user to create a new project

4 Layouts UsiXML have 4 layouts and GrafiXML support them FlowBox GridBox GridBagBox BorderBox

UsiXML have 4 layouts and GrafiXML support them

FlowBox

GridBox

GridBagBox

BorderBox

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

FlowBox add components one behind others.

You can align your components at left, middle and right

GridBox GridBox contains rows and cols. You have to put your components on those cells.

GridBox contains rows and cols.

You have to put your components on those cells.

GridBagBox GridBagBox allows you to place your components where you want. The placement is save using a Constraint system.

GridBagBox allows you to place your components where you want.

The placement is save using a Constraint system.

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)

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)

Design Tab Design window Components toolbar Components options

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

Toolbar

Design Tab Multiple selection Alignment of components

Language GrafiXML allows the user to create multi-language GUI Support for mnemonics and shortcuts

GrafiXML allows the user to create multi-language GUI

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

For text areas, you can add some rich formatted text

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

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

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

GrafiXML contains a XML editor which shows the UsiXML specification of your work

You can edit yourself some part of the XML

ContextModel Editor You can create a contextModel using Drag&Drop Select an object And change the parameters of this object

You can create a contextModel using Drag&Drop

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

GrafiXML works with plugins

Install / remove using the plugins manager

Update if needed using one click

Software architecture

Example

Thank you very much for your attention For more information and downloading, http://www.isys.ucl.ac.be/bchi http://www.usixml.org User Interface eXtensible Markup Language http://www.similar.cc European network on Multimodal UIs Special thanks to all members of the team!