T 121 5300 (2008) User Interface Design 3   Uide
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

T 121 5300 (2008) User Interface Design 3 Uide

  • 4,320 views
Uploaded on

Lecture about user interface development environments at course T-121.5300 User Interface Design at TKK

Lecture about user interface development environments at course T-121.5300 User Interface Design at TKK

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
4,320
On Slideshare
4,304
From Embeds
16
Number of Embeds
4

Actions

Shares
Downloads
90
Comments
0
Likes
0

Embeds 16

http://www.slideshare.net 12
https://www.linkedin.com 2
http://www.e-presentations.us 1
http://www.linkedin.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. T-121.5300 User Interface Design Lecture 3. User Interface Development Environments (UIDE) Marko Nieminen Helsinki University of Technology Usability and User Interfaces Marko.Nieminen@tkk.fi
  • 2. Luennon sisältö Käyttöliittymän käsite ja abstrahointi, käyttöliittymäsuunnittelun kohde Taustoja graafisen käyttöliittymäympäristön kehitysvälineistä Kehitysvälineiden yleisiä piirteitä Käyttöliittymän toteuttaminen erilaisilla välineillä Tcl/tk “RAD” Visuaalinen ohjelmointi Marko Nieminen
  • 3. Käyttöliittymä informaatio- virta syötteet (input) Käyttäjä Järjestelmän toiminnallisuus tulosteet (output) Inhimillinen käyttäjä liittymä/rajapinta Tietokone/sovellus -osajärjestelmä (interface) -osajärjestelmä ”käyttäjäliityntä” Marko Nieminen
  • 4. Vuorovaikutustilanne Toiminnan seitsemän vaihetta; “tiedonsiirtoprotokolla” 1 Tavoitteet 2 Aikomus 7 Tulkintojen toimia arvioiminen 3 Toimenpideketju 6 Havaintojen tulkitseminen 4 Toimenpideketjun täytäntöönpano 5 Ulkomaailman tilan havainnoiminen VÄLINE / ULKOMAAILMA Norman 1986 Marko Nieminen
  • 5. Käyttöliittymäkehitysympäristöt Käyttöliittymäkehitysympäristöjen tarve tunnistettiin 1980-luvun alussa Seeheim-arkkitehtuurimalli (1984) tarjosi yleisesti hyväksytyt puitteet käyttöliittymäkehitysympäristöjen toteuttamiselle, Smalltalk-80:ssä MVC 1990-luvun alussa kehitysympäristöjä alkoi tulla markkinoille tutkimuspuolella mm. Garnet (Myers 1992), josta on sittemmin kehittynyt Amulet Brad Myers: http://www.cs.cmu.edu/~bam/ Marko Nieminen
  • 6. MVC: Model-View-Controller http://heim.ifi.uio.no/~trygver/themes/mvc/mvc-index.html (Tryngve Reenskaug) Marko Nieminen
  • 7. Taustaa Käyttöliittymän toteuttaminen graafisiin käyttöliittymiin vaati aiemmin paljon työtä esim: Hello, World! -- Toteutus kompleksista graafiseen käyttöliittymäympäristöön; hallittava monenlaiset matalan tason asiat: ikkunointi, viestinvälitys, resurssit jne. Taitavat ohjelmoijat tuottavat käyttöliittymät yleiskäyttöisillä ohjelmointikielillä, esim C/C++; tämä suuntaus on kuitenkin vähenemässä erityisten käyttöliittymäkehitysympäristöjen kehittyessä Marko Nieminen
  • 8. Esimerkki begin program Generic; if HPrevInst = 0 then begin {$R TESTWIN} WindowClass.hInstance := HInstance; WindowClass.hIcon := LoadIcon(0, idi_Applicatio procedure WinMain; WindowClass.hCursor := LoadCursor(0, idc_Arrow var WindowClass.hbrBackground := Window: HWnd; GetStockObject(white_Brush); Message: TMsg; if not RegisterClass(WindowClass) then Halt(25 const end; WindowClass: TWndClass = ( Window := CreateWindow( AppName, style: 0; ’Window Title', ws_OverlappedWindow, lpfnWndProc: @WindowProc; cw_UseDefault, cw_UseDefault, cbClsExtra: 0; cw_UseDefault, cw_UseDefault, cbWndExtra: 0; 0, 0, HInstance, nil); hInstance: 0; ShowWindow(Window, CmdShow); hIcon: 0; UpdateWindow(Window); hCursor: 0; while GetMessage(Message, 0, 0, 0) do hbrBackground: 0; begin lpszMenuName: AppName; TranslateMessage(Message); lpszClassName: AppName); DispatchMessage(Message); end; Halt(Message.wParam); Marko Nieminen end;
  • 9. Resources, Compiling and Linking 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 Visual C++ 2's integrated development environment. Tools shipped with the Windows Software Development Kit. http://msdn.microsoft.com/en-us/library/cc194803.aspx Marko Nieminen
  • 10. Process for Localizing the User Interface 1. Put all native-language localizable elements in one or more resource files. 2. Link the resources to the program executable or put them in a DLL. 3. Translate text elements and resize dialog boxes using localization tools. 4. Test the localized program and change the localized files if necessary. Retest. 5. Add, delete, or change all localizable elements in the native- language resources. 6. Merge the changes into localized resources. 7. Repeat steps 2 6 until the program is ready to ship. 8. Optional: Add support for multiple-language resources or create extensible language support for the user interface by using DLLs. Marko Nieminen
  • 11. Käyttöliittymän rakentaminen: liikkeelle protoilusta Yksinkertaisimmillaan staattisia kuvia erilaisista vuorovaikutustilanteista: “diaesitys”, joka mahdollistaa todentuntuisen käyttötilanteen läpikäynnin, ei kuitenkaan todellista vuorovaikutusta Hieman kehittyneempi ratkaisu mahdollistaa oikeiden käyttöliittymäelementtien sijoittelun näytölle ja etenemisen tilanteesta toiseen käyttäjän toiminnan mukaan Monimutkaisempaa toiminnallisuutta prototyyppeihin saadaan liittämällä käyttöliittymään toiminnallista koodia; jotkut välineet mahdollistavat myös visuaalisen ohjelmoinnin Marko Nieminen
  • 12. Kehitysvälineiden toiminnallisia piirteitä Käyttöliittymä erillään toiminnallisuudesta Mahdollisuus useiden käyttöliittymien toteuttamiseen Mahdollisuus alustariippumattomuuteen Käyttöliittymäarkkitehdin (työ)tehtävä mahdollinen (ei tiukkaa sidosta toiminnallisuuden koodaamiseen) Menetelmät ja kuvaustavat hahmottelu toimii myös määrittelytyönä; voivat toimia jopa osana sopimuksia vaatimusmäärittelyjen osalta helpottaa suunnitteluratkaisuista keskustelua Nopea prototyyppien hahmottelu ratkaisuja voidaan kokeilla jo alkuvaiheessa testataan-muokataan, testataan-muokataan, testataan-muokataan Ohjelmisto- ja prosessituki tuottavuus paranee, ylläpito helpottuu, tarkastukset helpompia jne. Marko Nieminen
  • 13. Kehitysvälineiden teknisiä piirteitä Tärkeää nopea luonnostelu Visuaalinen käyttöliittymän suunnittelu suunnittelija näkee nopeasti hahmottelemansa käyttöliittymän ulkoasun, vrt. mallinnus välineen avulla usein tarjolla helpohko skriptikieli tai yleiskäyttöisempi ohjelmointikieli tapahtuma- tai oliopohjainen joissakin välineissä myös visuaalinen ohjelmointi Marko Nieminen
  • 14. Käyttöliittymäkehittimiä Shneidermanin jako Software engineering tools: C/C++ w/toolkits/libraries Design tools: MacroMind Director, HyperCard, LabView, Visual Basic, Delphi, JBuilder (Flash, Silverlight) Eri toimittajat esittelevät kehitysympäristönsä eri nimikkeillä: Rapid Prototyper User Interface Builder UIMS - User Interface Management System UIDE - User Interface Development Environment RAD - Rapid Application Developer Marko Nieminen
  • 15. Kehittimet tarjoavat komponenttikirjaston (esim Amulet: “widgets, dialogs, command objects”; tässä “widgets”) Am_Border_Rectangle: a rectangle with a Am_Vertical_Scroll_Bar: scroll bar for raised (or lowered) edge, but no interaction. choosing a value from a range of values. Am_Button: a single button Am_Horizontal_Scroll_Bar: scroll bar for Am_Button_Panel: a panel consisting of choosing a value from a range of values. multiple buttons with the labels inside the Am_Vertical_Up_Down_Counter: Two buttons. arrows (like the top and bottom of a scroll bar) Am_Checkbox_Panel: a panel of toggle for incrementing and decrementing a number. checkboxes with the labels next to the Am_Scrolling_Group: an Amulet group with checkboxes. (optional) vertical and horizontal scrollbars Am_Radio_Button_Panel: a panel of mutually Am_Text_Input_Widget: a field to accept exclusively selectable radio buttons with the text input, like for a filename. labels next to the radio buttons. Am_Number_Input_Widget: Text input Am_Menu: a menu panel widget that is limited to integer or floating point Am_Menu_Bar: a menu bar used to select numbers. from several different menu panels Am_Password_Input_Widget: Text input Am_Option_Button: a button showing the widget that shows ``*''s instead of the current choice that pops up a menu of choices. characters that are typed. Am_Pop_Up_Menu_Interactor: An interactor Am_Selection_Widget: which supplies the that pops up a menu. Often used with start- conventional square selection handles around when as the right-button to get Windows95 one or more graphical objects and allows them style behaviors. to be moved and grown. Marko Nieminen
  • 16. Esimerkki (Amulet): Painikkeen luonti An instance of Am_Button Am_Object my_button = Am_Button.Create(quot;My Buttonquot;) .Set (Am_LEFT, 10) // set the position of the button .Set (Am_TOP, 10) .Set (Am_COMMAND,quot;Push Mequot;); // a string in the Am_COMMAND slot // specifies the button's label Marko Nieminen
  • 17. Esimerkki (Amulet): Liitetään toiminto komponenttiin vscroll = Am_Vertical_Scroll_Bar.Create() .Set(Am_LEFT, 450) Normally, the command objects should be parts of the .Set(Am_TOP, 80) widgets, so that if an instance is made of the widget, an instance will also be made of the command object. However, ; the widgets will still work if the command is just Set into the Am_COMMAND slot: vscroll.Get(Am_COMMAND) .Set(Am_DO_METHOD, my_do) vscroll.Set_Part(Am_COMMAND, my_command); //command objects should be parts .Set(Am_UNDO_METHOD, my_undo) ; Marko Nieminen
  • 18. Amulet Slots; komponentin ominaisuudet (tässä vain yleisimmät yhteiset ominaisuudet) Am_TOP, Am_LEFT: As with all graphical Am_FILL_STYLE: The color of the widget. objects, these slots describe the location of Acceptable values are any Am_Style, and the widget, in coordinates relative to the the default is Am_Amulet_Purple. The only object's parent's location. Default values are part of the style used is the color of the 0 for both top and left. style. On a black and white screen, a default Am_VISIBLE: If this boolean is true, the set of stipples are used to make sure the object is visible; otherwise, it is not drawn widgets are visible. Unfortunately, you on the screen. Default is true. cannot set the style for the text labels Am_VALUE: The current value computed shown in widgets, but the system picks by the widget. This slot can also be set to either black or white text based on how change the widget's value. dark the Am_FILL_STYLE is. Am_WIDGET_LOOK: The value of this slot Am_ACTIVE_2: This slot turns off tells Amulet how you want your widgets to interaction with the widget without turning look when drawn on the screen. Possible it grey. This is mainly aimed at interactive values are Am_MOTIF_LOOK, tools like Interface Builders that want to Am_WINDOWS_LOOK, or allow users to select and move widgets Am_MACINTOSH_LOOK, or around. It might also be useful in a multi- Am_NATIVE_LOOK which is whatever is the user situation where users who do not have current machine. the ``floor'' should not have their widgets responding. For a widget to operate, both Am_ACTIVE_2 and Am_ACTIVE must be true. The default value is true. Marko Nieminen
  • 19. Amulet “Command Objects” Am_ACTIVE: This slot in the command is Am_DEFAULT: for buttons, shows whether used to determine whether the widget is this is the default selection by drawing an enabled or not (greyed out). Often, this slot extra thick border. Be sure to set the will contain a formula dependent on some Am_ACCELERATOR slot of this command to system state. The default value is true. ``RETURN''. (Actually, the widget itself also contains an Am_CHECKED_ITEM: for menus and Am_ACTIVE slot, but this one should not menubars, whether this item has a check normally be used. The widget-level slot mark next to it. contains a constraint that depends on the Am_IMPLEMENTATION_PARENT: If you Am_ACTIVE slot of the command object want the command to invoke another part of the widget.) command, you can set this slot in the Am_VALUE: This slot is set to the current widget's command to the other command value of the widget. Do not set this slot in object. For example, if the widget is the the command object to try to change the ``OK'' button of a dialog box, the widget's value (see the Am_VALUE of the Am_IMPLEMENTATION_PARENT of the OK widget instead). widget's command might be the command Am_DO_METHOD: The method to be object for the entire dialog box. Then called when the widget executes. This Amulet will correctly know how to handle procedure takes one parameter: the Undo, and it will call the parent command command object. automatically. All the various undo, redo and selective methods Marko Nieminen
  • 20. Tcl/Tk -- Tool Command Language Perusongelma: ohjelmointi on kuitenkin aika vaikeaa Ousterhaut (1994) kehitti Tcl:n yksinkertaiseksi skriptauskieleksi (http://home.pacbell.net/ouster/; http://tcl.activestate.com/) Tk on Tcl:n kanssa yhdessä toimiva komponenttikirjasto Tulkkaava ympäristö -- kirjoitetut käyttöliittymät (ja ohjelmat) toimivat kaikissa niissä ympäristöissä, joihin tulkkiympäristö on olemassa Aiemmin ei visuaalista kehitysympäristöä (“IDE”); käytössä WISH: “windowing shell”; nyt Visual TCL Marko Nieminen
  • 21. Tcl/Tk-käyttöliittymäesimerkki wm title . quot;Simple Tcl Examplequot; label .msg -wraplength 3i -justify left -relief sunken -text quot;Hello, Worldquot; pack .msg -side top menu .menu -tearoff 0 set m .menu.file menu $m -tearoff 0 Luodaan .menu add cascade -label quot;Filequot; käyttöliittymän -menu $m -underline 0 elementti, jonka command -label quot;Exitquot; -command quot;destroy .quot; $m add Elementin Ominaisuudet tyyppi on configure nimi “polkuineen” ja toimenpiteet . -menu .menu “label” frame .buttons pack .buttons -side bottom -fill x -pady 2m button .buttons.quit -text OK -command quot;destroy .quot; pack .buttons.quit -side left -expand 1 Marko Nieminen
  • 22. aboutBox -laajennus set m .menu.help menu $m -tearoff 0 .menu add cascade -label quot;Helpquot; -menu $m -underline 0 $m add command -label ”Aboutquot; -command quot;aboutBoxquot; -accelerator quot;<F1>quot; bind . <F1> aboutBox . configure -menu .menu ... proc aboutBox {} { tk_messageBox -icon info -type ok -title ”about...quot; -message ”Simple Tcl/Tk User Interfacequot; } Marko Nieminen
  • 23. RAD/IDE-välineet mahdollistavat visuaalisen layout-suunnittelun object MainMenu1: TMainMenu Left = 8 Top = 8 object File1: TMenuItem Caption = '&File' object Exit1: TMenuItem Caption = 'E&xit' end end end object Label1: TLabel Left = 56 Top = 8 object Button1: TButton Width = 61 Left = 48 Height = 13 Top = 32 Caption = 'Hello, World!' Width = 75 end Height = 25 Caption = 'OK' TabOrder = 0 Marko Nieminen end
  • 24. Marko Nieminen
  • 25. Esimerkki UIDE-kehitysympäristöstä (Borland Delphi) Marko Nieminen
  • 26. Marko Nieminen
  • 27. Eclipse Visual Editor / AUIML http://www.ibm.com/developerworks/library/os-ecvisual/ Marko Nieminen http://www.alphaworks.ibm.com/tech/auiml
  • 28. Carbide – Symbian / S60 IDE Carbide.c++ is a family of Eclipse-based development tools supporting Symbian OS development on the S60 platform, the Series 80 platform, UIQ, and MOAP; Based on the open Eclipse framework Carbide.vs is a plug-in that allows Visual Studio users to develop C++ code for Symbian OS platforms including the S60 platform and the Series 80 platform. This is a Visual Studio plug-in and therefore not built on Eclipse Carbide.ui is a family of graphical, WYSIWYG tools providing for the customization of the UI on S60 devices and Series 40 devices. The first product in this family is Carbide.ui Theme Edition Forum Nokia has withdrawn Carbide.j because of the increasing availability of suitable open-source and free tools for mobile Java developers Marko Nieminen http://www.forum.nokia.com/main/resources/tools_and_sdks/carbide/
  • 29. Visual Mobile Designer (VMD) NetBeans IDE provides a wizard that enables you to quickly create a MIDP project http://www.net beans.org/kb/5 5/quickstart- mobility.html Marko Nieminen
  • 30. Qt Designer Qt Designer is a cross-platform GUI layout and forms builder. It allows you to design and build widgets and dialogs using on-screen forms using the same widgets that will be used in your application. Marko Nieminen