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

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.