T-121.300 K

1
T-121.300KÄYTTÖLIITTYMÄSUUNNITTELU Luento 6.
Käyttöliittymän toteuttaminen Vuorovaikutuksen
rakentamisen tekniikat ja arkkitehtuurit

• Marko Nieminen
• Teknillinen korkeakoulu
• Käyttöliittymät ja käytettävyys
• Marko.Nieminen_at_hut.fi

2
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

3
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äarkkiteh
  tuureilla -- em. asiat mahdollistuvat

4
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

5
Request DOS-käyttöliittymä puhelinluetteloon
PUHELINLUETTELO
1. Katsele puhelinluetteloa 2. Lisää,
muokkaa ja poista puhelinnumeroita 3. Lopeta
ohjelman käyttö Valitse 1,2,3?
6
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

7
Päävalikko (Poll)
8
Päävalikko (Poll)
DO MENU piirretään päävalikko i0
ja sitten odotetaan syötettä DO WHILE i0
iINKEY() _at_ 22,58 SAY "" IF igt0 IF
UPPER(CHR(i))"ABCDX" EXIT
ENDIF ENDIF i0 ENDDO _at_ 22,58 SAY
CHR(i) (dBase III / Clipper)
9
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

10
Käyttöliittymäympäristön tapahtuma event
event
procedure TForm1.Button1Click(Sender
TObject) begin ShowMessage('Button 1 was
pressed!') end
11
Käyttöliittymä irti toiminnallisuudesta!

• Arkkitehtuurimalleja
• Newmans 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

12
MVC - Model View Controller

• Käytössä esim. Smalltalkissa, Javassa
• Jakaa sovelluksen kolmeen osaan
• sovelluslogiikka (model)
• esitysmuoto (view)
• vuorovaikutuksen hallinta (controller)

C ontroller
input
user
V iew
output
M odel
application
Listeners
13
Seeheim

• Seeheimissa pidetyssä työpajassa (workshop)
  hahmoteltiin ensimmäisen kerran arkkitehtuuri
  UIMSlle 1984/85
• UIMS User Interface Management System
• Työpajassa tunnistettiin seuraavat UIMSn 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 MVCssä

14
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

15
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

16
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

17
The Arch model a refinement of the Seeheim model

• Distinguishes five components of an interactive
  software system

task level sequencingprovides the mapping
between domain specific objects and user
interface specific objects
abstraction from the interaction toolkit
component and provides platform-independence
domain related behaviour to the functional core
platform-dependent implementation of user
interface widgets as well as hardware details
functionality of the system
Evers, M.
18
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.
19
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ä
  --gt nopea semanttinen palaute, suorakäyttöliittymä
  t, useita näkymiä samasta mallista
• MVCn 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 VC -komponentteihin

20
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

21
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

TPanel
TMainMenu
TLabel
TButton
TPopUpMenu
TEdit
22
Esimerkki
23
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_paner_example_file_menu txt"File"
, MENU_TITLE menu_paner_example_edit_menu
txt"Edit" , MENU_TITLE menu_paner_example_
view_menu txt"View" , MENU_TITLE
menu_paner_example_text_menu txt"Text" ,
MENU_TITLE menu_paner_example_tools_menu
txt"Tools"
24
Määritellään IDt
enum TExampleMenuCommands EExampleCmd1100, E
ExampleCmd2101, EExampleCmdDimItem102, EExampl
eCmdExtra103, EEikCmdAbout104, EEikCmdSetIrDAI
nterval105, EExampleCmdStartSession106, EExamp
leCmdEndSession107, EExampleCmdFullScreen108

25
Resurssit ja koodi yhdistetään
void CExampleAppUiHandleCommandL(TInt
aCommand) switch (aCommand) case
EEikCmdClose Exit() break case
EExampleCmdStartSession CmdDimItem() iEikonE
nv-gtInfoMsg(R_EXAMPLE_DATA_TRANSFER_START_MESSAGE)
break case EExampleCmdEndSession iEikonEn
v-gtInfoMsg(R_EXAMPLE_DATA_TRANSFER_END_MESSAGE)
break case EEikCmdSetIrDAInterval IrDAInterv
alDialog() break case EExampleCmdDimItem C
mdDimItem() break case EEikCmdExit
Exit() break case EEikCmdAbout //
iEikonEnv-gtInfoMsg(" ") AboutDialog() break

26
2
1
27
Kirjoitetaan funktiot
// Print out "About" Dialog void
CExampleAppUiAboutDialog() // Create the
dialog CEikDialog dialog new (ELeave)
CEikDialog() // Launch the dialog dialog-gtExecu
teLD(R_EXAMPLE_DIALOG)
28
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!