grafixml, a multi-target user interface builder based on usixml
TRANSCRIPT
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
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
Tree of your projects
Open a projectOpen a projectStart a new 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 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
5 ICAS’2008 – Gosier, March 16-21, 2008
4 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 windowDesign window
Components toolbar
Components toolbar
Components options
11 ICAS’2008 – Gosier, March 16-21, 2008
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
12 ICAS’2008 – Gosier, March 16-21, 2008
Design Tab
Multiple selectionMultiple selection
Alignment of components
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
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
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
17 ICAS’2008 – Gosier, March 16-21, 2008
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
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 themDouble-click on
a plugin
And look at the plugin
informations
21 ICAS’2008 – Gosier, March 16-21, 2008
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!