T-121.5300 User Interface Design

Lecture #10. Markup Languages for User Interface Design

Marko Nieminen

Professor, Usability and User InterfacesSoftware Business and Engineering Laboratory SoberITDepartment of Computer Science and Engineering

http://www.soberit.hut.fi/mhtn http://www.soberit.hut.fi/T-121/

Marko Nieminen

Custom Protocol Handler User Interface Sample Code

� // ********************** IDL structure ********************** #include <pshpack1.h> typedef struct { WORD cbSize; WORD cchUrl; // Store the length of the URL. WCHAR pwszUrl[1]; // Store the URL. } URLIDL; #include <poppack.h> class ATL_NO_VTABLE CSampleShellFolder : public CComTearOffObjectBase<CSampleSearchProtocol>, public IPersistFolder, public IShellFolder { public: DECLARE_PROTECT_FINAL_CONSTRUCT() BEGIN_COM_MAP(CSampleShellFolder) COM_INTERFACE_ENTRY(IPersistFolder) COM_INTERFACE_ENTRY(IShellFolder) END_COM_MAP() CSampleShellFolder(); virtual ~CSampleShellFolder(); HRESULT FinalConstruct() {return S_OK;}; void FinalRelease() {}; // IPersistSTDMETHOD(GetClassID)(CLSID* pCLSID); // IPersistFolderSTDMETHOD(Initialize)(const ITEMIDLIST* pidl); // IShellFolderSTDMETHOD(ParseDisplayName) (HWND hwnd, IBindCtx* pbc, OLECHAR* pszName, ULONG* pchEaten, ITEMIDLIST** ppidl, ULONG* pdwAttributes); STDMETHOD(EnumObjects) (HWND hwnd, DWORD grfFlags, IEnumIDList** ppenmIDList); STDMETHOD(BindToObject) (const ITEMIDLIST* pidl, IBindCtx* pbc, REFIID riid, void** ppvObj); STDMETHOD(BindToStorage)

� ...

This

slid

e m

akes n

o sen

se o

utsid

e th

e le

cture

Marko Nieminen

GUI Implementation

program Generic;

{$R TESTWIN}

procedure WinMain;

var

Window: HWnd;

Message: TMsg;

const

WindowClass: TWndClass = (

style: 0;

lpfnWndProc: @WindowProc;

cbClsExtra: 0;

cbWndExtra: 0;

hInstance: 0;

hIcon: 0;

hCursor: 0;

hbrBackground: 0;

lpszMenuName: AppName;

lpszClassName: AppName);

begin

if HPrevInst = 0 then

begin

WindowClass.hInstance := HInstance;

WindowClass.hIcon := LoadIcon(0, idi_Application

WindowClass.hCursor := LoadCursor(0, idc_Arrow

WindowClass.hbrBackground :=

GetStockObject(white_Brush);

if not RegisterClass(WindowClass) then Halt(255);

end;

Window := CreateWindow( AppName,

’Window Title', ws_OverlappedWindow,

cw_UseDefault, cw_UseDefault,

cw_UseDefault, cw_UseDefault,

0, 0, HInstance, nil);

ShowWindow(Window, CmdShow);

UpdateWindow(Window);

while GetMessage(Message, 0, 0, 0) do

begin

TranslateMessage(Message);

DispatchMessage(Message);

end;

Halt(Message.wParam);

end;

This

slid

e m

akes n

o sen

se o

utsid

e th

e le

cture

Marko Nieminen

Resources, Compiling and Linking

Tools shipped with the Windows

Software Development Kit.

Visual C++ 2's integrated development environment.

http://msdn.microsoft.com/en-us/library/cc194803.aspx

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

This

slid

e m

akes n

o sen

se o

utsid

e th

e le

cture

<part class="DialogMessage" name="HelloWorld"/>

User Interface Markup Language

� An attempt to reduce the work needed to develop user interfaces

� Also the desire to prevent the "re-invention of the wheel" 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

Marko Nieminen

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="DialogMessage" name="HelloWorld"/>

(describes a message window)

Marko Nieminen

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 triadcomponents 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

XUL Example: ”Find Files” Window

<?xml version="1.0"?>

<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

<window

id="findfile-window"

title="Find Files"

orient="horizontal"

xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<label value="Search for:" control="find-text"/>

<textbox id="find-text"/>

<button id="find-button" label="Find"/>

<button id="cancel-button" label="Cancel"/>

<button id="find-button" label="Find"/>

</window>

http://www.xulplanet.com/tutorials/xultu/window.html

Marko Nieminen

WinAMP Skin / WasabiXML Example

� http://dev.aol.com/article/2007/winamp_skins

Marko Nieminen

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

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

Task Flow / Web Browser

Martikainen 2002

Marko Nieminen

Task Flow / Mobile Device

Martikainen 2002