This document discusses user interface markup languages which can be used to describe graphical user interfaces in a declarative way. It provides examples of XUL and WasabiXML, and discusses how markup languages allow user interfaces and tasks to be rendered flexibly across different technologies.

1. T-121.5300 User Interface Design
Lecture #10. Markup Languages for User Interface Design
Marko Nieminen
Professor, Usability and User Interfaces
Software Business and Engineering Laboratory SoberIT
Department of Computer Science and Engineering
http://www.soberit.hut.fi/mhtn
http://www.soberit.hut.fi/T-121/

2. Custom Protocol Handler User Interface re
Sample Code tu
l ec
he
e tthe URL. } URLIDL;
// ********************** IDL structure **********************
#include <pshpack1.h> typedef struct { WORD cbSize; WORD cchUrl; //
id
ts public IPersistFolder,
Store the length of the URL. WCHAR pwszUrl[1]; // Store
#include <poppack.h> class ATL_NO_VTABLE CSampleShellFolder : public
CComTearOffObjectBase<CSampleSearchProtocol>,
ou
se
public IShellFolder { public: DECLARE_PROTECT_FINAL_CONSTRUCT()
BEGIN_COM_MAP(CSampleShellFolder)
COM_INTERFACE_ENTRY(IPersistFolder) n
se
COM_INTERFACE_ENTRY(IShellFolder) END_COM_MAP()
o
CSampleShellFolder(); virtual ~CSampleShellFolder(); HRESULT
FinalConstruct() {return S_OK;}; n void FinalRelease() {}; // IPersist
es
STDMETHOD(GetClassID)(CLSID* pCLSID); // IPersistFolder
akITEMIDLIST** ppidl, ULONG* pdwAttributes);
STDMETHOD(Initialize)(const ITEMIDLIST* pidl); // IShellFolder
STDMETHOD(ParseDisplayName) (HWND hwnd, IBindCtx* pbc, OLECHAR*
em
pszName, ULONG* pchEaten,
STDMETHOD(EnumObjects) (HWND hwnd, DWORD grfFlags, IEnumIDList**
lid riid, void** ppvObj); STDMETHOD(BindToStorage)
ppenmIDList); STDMETHOD(BindToObject) (const ITEMIDLIST* pidl,
ss
IBindCtx* pbc, REFIID
...
T hi
Marko Nieminen

3. GUI Implementation re
begin
tu
program Generic; if HPrevInst = 0 then
begin l ec
{$R TESTWIN}
he
WindowClass.hInstance := HInstance;
et
WindowClass.hIcon := LoadIcon(0, idi_Application
procedure WinMain;
var id
WindowClass.hCursor := LoadCursor(0, idc_Arrow
ts
WindowClass.hbrBackground :=
Window: HWnd;
ou
GetStockObject(white_Brush);
if not RegisterClass(WindowClass) then Halt(255);
se
Message: TMsg;
const end;
WindowClass: TWndClass = ( en
Window := CreateWindow( AppName,
s
’Window Title', ws_OverlappedWindow,
no
style: 0;
lpfnWndProc: @WindowProc; cw_UseDefault, cw_UseDefault,
s
cw_UseDefault, cw_UseDefault,
ke
cbClsExtra: 0;
cbWndExtra: 0; 0, 0, HInstance, nil);
hInstance: 0; a ShowWindow(Window, CmdShow);
hIcon: 0;
em UpdateWindow(Window);
lid
hCursor: 0; while GetMessage(Message, 0, 0, 0) do
ss
hbrBackground: 0; begin
TranslateMessage(Message);
hi
lpszMenuName: AppName;
lpszClassName: AppName); DispatchMessage(Message);
T end;
Halt(Message.wParam); Marko Nieminen
end;

4. Resources, Compiling and Linking re
tu
ec
Resource: (1) An element such as a string, icon, bitmap, cursor, dialog, accelerator, or menu that is included in
a Microsoft Windows resource (.RC) file. (2) Any item that needs to be translated l
he
et
ts id
ou
se
s en
s no
a ke
em
lid
ss Visual C++ 2's integrated development environment.
hi
Tools shipped with the Windows
Software Development Kit.
T
http://msdn.microsoft.com/en-us/library/cc194803.aspx Marko Nieminen

5. <part class=quot;DialogMessagequot;
name=quot;HelloWorldquot;/>

6. User Interface Markup Language
An attempt to reduce the work needed to develop user
interfaces
Also the desire to prevent the quot;re-invention of the wheelquot;
in the design
A user interface markup language is a markup language
that renders and describes graphical user interfaces
and controls.
Usually dialects of XML
Dependent upon a pre-existing scripting language engine
Solidifies re-used program or script code in the form of
markup

7. User Interface Markup Language
Describe the user interface in declarative terms
Abstracting: no exact specification on how the user
interface looks
Instead: what elements are shown and how they
behave
Example:
<part class=quot;DialogMessagequot; name=quot;HelloWorldquot;/>
(describes a message window)
Marko Nieminen

8. User Interface Markup Languages
UIML: earliest pioneer, open standard
XUL: primary interface language of Mozilla Foundation products, the Gecko
engine renders XHTML and SVG, too
XAL: eXtensible Application Language, Nexaweb's Enterprise Web 2.0 Suite,
define applications that will run as a Java Client or an Ajax Client
SVG: markup language for graphics proposed by the W3C
XAML: an application markup language, the program logic and styles are also
embedded
I3ML: proprietary thin client Application Delivery mechanism, CoKinetic
Systems Corp
OpenLaszlo (LZX): runtime environment & interface definition language,
declarative user interface language which defines the widgets, application
layout and scripting elements (using JavaScript) to create your application
HMVCUL: Hierarchical Model View Controller User Interface Language
(HMVCUL): supports the creation and chaining of atomic MVC triad
components used in constructing HMVC GUI applications
WasabiXML: used to define the graphical interface in Wasabi powered
applications; Developed by Nullsoft for Winamp
MXML for Macromedia Flash,
GTK+ in the GNOME environment
VTML for Macromedia HomeSite
Marko Nieminen

9. XUL Example: ”Find Files” Window
<?xml version=quot;1.0quot;?>
<?xml-stylesheet href=quot;chrome://global/skin/quot; type=quot;text/cssquot;?>
<window
id=quot;findfile-windowquot;
title=quot;Find Filesquot;
orient=quot;horizontalquot;
xmlns=quot;http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xulquot;>
<label value=quot;Search for:quot; control=quot;find-textquot;/>
<textbox id=quot;find-textquot;/>
<button id=quot;find-buttonquot; label=quot;Findquot;/>
<button id=quot;cancel-buttonquot; label=quot;Cancelquot;/>
<button id=quot;find-buttonquot; label=quot;Findquot;/>
</window>
http://www.xulplanet.com/tutorials/xultu/window.html
Marko Nieminen

10. WinAMP Skin / WasabiXML Example
http://dev.aol.com/article/2007/winamp_skins
Marko Nieminen

11. Beyond GUI Rendering – Towards ”Task Rendering”
Not just technology / GUI that changes
The tasks that users perform, change as well
Flexibility for
Graphical presentation of the UI
Task sequences
RDIXML
(Reusable Device independent Interaction XML
Martikainen 2002:
http://www.soberit.hut.fi/T-
121/shared/thesis/Antti_Martikainen-gradu.pdf
Marko Nieminen

12. Device-Task Dependency / Problem
In multi-channel environments, a single task model
is not sufficient
Device and context set their own constraints
These must be noticed in order to provide the user a
usable sequence of actions
A single general model may require adjusting; some
types of devices require a task model of their own.
An inflexible task modelling mechanism in
multichannel environments results in bad usability,
at least for some user groups of particular devices.
Martikainen 2002
Marko Nieminen

13. Task Flow / Web Browser
Martikainen 2002
Marko Nieminen

14. Task Flow / Mobile Device
Martikainen 2002
Marko Nieminen