T-121.5300 User Interface Design

Lecture #10. Markup Languages for User Interface Design




                         Mar...
Custom Protocol Handler User Interface                                re
Sample Code                                      ...
GUI Implementation                                                      re
                              begin
           ...
Resources, Compiling and Linking                                                                               re
        ...
<part class=quot;DialogMessagequot;
   name=quot;HelloWorldquot;/>
User Interface Markup Language

 An attempt to reduce the work needed to develop user
 interfaces
 Also the desire to prev...
User Interface Markup Language

 Describe the user interface in declarative terms
 Abstracting: no exact specification on ...
User Interface Markup Languages
 UIML: earliest pioneer, open standard
 XUL: primary interface language of Mozilla Foundat...
XUL Example: ”Find Files” Window
 <?xml version=quot;1.0quot;?>
 <?xml-stylesheet href=quot;chrome://global/skin/quot; typ...
WinAMP Skin / WasabiXML Example




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




                                    ...
Beyond GUI Rendering – Towards ”Task Rendering”


 Not just technology / GUI that changes
 The tasks that users perform, c...
Device-Task Dependency / Problem

   In multi-channel environments, a single task model
   is not sufficient
   Device and...
Task Flow / Web Browser




Martikainen 2002
                          Marko Nieminen
Task Flow / Mobile Device




Martikainen 2002
                            Marko Nieminen
Upcoming SlideShare
Loading in …5
×

T-121-5300 (2008) User Interface Design 10 - UIML

2,650 views

Published on

Published in: Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,650
On SlideShare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
56
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

T-121-5300 (2008) User Interface Design 10 - UIML

  1. 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. 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. 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. 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. 5. <part class=quot;DialogMessagequot; name=quot;HelloWorldquot;/>
  6. 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. 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. 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. 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. 10. WinAMP Skin / WasabiXML Example http://dev.aol.com/article/2007/winamp_skins Marko Nieminen
  11. 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. 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. 13. Task Flow / Web Browser Martikainen 2002 Marko Nieminen
  14. 14. Task Flow / Mobile Device Martikainen 2002 Marko Nieminen

×