AutoIt3 ความรู้เบื้องต้น เกี่ยวกับ GUI (Graphic Unit Interfade) Function

[sak2005]

GUI หมายถึง เป็นสคริ๊ปโค๊ด กึ่งสำเร็จรูป หมายความว่า โปรแกรมAutoIt3 ทำใว้ให้ส่วนหนึ่ง อีกส่วนหนึ่งเราต้องเขียนเพิ่มเติมเอง
มีหลักการและรูปแบบดังนี้
1. สร้างสิ่ง..? ให้เกิดขึ้น (Create)
2. ควบคุมสิ่ง..? ให้เป็นไปตามที่ต้องการ (Control)
----------------------------------------------------------------
จะยกตัวอย่างเปรียบเทียบแบบง่ายๆ เพื่อให้เห็นภาพ จะได้เข้าใจ เขียนออกมาได้ถูกต้อง
สั่งประกอบรถยนต์ (Function)
1.(Create&Display)เมื่อโรงงานผลิตรถยนต์ให้เราคันหนึ่ง ซึ่งองค์ประกอบของรถยนต์อาจจะยังไม่ครบ เช่นขาด
เครื่องยนต์,ล้อ,พวงมาลัย และน้ำมัน เป็นต้น เราต้องหามาใส่ให้ครบ
..แต่มีผู้ผลิตบางราย ที่เมื่อทำรถเสร็จ ก็ให้คนขับ ขับรถ มาส่งรถให้เราถึงบ้าน
2.(Control&Display) เรามีจุดประสงค์อย่างไร? กับรถยนต์ เช่น ต้องการให้รถยนต์เคลื่อนที่ ไปในทิศทางที่ต้องการ
เราก็ต้องเพิ่มเติม สิ่งที่ทำให้รถยนต์เกิดการเคลื่อนไหว เช่น คนขับ เป็นต้น..
อันนี้ไม่ต้องอธิบายว่า คนขับทำให้รถยนต์เคลื่อนที่ไปในทิศทางที่ต้องการได้อย่างไร?
----------------------------------------------------------------
(มีต่อคราวหน้า)

[sak2005]

เรียนรู้ AutoIt3 แบบ Steb By Steb (.au3)
--------------------------------
สิ่งที่กำลังจะเกิดขึ้น เรากำลังจะเรียนรู้เรื่อง การเขียนสคริ๊ป ให้ออกมาเป็นโปรแกรม
ซึ่งต่างจากการเรียนรู้ตามมหาวิทยาลัย คือ ใช้โปรแกรมเขียนให้ออกมาเป็นสคริ๊ป
-----------------------------------------
กำหนด Projectอะไรก็ได้ขึ้นมาชิ้นหนึ่ง และเมื่อสร้างเสร็จ นำมาทดลองใช้งาน ปรากฏว่า ใช่งานได้ดี ถือว่าสอบผ่าน
รูปแบบและหลักการดำเนินงาน ก็เหมือนกับโปรแกรมภาษาโดยทั่่วไป ดังนี้
1.สร้าง Form
2.ใส่ Object ต่างๆลงไปในฟอร์ม
3.เขียนสคริ๊ปควบคุม (Control)
4.Compile เปลียนสคริ๊ปให้สามารถใช้งานกับเครื่องอื่นได้ (.exe)

[sak2005]

1.Form หมายถึง หน้าต่างหลักที่จำเป็นต้องสร้างขึ้นมา ขาดไม่ได้เลย ถ้าไม่มีForm ก็ไม่รู้ว่าจะเอา Object ชิ้นส่วนประกอบต่างๆไปวางไว้ตรงไหน!?
รูปแบบของฟอร์ม มีดังนี้
-----------------------------------------------------

GUICreate ( "title" [, width [, height [, left [, top [, style [, exStyle [, parent]]]]]]] )

----------------------------------------------------------
:อธิบาย:
GUICreate เป็นคำสั่งสร้างฟอร์ม ส่วนที่อยู่ในวงเล็บ เป็นการกำหนดรายละเอียดต่างๆให้กับฟอร์ม(Parameter)
title หมายถึง มีไว้แสดงตัวอักษร บนไตเติ้ลบาร์ด้านบน
width หมายถึง ไว้ใช้กำหนดขนาด ความกว้าง ให้กับฟอร์ม
height หมายถึง ไว้ใช้กำหนดขนาด ส่วนสูง ให้กับฟอร์ม
left หมายถึง ไว้ใช้กำหนด ตำแหน่งที่จะวางฟอร์มบนเดสก์ทอป ว่าจะให้อยู่ตรงไหน?.. ทางซ้ายหรือทางขวา
top หมายถึง ไว้ใช้กำหนด ตำแหน่งที่จะวางฟอร์มบนเดสก์ทอป ว่าจะให้อยู่ตรงไหน?.. ข้างล่างหรือข้างบน

[sak2005]

2.ใส่ส่วนประกอบ(object) ที่ต้องการใช้งานลงบนฟอร์ม เช่น. ปุ่ม (Button),ฉลาก (Label),ตัวอักษร (Data text) เป็นต้น. และอื่นๆอีกมากมาย
:สร้างปุ่มบนฟอร์ม:

GUICtrlCreateButton ( "text", left, top [, width [, height [, style [, exStyle]]]] )

-----------------------------------------------------------------------------------------------------------
เมื่อสร้างปุ่มควบคุมลงบนฟอร์มแล้ว ยังจะทำอะไรหรือแสดงผลออกมาไม่ได้ จนกว่าจะมีการกระตุ้นให้เกิดการทำงาน
เหมือนรถยนต์ที่ยังไม่ได้สตาร์ทเครื่อง
--------------------------------------------------------------------------------------------------------------------------
3.ควบคุมและสั่งงาน (Control)
:กระตุ้นให้เกิดการทำงาน: สตาร์ทเครื่องยนต์ , เร่งเครื่องยนต์ , ควบคุมพวงมาลัย

GUISetState()      

While 1
$msg = GUIGetMsg()
Select
Case $msg = $GUI_EVENT_CLOSE
ExitLoop
Case $msg = $Button_1
Run('Notepad.exe')    
Case $msg = $Button_2
MsgBox(0, 'Testing', 'Button 2 was pressed')    
EndSelect
WEnd
EndFunc

[sak2005]

ตัวอย่างสคริ๊ปที่เขียนเสร็จสมบูรณ์ แบบ Function Loop ใช้งานได้จริง

#include <GUIConstantsEx.au3>

Opt('MustDeclareVars', 1)

Example()

Func Example()
Local $Button_1, $Button_2, $msg
GUICreate("My GUI Button") 

Opt("GUICoordMode", 2)
$Button_1 = GUICtrlCreateButton("Run Notepad", 10, 30, 100)
$Button_2 = GUICtrlCreateButton("Button Test", 0, -1)

GUISetState()   ;สคริ๊ปที่ทำให้เกิดการตอบสนอง   

While 1          
$msg = GUIGetMsg()
Select
Case $msg = $GUI_EVENT_CLOSE
ExitLoop
Case $msg = $Button_1     ;สร้างคำสั่งควบคุมผ่านปุ่มต่างๆ ทำให้เกิดการทำงาน ตามต้องการ
Run('Notepad.exe')    
Case $msg = $Button_2
MsgBox(0, 'Testing', 'Button 2 was pressed')    
EndSelect
WEnd
EndFunc

--------------------------------------------------------------------------
4.ถ้าจะนำไปใช้งานจริง ต้องCompile ก่อนนะครับ (.au3 to .exe)

[sak2005]

เราได้เรียนรู้การเขียนสคริปให้ออกมาเป็นโปรแกรมกันแล้ว ทีนี้เรามาหัดเขียนโปรแกรมให้ออกมาเป็นสคริ๊ปกันบ้าง ด้วยโปรแกรม Koda Designer
เปิดใช้งานได้ที่ C:\Program Files\AutoIt3\SciTE\Koda หรือไม่รู้ว่าอยู่ตรงไหน!? ก็ดาวน์โหลดโปรแกรมเรียกShortcutมาใช้งาน
Download:http://upload.one2car.com/download.a...WQ9R5Y8VXS38XF

[sak2005]

รายละเอียดหน้าที่การใช้งานต่างๆของโปรแกรม Koda (ดูรูปภาพ)
ขั้นตอนต่างๆในการทำก็ง่าย ขอให้ท่านปฏิบัติตามดังนี้
1.เปิดฟอร์มขึ้นมา
2.นำสิ่งต่างๆที่ต้องการใช้งาน ไปวางไว้บนฟอร์ม
3.ปรับแต่งฟอร์มและสิ่งต่างๆเพิ่มเติม
4.ทดสอบผลงาน
5.นำโค๊ดที่ได้ไปแปลงเป็นไฟล์สคริ๊ป .au3 และเขียนสคริ๊ปควบคุมเพิ่มเติม
6.Compile จาก .au3 to .exe
----------------------------------------------------------

[sak2005]

แบบฝึกหัด:การทำprogress Bar บางท่านอาจจะยังไม่ทราบ หรือรู้แต่เพียง นำProgress barและปุ่ม ไปวางบนฟอร์ม แต่ไม่รู้ขั้นตอนต่อไปว่าจะทำให้Progress Bar แสดงผลได้อย่างไร? ฉนั้นเรามาเรียนรู้กัน แบบ Steb By Steb
---------------------------------------------------------------
เมื่อเปิดโปรแกรมKodaขึ้นมา หน้าต่างฟอร์มก็จะเปิดขึ้นมาให้ด้วยอัตโนมัติ นำProgress Barมาวางไว้บนฟอร์ม ..คลิ๊กที่ Win32 เลือกคลิ๊กที่ รูปProgress bar จากนั้นเลื่อนเมาท์มาคลิ๊กบนพื้นที่ฟอร์ม รูปprogress barก็จะปรากฏขึ้นบนฟอร์ม นำปุ่มคำสั่งมาวางไว้บนฟอร์ม ..คลิ๊กที่Standard เลือกคลิ๊กที่ ปุ่ม ok จากนั้นเลื่อนเมาท์มาคลิ๊กบนพื้นที่ฟอร์ม รูปปุ่มก็จะปรากฏขึ้นบนฟอร์ม ที่เหลือก็เป็นการจัดระเบียบและปรับแต่งอื่นๆเพิ่มเติม จากนั้นก็ลองคลิ๊กปุ่มทดสอบผลงานดูครับ

[sak2005]

เมื่อทดสอบและปรับแต่งผลงานจนเป็นที่ถูกใจแล้ว ก็จัดการแปลงเป็นสคริ๊ป .au3 คลิ๊กที่เมนู Tools เลือกคลิ๊กที่ Generate Form Code จากนั้นให้ดูที่Option ด้านล่าง คลิ๊กที่รูปสามเหลี่ยมเล็กสีดำ เปิดOptionออกมา คลิ๊กเลือกที่ Save to File จากนั้นให้คลิ๊กที่รูปแผ่นดิสเก็ตอีกครั้ง จะมีหน้าต่างยืนยันเปิดขึ้นมา ให้คลิ๊ก No ..ต่อไปก็เลือกสถานที่เก็บไฟล์ ..ตั้งชื่อไฟล์ ..คลิ๊ก Save ก็จะได้ไฟล์ .au3 ออกมา ต่อไปก็เป็นขั้นตอนที่ต้องเขียนสคริ๊ปเพิ่มเติมเข้าไปให้สมบูรณ์ ..Progress Bar ถึงจะสามารถแสดงผลได้

[sak2005]

โดยทั่วไปสคริ๊ปที่สั่งและควบคุมการทำงาน Objectที่อยู่บนฟอร์ม มักจะเป็นแบบ Control Loop ดังนี้

[sak2005]

เมื่อเขียนสคริ๊ปได้ถูกต้องสมบูรณ์ Progress Bar ก็จะแสดงผลได้ดังรูป


----------------------------------------------------------------------------------------------------
Download:Sample Project5
http://upload.one2car.com/download.a...HRIZDCBZ93OXWS

[sak2005]

อันนี้เป็นการใส่ Counter % ลงไปด้วย

$Progress1 = GUICtrlCreateProgress(8, 40, 270, 25, BitOR($PBS_SMOOTH,$WS_CLIPSIBLINGS))
GUICtrlSetBkColor(-1, 0xFFFBF0)
$Button1 = GUICtrlCreateButton("ติดตั้ง", 8, 80, 75, 25, $WS_GROUP)
$Button2 = GUICtrlCreateButton("ยกเลิก", 200, 80, 75, 25, $WS_GROUP)
$Label1 = GUICtrlCreateLabel("0%", 128, 88, 26, 17)
$Label2 = GUICtrlCreateLabel("", 120, 8, 108, 20)
GUISetState(@SW_SHOW)
#EndRegion ### END Koda GUI section ###

While 1
	 $nMsg = GUIGetMsg()
Switch $nMsg
Case $GUI_EVENT_CLOSE
Exit
Case $Button1
For $i = 0 to 100 Step 1
	GUICtrlSetData($Progress1, $i)
GUICtrlSetData($Label1, $i & "%")
GUICtrlSetData($Label2, "Installing...")
Sleep(100)
Next
If $i >= 100 Then
Sleep(1000)
GUICtrlSetData($Label2, "Completed.")
GUICtrlSetData($Label1, "Done.")
Sleep(1000)
ExitLoop
EndIf
Case $Button2
Exit
EndSwitch
WEnd