T-121.300

KÄYTTÖLIITTYMÄSUUNNITTELU

Luento 6. Käyttöliittymän toteuttaminen Vuorovaikutuksen rakentamisen tekniikat ja arkkitehtuurit

Marko NieminenTeknillinen korkeakoulu

Käyttöliittymät ja käytettävyys

Marko.Nieminen@hut.fi

Marko Nieminen

Käyttöliittymän toteutuksen käsitteet, mallit ja toteutusohjeet

Luennon sisältö:

Vuorovaikutuksen toteutustekniikoita request, poll, event

Käyttöliittymän toteutus: arkkitehtuurimalleja MVC, Seeheim, Arch, PAC

Oliopohjaisen käyttöliittymäsuunnittelun peruskäsitteitä ja malleja

luokat (kontrollit, komponentit), ominaisuudet, metodit

Marko Nieminen

Mihin tällä luennolla esitettävillä asioilla pyritään?

Käyttöliittymäsuunnittelussa on käytännön tarpeita:

Siirrettävyys, alustariippumattomuus Uudelleenkäyttö Useiden käyttöliittymien toteuttaminen samaan

sovellus-/palvelutarjontaan Joustavuus, mukauttaminen, “kustomointi”

Sopivilla käyttöliittymäratkaisuilla -- vuorovaikutusrakenteilla ja käyttöliittymäarkkitehtuureilla -- em. asiat mahdollistuvat

Marko Nieminen

“Request” Vuorovaikutuksen rakentaminen käyttöliittymään

Ohjelma odottaa, että jotakin tapahtuu “käyttäjä kirjoittaa syötteen ja painaa enteriä” Suhteellisen tyypillinen tapa merkkipohjaisissa

käyttöliittymissä Perinteisissä sekventiaalisissa ohjelmointiympäristöissä komentoja: scanf (C), readln (Pascal) ongelmia mm. modaalisuus, jäykkyys

Esimerkki: “DOS-käyttöliittymä” puhelinluetteloon

Marko Nieminen

Request: DOS-käyttöliittymä puhelinluetteloon

* * * PUHELINLUETTELO * * *=============================

1. Katsele puhelinluetteloa2. Lisää, muokkaa ja poista puhelinnumeroita3. Lopeta ohjelman käyttö

Valitse [1,2,3]?

Marko Nieminen

“Poll” Vuorovaikutuksen rakentaminen käyttöliittymään

Ohjelma seuraa säännöllisesti syöttölaitteiden tilaa Vuorovaikutusluuppi: toistetaan luuppia koko ajan ja

tutkitaan, onko jotakin näppäintä painettu

Esimerkki: dBase III / Clipper -käyttöliittymä 1980-luvun lopulta

Marko Nieminen

“Päävalikko” (Poll)

Marko Nieminen

“Päävalikko” (Poll)

DO MENU && piirretään päävalikko i=0 && ja sitten odotetaan syötettä DO WHILE i=0 i=INKEY() @ 22,58 SAY "" IF i>0 IF UPPER(CHR(i))$"ABCDX" EXIT ENDIF ENDIF i=0 ENDDO @ 22,58 SAY CHR(i)

*** (dBase III / Clipper) ***

Marko Nieminen

Tapahtumaohjattu vuorovaikutus(Events)

Käyttöliittymän elementtien tilassa tapahtuvat muutokset laitetaan käyttöliittymäympäristössä tapahtumajonoon

Tapahtuma julkistetaan kaikille käyttöliittymäympäristössä oleville ohjelmille

Tapahtumasta kiinnostuneet ohjelmat käsittelevät sen omien sääntöjensä mukaisesti

Tyypillinen vuorovaikutustekniikka graafisissa käyttöliittymäympäristöissä

Esim. tapahtuma, kun painiketta painetaan

Marko Nieminen

Käyttöliittymäympäristön tapahtuma “event”

procedure TForm1.Button1Click(Sender: TObject);begin ShowMessage('Button #1 was pressed!');end;

event

Marko Nieminen

Käyttöliittymä irti toiminnallisuudesta!

Arkkitehtuurimalleja

Newman’s Reaction Handler 1968, erotti käyttöliittymän toiminnallisuudesta

MVC - Model View Controller 1970-luvun lopulla

Seeheim 1980-luvun alussa

PAC - Presentation Abstraction Control 1980-luvun lopussa

Marko Nieminen

MVC - Model View Controller

Käytössä esim. Smalltalkissa, Javassa Jakaa sovelluksen kolmeen osaan:

sovelluslogiikka (model) esitysmuoto (view) vuorovaikutuksen hallinta (controller)

Controller

View M

odel

application

userinput

output

“Listeners”

Marko Nieminen

Seeheim

Seeheimissa pidetyssä työpajassa (workshop) hahmoteltiin ensimmäisen kerran arkkitehtuuri UIMS:lle 1984/85

UIMS = User Interface Management System Työpajassa tunnistettiin seuraavat UIMS:n osat

esitysmuoto/-tapa (syöttö ja tulostus; presentation system) dialogin hallinta (dialog control system) toiminnallisuusrajapinta sovellusohjelmaan nähden (API)

Ongelmia mm. “rapid semantic feedback”: mahdollista MVC:ssä

Marko Nieminen

EsitysosaSeeheim presentation System

Tärkein tehtävä on kääntää ulkoisesta sovelluksen esitysmuodosta loogiseksi ja ymmärrettäväksi

Tuottaa näytöllä näkyvät kuvat lukee syötteitä ja kääntää syötteet

dialoginhallintaosalle sopivaksi

Marko Nieminen

Dialogin hallintaSeeheim dialogue Control System

Määrittää käyttäjän ja sovelluksen vuorovaikutuksen rakenteen

vastaanottaa syötteet esitysosalta (presentation control) ja sovellukselta ja

ohjaa syötteet/tulosteet oikeaan paikkaan

Marko Nieminen

API - SovellusrajapintaSeeheim Application Interface Model

Representaatio taustalla toimivasta sovelluksesta käyttöliittymän näkökulmasta

Määrittelee sovelluksen kannalta tärkeät objektit Määrittelee sovelluksen toiminnot käyttöliittymälle Muuntaa käyttöliittymän hallitsemat oliot ja

toimenpiteet tekniselle taustajärjestelmälle sopiviksi

Marko Nieminen

The Arch model a refinement of the Seeheim model

Distinguishes five components of an interactive software system

functionality of the

system

platform-dependent implementation of user interface widgets as well as hardware details

abstraction from the interaction toolkit component and provides platform-independence

task level sequencing;provides the mapping

between domain specific objects and user interface

specific objects

domain related behaviour to the functional core

Evers, M.

Marko Nieminen

PAC - Presentation Abstraction Control

A multi-agent model that structures the dialogue component as a hierarchy of interacting agents

An agent corresponds to e.g. a window, a group of widgets, or a single widget.

Three facets an abstraction facet, which contains the data or objects

a presentation facet, which encapsulates the presentation logic of the agent

a control facet, which controls the communication between abstraction and presentation and the communication between subordinate and superordinate agents

Evers, M.

Marko Nieminen

MVC

MVC vs Seeheim Seeheim ei oikein kykene hallitsemaan monista pienistä paloista

koostettavaa käyttöliittymää -- MVC jakaa esittämisen, kontrollin ja sovallusrajapinnan pienemmiksi kokonaisuuksiksi

Jokainen MVC-osa määrittää oman pienen osansa näytöstä M päivittää näkymänsä suoraan, helpompi käsitellä --> nopea

semanttinen palaute, suorakäyttöliittymät, useita näkymiä samasta mallista

MVC:n ongelmia spaghetti, vaikeaa löytää virheet malli ei kuitenkaan ole vielä oikein hyvin kehittynyt: ei olemassa

hyvää tapaa kuvata sovellusrajapinnan eroa: sovellus koostuu yhdestä tai useammasta M objektista, jotka on linkitetty suoraan V+C -komponentteihin

Marko Nieminen

Olio-ohjelmointi käyttöliittymässä(Lewis & Rieman 1993)

Objektit, oliot (object) koodiblokkeja, eivät välttämättä näytöllä näkyviä

Luokat, instanssit (class, instance) Aliluokat perivät “käyttäytymisensä” ja “piirteensä”

(subclass, inheritance, behavior, characteristics) Objektit kommunikoivat viesteillä (messages) Käsittelijät (handlers) vastaanottavat viestit ja

suorittavat toimenpiteet Resurssit: tekstitiedostoja tai erityisiä .RES-tiedostoja

Marko Nieminen

Objektit, luokat

Yleensä voi käyttää varsin pitkälle valmiita luokkia Java AWT, VC++ MFC, Borland VCL käyttöliittymässä näkyvät elementit ovat objekteja,

luokkia

TMainMenu

TPopUpMenu

TLabel

TEdit

TPanelTButton

Marko Nieminen

Esimerkki

Marko Nieminen

RESURSSIT

EICON/EPOC resurssit kirjoitetaan tekstitiedostoon ja käännetään

resurssikääntäjällä myös erityisillä resurssityökaluilla muihin ympäristöihin, esim.

WRT

RESOURCE MENU_BAR r_example_main_menubar { titles= {

MENU_TITLE { menu_pane=r_example_file_menu; txt="File"; },MENU_TITLE { menu_pane=r_example_edit_menu; txt="Edit"; },MENU_TITLE { menu_pane=r_example_view_menu; txt="View"; },MENU_TITLE { menu_pane=r_example_text_menu; txt="Text"; },

MENU_TITLE { menu_pane=r_example_tools_menu; txt="Tools"; }};

}

Marko Nieminen

Määritellään ID:t

enum TExampleMenuCommands{EExampleCmd1=100,EExampleCmd2=101,EExampleCmdDimItem=102,EExampleCmdExtra=103,EEikCmdAbout=104,EEikCmdSetIrDAInterval=105,EExampleCmdStartSession=106,EExampleCmdEndSession=107,EExampleCmdFullScreen=108};

Marko Nieminen

Resurssit ja koodi yhdistetään

void CExampleAppUi::HandleCommandL(TInt aCommand){switch (aCommand)

{case EEikCmdClose:

Exit();break;

case EExampleCmdStartSession:CmdDimItem();iEikonEnv->InfoMsg(R_EXAMPLE_DATA_TRANSFER_START_MESSAGE);break;

case EExampleCmdEndSession:iEikonEnv->InfoMsg(R_EXAMPLE_DATA_TRANSFER_END_MESSAGE);break;

case EEikCmdSetIrDAInterval:IrDAIntervalDialog();break;

case EExampleCmdDimItem:CmdDimItem();break;

case EEikCmdExit: Exit();break;

case EEikCmdAbout:// iEikonEnv->InfoMsg(" ");AboutDialog();break;}

}

Marko Nieminen

1

2

Marko Nieminen

Kirjoitetaan funktiot

// Print out "About" Dialogvoid CExampleAppUi::AboutDialog()

{// Create the dialogCEikDialog* dialog = new (ELeave) CEikDialog();// Launch the dialogdialog->ExecuteLD(R_EXAMPLE_DIALOG);}

Marko Nieminen

RAD-välineet vähentävät työtä

Yleensä ei tarvita resurssien tuottamista manuaalisesti

Valikot ja komponentit pudotetaan ikkunoihin l. lomakkeisiin (form)

Myös “handlerit” syntyvät puoliautomaattisesti

mutta… näistä kerrotaan lisää ensi kerralla!