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

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