Dialogit. Juha Järvensivu 2008

Transkriptio

1 Dialogit Juha Järvensivu 2008

2 Yleistä 2 vaihtoehtoista toteutusmekanismia Layoutteihin perustuva dialogi Absoluuttisiin koordinaatteihin perustuva dialogi

3 Haasteita 1. Dialogin selkeä rakenne Rymittele komponentit selkeästi (rivit, sarakkeet, ryhmät (groupbox)) Jaa kokonaisuus useampaan osaan (välilehdet) Noudata annettuja tyyliohjeita 2. Ikkunan koon muutokset (skaalautuvuus) Suunnittele miten komponentit venyvät, kun ikkunan kokoa muutetaan 3. UI-tekstien muutokset (esim lokalisointi) Varaa riittävästi tilaa UI-teksteille

4 Esimerkki

5 Layoutteihin perustuva käyttöliittymä

6 Layoutit Ohjelmoija ei määrittele widgeteille tarkkaa kokoa, vaan ainoastaan suuntaa antavan koon Minimum size Maximum size Preferred size Ohjelmoija ei määrittele widgetin tarkkaa sijaintia ruudulla vaan ainoastaan lisää widgetin layouttiin Layout manageri

7 Layoutit Widgetti voi olla skaalautuva tai säilyttää oman oletuskoon (preferred size) Layout manageri laskee widgetin koon ja sijainnin uudelleen aina kun layout muuttuu tai ikkunan kokoa muutetaan Keskeytä layoutin toiminto widgettien lisäyksen ajaksi (suspend layout) Resize event

8 Layoutit Dialog dialog; Layout layout; layout.suspendlayout(); layout.addwidget(child1); layout.addwidget(child2); layout.resumelayout(); dialog.setlayout(layout); dialog.showmodal();

9 Layoutit Yleisimmin käytettyjä layoutteja ovat: Flowlayout Tablelayout Borderlayout Usein myös mahdollisuus custom-layoutin luontiin

10 Layoutit Tyypillistä layout-pohjaisissa dialogeissa on käyttäjän rajallinen mahdollisuus vaikuttaa layoutin ulkoasuun Margin (ikkunan marginaali) Spacing (komponenttien väli) Empty widgets and spacers (tyhjät widgetit, joiden avulla hienosäädetään ikkunan ulkoasua) Stretch (painoarvo joka määrittää miten tila komponenttien kesken jaetaan)

11 Flowlayout Yksinkertaisin layout, joka lisää widgetit peräkkäin pysty tai vaakasuunnassa

12 Borderlayout Sisältää rajallisen määrän komponentteja, jotka kiinnittyvät ikkunaan ja muuttavat kokoa ikkunan koon muuttuessa

13 Tablelayout Jakaa ikkunan soluihin, joihin widgetit sijoitetaan

14 Hierarkisuus Dialogi-ikkuna koostuu tyypillisesti useista sisäkkäisistä layouteista

15 Absoluuttisiin koordinaatteihin perustuva käyttöliittymä

16 Koordinaatteihin perustuva dialogi Dialogin ulkoasu perustuu käyttäjän määrittämiin koordinaatteihin ja koko tietoon Helpottaa dialogin ulkoasun toteuttamista, mutta ei tue ikkunan skaalautuvuutta Soveltuu huonosti nykyaikaisiin käyttöliittymiin Lähes kaikki UI-kirjastot suosivat layoutteihin perustuvia dialogeja

17 .NET dialogit

18 .NET dialogit Dialogit perustuvat koordinaatteihin layouttien sijaan Lisätty erillisiä layout widgettejä Ankkurointi ominaisuus Dockable widget

19 System.Windows.Forms.Form Ikkunan toteuttava luokka top-level window Dialogi Form.Show() Avaa ikkunan ruudulle Form.DesktopLocation Määrittää ikkunan sijainnin työpöydällä Huom! Pitää kutsua Show-metodin kutsumisen jälkeen ennen ikkunan piirtämistä ruudulle. Esimerkiksi Load eventin käsittelijässä

20 Modaalinen vs modaaliton dialogi // Esim 1. Modaaliton dialogi Form1 f1 = new Form1(); f1.show (); // Esim 2. Modaalinen dialogi Form f1 = new Form1(); f1.showdialog ();

21 System.Windows.Forms.Panel UI-komponentti, joka sisältää toisia UIkomponentteja (Container) Käytetään komponenttien ryhmittelyyn esim. radiopainikkeet Helpottaa kaikille komponenteille yhteisien ominaisuuksien toteuttamista Esim komponenttien disablointi

22 Panel p = new Panel(); Button b = new Button(); Textbox tb = new Textbox(); // Init panel p.color = Color.White; p.size = new Size(231,98); p.location = new Point(12,12); p.borderstyle = new BorderStyle.Fixed3D; // Add controls to panel p.controls.add(tb); p.controls.add(b); // Add panel to form this.controls.add(p); Panel

23 Esimerkkikoodi private void InitializeComponent() { this.button1 = new Button(); this.textbox1 = new Text Box(); SuspendLayout(); // button1 button1.location = new Point(120,116); button1.size = new Size(75,23); button1.text = button1 ; // textbox textbox1.location = new Point(120,146); textbox1.size = new Size(100,23); // form1 this.controls.add(this.button1); this.controls.add(this.textbox1); ResumeLayout(); }

24 Dockable widgets

25 Docking widgets Lapsi-ikkuna, joka kiinnittyy parentikkunaan ja muuttaa kokoa parent-ikkunan koon muuttuessa Mahdollisuus luoda layoutin omaista toiminnallisuutta Kelluvat ikkunan (esim visual studio)

26 Dock-property buttont.dock = DockStyle.TOP; this.controlsadd(buttont);

27 Objektien ankkurointi

28 Objektien ankkurointi (Anchor) Button btn = new Button(); btn.anchor = AnchorStyles.BOTTOM AnchorStyles.RIGHT; this.controls.add(btn); 20pix 20pix

29 Skaalautuvuus Ankkuroinnin avulla voidaan toteuttaa myös komponenttien skaalautuminen ikkunan kokoa muutettaessa Komponentti venyy ikkunan kokoa muutettaessa mikäli se ankkuroidaan vastakkaisista reunoistaan

30 Skaalautuvuus

31 Ikkunan jakaminen (splitting)

32 Splitter Komponentti joka jakaa ikkunan kahteen (tai useampaan) osaan siten, että käyttäjä voi säätää widgettien viemää tilaa Toteutettu.NET:ssä Dockable propertyn avulla

33 Splitter Container Left panel Splitter Right panel

34

35 System.Windows.Forms.Splitter panel1 = new Panel(); panel1.backcolor = Color.DarkGray; panel1.dock = DockStyle.LEFT; panel2 = new Panel(); panel2.backcolor = Color.LightGray; panel2.dock = DockStyle.FILL; splitter = new Splitter(); splitter.backcolor = Color.Black; this.controls.add(panel1); this.controls.add(splitter); this.controls.add(panel2);

36 Lähteitä How to: Create a windows forms application Windows forms controls System.Windows.Forms.Panel System.Windows.Forms.Form