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

1. T-121.300KÄYTTÖLIITTYMÄSUUNNITTELULuento 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@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 Marko Nieminen

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äarkkitehtuureilla -- em. asiat mahdollistuvat Marko Nieminen

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 Marko Nieminen

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]? Marko Nieminen

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 Marko Nieminen

7. “Päävalikko” (Poll) Marko Nieminen

8. “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

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 Marko Nieminen

10. Käyttöliittymäympäristön tapahtuma “event” event procedure TForm1.Button1Click(Sender: TObject); begin ShowMessage('Button #1 was pressed!'); end; Marko Nieminen

11. 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

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 “Listeners” application Marko Nieminen

13. 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

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 Marko Nieminen

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 Marko Nieminen

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 Marko Nieminen

17. The Arch model a refinement of the Seeheim model • Distinguishes five components of an interactive software system task level sequencing;provides 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. Marko Nieminen

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. Marko Nieminen

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ä --> 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

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 Marko Nieminen

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 Marko Nieminen

22. Esimerkki Marko Nieminen

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_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

24. 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

25. 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

26. 2 1 Marko Nieminen

27. Kirjoitetaan funktiot // Print out "About" Dialog void CExampleAppUi::AboutDialog() { // Create the dialog CEikDialog* dialog = new (ELeave) CEikDialog(); // Launch the dialog dialog->ExecuteLD(R_EXAMPLE_DIALOG); } Marko Nieminen

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! Marko Nieminen