1 / 29

Ohjelmistokehittäminen

Ohjelmistokehittäminen. Luku 4 – Windows-sovellusten käyttöliittymät. 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.

kane
Download Presentation

Ohjelmistokehittäminen

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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 (befast and fluid) • aidosti digitaalinen (authenticallydigital) • saavuta enemmän vähemmällä (domore 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 applicationtemplate • Neljä hyödyllisintä mallia ovat nimeltään • BlankApp • Grid App • HubApp • SplitApp

  11. New Project -ikkuna

  12. Mallit tarkemmin • BlankApp • 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 • HubApp • 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 • SplitApp • 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 MarkupLanguage” • Kieli käyttää XML-syntaksia • XAML-kielisettiedostot 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

  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 • Avaa haluamasi Windows 8 -sovellus Visual Studioon • Valitse Project-päävalikosta komento AddExistingItem • Valitse haluamasi kuvatiedosto ja paina Add-painiketta • Lisää sovellukseesi Image-komponentti, ja valitse haluamasi kuvatiedoston nimi Image-komponentin Source-ominaisuuteen • Nyt kuva näkyy Image-komponentin sisällä

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

  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 ExpressionBlend -ohjelma auttaa animaatioiden työstämisessä

  21. ExpressionBlend

  22. Mikä ExpressionBlend? • ExpressionBlend 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"> <Ellipse.RenderTransform> <CompositeTransform/> </Ellipse.RenderTransform> </Ellipse>

  25. Vaihe 2: animaation määritys <Storyboard x:Name="Storyboard1"> <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"/> </Storyboard>

  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:nhyvä 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/br229564.aspx. Osa materiaalista on suomenkielistä. • Muista, että koska XAML-kieli käyttää XML-syntaksia, XML-kielen tuntemus on avuksi XAML-kielen opiskelussa.

More Related