T-121-5300 (2008) User Interface Design 10 - UIML
Upcoming SlideShare
Loading in...5

Like this? Share it with your network


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






Total Views
Views on SlideShare
Embed Views



2 Embeds 2

http://www.slideshare.net 1
https://www.linkedin.com 1



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

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

  • 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