2013-01-23 1 Winstrand Development
Användargränssnitt Hittills har vi skapat program för kommandoraden. Den bakomliggande koden fungerar som den ska, men vi upptäcker snabbt att programmen är begränsade då vi bara läser in och skriver ut text i form av strängar. Moderna program använder sig av ett grafiskt användargränssnitt (Graphical User Interface, GUI) Winstrand Development 2013-01-23 2
Grafiska användargränssnitt I ett GUI har kan vi bygga upp applikationen av flera grafiska element såsom textrutor, knappar och menyer Label TextBox Read-Only TextBox Button Winstrand Development 2013-01-23 3
Grafiska användargränssnitt Fördelen med GUI är att Vi får en överblick av programmet Vi kan trycka på knappar för att låta någonting hända i kommandotolken måste man skriva text Användandet av programmet kan bli mer intuitivt vi kan gruppera liknande kontroller. Programmet avslutas när användaren vill man trycker på krysset eller går via menyer. Winstrand Development 2013-01-23 4
I.NET-ramverket finns som innehåller grafiska komponenter. Med Visual Studio kan vi designa våra program genom att dra-och-släppa (dragand-drop) komponenter precis så som vi vill ha dem. Koden för de grafiska komponenterna genereras automatiskt Winstrand Development 2013-01-23 5
Skapa ett projekt Ett nytt projekt skapas via menyvalen File New Project Välj Application i dialogen. Winstrand Development 2013-01-23 6
Designläge Från fönstret Toolbox kan vi välja de komponenter vi vill ska ingå i applikationen Vi drar in dessa i designfönstret och kontrollen läggs på vald plats i vår form Verktygslådan Designfönstret Kontrollens Inställning Winstrand Development 2013-01-23 7
Verktygslådan Toolbox Innehåller de grafiska komponenter som kan användas för att bygga användargränssnittet Öppnas i menyn View Toolbox Från denna drar man komponenterna till designfönstret Winstrand Development 2013-01-23 8
Verktygslådan Toolbox De grundläggande kontrollerna är Button (knapp) en tryckknapp, vi förväntar oss att någonting ska hända Label ( etikett ) text som inte kan ändras av användaren. TextBox text som kan ändras av användaren Winstrand Development 2013-01-23 9
Inställningar Properties När man väljer en kontroll i designläget får man i fönstret Properties upp de inställningar som kan göras på valda kontrollen Inställningarna är olika för varje kontroll TextBox Button Winstrand Development 2013-01-23 10
Inställningar Properties Sortera på kategori eller namn Vald inställning gråmarkeras Information om vald inställning (i detta fallet Text) Winstrand Development 2013-01-23 11
Vanliga Properties De två vanligaste inställningarna som används för kontroller är Name Namnet på kontrollen. Används när vi ska komma åt kontrollens innehåll i koden. Text Den text som visas i kontrollen. I en TextBox är det den text som användaren kan skriva in Winstrand Development 2013-01-23 12
Vanliga Properties Name Är sättet vi identifierar kontrollen. Kontroller är även de variabler inställningen Name är alltså kontrollens variabelnamn Visual Studio tilldelar ett unikt namn till varje kontroll De kontroller som man använder i kod ska namnges så vi lättare kan identifiera denna (se nästa sida) Används inte kontrollen i koden behöver vi inte ändra namnet (vanligt med Label) Winstrand Development 2013-01-23 13
Vanliga Properties Name När vi namnger variabler finns två huvudgrupper Prefix - tre bokstäver långt för att indikera typ av kontroll Suffix Skriv ut hela kontrollens typ Namngivningsexempel Kontroll Prefix Suffix (hela typens namn) TextBox txtinfo (txt-) infotextbox Label lblinfo (lbl-) infolabel Button btninfo (btn-) infobutton Winstrand Development 2013-01-23 14
Vanliga Properties Name Hur man namnger kontroller är även detta företagsspecifikt följ dessa i första hand Vanliga prefix är: Button btn CheckBox chk Image img Label lbl ListControl lst Panel pnl RadioButton opt TextBox txt Winstrand Development 2013-01-23 15
Vanliga Properties Text Propertyn Text är av typen string. Vi kan ändra denna samtidigt som programmet körs Vanligen använder man en TextBox för att skriva ut meddelanden. Tänk på att det är TextBox.Text som är strängen vi skriver ut. txtresult.text = "En sträng"; Winstrand Development 2013-01-23 16
Vanliga Properties Text I programmet nedan finns 10 kontroller (plus den Form kontrollerna ligger i) där alla har olika värde på propertyn Text Kontrolltyp Text Label Subtotal Discount Percent Discont Amount Total TextBox 200 TextBox (read only) 10,0% 20,00 kr 180,00 kr Button Calculate Exit Form Invoice Total Winstrand Development 2013-01-23 17
Arbeta med 2013-01-23 18 Winstrand Development
Arbeta med Events -applikationer är eventstyrda. Detta innebär att applikationen väntar på att en händelse event ska inträffa Till skillnad från ett linjärt, synkront, programflöde som konsollapplikationer, sker events asynkront. Att programmet är asynkront betyder rent praktiskt att vi inte vet när en händelse kommer att inträffa Winstrand Development 2013-01-23 19
Arbeta med Events Det vanligaste eventet som genereras är det som inträffar när vi trycker på en knapp. Det är eventet som anropar koden metoden som ska utföras när vi t.ex. trycker på en knapp. Metoden som tar hanterar eventet kallas för event handler eller händelsehanterare. Winstrand Development 2013-01-23 20
Arbeta med Events I Visual Studio finns det flera olika sätt att generera ett event. Dubbelklicka på en kontroll för att skapa det typiska eventet för kontrollen (t.ex. när man trycker på en knapp) Välja i Property-fönstret vilken eventhanteraren som ska användas Koda eventet samt eventhanteraren själv Events är kopplingen mellan det grafiska gränssnitt användaren ser och själva logiken som ska köras. Winstrand Development 2013-01-23 21
Arbeta med Events Exempel på när en händelse genereras Detta är knappens event handler //Inuti kodfilen till vår form private void btnconvert_click(object sender, EventArgs e) { //Do text transformation txtresult.text = txtuserinput.text.toupper(); } Winstrand Development 2013-01-23 22
Arbeta med Events Vi kan komma åt en kontrolls events via Properties-fönstret Blixten som symboliserar events Eventet som genereras när vi klickar på knappen Winstrand Development 2013-01-23 23