Versionhallinnassa

• https://gitlab.jyu.fi/tie/ohj1/2021s/esimerkit/-/tree/master/luennot/luento24

Katso myös Työaikaseuranta

Tiedotuksia

• ilmoittautukaa tenttiin!
• muistakaa tehdä ja kokeilla Zoom-osoite

Videokatsojille:

1. Avatkaa yllä olevasta listasta aluksi Autolaskuri-kohdassa olevat 2 tiedostoa ja sitten pistäkää video (2022) käyntiin. Ja kun aihe vaihtuu, avatkaa siitä AutolaskuriProp-kohdasta vastaavat.
2. Jos haluatte itse kokeilla eikä teillä ole Visual Studiossa (Windows) vastaavia projektimalleja, niin tehkää VisualStudioon uusi asennus ja ruksikaa noita GUI-työkaluja sieltä.

1. Perusautolaskurin tekeminen

• näytä IE:llä Tuomarikone
• näytä CycloLite

1. Käynnistä Visual Studio.

2. Luo projekti Autolaskuri mallista Visual C#/Windows/Blank Universal App.

3. Avaa tiedosto MainPage.xaml.

4. Raahaa alueelle TextBoxja asettele ominaisuudet

   • teksti 0
   • oikealle tasaus
   • fontti
   • väri
   • name: LaskuriHA.
   • IsReadOnly: true
   • IsTabStop: false

5. Raahaa alueelle Button ja asettele ominaisuudet ja anna nimeksi ButtonHA.

6. Katso .xaml-koodia.

7. Tuplaklikkaa painiketta ja lisää koodiksi: LaskuriHA.Text = "Kana";

8. Kokeile koodia: LaskuriHA.Text = LaskuriHA.Text + 1;

9. Lisää attrribuutti private int ha = 0;
   

10. Vaihda painikkeen koodiksi

     ha++;
     LaskuriHA.Text = "" + ha;

11. Kokeile koodia.

12. Valitse laskuri ja painike ja kopioi ne.

13. Vaihda kopioiden nimeksi LaskuriKA ja ButtonKA ja tietysti painikkeen teksti.

14. Kokeile miten toimii.

15. Poista tapahtumankäsittelijä salaman kuvan kautta.

16. Tuplaklikkaa KA painiketta ja vaihda lisää tarvittava koodi.

17. Lisää ButtonNollaa.

18. Laita koodiksi:

    LaskuriHA.Text = "0";
    LaskuriKA.Text = "0";
    ha = 0;
    ka = 0;

19. Laita komponeteille uudet Tab-indeksit, niin että ButtonHA saa indeksin 0. (kirjoita hakukenttään tab).

20. Kerro:

    • *.i.cs ja partial class

Huonoa: aina kun muuttaa arvoa, pitää muistaa muuttaa näyttöä. Palataan tähän kohta.

Ajaminen Windows puhelimessa

1. Valitse kohteeksi Arm
2. Valiste laitteeksi Device
3. Aja ja kokeile miten debuggerin breakpointit toimivat.

Videon lisääminen

1. Siirrä Assets-kansioon video joka pitää näyttää.
2. Raahaa alueelle MediaElement-kontrolli.
3. Properties kohdasta Media valitse arvo Source-ominaisuudelle.
4. Laita AutoPlay päälle.
5. Aja ohjelma.

Kartan lisääminen

Lue:

• How to show your current location on a map in Windows Phone 8
• Display maps with 2D, 3D, and Streetside views

1. Tee itsellesi Bing-avain.
2. Lisää MapControl.
3. Laita MapServiceToken-ominaisuuteen hakemasi Bing-avain.

Blendillä efektejä

1. Valitse projektin nimestä oikealla Design in Blend.
2. Avaa solution Explorer ja sielä MainPage.xml.
3. Laita vaikka liukuväritausta:
   1. Valitse Grid.
   2. Valitse properties ikkunasta Background.
   3. Ota taustaa kuvaavista ikoneista (5 kpl) liukuvärin näköinen.
   4. Valitse liun alkuväri ja loppuväri .
4. Tee pyörähdysefekti:
   1. Valitse LaskuriHA.
   2. Kohdasta No Storyboard open ja klikkaa oikeall ja new StoryBord
   3. Anna nimeksi StoryHA.
   4. Raahaa keltainen pystyviiva siihen kohti, mihin asti haluat ensimmäisen animaation kestävän.
   5. Valitse LaskuriHA ja sen oikeasta ylänurkasta hieman ylöspäin kiertoa osoittava nuoli ja pyöräytä laskuri kerran ympäri.
   6. Raahaa keltainen viiva siihen kohti mihin seuraava nauhoitus kestää.
   7. Pyöräytä LaskuriHA toisin päin ympäri.
   8. Paina vihreää soittonappulaa ja katso toimiko kuten piti.
   9. Lopeta nauhoitus storyHA:n vieressä olevasta pienestä punaisesta pallukasta.
   10. Valitse Assets/Behaviours. Ota tarvittaessa Install...
   11. Valitse ControlStoryBoard ja raahaa se ButtonHA päälle.
   12. Aseta Storyboard-ominaisuuteen StoryHA.
   13. Aja ohjelma.
   14. Säädä EasingFunktiota valitsemalla LaskuriHA:n alta RenderTransform.

2. Autolaskuri properyillä

1. Luo uusi projekti: AutolaskuriProp.

2. Kopioi xaml-tiedoston sisällöstä oleelliset osat.

3. Muuta "pääohjelman" koodiksi:

    public sealed partial class MainPage : Page
    {
        private int ha = 0;
        private int ka = 0;
   
        public int HA { get { return ha; } set { ha = value; laskuriHA.Text = "" + ha; } }
        public int KA { get { return ka; } set { ka = value; laskuriKA.Text = "" + ka; } }
   
        public MainPage()
        {
            this.InitializeComponent();
        }
   
        private void ButtonHA_Click(object sender, RoutedEventArgs e)
        {
            HA++;
        }
   
        private void ButtonKA_Click(object sender, RoutedEventArgs e)
        {
            KA++;
        }
   
        private void ButtonNollaa_Click(object sender, RoutedEventArgs e)
        {
            HA = 0;
            KA = 0;
        }
   
    }

3. Bind-laskuri

1. Tee uusi projekti AutolaskuriBind.

2. Tee luokka BindLaskuri.

3. Rakentele sovelluksen pohja kuten edellä, mutta anna nimiksi LabelHA ja LabelKA.

4. Älä vielä tee Click-metodeja.

5. Käännä sovellus, niin Toolboxiin tulee BindLaskuri.

6. Ota BindLaskuri ja raahaa se Gridiin. Anna nimeksi HA.

7. Valitse LabelHA ja ota sen Text-ominaisuuden vieressä oleva tötterön kuva ja aukeavasta menusta valitse Create Data Binding.

8. Valitse Binding type-listasta Element Name ja sitten HA ja sen Count.

9. Vastaavasti bindaa ButtonHA:n Content-ominaisuuteen HA:n Name. Nyt joudu ruksimaan Custom ja kirjoittamaan siihen Name

10. Tee vastaavasti KA-laskuri ja bindaa se kuten edellä LabelKA ja ButtonKA kanssa.

11. Laita ButtonHA_Click -metodin sisällöksi:

         BindLaskuri laskuri = BindLaskuri.GetLaskuri(sender);
         if (laskuri != null) laskuri++;

12. Laita ButtonNollaa_Click -metodin sisällöksi:

         for (int i = 0; i < VisualTreeHelper.GetChildrenCount(ButtonNollaa.Parent); i++)
         {
             DependencyObject ctr = VisualTreeHelper.GetChild(ButtonNollaa.Parent, i);
             if (ctr is BindLaskuri) ((BindLaskuri)ctr).Count = 0;
         }

13. Lisää vielä Slider (sliderHA), jonka Value-ominaisuuden sidot HA-laskurin Count-ominaisuuteen. Huomaa laittaa More settings-kohdasta TwoWay päälle, ellei se ole valmiiksi.

Autolaskuri Android

1. Tee uusi projeksti AutolaskuriAndroid

2. Tyypiksi Templates/Visual C#/Android/Blank App

3. Kun projekti valmis, avaa Resources/layout/activity-main.xaml

4. Avaa toolbox

5. Raahaa ensimmäiseksi joko GridLayout tai AbsoluteLayout

6. Yritä rakennella käyttöliittymä.

7. Tosin voi olla aluksi helpointa ottaa xaml:n sisältö mallista

8. Jotta puhelimella mitään näkyisi, pitää MainActivity.cs:ssä olla rivi

    SetContentView(Resource.Layout.Main);

9. Tässäkin voi olla helpointa ottaa ensin malli

10. Laita puhelin USB-johdolla kiinni (ensin pitää olla laitettu debug-tilaan)

11. Valiste laite Any CPU vierestä

12. Aja