Upload
uriel-witt
View
55
Download
0
Embed Size (px)
DESCRIPTION
T-121.300 KÄ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 [email protected]. - PowerPoint PPT Presentation
Citation preview
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
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!