8. Elementy/kontrolki GUI

Jak już widzieliśmy w 6 lekcji GUI ma wiele elementów. Nie będę dokładnie tłumaczył jak je tworzyć "ręcznie" ponieważ gdy ściągniemy pełną wersje edytora SciTE (http://www.autoitscript.com/autoit3/scite/downloads.shtml) to w nim mamy narzędzie do "rysowania" GUI (Koda Form Designer):

Przyznam się, że ja preferuje "ręczne" tworzenie GUI gdyż nie mogę się przyzwyczaić do tego narzędzia (taki już mój nawyk). Wam jednak zalecam korzystanie z niego gdyż tworzenie w nim GUI jest na pewno szybsze niż pisanie wszystkiego ręcznie . Mam nadzieję, że pojawi się tutorial pokazujący jak "rysować" w "Koda Form Designer". Ja pokaże Wam jak pisać GUI, ale tylko dla pola input i button. Inne tworzymy analogicznie, a jako że tych elementów jest dużo to nie dałbym rady wszystkich wytłumaczyć. Przed tym jednak przetłumaczę na "j. polski" nazwy tych elementów:

Label - Zwykły tekst ustawiony w danym miejscu w programie
Button - Przycisk do wciskania <img src='http://www.cshacked.pl/public/style_emoticons/<#EMO_DIR#>/biggrin.png' class='bbc_emoticon' alt=':D' />
Input - kontrolka pobierająca tekst (1 linia)
Edit - kontrolka pobierająca tekst (wiele lini)
Checkbox - taki kwadracik z ptaszkiem lub bez;)
Radio - kółeczko z kropką<img src='http://www.cshacked.pl/public/style_emoticons/<#EMO_DIR#>/wink.png' class='bbc_emoticon' alt=';)' />
Combo - Lista rozwijana.
List - Lista w takim kwadracie. Najlepiej spróbujcie jak to wygląda
Date - Kalendarz
Pic - Obrazek
Icon - Ikona
Progress - Pasek postępu
Tab - Zakładka
UpDown - Coś jak lista rozwijana tyle, że można w nim wybrać liczbę większą lub mniejszą o 1. Używamy tego razem z Input
Avi - Kontrolka wyświetlająca film w formacie avi
Menu - Górny pasek menu
ContextMenu - Menu kontekstowe dostępne po kliknięciu prawym klawiszem myszki
TreeView - Kontrolka przypominająca edytor rejestru
Slider - "Pasek regulacji", suwak.
ListView - taka jakby tabelka trochę jak w Excelu <img src='http://www.cshacked.pl/public/style_emoticons/<#EMO_DIR#>/wink.png' class='bbc_emoticon' alt=';)' />
ListViewItem - tym tworzymy elementy do powyższej tabelki
Graphic - za pomocą tego można tworzyć (rysować) grafikę w GUI

Wrzucę jeszcze raz skrypt w którym widać wszystkie te elementy

; 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

Przejdźmy teraz do ręcznego tworzenia pola input i buttona.

Najpierw skrypt:

#include <GUIConstantsEx.au3>
GUICreate(" My GUI input", 320, 120)
$input = GUICtrlCreateInput("", 10, 5, 300, 20)
$btn = GUICtrlCreateButton("Ok", 40, 75, 60, 20)
GUISetState()

$msg = 0
While $msg <> $GUI_EVENT_CLOSE
$msg = GUIGetMsg()

If $msg = $btn Then
MsgBox(0,"Pole input zawiera:",GuiCtrlRead($input))
Exit
EndIf
WEnd

Pierwsze dwie linijki powinniśmy już rozumieć. Spójrzmy więc na następne:

$input = GUICtrlCreateInput("", 10, 5, 300, 20)
$btn = GUICtrlCreateButton("Ok", 40, 75, 60, 20)

- pozycja w oknie GUI od lewej w px; podobnie jak w HTML'u

- pozycja w oknie GUI od góry w px; -||-

- szerokość w px; wartość opcjonalna

- wysokość w px; wartość opcjonalna

Wszystkie tego rodzaju funkcje przyjmują podobne do tych parametry dlatego reszty nie będę omawiał. Należy pamiętać by wszystkie kontrolki umieszczać pomiędzy: GuiCreate() i GuiSetState() inaczej nie będzie ich po prostu widać. Nie powiedzieliśmy jeszcze sobie co te funkcje zwracają. Otóż jest to ID(numer identyfikacyjny) danej kontrolki. Należy więc o tym pamiętać i nie myśleć, że funkcje te zwracają wartość kontrolki. Np zmienna $input nie będzie zawierała wartości pola(danych które do tego pola wpiszemy) tylko numer ID tej kontrolki. Rodzi się więc pytanie jak odczytać wartość z tej kontrolki. Otóż służy do tego funkcja którą zaraz poznamy.

Jak już mówiłem czas na funkcje GuiCtrlRead(). Za jej pomocą możemy odczytać zawartość danej kontrolki (nie tylko pola input, ale także buttona, label'a itd.). Jako argument podajemy właśnie numer ID danej kontrolki. Zobaczcie do przykładu powyżej jak ja użyłem tej funkcji.

Oprócz funkcji sczytywania danych z kontrolek są jeszcze inne służące do ustawania ich. Funkcje te zaczynają się słowami "GuiCtrlSet". Dzisiaj poznamy dwie podstawowe czyli: GuiCtrlSetState() i GuiCtrlSetData(). Jest ich więcej i możecie poczytać o nich w helpie. Ja nie będę wszystkich omawiał gdyż większość z nich jest rzadko używana.

Zaczniemy od GuiCtrlSetData(). Funkcja ta służy do ustawienia wartości danej kontrolki (nie tylko pola input, ale każdej kontrolki, nawet może zmienić nazwę buttona). Jako argumenty przyjmuje kolejno: ID kontrolki i wartość jaką ma ustawić. Przykład:

#include <GUIConstantsEx.au3>
GUICreate(" My GUI input", 320, 120)
$input = GUICtrlCreateInput("Wartosc domyslna", 10, 5, 300, 20)
$btnOK = GUICtrlCreateButton("Ok", 40, 75, 60, 20)
$btnRESET = GUICtrlCreateButton("Reset", 150, 75, 60, 20)
GUISetState()

$msg = 0
While $msg <> $GUI_EVENT_CLOSE
$msg = GUIGetMsg()
Select
Case $msg = $btnOK
MsgBox(0,"Pole input zawiera:",GuiCtrlRead($input))
Exit
Case $msg = $btnRESET
GuiCtrlSetData($input,"Wartosc domyslna")
MsgBox(0,"Info:","Przywrocono wartosc domyslna")
EndSelect
WEnd

- GuiSetState i GuiCtrlSetState

- GuiSetOnEvent i GuiCtrlSetOnEvent

- GuiSetStyle i GuiCtrlSetStyle

O tej ostatniej możecie poczytać w helpie

No to teraz czas na GuiCtrlSetState(). Za pomocą tej funkcji możemy modyfikować status naszej kontrolki czyli np. czy ma być niewidoczna ( GuiCtrlSetState($input, $GUI_HIDE) ) lub nieaktywna (GuiCtrlSetState($input, $GUI_DISABLE). Jak zapewne zauważyliście pierwszy argument to zmienna zawierająca ID, a drugi to też ZMIENNA zawierająca status. Teraz powinniśmy się domyśleć, że nie mamy nigdzie zadeklarowanej zmiennej $GUI_HIDE czy $GUI_DISABLE dlatego należy dołączyć bibliotekę zawierającą deklaracje tych zmiennych. Jest to biblioteka <GUIConstantsEx.au3>, którą mamy już dołączoną gdyż zawiera ona ID "krzyżyka" potrzebnego do zamknięcia programu. Czas na przykład:

#include <GUIConstantsEx.au3>
GUICreate(" My GUI input", 320, 120)
$input = GUICtrlCreateInput("Wartosc domyslna", 10, 5, 300, 20)
GuiCtrlSetState($input, $GUI_DISABLE)
$btnOK = GUICtrlCreateButton("Ok", 40, 75, 60, 20)
GuiCtrlSetState($btnOK, $GUI_DISABLE)
$btnRESET = GUICtrlCreateButton("Reset", 130, 75, 60, 20)
GuiCtrlSetState($btnRESET, $GUI_DISABLE)
$btnODBLOKUJ = GUICtrlCreateButton("Odblokuj GUI", 200, 75, 80, 20)
GUISetState()

$msg = 0
While $msg <> $GUI_EVENT_CLOSE
$msg = GUIGetMsg()
Select
Case $msg = $btnOK
MsgBox(0,"Pole input zawiera:",GuiCtrlRead($input))
Exit
Case $msg = $btnRESET
GuiCtrlSetData($input,"Wartosc domyslna")
MsgBox(0,"Info:","Przywrocono wartosc domyslna")
Case $msg = $btnODBLOKUJ
;odblokowanie przycisków i pola input
GuiCtrlSetState($input, $GUI_ENABLE)
GuiCtrlSetState($btnOK, $GUI_ENABLE)
GuiCtrlSetState($btnRESET, $GUI_ENABLE)
;zablokowanie przycisku $btnODBLOKUJ
GuiCtrlSetState($btnODBLOKUJ, $GUI_DISABLE)
EndSelect
WEnd

Kilka linijek wyżej wspomniałem o GuiCtrlSetOnEvent(). Jest to funkcja OnEvent, która służy do ustawienia na daną kontrolke danej funkcji (nie wiem jak to inaczej powiedzieć). Najczęściej używa się jej do buttonów. Należy jednak pamiętać, że aby jej użyć trzeba ustawić opcje "GUIOnEventMode" na wartość 1. Przykład:

#include <GUIConstantsEx.au3>

Opt("GUIOnEventMode",1)

GUICreate("Event Mode", 320, 120)
GuiSetOnEvent($GUI_EVENT_CLOSE, "Koniec");ustawienie funkcji Koniec na "krzyzyk"

$btnMSG = GUICtrlCreateButton("Klik <img src='http://www.cshacked.pl/public/style_emoticons/<#EMO_DIR#>/wink.png' class='bbc_emoticon' alt=';)' />", 200, 75, 80, 20)
GUICtrlSetOnEvent($btnMSG, "Msg"); ustawienie funkcji Msg na przycisk $btnMSG

GUISetState()

While 1
Sleep(100);mała pauza, zeby nie obciązac procesora
WEnd

Func Koniec()
Exit
EndFunc

Func Msg()
MsgBox ( 0, "Emotka", "<img src='http://www.cshacked.pl/public/style_emoticons/<#EMO_DIR#>/wink.png' class='bbc_emoticon' alt=';)' />")
EndFunc

No to chyba na tyle

Co powinieneś po tej lekcji wiedzieć:

- Co to są kontrolki i jak ich używać

- Rozumieć funkcje typu GuiCtrlCreate i GuiCtrlSet

- Jak korzystać z funkcji OnEvent

Zadanie:

Napisz prosty kalkulator o wyglądzie takim jak w załączniku. Jeśli nie potrafisz napisać GUI lub narysować w narzędziu Koda.. to możesz skopiować kod GUI zawarty poniżej w spoilerze. Radzę jednak byś spróbował napisać to samemu gdyż pisanie GUI to podstawa w autoit. W miejscu gdzie widnieje litera "z" ma się pojawiać znak który wciśniemy.

#include <GUIConstantsEx.au3>

GuiCreate("Kalkulator by ...", 230, 100)
GuiCtrlCreateInput("",15,15,50,20)
GuiCtrlCreateLabel("z",75,15)
GuiCtrlCreateInput("",90,15,50,20)
GuiCtrlCreateLabel("=",145,15)
GuiCtrlCreateInput("",160,15,50,20)

GuiCtrlCreateButton("+",15,50,30)
GuiCtrlCreateButton("-",50,50,30)
GuiCtrlCreateButton("*",85,50,30)
GuiCtrlCreateButton("/",120,50,30)

GuiCtrlCreateButton("=",170,50,30)

GUISetState()

While GuiGetMsg() <> $GUI_EVENT_CLOSE

WEnd

Pozdrawiam,

Yubasek.