TIE Ohjelmistojen suunnittelu. Luento 3: käyttöliittymien toteutustekniikat, QML

Transkriptio

1 TIE Ohjelmistojen suunnittelu Luento 3: käyttöliittymien toteutustekniikat, QML 1

2 Tämän päivän ohjelmaa Viikkoharjoitukset alkavat! Yleisesti käyttöliittymien toteutustekniikoista Myöhemmin MVC, MVVM, MVP, M-V Qt ja QML lyhyesti Presemo? 2

3 Käyttöliittymien toteuttaminen Perinteisempi Widget-pohjainen lähestyminen Käyttöliittymän toteutus samalla ohjelmointikielellä käyttöliittymäkirjastojen käyttö Ohjelman käyttöliittymä yleensä kooste tarjotuista valmiista komponeneteista ja valmiiden komponenttien erikoistuksista 3

4 Widgetit, käyttöliittymäkomponenttien käyttö Käyttöliittymäkomponentit, luominen ja hallinta: staattisemmat käyttöliittymät, esim. suoraan käyttöliittymäeditorilla tai dynaamisesti koodista Kali-editorit, olio-ohjelmointia tiedostomattomalla tasolla :) Käyttö suoraan koodissa, kuten mitkä tahansa muutkin luokat ja oliot Jäsenfunktioiden kutsut jne. 4

5 Widgetit, käyttöliittymäkomponenttien erikoistaminen Koodi tulee kotisivuille Hierarkiaa: QWidget, kantaluokkia QObject and QPaintDevice. Qlabel, periytyy QWidget SpecialLabel peritään QLabelista 5

6 Mitä potentiaalisia ongelmia widget-lähestymistavassa on? 6

7 Käyttöliittymäkielet 7

8 Tietojen sitominen, käyttöliittymät Ideana sitoa käyttöliittymässä näkyvä/esitettävä asia ohjelmakoodin arvoihin, propertyihin tai toimintoihin Sen sijaan että esim. tekstikentän arvoa muutetaan koodissa kutsumalla esim. tekstikenttäolion palveluita, kerrotaan että tekstikentän arvo on sidottu esim. merkkijonomuuttujan/propertyn arvoon jos tekstikentän arvoa muutetaan, muuttuu arvo koodissa. Jos arvo koodin puolella muuttuu, muuttuu arvo käyttöliittymässä. Sidonta mahdollista myös käyttöliittymäelementtien välillä, esim. taulukon koko sidotaan merkkijonoon tai elementin sijainti toiseen elementtiin.

9 Tietojen sitominen, käyttöliittymät Jos käytössä olisi vain normaalit muuttujat, mitä vaaroja tietojen sidonnassa esitellyssä tilanteessa voisi olla? Tai yleisesti, jos meillä on tilanne jossa muuttujaa voidaan muuttaa ja lukea sekä käyttöliittymän että muun ohjelman suunnasta, mikä voisi mennä pieleen? Muu ohjelma Dataa a34ac4 käyttöliittymä Käyttöliittymä ja ohjelman toteutus sotkeutuvat toisiinsa, rinnakkaisuus, säieturvallisuus, poissulkemiset, säikeiden välinen viestintä Ratkaisuja käyttöliittymäkirjastoissa: Viestimekanismit, propertyt/suojatut tietotyypit, property changed tapahtumat, omat kokoelmatyypit, jotka ovat säieturvallisia.

10 Merkintäkielipohjaisuus Widget-lähestymistapa, käännetään ajettava ohjelma kokonaisuudessaan. Käyttöliittymäosuudessa ympäristön/käyttöliittymäohjelmiston automaattisesti tuottamaa koodia Merkintäkielilähestymistapa: Kuten widgeteissä, merkintäkieli käännetään ajettavaksi koodiksi jne. Esimerkiksi kali-editorin tuottamien juttujen tallennusmuoto Merkintäkieli + mahdolliset käyttöliittymäskriptit ajoaikainen tulkkaus (web), näistä kutsut varsinaiseen ohjelmalogiikkaan 10

11 Lisää merkintäkielistä Käyttöliittymäkieli, usein XML-pohjaista tai CSS-tyylistä Usein eriytettynä käyttöliittymäkomponenttien määrittely, tyyli ja käyttöliittymätoiminnallisuus (esim. HTML, CSS, JavaScript + palvelimet, joissa data & järeämpi toiminnallisuus) Mahdollistaa käyttöliittymän toteuttamisen ilman oikeaa koodausta (ainakin periaatteessa) Kalisuunnittelija tekee käyttöliittymän Koodarit varsinaisen ohjelman, yhdistetään käyttöliittymän toiminnot varsinaiseen toiminnallisuuteen 11

12 XAML-esimerkki Microsoft ja XAML Toiminnallisuus luokissa jne. Käyttöliittymän ulkonäkö XAML-tiedostot, näkymäkohtaiset jutut jne. Tyylimäärittelyt, joko komponenttikohtaisesti tai globaalimmin Käyttöliittymän tietojen sitominen koodiin (Ohjaa vahvasti käyttämään MVVMratkaisumallia) 12

13 Merkintäkieli vs. koodi <!--XAML--> <Grid x:name="contentpanel" Margin="12,0,12,0"> <Button Height="72" Width="160" Content="Click Me" /> </Grid> // C# // Initialize the button Button mybutton = new Button(); // Set its properties mybutton.width = 160; mybutton.height = 72; mybutton.content = "Click Me"; // Attach it to the visual tree, specifically as a child of // a Grid object (named 'ContentPanel') that already exists. In other words, position // the button in the UI. ContentPanel.Children.Add(myButton); 13

14 Tiedon sitominen 14

15 QML Qt meta language / Modeling language, deklaratiivinen skriptikieli Helppo eriyttää käyttöliittymä ja sen logiikka varsinaisesta ohjelmakoodista Skriptitiedostoja ei käännetä, nopea protoilla, melko yksinkertaista vaihtaa käyttöliittymä JavaScript koodi voidaan kirjoittaa suoraan QML:n tiedostoon, tai lisätä importein JavaScript tiedostoja. Esim: import jstiedosto.js" as AnimationFunctions 15

16 QML Syntaksi muistuttaa CSS-tyylimäärittelyjä. Elementtejä (Elements), joilla ominaisuuksia (property) Property-arvo parit määrittelyissä (esim. x = 100) Rectangle { width: 200; height: 100; x: 100; y: 150; color: "yellow" Text { text: "Hei ohjsuun!"; font.pointsize: 20 } } 16

17 Lisää määrittelyistä Elementeille voi antaa tunnisteen (id) Propertyn arvo voi riippua toisesta propertystä (esim. id:n tai parent-suhteen perusteella Rectangle { visible: true id: another width: hellorect.width height: hellorect.height color: "#0500ff" z: 1 x: hellorect.x - 50 y: hellorect.y - 50 } Item { width: 300; height: 300; Rectangle { width: parent.width - 50; height: 100 color: "yellow" } } 17

18 Esimerkki 18

19 QML:n tyypeistä lisää Ominaisuuksien määrittely, perustietotyypit, esim. int, string, real Tyyppiturvallisuus ( x = moi! virhe) Qt Quick QML:n tietotyyppejä, esimerkiksi ruudulla näkyvät (Rectangle, Item, Image, Text), kontrollit (Button), tapahtumat (MouseEvent) 19

20 QML ja tilat Elementeillä oletuskonfiguraatio joka määritellään (yleensä) propertyillä Uusien tilojen määrittely states propertyllä, niissä määritellään erot oletuskonfiguraatioon 20

21 Tiloista lisää? Tiloilla on propertyjä kuten muillakin elementeillä. changes name extend when states: State { name: "resized"; when: mousearea.pressed PropertyChanges { target: myrect; height: container.height } } 21

22 Transitiot Tilasiirtymät tapahtuvat välittömästi Jos halutaan tehdä tilasiirtymä viiveellä/animoidusti, voidaan käyttää transitioita states: State { name: "down"; when: mousearea.pressed == true PropertyChanges { target: hellotext; y: 160; rotation: 180; color: "red" } } transitions: Transition { from: ""; to: "down"; reversible: true ParallelAnimation { NumberAnimation { properties: "y,rotation"; duration: 500; easing.type: Easing.InOutQuad } ColorAnimation { duration: 500 } } } 22

23 Tulevaa QML ja tietojen sidonta, Models & Views Suunnittelutason ratkaisuja, käyttöliittymän ja datan erottaminen toisistaan 23

24 Linkkejä 5/qmlreference.html 24

25 Yhteenvetoa Käyttöliittymäkielet, lyhyt pikaesittely Qt ja QML: perusasiat QML:stä Rakenne Elementit, propertyt Tilat Tulossa QML ja C++, Javascript & QML, jotain kevyttä animaatioista yms. 25