GrafiXML, A Multi-Target User Interface Builder based on UsiXML

1 ICAS’2008 – Gosier, March 16-21, 2008

GrafiXML, A Multi-Target User Interface Builderbased 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


Main Window

Tree of your projects

Tree of your projects

Open a projectOpen a projectStart a new 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 language you want translate your GUI into

Choose the project type

Choose the project type

Start from an empty document or from a template

Start from an empty document or from a template


4 Layouts

• 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


GridBox

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.


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)


Design Tab

Design windowDesign window

Components toolbar

Components toolbar

Components options


Design Tab

Toolbar

Buttons, togglebuttons,

checkboxes and radiobuttons

Buttons, togglebuttons,

checkboxes and radiobuttons

Text componentsText components

Labels and mediasLabels and medias

Trees, tables, sliders,

comboboxes, …

Trees, tables, sliders,

comboboxes, …

Pickers (file, font, ...)

Pickers (file, font, ...)WindowsWindows


Design Tab

Multiple selectionMultiple selection

Alignment of components

Alignment of components


Language

GrafiXML allows the user to create multi-language GUI

Support for mnemonics and

shortcuts

Support for mnemonics and

shortcuts


Language

For text areas, you can add some rich formatted text


Preview

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

Edit the UsiXML

Show attributes

Show attributes

A click on the tree highlights the

corresponding UsiXML

A click on the tree highlights the

corresponding UsiXML


ContextModel Editor

You can create a contextModel using Drag&Drop

Select an objectSelect an object

And change the parameters of this

object

And change the parameters of this

object


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 themDouble-click on

a plugin

And look at the plugin

informations


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.orgUser Interface eXtensible Markup Language

http://www.similar.ccEuropean network on Multimodal UIs

Special thanks to all members of the team!

http://www.isys.ucl.ac.be/bchi

http://www.usixml.org/

http://www.similar.cc/

GrafiXML, A Multi-Target User Interface Builder based on UsiXML

Business

Transcript of GrafiXML, A Multi-Target User Interface Builder based on UsiXML