6. Tworzenie GUI - Graficzny Interfejs Użytkownika

Na tej lekcji powinniście uważać bo GUI w każdym języku tworzy się inaczej. Tak samo jest z autoit.

 

GUI(ang. Graphic User Interface) to jest to wszystko w programie co widzimy na monitorze (czyli rożnego rodzaju przyciski, grafika, menu, paski postępu, suwaki itd.). Wszystkie elementy GUI w autoit możecie zobaczyć uruchamiając ten skrypt:

; AutoIt 3.0.103 example
; 17 Jan 2005 - CyberSlug
; This script shows manual positioning of all controls;
;   there are much better methods of positioning...
#include <GuiConstantsEx.au3>
#include <AVIConstants.au3>
#include <TreeViewConstants.au3>

; GUI
GuiCreate("Sample GUI", 400, 400)
GuiSetIcon(@SystemDir & "\mspaint.exe", 0)

; MENU
GuiCtrlCreateMenu("Menu&One")
GuiCtrlCreateMenu("Menu&Two")
GuiCtrlCreateMenu("MenuTh&ree")
GuiCtrlCreateMenu("Menu&Four")

; CONTEXT MENU
$contextMenu = GuiCtrlCreateContextMenu()
GuiCtrlCreateMenuItem("Context Menu", $contextMenu)
GuiCtrlCreateMenuItem("", $contextMenu) ;separator
GuiCtrlCreateMenuItem("&Properties", $contextMenu)

; PIC
GuiCtrlCreatePic("logo4.gif",0,0, 169,68)
GuiCtrlCreateLabel("Sample pic", 75, 1, 53, 15)
GuiCtrlSetColor(-1,0xffffff)

; AVI
GuiCtrlCreateAvi("sampleAVI.avi",0, 180, 10, 32, 32, $ACS_AUTOPLAY)
GuiCtrlCreateLabel("Sample avi", 170, 50)

; TAB
GuiCtrlCreateTab(240, 0, 150, 70)
GuiCtrlCreateTabItem("One")
GuiCtrlCreateLabel("Sample Tab with tabItems", 250, 40)
GuiCtrlCreateTabItem("Two")
GuiCtrlCreateTabItem("Three")
GuiCtrlCreateTabItem("")

; COMBO
GuiCtrlCreatecombo("Sample Combo", 250, 80, 120, 100)

; PROGRESS
GuiCtrlCreateProgress(60, 80, 150, 20)
GuiCtrlSetData(-1, 60)
GuiCtrlCreateLabel("Progress:", 5, 82)

; EDIT
GuiCtrlCreateEdit(@CRLF & "  Sample Edit Control", 10, 110, 150, 70)

; LIST
GuiCtrlCreateList("", 5, 190, 100, 90)
GuiCtrlSetData(-1, "a.Sample|b.List|c.Control|d.Here", "b.List")

; ICON
GuiCtrlCreateIcon("shell32.dll", 1, 175, 120)
GuiCtrlCreateLabel("Icon", 180, 160, 50, 20)

; LIST VIEW
$listView = GuiCtrlCreateListView("Sample|ListView|", 110, 190, 110, 80)
GuiCtrlCreateListViewItem("A|One", $listView)
GuiCtrlCreateListViewItem("B|Two", $listView)
GuiCtrlCreateListViewItem("C|Three", $listView)

; GROUP WITH RADIO BUTTONS
GuiCtrlCreateGroup("Sample Group", 230, 120)
GuiCtrlCreateRadio("Radio One", 250, 140, 80)
GuiCtrlSetState(-1, $GUI_CHECKED)
GuiCtrlCreateRadio("Radio Two", 250, 165, 80)
GUICtrlCreateGroup ("",-99,-99,1,1)  ;close group

; UPDOWN
GuiCtrlCreateLabel("UpDown", 350, 115)
GuiCtrlCreateInput("42", 350, 130, 40, 20)
GuiCtrlCreateUpDown(-1)

; LABEL
GuiCtrlCreateLabel("Green" & @CRLF & "Label", 350, 165, 40, 40)
GuiCtrlSetBkColor(-1, 0x00FF00)

; SLIDER
GuiCtrlCreateLabel("Slider:", 235, 215)
GuiCtrlCreateSlider(270, 210, 120, 30)
GuiCtrlSetData(-1, 30)

; INPUT
GuiCtrlCreateInput("Sample Input Box", 235, 255, 130, 20)

; DATE
GuiCtrlCreateDate("", 5, 280, 200, 20)
GuiCtrlCreateLabel("(Date control expands into a calendar)", 10, 305, 200, 20)

; BUTTON
GuiCtrlCreateButton("Sample Button", 10, 330, 100, 30)

; CHECKBOX
GuiCtrlCreateCheckbox("Checkbox", 130, 335, 80, 20)
GuiCtrlSetState(-1, $GUI_CHECKED)

; TREEVIEW ONE
$treeOne = GuiCtrlCreateTreeView(210, 290, 80, 80)
$treeItem = GuiCtrlCreateTreeViewItem("TreeView", $treeOne)
GuiCtrlCreateTreeViewItem("Item1", $treeItem)
GuiCtrlCreateTreeViewItem("Item2", $treeItem)
GuiCtrlCreateTreeViewItem("Foo", -1)
GuiCtrlSetState($treeItem, $GUI_EXPAND)

; TREEVIEW TWO
$treeTwo = GuiCtrlCreateTreeView(295, 290, 103, 80, $TVS_CHECKBOXES)
GuiCtrlCreateTreeViewItem("TreeView", $treeTwo)
GuiCtrlCreateTreeViewItem("With", $treeTwo)
GuiCtrlCreateTreeViewItem("tvs_checkboxes", $treeTwo)
GuiCtrlSetState(-1, $GUI_CHECKED)
GuiCtrlCreateTreeViewItem("Style", $treeTwo)

; GUI MESSAGE LOOP
GuiSetState()
While GuiGetMsg() <> $GUI_EVENT_CLOSE
WEnd

Tak więc wiemy już co to jest GUI i z jakich elementów się składa. Teraz zaczniemy tworzyć je od podstaw. Aby stworzyć GUI należy użyć funkcji GUICreate, która stworzy nam główne okno programu:

GuiCreate("Sample GUI", 400, 400)

Funkcja ta przyjmuje konieczne argumenty: "tytuł"

i opcjonalne: Szerokość, Wysokość, Pozycja X, Pozycja Y, styl, exstyl, uchwyt rodzica

Styl i exstyl służą do ustawiania wyglądu okna

Uchwyt rodzica to uchwyt nadrzędnego okna (o uchwytach zaraz powiem)

Funkcja ta zwraca właśnie uchwyt(ang. handle) do tego GUI (czyli jeśli jakaś funkcja będzie potrzebować uchwyt do tego gui to musimy go pobrać właśnie z tej funkcji)

 

Jednak samo GUICreate nie wystarczy byśmy mogli zobaczyć nasze okno, ponieważ po stworzeniu jest ono domyślnie ukryte. Aby je zobaczyć musimy użyć funkcji GUISetState

GuiSetState(@SW_SHOW)

Funkcja przyjmuje opcjonalnie argumenty: flaga, uchwyt do gui

Flaga czyli co ma się stać z tym gui(czy ma być pokazane, zminimalizowane, nieaktywne itd) przykładowa flaga: @SW_SHOW czyli pokaż gui. Więcej flag możecie znaleźć w helpie edytora SciTE

Uchwyt do GUI zwraca funkcja GUICreate. Używamy uchwytów jeśli mamy kilka GUI stworzonych w programie i chcemy ustawić status tylko jednemu z nich. Za pomocą uchwytów program rozpoznaje do którego GUI ma się odwołać.

 

Można by powiedzieć, że to już wszystko, tyle że program automatycznie zamyka się zaraz po utworzeniu i ustawieniu GUI statusu @SW_SHOW. Dlatego na końcu dodamy pętle która nie zakończy się dopóki nie zamkniemy programu(tzw. główna pętla programu). Ale skąd będziemy wiedzieć kiedy użytkownik wciśnie krzyżyk (zamknie program). Otóż do tego służy nam zmienna która zawiera jakby ID krzyżyka- $GUI_EVENT_CLOSE. Niestety w kodzie zmienna ta nie jest nigdzie zadeklarowana. Musimy więc dołączyć plik z deklaracją tej zmiennej bo inaczej wystąpi błąd podczas kompilowania. Użyjemy do tego dyrektywy #include za pomocą której możemy do programu dołączać pliki z rozszerzeniem .au3 (tzw. Biblioteki/UDF) które zawierają dodatkowe funkcje lub deklaracje zmiennych. Wiele z tych plików znajduje się w głównym katalogu autoit, ale także możemy napisać własną lub pobrać czyjąś z oficjalnego forum autoit. Wtedy musimy wrzucić je do folderu, w którym znajduje się nasz zapisany skrypt lub do folderu autoit by kompilator wiedział gdzie ma ich szukać. Uwaga dyrektywy podajemy zawsze na początku kodu! Wróćmy do naszego GUI. Więc aby dodać deklaracje naszej zmiennej zawierającej ID krzyżyka musimy dołączyć bibliotekę: GUIConstantsEx.au3. Teraz już tylko musimy odczytać co dzieje się w naszym GUI (żeby móc porównać naszą zmienną do działań wykonywanych w gui). Aby odczytać co dzieje się w naszym gui (co jest klikane, wybierane itd) użyje funkcji GuiGetMsg(), ktłra zwraca ID wciskanej/wybieranej rzeczy. Napiszę więc nasz kod w całości:

#include <GUIConstantsEx.au3>
GuiCreate("Sample GUI", 400, 400)
GUISetState(@SW_SHOW)
While GuiGetMsg()<>$GUI_EVENT_CLOSE
WEnd

jak widać dużo tłumaczenia a mało kodu. Tak to czasami jest. Na tą lekcje to będzie koniec. W następnej powiemy sobie o kontrolkach (czyli przyciskach, suwaczkach itd)

i o drugim sposobie odczytywania co dzieje się w GUI (czasami bardziej praktycznym niż funkcja GuiGetMsg).

 

Na koniec krótko o dyrektywach-wziąłem to trochę z kursu c++ ponieważ wydaje mi się, że tak samo jest z autoit jeśli, źle mi się wydaje to może ktoś mnie poprawi:

Dyrektywy preprocesora(bo taka jest pełna nazwa) to komendy wydawane do preprocesora. Preprocesor to program uruchamiany przed kompilatorem podczas kompilacji. Odczytuje on dyrektywy i przygotowuje odpowiednie rzeczy przed kompilacją. Dyrektywa #include nakazuje preprocesorowi przygotować i dołączyć biblioteki/udf do kodu przed kompilacją. Są także inne dyrektywy. Wszystkie jednak zaczynają się znakiem#. Możecie więcej się o nich dowiedzieć w helpie. Możliwe że w trakcie kursu poznamy kilka z nich, jednak nic nie obiecuję

 

 

Co powinniście wiedzieć po tej lekcji:

- Co to jest GUI i z jakich mniej-więcej elementów się składa

- Jak tworzymy pierwsze okno programu.

- Jak ustawiamy status(ang.state) naszego okna.

- Za pomocą jakiej zmiennej możemy kontrolować zamykanie programu poprzez GUI.

- Krótko o dyrektywach- co to są i do czego wydają polecenia.

- Co to jest dyrektywa #include i do czego służy.

- Co zawierają biblioteki i jak ich używać.

- Jak zablokować samo zamykanie się programu.

Pozdrawiam,

Yubasek.