วันอังคารที่ 17 พฤศจิกายน พ.ศ. 2558

ตอนที่ 3 แนะนำการใช้งาน Qt Creator

ตอนที่ 3 แนะนำการใช้งาน Qt Creator
90
Qt Creator มีไอคอนเพื่อเปลี่ยนการทำงานอยู่ 6 โหมด หรือ 6 หน้าต่างด้วยกัน คือ
82
- Welcome เป็น หน้าต่างแนะนำการใช้งาน Qt Creator ซึ่งรวมเอา Getting Started   Develop  Examples  และ Tutorials ไว้ให้ศึกษาสำหรับผู้เริ่มต้นหรือต้องการค้นหาข้อมูลเกี่ยวกับ Qt
83
- Edit  คือ โหมดสำหรับการเขียนโค้ดของโปรแกรม ประกอบด้วย Projects Explorer กับ Code Editor
84
         o Project Explorer เป็นส่วนที่แสดงไฟล์ที่อยู่ภายใน Project โดยปกติจะประกอบด้วย
85
          1. ไฟล์ .pro เป็นไฟล์ที่เก็บรายละเอียดของตัว Project
          2. ไดเรกทอรี่ Headers ภายในประกอบด้วย Header File (.h) ที่ประกาศใน Project
          3. ไดเรกทอรี่ Sources ภายในประกอบด้วย Source File (.cpp) ที่เป็นโค้ดโปรแกรมของ Project
          4. ไดเรกทอรี่ Forms ภายในประกอบไปด้วย Form File (.ui) ที่ได้จากการออกแบบ หน้าตาของโปรแกรม (User Interface)
          o Code Editor คือ ส่วนที่ใช้สำหรับเขียนโค้ดโปรแกรม
86
- Design เป็นโหมดสำหรับออกแบบหน้าตาโปรแกรม (User Interface) สามารถเข้าใช้งานได้โดย ดับเบิลคลิกที่ไฟล์ .ui ภายใต้ Projects Manager ที่อยู่ในโหมด Edit ภายในหน้าต่างโหมด Design มีส่วนประกอบอยู่หลายส่วน ซึ่งในเอกสารนี้จะขอกล่าวถึงในบางส่วนที่ใช้บ่อยๆดังนี้
87        1. Widget Box เป็นส่วนเก็บ Widget ต่างที่นำมาสร้างหน้าตาของโปรแกรม ส่วนรับคำสั่ง และแสดงผลสำหรับผู้ใช้
        2. Form Designer เป็นพื้นที่สำหรับวาง Widget ต่างๆ เพื่อสร้าง User Interface
        3. Object Inspector เป็นหน้าต่างแสดง Object ที่ถูกสร้างขึ้นในหน้า Form Designer
        4. Properties Editor เป็นส่วนตั้งค่าคุณสมบัติของ Widget ต่างๆ ที่อยู่บนหน้า Form Designer
- Debug เป็นโหมดสำหรับ Debug โปรแกรมที่เราเขียนขึ้น เพื่อตรวจสอบการทำงานหรือแก้ไขปัญหา
- Project เป็นส่วนตั้งค่าต่างๆให้กับ Project ได้แก่ Build Settings Run Settings Editor Setting Code Style Settings และ Dependencies ซึ่งในแต่ละหัวข้อจะมีค่าให้ปรับตามต้องการ
88
- Help เป็นโหมดการช่วยเหลือ หากเรามีข้อสงสัยในการใช้โปรแกรม การเขียนโค้ด หรือการใช้เครื่องมือต่างๆ สามารถเข้ามาหาข้อมูลได้ในโหมดนี้
89

แนะนำการใช้ Widget ต่างๆ บน Qt Creator
          Qt Creator มีโหมด Design ซึ่งเป็นโหมดที่ใช้สำหรับสร้างและออกแบบ User Interface ให้กับโปรแกรม โดยได้เตรียม Widget พื้นฐานสำหรับสร้าง User Interface ให้นำไปใช้งานและปรับสามารถแต่งได้ ช่วยอำนวยสะดวกในการสร้างโปรแกรมสำหรับติดต่อกับผู้ใช้เป็นอย่างมาก
91
Widget ทั้งหมดที่อยู่ใน Designer
Widget ที่ Qt Creator ได้จัดเตรียมเอาไว้ให้ สามารถแบ่งเป็นหมวดหมู่ได้ทั้งหมด 8 หมวดหมู่ ดังนี้
o Layouts
o Spacers
o Button
o Item View
o Item Widget
o Containers
o Input Widget
o Display Widget
           Widget ที่ Qt Creator ได้จัดเตรียมไว้ให้มีค่อนข้างมาก ในเอกสารนี้จึงขอกล่าวถึง Widget บางตัวที่มีโอกาสใช้บ่อยเท่านั้น เนื่องจากการใช้งานของ Widget ในแต่ละหมวดมีลักษณะการใช้งานที่คล้ายคลึงกันทั้งนี้สามารถศึกษาการใช้งาน เพิ่มเติมจาก Help ของ Qt Creator ได้
Widget Button
           Widget Button ทุกตัวสืบทอดมาจากคลาส QAbstractButton QWidget และ QObject ได้แก่
92
 - Signal
  o clicked() – ถูกสร้างขึ้นเมื่อเกิดมีการ Click ที่ปุ่ม
  o toggled(bool) – เกิดขึ้นเมื่อ Check state ของปุ่มมีการเปลี่ยนแปลง
  o etc.
- Properties
  o checkable - เมื่อตั้งค่าให้เป็น True จะทำให้ปุ่มสามารถ Toggle ได้
  o checked - True เมื่อมีการ Check
  o text – ข้อความที่แสดงบนปุ่ม
  o icon –ไอคอนของปุ่ม (สามารถแสดงผลร่วมกับข้อความได้)
  o etc.
ตัวอย่างการใช้งาน
- นำ Push Button จาก Widget Box มาวางยังหน้า Form Designer
93
- นำ Label จาก Widget Box มาวางยังหน้า Form Designer
94
- คลิกขวาที่ Push Button ที่หน้า Form Designer เลือก Go to Slot …
95
- เลือก Signal เป็น clicked()
96
- เขียนโปรแกรมในฟังก์ชั่น on_pushButton_clicked ดังนี้
97
- ทดลอง Run โปรแกรม
98
- ผลการ Run โปรแกรม
99
- เพิ่ม PushButton ใหม่ขึ้นมาอีก 1 อัน
100
- ไปที่ Properties Editor เลือกเครื่องหมายถูกที่ Checkable
101
- คลิกขวาที่ PushButton ใหม่ เลือก Go to Slot … จากนั้น เลือก Signal เป็น toggled(bool)
102
- เขียนโปรแกรมในฟังก์ชั่น on_pushButton_2_toggled
103
- ทดลอง Run โปรแกรม
- ผลการ Run โปรแกรม
104
ใน ส่วนของ QRadioButton และ QCheckBox มีการใช้งานเหมือนกับ QPushButton แต่ Property checkable ของ QRadioButton และ QCheckBox มีค่ำ Default เป็น true
105
Widget Item
Widget Item ใช้แสดงรายการที่เป็นลิสต์มีให้ใช้หลายแบบและมีฟังก์ชั่นและคุณสมบัติดังนี้
- Adding item
  o addItem(QString) – สามารถเพิ่ม Item ต่อที่ท้ายของ List ของ Item
  o insertItem(int row, QString) – แทรก Item ไปยังแถวที่กำหนดได้
- Selection
  o selectedItems – returns ค่าใน list ที่ถูกเลือก
- Signals
  o itemSelectionChanged – ถูกสร้างเมื่อมีการเปลี่ยนตำแหน่ง Item ที่ถูกเลือก
ตัวอย่างการใช้งาน
- นำ Combo Box จาก Widget Box มาวางยังหน้า Form Designer และปรับขนาดตามสมควร
106
- นำ PushButton จาก Widget Box มาวางยังหน้า Form Designer ปรับขนาดตามสมควร และ แก้ไขข้อความบน Button เป็น “Add Item”
107
- คลิกขวาที่ PushButton ไปที่เมนู Go to Slot เลือก Signal = clicked
108
- เขียนโปรแกรมลงในฟังก์ชั่น on_pushButton_clicked()
109
- ทดลอง Run โปรแกรม
- ผลคือเมื่อ Run โปรแกรม ขึ้นมาจะพบว่าไม่มี ข้อความอยู่ใน Combo Box อยู่เลย
110
แต่เมื่อคลิกที่ Button “Add Item” Code ที่เราเขียนเอาไว้ให้ทำการ เพิ่มคำว่า number 1 ถึง number 5 ลงไปใน Combo Box
111
- เพิ่ม Widget Line Edit จาก Widget Box ไปยังหน้า Form Designer ปรับขนาดตามสมควร
112
- นำ PushButton จาก Widget Box มาวางยังหน้า Form Designer ปรับขนาดตามสมควร และ แก้ไขข้อความบน Button เป็น “Add”
113
- คลิกขวาที่ PushButton ไปที่เมนู Go to Slot เลือก Signal = clicked
114
- เขียนโปรแกรมลงในฟังก์ชั่น on_pushButton_2_clicked()
115
- ทดลอง Run โปรแกรม
- ผลการ Run โปรแกรม
116
  o เมื่อคลิกที่ Button Add Item โปรแกรมจะ Add ข้อความ number 1 ถึง number 5 ลงใน Combo Box 
  o ทดลองเลือก ข้อความใดก็ได้ใน Combo Box แล้วคลิกที่ Button Add จะนำเอาข้อความที่เราเลือกใน Combo Box ไปแสดงใน Line Edit
Widget Input
QLineEdit ใช้แสดงหรือรับค่าตัวหนังสือที่มีลักษณะเป็นบรรทัดเดียว
- Signal
  o textChanged(Qstring) – ถูกสร้างขึ้นเมื่อข้อความเปลี่ยน
  o editingFinished() – ถูกสร้างขึ้นเมื่อมีการกด Enter หรือ Focus เปลี่ยนไปที่ Widget อื่น
  o returnPressed() – ถูกสร้างขึ้นเมื่อมีการกด Enter
- Properties
  o text – ข้อความของ Widget
  o maxlength – จำกัดความยาวสูงสุดของข้อความ
  o readOnly – เมื่อเป็น True หมายถึงไม่ให้ทำการแก้ไขข้อความได้
ตัวอย่างการใช้งาน
- นำ Line Edit จาก Widget Box มาวางยังหน้า Form Designer ปรับขนาดตามสมควร
117
- นำ PushButton จาก Widget Box มาวางยังหน้า Form Designer ปรับขนาดตามสมควร
118
- คลิกขวาที่ PushButton ไปที่เมนู Go to Slot... เลือก Signal > clicked
119
- เขียนโปรแกรมลงในฟังก์ชั่น on_pushButton_clicked()
120
- ทดลอง Run โปรแกรม
- ผลการ Run โปรแกรม
121
o เมื่อ Run โปรแกรม พิมพ์ข้อความ ThaiEasyElec ใน Line Edit ช่องที่ 1 
o คลิก Push Button Code โปรแกรม จะอ่านข้อความใน Line Edit อันแรกมาเก็บไว้ในตัวแปร QString data จากนั้นนำขอความในตัวแปร data ไปแสดงใน Line Edit ที่ 2 ส่วน Code ในบรรทัดสุดท้ายคือการนำค่า string จาก Line Edit อันแรกมาใช้แสดงเป็นข้อความของ Line Edit อันที่ 3
Widget QSpinBox QDialog QScrollbar QSlider
Widget Input เหล่านี้สืบทอดมาจาก คลาส QAbstractSlider
- Signal
  o valueChanged(int) – ถูกสร้างขึ้นเมื่อมีการเปลี่ยนค่า
- Properties
  o value – ค่า ณ ปัจจุบัน
  o maximum – ค่าสูงสุด
  o minimum – ค่าต่ำสุด
ตัวอย่างการใช้งาน
- นำ Spin Box Horizontal Scroll Bar และ Vertical Slide จาก Widget Box มาวางในหน้า Form Designer ปรับขนาดตามสมควร
122
- คลิกขวาที่ SpinBox ไปที่เมนู Go to Slot เลือก Signal = valueChanged(int)
123
- เขียนโปรแกรมลงในฟังก์ชั่น on_spinBox_value
124
- ทดลอง Run โปรแกรม
- ผลการ Run โปรแกรม
125
o เมื่อปรับเปลี่ยนค่าใน spinBox Code โปรแกรมของเราจะนำค่า value ที่เปลี่ยนแปลงจากตัวแปร arg1 มา Set เป็นค่า value ให้กับ horizontalScrollBar และ verticalSlide
Widget Display
QLabel ใช้แสดงตัวหนังสือหรือรูปภาพ
- Properties
  o text – ข้อความที่แสดงบน Label
  o pixmap – รูปภาพที่แสดงบน Label
QLabel แสดงข้อความหรือรูปภาพด้วยการเลือกรูปที่ต้องการแสดงผ่านทาง Designer โดยใช้ Property pixmap
126
ตัวอย่างการใช้งาน QLabel มีการใช้งานมาบ้างแล้วสามารถดูตัวอย่างการใช้งานได้จากการใช้งาน QButton 
QLCDNumber ใช้แสดงตัวเลขที่เป็นจำนวนเต็ม
- Properties
  o intValue – ค่าที่แสดงบน LCD
ตัวอย่างการใช้งาน QLCDNumber
- นำ LCD Number จาก Widget Box มาวางยังหน้า Form Designer ปรับขนาดตามสมควร
127
- นำ Horizontal Slider จาก Widget Box มาวางยังหน้า Form Designer ปรับขนาดตามสมควร
128
- คลิกขวาที่ Horizontal Slider ไปที่เมนู Go to Slot เลือก Signal = valueChanged(int)
129
- เขียนโปรแกรมลงในฟังก์ชั่น on_horizontalSlider_valueChange
130
- ทดลอง Run โปรแกรม
- ผลการ Run โปรแกรม
131
o เมื่อปรับ Horizontal Slider จะนำค่า value ไปแสดงที่ LCDNumber

ไม่มีความคิดเห็น:

แสดงความคิดเห็น