t 121 5300 (2008) user interface design 3 uide
DESCRIPTION
Lecture about user interface development environments at course T-121.5300 User Interface Design at TKKTRANSCRIPT
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
Luennon sisältö
� Käyttöliittymän käsite ja abstrahointi, käyttöliittymäsuunnittelun kohde
� Taustoja graafisen käyttöliittymäympäristönkehitysvälineistä
� Kehitysvälineiden yleisiä piirteitä
� Käyttöliittymän toteuttaminen erilaisilla välineillä� Tcl/tk
� “RAD”
� Visuaalinen ohjelmointi
Marko Nieminen
Käyttöliittymä
Inhimillinen käyttäjä-osajärjestelmä
Tietokone/sovellus-osajärjestelmä
Järjestelmäntoiminnallisuus
liittymä/rajapinta(interface)
”käyttäjäliityntä”
informaatio-virta
Käyttäjä
tulosteet(output)
syötteet(input)
Marko Nieminen
VuorovaikutustilanneToiminnan seitsemän vaihetta; “tiedonsiirtoprotokolla”
Norman 1986
VÄLINE / ULKOMAAILMA
5 Ulkomaailman tilanhavainnoiminen
6 Havaintojentulkitseminen
7 Tulkintojenarvioiminen
1 Tavoitteet
2 Aikomustoimia
3 Toimenpideketju
4 Toimenpideketjuntäytäntöönpano
Marko Nieminen
Käyttöliittymäkehitysympäristöt
� Käyttöliittymäkehitysympäristöjen tarve tunnistettiin1980-luvun alussa
� Seeheim-arkkitehtuurimalli (1984) tarjosi yleisestihyväksytyt puitteet käyttöliittymäkehitysympäristöjentoteuttamiselle, Smalltalk-80:ssä MVC
� 1990-luvun alussa kehitysympäristöjä alkoi tullamarkkinoille� tutkimuspuolella mm. Garnet (Myers 1992), josta on sittemmin
kehittynyt Amulet
� Brad Myers: http://www.cs.cmu.edu/~bam/
Marko Nieminen
MVC: Model-View-Controller
http://heim.ifi.uio.no/~trygver/themes/mvc/mvc-index.html (Tryngve Reenskaug)
Marko Nieminen
Taustaa
� Käyttöliittymän toteuttaminen graafisiin käyttöliittymiinvaati aiemmin paljon työtä
� esim: Hello, World! -- Toteutus kompleksista graafiseenkäyttöliittymäympäristöön; hallittava monenlaiset matalantason asiat: ikkunointi, viestinvälitys, resurssit jne.
� Taitavat ohjelmoijat tuottavat käyttöliittymätyleiskäyttöisillä ohjelmointikielillä, esim C/C++; tämäsuuntaus on kuitenkin vähenemässä erityistenkäyttöliittymäkehitysympäristöjen kehittyessä
Marko Nieminen
Esimerkki
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;
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
Marko Nieminen
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
Käyttöliittymän rakentaminen: liikkeelle protoilusta
� Yksinkertaisimmillaan staattisia kuvia erilaisistavuorovaikutustilanteista: “diaesitys”, jokamahdollistaa todentuntuisen käyttötilanteenläpikäynnin, ei kuitenkaan todellista vuorovaikutusta
� Hieman kehittyneempi ratkaisu mahdollistaa oikeidenkäyttöliittymäelementtien sijoittelun näytölle jaetenemisen tilanteesta toiseen käyttäjän toiminnanmukaan
� Monimutkaisempaa toiminnallisuutta prototyyppeihinsaadaan liittämällä käyttöliittymään toiminnallistakoodia; jotkut välineet mahdollistavat myösvisuaalisen ohjelmoinnin
Marko Nieminen
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 sidostatoiminnallisuuden 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
Kehitysvälineiden teknisiä piirteitä
� Tärkeää nopea luonnostelu
� Visuaalinen käyttöliittymän suunnittelu� suunnittelija näkee nopeasti hahmottelemansakä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
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ä erinimikkeillä:� Rapid Prototyper
� User Interface Builder
� UIMS - User Interface Management System
� UIDE - User Interface Development Environment
� RAD - Rapid Application Developer
Marko Nieminen
Kehittimet tarjoavat komponenttikirjaston(esim Amulet: “widgets, dialogs, command objects”; tässä “widgets”)
� Am_Border_Rectangle: a rectangle with a raised (or lowered) edge, but no interaction.
� Am_Button: a single button
� Am_Button_Panel: a panel consisting of multiple buttons with the labels inside the buttons.
� Am_Checkbox_Panel: a panel of toggle checkboxes with the labels next to the checkboxes.
� Am_Radio_Button_Panel: a panel of mutually exclusively selectable radio buttons with the labels next to the radio buttons.
� Am_Menu: a menu panel
� Am_Menu_Bar: a menu bar used to select from several different menu panels
� Am_Option_Button: a button showing the current choice that pops up a menu of choices.
� Am_Pop_Up_Menu_Interactor: An interactorthat pops up a menu. Often used with start-when as the right-button to get Windows95 style behaviors.
� Am_Vertical_Scroll_Bar: scroll bar for choosing a value from a range of values.
� Am_Horizontal_Scroll_Bar: scroll bar for choosing a value from a range of values.
� Am_Vertical_Up_Down_Counter: Two arrows (like the top and bottom of a scroll bar) for incrementing and decrementing a number.
� Am_Scrolling_Group: an Amulet group with (optional) vertical and horizontal scrollbars
� Am_Text_Input_Widget: a field to accept text input, like for a filename.
� Am_Number_Input_Widget: Text input widget that is limited to integer or floating point numbers.
� Am_Password_Input_Widget: Text input widget that shows ``*''s instead of the characters that are typed.
� Am_Selection_Widget: which supplies the conventional square selection handles around one or more graphical objects and allows them to be moved and grown.
Marko Nieminen
Esimerkki (Amulet): Painikkeen luonti
An instance of Am_Button
Am_Object my_button = Am_Button.Create("My Button")
.Set (Am_LEFT, 10) // set the position of the button
.Set (Am_TOP, 10)
.Set (Am_COMMAND,"Push Me");
// a string in the Am_COMMAND slot
// specifies the button's label
Marko Nieminen
Esimerkki (Amulet): Liitetään toiminto komponenttiin
vscroll = Am_Vertical_Scroll_Bar.Create()
.Set(Am_LEFT, 450)
.Set(Am_TOP, 80)
;
vscroll.Get(Am_COMMAND)
.Set(Am_DO_METHOD, my_do)
.Set(Am_UNDO_METHOD, my_undo)
;
Normally, the command objects should be parts of the
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.Set_Part(Am_COMMAND, my_command);
//command objects should be parts
Marko Nieminen
Amulet Slots; komponentin ominaisuudet(tässä vain yleisimmät yhteiset ominaisuudet)
� Am_TOP, Am_LEFT: As with all graphical objects, these slots describe the location of the widget, in coordinates relative to the object's parent's location. Default values are 0 for both top and left.
� Am_VISIBLE: If this boolean is true, the object is visible; otherwise, it is not drawn on the screen. Default is true.
� Am_VALUE: The current value computed by the widget. This slot can also be set to change the widget's value.
� Am_WIDGET_LOOK: The value of this slot tells Amulet how you want your widgets to look when drawn on the screen. Possible values are Am_MOTIF_LOOK, Am_WINDOWS_LOOK, or Am_MACINTOSH_LOOK, or Am_NATIVE_LOOK which is whatever is the current machine.
� Am_FILL_STYLE: The color of the widget. Acceptable values are any Am_Style, and the default is Am_Amulet_Purple. The only part of the style used is the color of the style. On a black and white screen, a default set of stipples are used to make sure the widgets are visible. Unfortunately, you cannot set the style for the text labels shown in widgets, but the system picks either black or white text based on how dark the Am_FILL_STYLE is.
� Am_ACTIVE_2: This slot turns off interaction with the widget without turning it grey. This is mainly aimed at interactive tools like Interface Builders that want to allow users to select and move widgets around. It might also be useful in a multi-user situation where users who do not have 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
Amulet “Command Objects”
� Am_ACTIVE: This slot in the command is used to determine whether the widget is enabled or not (greyed out). Often, this slot will contain a formula dependent on some system state. The default value is true. (Actually, the widget itself also contains an Am_ACTIVE slot, but this one should not normally be used. The widget-level slot contains a constraint that depends on the Am_ACTIVE slot of the command object part of the widget.)
� Am_VALUE: This slot is set to the current value of the widget. Do not set this slot in the command object to try to change the widget's value (see the Am_VALUE of the widget instead).
� Am_DO_METHOD: The method to be called when the widget executes. This procedure takes one parameter: the command object.
� All the various undo, redo and selective methods
� Am_DEFAULT: for buttons, shows whether this is the default selection by drawing an extra thick border. Be sure to set the Am_ACCELERATOR slot of this command to ``RETURN''.
� Am_CHECKED_ITEM: for menus and menubars, whether this item has a check mark next to it.
� Am_IMPLEMENTATION_PARENT: If you want the command to invoke another command, you can set this slot in the widget's command to the other command object. For example, if the widget is the ``OK'' button of a dialog box, the Am_IMPLEMENTATION_PARENT of the OK widget's command might be the command object for the entire dialog box. Then Amulet will correctly know how to handle Undo, and it will call the parent command automatically.
Marko Nieminen
Tcl/Tk -- Tool Command Language
� Perusongelma: ohjelmointi on kuitenkin aika vaikeaa
� Ousterhaut (1994) kehitti Tcl:n yksinkertaiseksiskriptauskieleksi (http://home.pacbell.net/ouster/; http://tcl.activestate.com/)
� Tk on Tcl:n kanssa yhdessä toimivakomponenttikirjasto
� Tulkkaava ympäristö -- kirjoitetut käyttöliittymät (jaohjelmat) 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
Tcl/Tk-käyttöliittymäesimerkki
wm title . "Simple Tcl Example"
label .msg -wraplength 3i -justify left -relief sunken -text \
"Hello, World"
pack .msg -side top
menu .menu -tearoff 0
set m .menu.file
menu $m -tearoff 0
.menu add cascade -label "File" \
-menu $m -underline 0
$m add command -label "Exit" -command "destroy ."
. configure -menu .menu
frame .buttons
pack .buttons -side bottom -fill x -pady 2m
button .buttons.quit -text OK -command "destroy ."
pack .buttons.quit -side left -expand 1
Luodaankäyttöliittymänelementti, jonkatyyppi on “label”
Elementinnimi “polkuineen”
Ominaisuudetja toimenpiteet
Marko Nieminen
aboutBox -laajennus
set m .menu.help
menu $m -tearoff 0
.menu add cascade -label "Help" -menu $m -underline 0
$m add command -label ”About" -command \
"aboutBox" -accelerator "<F1>"
bind . <F1> aboutBox
. configure -menu .menu
...
proc aboutBox {} {
tk_messageBox -icon info -type ok \
-title ”about..." -message \
”Simple Tcl/Tk User Interface"
}
Marko Nieminen
RAD/IDE-välineet mahdollistavatvisuaalisen 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
Width = 61
Height = 13
Caption = 'Hello, World!'
end
object Button1: TButton
Left = 48
Top = 32
Width = 75
Height = 25
Caption = 'OK'
TabOrder = 0
end
Marko Nieminen
Marko Nieminen
Esimerkki UIDE-kehitysympäristöstä(Borland Delphi)
Marko Nieminen
Marko Nieminen
Eclipse Visual Editor / AUIML
http://www.ibm.com/developerworks/library/os-ecvisual/
http://www.alphaworks.ibm.com/tech/auiml
Marko Nieminen
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
http://www.forum.nokia.com/main/resources/tools_and_sdks/carbide/
Marko Nieminen
Visual Mobile Designer (VMD)
NetBeans IDE provides a wizard that enables you to quickly create a MIDP project
http://www.netbeans.org/kb/55/quickstart-mobility.html
Marko Nieminen
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.