Dialogit Juha Järvensivu juha.jarvensivu@tut.fi 2008
Yleistä 2 vaihtoehtoista toteutusmekanismia Layoutteihin perustuva dialogi Absoluuttisiin koordinaatteihin perustuva dialogi
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
Esimerkki
Layoutteihin perustuva käyttöliittymä
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
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
Layoutit Dialog dialog; Layout layout; layout.suspendlayout(); layout.addwidget(child1); layout.addwidget(child2); layout.resumelayout(); dialog.setlayout(layout); dialog.showmodal();
Layoutit Yleisimmin käytettyjä layoutteja ovat: Flowlayout Tablelayout Borderlayout Usein myös mahdollisuus custom-layoutin luontiin
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)
Flowlayout Yksinkertaisin layout, joka lisää widgetit peräkkäin pysty tai vaakasuunnassa
Borderlayout Sisältää rajallisen määrän komponentteja, jotka kiinnittyvät ikkunaan ja muuttavat kokoa ikkunan koon muuttuessa
Tablelayout Jakaa ikkunan soluihin, joihin widgetit sijoitetaan
Hierarkisuus Dialogi-ikkuna koostuu tyypillisesti useista sisäkkäisistä layouteista
Absoluuttisiin koordinaatteihin perustuva käyttöliittymä
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
.NET dialogit
.NET dialogit Dialogit perustuvat koordinaatteihin layouttien sijaan Lisätty erillisiä layout widgettejä Ankkurointi ominaisuus Dockable widget
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ä
Modaalinen vs modaaliton dialogi // Esim 1. Modaaliton dialogi Form1 f1 = new Form1(); f1.show (); // Esim 2. Modaalinen dialogi Form f1 = new Form1(); f1.showdialog ();
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
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
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(); }
Dockable widgets
Docking widgets Lapsi-ikkuna, joka kiinnittyy parentikkunaan ja muuttaa kokoa parent-ikkunan koon muuttuessa Mahdollisuus luoda layoutin omaista toiminnallisuutta Kelluvat ikkunan (esim visual studio)
Dock-property buttont.dock = DockStyle.TOP; this.controlsadd(buttont);
Objektien ankkurointi
Objektien ankkurointi (Anchor) Button btn = new Button(); btn.anchor = AnchorStyles.BOTTOM AnchorStyles.RIGHT; this.controls.add(btn); 20pix 20pix
Skaalautuvuus Ankkuroinnin avulla voidaan toteuttaa myös komponenttien skaalautuminen ikkunan kokoa muutettaessa Komponentti venyy ikkunan kokoa muutettaessa mikäli se ankkuroidaan vastakkaisista reunoistaan
Skaalautuvuus
Ikkunan jakaminen (splitting)
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
Splitter Container Left panel Splitter Right panel
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);
Lähteitä How to: Create a windows forms application http://msdn2.microsoft.com/en-us/library/ms235634.aspx Windows forms controls http://msdn2.microsoft.com/en-us/library/ettb6e2a.aspx System.Windows.Forms.Panel http://msdn2.microsoft.com/enus/library/system.windows.forms.panel.aspx System.Windows.Forms.Form http://msdn.microsoft.com/library/default.asp?url=/library/enus/cpref/html/frlrfsystemwindowsformsformclasstopic.asp