Grafični uporabniški vmesnik in C#

Grafični uporabniški vmesnik in C#

Avtor: Matija Lokar

Več o projektu...

Uporabniški vmesnik

  • Najbolj splošno:

    • Uporabniški vmesnik je vse, kar uporabnik vidi, sliši in česar se dotika pri delu z računalnikom.

  • Ožje:

    • Programska oprema (ali del), ki omogoča dialog uporabnika z računalnikom.
  • Komunikacija pri tem poteka v dve smeri. Prek vhodnega dela uporabnik sistem upravlja, izhodni del pa uporabniku prikazuje rezultate dejanj in stanje sistema.

Z Wikipedije

Uporabniški vmesnik (angleško user interface) je izraz, ki opisuje procedure in metode, s katerimi uporabnik upravlja računalniški program. To so lahko meniji, vnosni obrazci, sporočila o napakah in postopki preko tipkovnice. Grafični uporabniški vmesnik je vmesnik, ki uporablja ikone (majhne sličice) in uporabniku omogoča izbiro menijskih ukazov z miško. Za grafični uporabniški vmesnik se uporabljata dve kratici: GUI (graphical user interface) ali WIMP (ki je lahko kratica za Windows, Icons, Menus, Pointers ali pa za Windows, Icons, Mouse, Pull-down menus).

Grafični uporabniški vmesnik

  • Grafični uporabniški vmesnik (angleško graphical user interface, okrajšano GUI, včasih se v angleščini izgovori »gooey« [guej], oziroma slovensko kar [gui]) je postopek vzajemnega delovanja z računalnikom s pomočjo podob neposrednega upravljanja grafičnih slik in elementov (widgets) z besedilom. Kot že sam opis kratice intuitivno pove, gre za vmesnik med uporabnikom in računalnikom oziroma programsko opremo.
  • Grafični uporabniški vmesniki prikazujejo elemente kot so ikone, okna in drugi pripomočki (gadgets). Prednika grafičnih uporabniških vmesnikov so razvili raziskovalci Raziskovalnega inštituta Stanford v Menlo Parku pod vodstvom izumitelja Douglasa Carla Engelbarta. Ta vmesnik je v večuporabniškem operacijskem sistemu On-Line System uporabljal hiperpovezave v besedilu in delo z miško. Zamisel hiperpovezav so z grafiko naprej razvili in razširili raziskovalci na raziskovalnem oddelku Xerox PARC v Palo Altu. Ta grafični uporabniški vmesnik je bil glavni vmesnik za računalnik Xerox Alto iz leta 1973. To je bil predhodnik vseh sodobnih splošno uporabnih grafičnih uporabniških vmesnikov. Zaradi tega še danes nekateri za ta razred vmesnika uporabljajo kratico PUI (PARC User Interface). Tedaj je PUI vseboval grafične elemente kot so okna, menuji, gumbi, potrditvena polja in ikone. V njem je bilo poleg tipkovnice moč podajati ukaze s kakšno vhodno napravo, kot so miška, sledna krogla ali zaslon na dotik. Takšne lastnosti vmesnikov PUI poudarja angleški akronim WIMP, ki je okrajšava za Windows, Icons, Menus in Poiting device.

API in GUV

  • Računalniški programerji običajno uporabljajo ustrezne API vmesnike (angl. Application Programming Interface) oziroma programske knjižnice (v visokonivojskih programskih jezikih), ki jim omogočajo enostavnejšo in hitrejšo implementacijo grafičnih uporabniških vmesnikov.
  • Razen grafičnega uporabniškega vmesnika štejemo v kategorijo uporabniških vmesnikov tudi TUI (angl. Text User Interface) in CLI (angl. Command Line Interface) vmesnika.

Načini upravljanja z UV

  • Ukazni način

    • ukaze natipkamo.
    • Ukazi so kratka imena oziroma kombinacije kontrolne, shift ali alt tipke z običajnimi tipkami (hitre tipke).
    • Ta način komunikacije zahteva poznavanje sintakse jezika in imen ukazov.
    • Omogoča hiter način dela.

  • Izbira preko menija:

    • seznama akcij, mogočih v danem trenutku.
    • Uporabnik izbere ukaz v prikazanem meniju z uporabo tipkovnice ali miške.
    • izvlečni ali roletni meniji (angl. pull-down menu) ter prikazni ali dvižni meniji (angl. pop-up menu).
    • Meniji se pojavijo s klikom miške na ustrezno mesto na zaslonu, kjer ostanejo,
    • Dvižni meni pogosto prikličemo s klikom na desno tipko miške.

Načini upravljanja z UV – nad.

  • Pogovorna okna:

    • komunikacija preko oken

      • vpisna polja
      • opisna polja
      • ukazni gumbi, ki omogočajo, npr. dokončno izbiro parametrov ali izbiro privzetih vrednosti ali preklic našega ukaza.

      • Zavihki

        • skupine sorodnih nastavitev, ki sodijo v isto pogovorno okno

  • Neposredna manipulacija

    • način komunikacije, pri kateri uporabnik z miško ali drugim interaktivnim vmesnikom izbira objekte na zaslonu ter z njimi upravlja ali manipulira.
    • Omogočajo jo grafični uporabniški vmesniki, ki uporabljajo omizje (angl. desktop), na katerem so ikone, ki ponazarjajo tipične delovne objekte iz realnega sveta (npr. koš za smeti, mapa).

Dogodkovno programiranje

  • Programer med programiranjem ne predvidi, kako bo program tekel od začetka do konca, ampak o njegovem poteku neposredno odloča uporabnik programa

  • Pri dogodkovnem programiranju se določen program sproži, ko se izvrši ustrezen dogodek.

    • Program je razdeljen na več manjših delov, od katerih vsak vsebuje navodila, potrebna za izvršitev določenega dogodka

  • Zagon programa

    • Prikaz osnovnega vmesnika, ki vsebuje objekte nad katerim se lahko izvede dogodek

  • Programi z GUV

    • Tipični primer dogodkovnega programiranja

Dogodkovno programiranje, GUV in C#

  • V C# Express izberemo Windows Forms Application
  • Način Design
  • Način Code
(9.png)

Preklopi

  • Desni klik

    • View Designer
    • View Code
(10a.png) (10b.png)

Kje je program?

  • Tri datoteke

    • Form1.cs

      • Dejansko bomo kodo pisali več ali manj tukaj

    • Program.cs

      • Vsebuje metodo main, ki "zažene zadevo"

    • Form1.Designer.cs

      • V Solution Explorer kliknemo na + pred Form1.cs

      • Auto-generirana koda

        • Nikoli ne popravljamo ročno, ker bo okolje samo lahko stvari "popravilo nazaj"
  • Oglejmo si kodo

Načrtovanje uporabniškega vmesnika

  • Dodajanje različnih komponent (control)
  • View Toolbox
  • Drag and Drop
  • Properties
  • Pogled v kodo
(12.png)

Windows.Forms

Dedovanje

(13.png)

Skupne lastnosti

PropertyDescription
AnchorSpecifies how the control behaves when its container is resized. See the next section for a detailed explanation of this property.
BackColorThe background color of a control.
BottomSpecifies the distance from the top of the window to the bottom of the control. This is not the same as specifying the height of the control.
DockDocks a control to the edges of its container. See the next section for a more detailed explanation of this property.
EnabledSetting Enabled to true usually means that the control can receive input from the user. Setting Enabled to false usually means that it cannot.
ForeColorThe foreground color of the control.
HeightThe distance from the top to the bottom of the control.
LeftThe left edge of the control relative to the left edge of its container.
NameThe name of the control. This name can be used to reference the control in code.
ParentThe parent of the control.
RightThe right edge of the control relative to the left edge of its container.
TabIndexThe number the control has in the tab order of its container.
TabStopSpecifies whether the control can be accessed by the Tab key.
TagThis value is usually not used by the control itself. It enables you to store information about the control on the control itself. When this property is assigned a value through the Windows Forms Designer, you can only assign a string to it.
TextHolds the text that is associated with this control.
TopThe top edge of the control relative to the top of its container.
VisibleSpecifies whether the control is visible at runtime.
WidthThe width of the control.

Najbolj tipične komponente

  • Label

    • napis / oznaka

    • Namen

      • pojasnjevanje drugih komponent
      • izpis obvestil, rezultatov

    • Lastnosti

      • Text (kaj na oznaki piše)

  • TextBox

    • Vnosno polje

    • Namen

      • Vnos podatkov

    • Lastnosti

      • Text (vsebina vnosnega polja)
      • Lines (tabela vrstic)

Najbolj tipične komponente

  • Button

    • Gumb

    • Namen

      • Proženje dogodkov

    • Lastnosti

      • Text (kaj na gumbu piše)

  • GroupBox

    • vsebnik

    • Namen

      • Združuje druge gradnike
      • RadioButton …

Programsko spreminjanje lastnosti

  • Form1_Load

    • Dejansko sprogramiramo metodo, ki se zgodi ob dogodku Load
    • Ko se naloži ustrezna forma
private void Form1_Load(object sender, EventArgs e)
{
    textBox1.Lines = new string[]{"Blo","Blu"};
    label1.Text = "Spremenil sem se!";
}
(17a.png) (17b.png)

Dogodkovno programiranje

  • Kaj so dogodki

  • Podobno kot izjeme

    • Nek objekt vrže (dvigne) dogodek (kot izjema s throw)
    • Lahko predpišemo, kaj se zgodi, ko pride do dogodka
  • Ne obstaja pa try … catch

  • Prijava (subscription) na dogodek

    • Sestava metode, ki se izvede, ko se dogodek zgodi
    • Event handlers

Primer

static int stevec = 0;

static string izpisniNiz =
     "Lepo se izpisujem črko za črko, znak za znakom. Vse dokler ne bo pritisnjena kaka tipka ... ";

static void Main(string[] args)
{
    System.Timers.Timer mojProzilec = new System.Timers.Timer(100);
    mojProzilec.Elapsed += new System.Timers.ElapsedEventHandler(IzpisiZnak);
    mojProzilec.Start();
    Console.ReadKey();
}

static void IzpisiZnak(object izvor, System.Timers.ElapsedEventArgs e)
{
    Console.Write(izpisniNiz[stevec++ % izpisniNiz.Length]);
}

Primer

System.Timers.Timer mojProzilec = new System.Timers.Timer(100);
    mojProzilec.Elapsed += new System.Timers.ElapsedEventHandler(IzpisiZnak);
    mojProzilec.Start();
    Console.ReadKey();
}

static void IzpisiZnak(object izvor, System.Timers.ElapsedEventArgs e)
{
    Console.Write(izpisniNiz[stevec++ % izpisniNiz.Length]);
}

Timer vsebuje dogodek Elapsed
Upravnik dogodkov:
  void functionName(object
  source, ElapsedEventArgs e) Prijava na dogodek:
 mojProzilec.Elapsed +=
new System.Timers.ElapsedEventHandler(IzpisiZnak); Dodali (+=) smo prijavo še na ta dogodek

Lahko dodamo še kak upravnik dogodkov!

Seveda je to šele začetek zgodbe:
Kako sami ustvarjamo dogodke …

Vendar je za našo zgodbo o GUI to načeloma dovolj

Primer

Radi bi se prijavili na dogodek Klik na gumb

(21a.png) (21b.png)

Prijava na dogodke

  • Na najbolj značilne za komponento

    • Dvojni klik
private void button1_Click(object sender, EventArgs e)
 {
      label1.Text = "Au, boli....";
 }
  • Klik na strelo v Properties
(22.png)

Poglejmo kodo

Form1.cs

 private void button1_Click(object sender, EventArgs e)
 {
       label1.Text = "Au, boli....";
 }

 private void kajPa(object sender, EventArgs e)
 {
       label1.Text = "Da me ne boš slučajno ...";
 }


V Form1.designer.cs

 this.button1.Click += new System.EventHandler(this.button1_Click);
 this.button1.MouseHover += new System.EventHandler(this.kajPa);

Dogodki

EventDescription
ClickOccurs when a control is clicked. In some cases, this event also occurs when a user presses the Enter key.
DoubleClickOccurs when a control is double-clicked. Handling the Click event on some controls, such as the Button control, means that the DoubleClick event can never be called.
DragDropOccurs when a drag-and-drop operation is completed — in other words, when an object has been dragged over the control, and the user releases the mouse button.
DragEnterOccurs when an object being dragged enters the bounds of the control.
DragLeaveOccurs when an object being dragged leaves the bounds of the control.
DragOverOccurs when an object has been dragged over the control.
KeyDownOccurs when a key is pressed while the control has focus. This event always occurs before KeyPress and KeyUp.
KeyPressOccurs when a key is pressed while a control has focus. This event always occurs after KeyDown and before KeyUp. The difference between KeyDown and KeyPress is that KeyDown passes the keyboard code of the key that has been pressed, whereas KeyPress passes the corresponding char value for the key.
KeyUpOccurs when a key is released while a control has focus. This event always occurs after KeyDown and KeyPress.
GotFocusOccurs when a control receives focus. Do not use this event to perform validation of controls. Use Validating and Validated instead.
LostFocusOccurs when a control loses focus. Do not use this event to perform validation of controls. Use Validating and Validated instead.
MouseDownOccurs when the mouse pointer is over a control and a mouse button is pressed. This is not the same as a Click event because MouseDown occurs as soon as the button is pressed and before it is released.
MouseMoveOccurs continually as the mouse travels over the control.
MouseUpOccurs when the mouse pointer is over a control and a mouse button is released.
PaintOccurs when the control is drawn.
ValidatedFires when a control with the CausesValidation property set to true is about to receive focus. It fires after the Validating event finishes and indicates that validation is complete.
ValidatingFires when a control with the CausesValidation property set to true is about to receive focus. Note that the control to be validated is the control that is losing focus, not the one that is receiving it.
0%
0%