Ohjelmistokehittäminen. Luku 4 – Windows-sovellusten käyttöliittymät.

Esitys aiheesta: "Ohjelmistokehittäminen. Luku 4 – Windows-sovellusten käyttöliittymät."— Esityksen transkriptio:

1 Ohjelmistokehittäminen

2 Luku 4 – Windows-sovellusten käyttöliittymät

3 Sisältö❷❸ Hyvän käyttöliittymän merkitys Käyttöliittymän suunnittelu Mitä käyttöliittymissä tulee huomioida? Visual Studion valmiit sovellusmallit Asettelukontrollit Grafiikan tuominen sovelluksiin Animaatiot

4 Hyvän käyttöliittymän merkitys Varsinkin kuluttajat hylkäävät nopeasti sovelluksen, jonka käyttöliittymä on huono tai puutteellinen Sovelluksen käyttöliittymä on hyvä, kun käyttäjän ei tarvitse pohtia, miten sovellusta pitäisi käyttää Hyvä käyttöliittymä ei synny sattumalta

5 Windows 8 -käyttöliittymät Windows 8 -sovellukset on tarkoitettu näyttäviksi, tehokkaiksi ja silti helppokäyttöisiksi Käyttäjien toimia seuraamalla ja ottamalla mallia muista sovelluksista oppii paljon Seuraa Microsoftin omaa ohjeistusta, mutta erityisesti peleissä voit ottaa omia vapauksia – Hyvä osoite aloittaa on dev.windows.com

6 Suunnitelman tekeminen Hyvä käyttöliittymä vaatii etukäteissuunnittelua Hyvän suunnitelman tekeminen ei vaadi erityisiä välineitä: kynä ja paperi riittävät Hahmotelmat sovelluksen käyttöliittymän ruuduista ovat keskeinen osa suunnitelmaa Tavoitteena on, että graafikko ja kehittäjä pääsevät nopeasti työssään alkuun

7 Suunnitelma vastaa kysymyksiin Tehdessäsi suunnitelmaa sovelluksestasi, pyri vastaamaan ainakin seuraaviin kysymyksiin: – Missä sovelluksesi on hyvä – parempi kuin muut? – Kenelle sovellus on tarkoitettu? – Millä laitteilla sovellustasi on tarkoitus käyttää? Tableteilla, kannettavilla, pöytäkoneilla? – Mitkä ovat sovelluksen tärkeimmät ominaisuudet? – Miltä sovelluksen tärkeimmät käyttöliittymäruudut näyttävät ja miten niiden välillä liikutaan? Missä järjestyksessä?

8 Kosketus ensin Windows 8 -sovellukset on tarkoitettu ensisijaisesti kosketuksella ohjattavaksi Tämä seikka tulee huomioida käyttöliittymiä suunnitellessa Kuitenkin: käytössä on edelleen runsaasti koneita joissa ei ole kosketusnäyttöä – Huolehdi, että sovellus on käyttökelpoinen esimerkiksi hiirellä

9 Microsoftin viisi ohjetta Microsoft itse ohjeistaa Windows 8 -sovellusten käyttöliittymiä viidellä ohjeella – hyvän viimeistelyn arvostaminen (englanniksi pride in craftsmanship) – nopea ja sujuva toiminta (be fast and fluid) – aidosti digitaalinen (authentically digital) – saavuta enemmän vähemmällä (do more with less) – yhteistyö on voimaa (win as one).

10 Visual Studion sovellusmallit Visual Studio pyrkii Windows 8 -ohjelmien kehittämisen aloittamisen helpoksi tarjoamalla valmiita pohjia eli sovellusmalleja – Englanniksi application template Neljä hyödyllisintä mallia ovat nimeltään – Blank App – Grid App – Hub App – Split App

11 New Project -ikkuna

12 Mallit tarkemmin Blank App – Tyhjän sovelluksen malli joka on tarkoitettu kehittäjille, jotka entuudestaan tuntevat Windows 8 -kehittämistä Grid App – Tarjoaa valmiin, helpon tavan aloittaa Windows 8 -kehittäminen – Valmiina ruudukkoon pohjautuva asemointi, perustuu ryhmiin – Kolmas erillinen sivu kunkin jäsenen tarkemmille tiedoille Hub App – Uusi sovellusmalli, vaatii toimiakseen Windows 8.1 -käyttöjärjestelmän – Jakaa sovelluksen pääruudun erikokoisiin osiin, jolloin tärkeille elementeille voidaan antaa enemmän tilaa – Malliin kuuluu kolme sivua Split App – Tässä sovellus jaetaan kahteen sivuun – Soveltuu hyvin sovelluksiin, joiden sisältönä on joukko tekstipohjaista tietoa ja kuvia

13 XAML-kieli Windows 8 -sovellusten käyttöliittymät muodostetaan XAML-nimisellä kielellä Nimi on lyhenne sanoista ”eXtensible Application Markup Language” Kieli käyttää XML-syntaksia XAML-kieliset tiedostot tunnistaa tiedostopäätteestä.xaml Visual Studion valmiisiin sovellusmalleihin kuuluu aina vähintään yksi XAML-tiedosto

14 Asettelukontrollit Windows 8 -sovellukset voivat käyttää koko ruudun tilan sovelluksen omaa sisältöä varten Windows 8 -sovellukset voivat käyttää erityisiä asettelukontrolleja – Englanniksi layout controls Yleisimmät asettelukontrollit – Canvas, StackPanel, Grid, VariableSizedWrapGrid

15 Asettelukontrollit KontrolliHuomiotTietojen esitystapa CanvasVapaa elementtien sijoittelu StackPanelElementit sijoitellaan automaattisesti joko vaaka- tai pystyriviin GridRuudukkomainen asettelu, kehittäjä voi päättää sarakkeiden ja rivien määrän VariableSizedWrapGridKuten Grid, mutta yksittäiset ruudut voivat olla eri kokoisia

16 Grafiikan tuominen sovelluksiin Näyttävä ja tyylikäs grafiikka on omiaan miellyttämään ja ilahduttamaan käyttäjiä Niinpä on tärkeää, että osaat sovelluskehittäjänä tuoda graafisia elementtejä omiin sovelluksiisi ja esittää ne ruudulla Grafiikkaa voidaan tuoda sovellukseen jo kehitysaikana, tai sitä voidaan ladata sovelluksen ajonaikana esimerkiksi verkosta

17 Kuvatiedoston lisääminen 1.Avaa haluamasi Windows 8 -sovellus Visual Studioon 2.Valitse Project-päävalikosta komento Add Existing Item 3.Valitse haluamasi kuvatiedosto ja paina Add- painiketta 4.Lisää sovellukseesi Image-komponentti, ja valitse haluamasi kuvatiedoston nimi Image-komponentin Source-ominaisuuteen 5.Nyt kuva näkyy Image-komponentin sisällä

18 Kuvan lisääminen, vaiheet 4 ja 5 Image-komponentti Visual Studion Toolbox-ikkunassa Source-ominaisuuden asettaminen

19 Kuvan lataaminen verkosta Projektiin lisättyjen kuvatiedostojen lisäksi voit käyttää verkosta löytyviä kuvatiedostoja Seuraavassa koodiesimerkki kuvan lataamisesta – Koodi lataa kuvan Image-komponenttiin nimeltä ”myImage” string url = "http://www.osoite.fi/kuva.jpg"; myImage.Source = new BitmapImage(new Uri(url));

20 Animaatiot Windows 8 -sovellukset tukevat monipuolisesti animaation käyttöä Erityisesti kosketuskäytössä animaatioista on paljon iloa ja hyötyä käyttäjille Animaatiot kuvataan XAML-kielisillä lauseilla – Näitä ei kuitenkaan tarvitse kirjoittaa käsin – Erityisesti Expression Blend -ohjelma auttaa animaatioiden työstämisessä

21 Expression Blend

22 Mikä Expression Blend? Expression Blend on tarkoitettu graafiseen työhön – Visual Studio taas on tarkoitettu ohjelmointiin Käyttää ja tukee täsmälleen samoja tiedostomuotoja kuin Visual Studiokin – Yhteistyö esimerkiksi kehittäjän ja graafikon välillä on saumatonta Sekä Blendissä että Visual Studiossa on samanlainen XAML-tuki, mutta käytössä olevat toiminnot vaihtelevat

23 Yksinkertainen animaatio Tehdään yksinkertainen animaatio XAML- koodin avulla Tavoitteena saada liike näkyviin ruudulla Kirjoitetaan myös ohjelmakoodi, jolla animaatio saadaan käynnistettyä

24 Vaihe 1: animoitava ellipsi XAML-koodi punaisen ellipsin lisäämiseksi <Ellipse x:Name="ellipse" Fill="Red" HorizontalAlignment="Left" Height="100" Margin="76,216,0,0" Stroke="Black" VerticalAlignment="Top" Width="130" RenderTransformOrigin="0.5,0.5">

25 Vaihe 2: animaation määritys <DoubleAnimation Duration="0:0:0.6" To="568.657" Storyboard.TargetProperty="(UIElement. RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="ellipse” d:IsOptimized="True"/> <DoubleAnimation Duration="0:0:0.6" To="2.985" Storyboard.TargetProperty="(UIElement. RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="ellipse” d:IsOptimized="True"/>

26 Vaihe 3: animaation käynnistys Vaikka XAML-kielinen animaatio on määritelty se ei käynnisty automaattisesti Animaation käynnistäminen voidaan tehdä monella tapaa Yksi suoraviivainen tapa on tehdä käynnistäminen ohjelmakoodissa Tarvittava koodirivi: Storyboard1.Begin();

27 Tehtäviä Mieti, mitä etuja voi olla siitä, että sekä Visual Studio että Blend molemmat tulevat samaa XAML-tiedostomuotoa. Mitä tarkoitetaan kuvakäsikirjoituksella Windows 8 -sovellusten yhteydessä? Selvitä, mitä tietokoneen suorittimia käytetään, kun Windows 8 -sovelluksissa käytetään animaatioita.

28 Kysymyksiä ja vastauksia 1 Olen tottunut käyttämään Visual Studiota kehittämään sovelluksia. Tarvitsenko Blendiä mihinkään? Teknisesti Blend ei ole välttämätön, mutta siitä on suurta apua graafisen ilmeen sekä erityisesti animaatioiden toteuttamisessa. Pienet yksityiskohdat ovat tärkeitä, joten visuaaliseen ilmeeseen panostaminen kannattaa. Lyhyesti voisi sanoa, että Blendin avulla teet hyvästä Windows 8 -sovelluksesta erinomaisen.

29 Kysymyksiä ja vastauksia 2 Mistä löydän lisätietoja XAML-kielestä? XAML eli Extensible Application Markup Language on kuvauskieli, jolla voit kuvata Windows 8 -sovellusten käyttöliittymät. XAML:n hyvä hallinta auttaa sinua tekemään parempia Windows 8 -sovelluksia. XAML-kielestä löydät runsaasti lisätietoja osoitteesta http://msdn.microsoft.com/library/windows/apps/br22956 4.aspx. Osa materiaalista on suomenkielistä. http://msdn.microsoft.com/library/windows/apps/br22956 4.aspx Muista, että koska XAML-kieli käyttää XML-syntaksia, XML- kielen tuntemus on avuksi XAML-kielen opiskelussa.