Dialogit. Juha Järvensivu 2007

Transkriptio

1 Dialogit Juha Järvensivu 2007

2 Dialogi

3 Yleistä Käyttöliittymäkirjastot tarjoavat valmiin toteutuksen tavallisimmista UI-komponenteista.NET: System.Windows.Forms Peruskomponentteja yhdistelemällä voidaan rakentaa monimutkaisempia komponentteja.net: UserControl Kirjastot tarjoavat myös joitakin valmiita dialogeja FileDialog ColorDialog FontDialog MessageDialog PrintPreview

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

5 Layout Absoluuttisiin koordinaatteihin perustuva dialogi Helppo toteuttaa Layoutmanageriin perustuva dialogi Parempi tuki skaalautuvuudelle Kahden edellisen yhdistelmä Objektien ankkurointi

6 Hierarkisuus UI-komponentit voivat sijaita toisen UIkomponentin sisällä

7 .NET (absoluuttiset koordinaatit)

8 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ä

9 Modaalisuus // Esim 1. Modaaliton dialogi Form1 f1 = new Form1(); f1.show (); // Esim 2. Modaalinen dialogi Form f1 = new Form1(); f1.showdialog ();

10 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

11 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

12 UI-komponenttien lisääminen Oletustoiminta formiin Lisättävälle komponentille annetaan sijaintikoordinaatit ja koko Komponentti lisätään ikkunan Controls propertyyn Mikäli komponentteja lisätään useita, kannattaa layoutin toiminta keskeyttää lisäyksen ajaksi SuspendLayout(); ResumeLayout();

13 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(); }

14 .NET (objektien ankkurointi)

15 Objektien ankkurointi (Anchor) Kiinnittää komponentin reunan suhteessa isäntäikkunan reunaan ikkunaa venytettäessä komponentin ja ikkunan reunojen välinen etäisyys pysyy vakiona AnchorStyles { BOTTOM,LEFT,RIGHT,TOP, NONE} Oletusarvo LEFT ja TOP

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

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

18 Skaalautuvuus

19 Dock-property Kiinnittää komponentin ikkunan reunaan Komponentin koko muuttuu ikkunan koon muuttuessa DockStyle { BOTTOM,LEFT,RIGHT,TOP,FILL,NONE} Oletusarvo NONE Komponentit kiinnittyvät Z-arvon mukaisessa järjestyksessä

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

21 Ikkunan jakaminen (splitting)

22 Ikkunan jakaminen

23 System.Windows.Forms.Splitter Ikkuna voidaan jakaa osiin splitterkomponentin avulla Container Left panel Splitter Right panel

24 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);

25 Valikot

26 Valikot

27 Valikot Kaksi vaihtoehtoista tapaa toteuttaa MenuStrip +ToolStripMenuItem (.NET 2.0) MainMenu + MenuItem (.NET 1.0) Eventtejä Click Kutsutaan kun valikkoalkiota klikattiin DropDownMenuOpening Kutsutaan kun valikkoa ollaan avaamassa

28 Hierarkinen toteutus MenuStrip File New Project File Open Save Help

29 Esimerkki MenuStrip File New Project File Open Save Help menustrip1 = new MenuStrip(); filemenuitem = new ToolStripMenuItem(); newmenuitem = new ToolStripMenuItem(); menustrip1.items.add(filemenuitem); filemenuitem.items.add(newmenuitem); // Liitetään kokonaisuus formiin this.mainmenustrip = menustrip1;

30 Valikon pikavalinnat Pikanäppäin (shortcutkey) Esim Ctrl +N. mymenuitem.shortcutkeys = Keys.Control Keys.N; mymenuitem. ShowShortcutKeys = true; Alt-tag Esim. File mymenuitem.text = &File ;

31 Työkalupalkki

32 System.Windows.Forms.ToolStrip ToolStrip ts1 = new ToolStrip(); // Lisätään uusi tekstityyppinen itemi ts1.items.add( item1 ); // Näytetään tekstinä (ts1.items[0]).displaystyle = ToolStripItemDisplayStyle.Text; // Liitetään tapahtumakuuntelija (ts1.items[0]).click +=new EventHandler(item_Click); // Liitetään ToolStrip formiin this.controls.add(ts1); ToolStripItem DisplayStyle: Text Image None Image+Text

33 ToolStripItem Kantaluokka objekteille, joita voidaan lisätä työkalupalkkiin, valikkoon ja tilariville ToolStripButton ToolStripLabel ToolStripSeparator ToolStripControlHost ToolStripComboBox ToolStripTextBox ToolStripProgressBar ToolStripDropDownItem ToolStripMenuItem ToolStripSplitButton ToolSTripDropDownButton ToolStripStatusLabel

34 Oman komponentin tekeminen

35 System.Windows.Forms.UserControl Mahdollista luoda omia komponentteja kirjaston tarjoamia komponentteja yhdistelemällä. Uutta komponenttia voidaan käyttää, kuten muitakin UI-komponentteja Hyödyllinen erityisesti silloin, jos samanlaista komponenttia tarvitaan monta kertaa (Esim osoitetietojen kysyminen)

36 Formin periyttäminen Myös formeja voi periyttää kuten muitakin luokkia Perityn formin komponentit näkyvät editorissa, mutta niiden asetuksia ei pääse muokkaamaan.

37 Esimerkki Valikko + pikanäppäimet Ikkunan jakaminen (splitter) UserControl + objektien ankkurointi Formin periyttäminen Lista-komponentti

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