สำหรับ
ตอนที่ 1 ก็พาไปรู้จักกับ IDE ของ Qt แล้วตอนนี้ เป็นตอนที่ 2: เล่นกับฟอร์ม, คิดชื่อบทความไม่ค่อยออก และจุดมุ่งหมายก็ยังไม่ชัดเจน แต่จะเป็นการเล่นอะไรหลายๆ อย่างบนฟอร์มที่เราสร้างขึ้น (มีอะไรก็ใส่ๆ ไปครับ) 😅
ก่อนที่จะเข้าไปยำใหญ่เกี่ยวกับฟอร์มก็ขอ ขยายความ เกี่ยวกับศัพท์ที่พบเจอกันบ่อยๆ ใน Qt และจะงงกัน (ผู้เขียนก็ยังงงๆ อยู่เหมือนกัน)
Window, Widget, Dialog สามคำนี้จะวนเวียนอยู่ในโลกแห่งการเขียนโปรแกรมมากพอสมควร โดยแต่ละส่วนก็จะมีความหมายพอจะอธิบายได้ว่า (ความหมายในโลกของ Qt)
Window คือ ส่วนที่อยู่ Top-level หรือบนสุด หรือจะเรียกว่าอยู่ล่างสุดเป็นฉากหลัง เป็นแหล่งกำหนดหรือที่ตั้งอยู่ของสิ่งต่างๆ นั่นแหละ แต่ที่เรียกว่า Top-Level นั้นเพราะมองจากลำดับของ Object
Widget คือ ส่วนประกอบต่างๆ หรือ Object ต่างๆ ที่อยู่บน Window ในโลกของ Unix เรียกว่า Widget ส่วนโลกของ Windows เรียก Controls นั่นก็ คือ objects ทั้งหลายนั่นแล (จะต่างจาก Widget ในโลกมือถือหรือโปรแกรมอื่นๆ นิดหน่อยตรงที่ Widget ในโลกอื่นที่ไม่ใช่ Qt หมายถึงส่วนควบคุมหรือส่วนเล็กๆ ที่สามารถทำงานได้ คล้ายๆ กับ Gadget; อ้าว ยิ่งงงไปกันใหญ่) 😁
Dialog คือ Window ชนิดหนึ่งและเป็นหน้าต่างที่ปรากฏขึ้นเป็นครั้งคราว ไม่ได้แสดงแบบถาวร เช่น สร้างหน้าจอเพื่อแสดงข้อความแจ้งให้ทราบ หรือข้อความถามแล้วให้เลือกต่อ Yes No Ok และ Cancel แต่หลักการแล้วก็เหมือน window ทุกประการเพียงแต่ต่างกันตรงวัตถุประสงค์การใช้งาน
Form Style Sheet
สิ่งแรกที่จะพาไปเล่นกับฟอร์ม คือ การเปลี่ยนแปลงสีของฟอร์มผ่าน Style Sheet และนี่แหละที่เป็นจุดเด่นของ Qt และเด่นมากจนหลังๆ จะกลายเป็น Java Scripts ไปทุกทีแล้ว
ใครที่เขียนเว็บมาบ้างแล้วย่อมรู้จักอานิสงส์ของ Style Sheet เป็นอย่างดี เพราะมันสามารถทำให้หน้าเว็บไซต์ไม่จืดชืด ลูกเล่นแพรวพราว และเมื่อ Qt ได้นำเอาคุณสมบัตินั้นมาใช้กับการเขียนโปรแกรมแล้วจะดีมากแค่ไหน และเขียนด้วย C++ แล้วมี Style Sheet โอ้ววว มันช่างอัศจรรย์เสียจริงๆ (IDE อื่นๆ ก็คงทำได้เหมือนกัน ใครทราบแนะนำด้วย)
 |
| Change styleSheet |
เพิ่มพื้นหลังให้กับฟอร์ม
เพิ่มรูปภาพเข้าไปในระบบ
 |
| คลิกขวาที่ Project แล้วเลือก Add New |
 |
| คลิกเลือก Qt และ Qt Resource File และคลิกเลือก Choose |
 |
| พิมพ์ชื่อในที่นี้ใช้คำว่า resources จะพิมพ์เป็นอย่างอื่นก็ได้ |
 |
| คลิกที่ Resource และคลิกเลือก Add Prefix ตามในรูป |
 |
| ชื่อ Prefix เรากำหนดเป็นอะไรก็ได้ ตัวอย่างในรูปกำหนดเป็น /images เพื่อเก็บรูปภาพ |
 |
| เมื่อกำหนด Prefix เสร็จก็คลิกเลือก Add Files อีกครั้งหนึ่ง เมื่อเลือกไฟล์รูปได้แล้วจะแสดงให้เห็นเหมือนในรูป และให้กดปุ่ม Ctrl+S เพื่อบันทึกสิ่งที่เราเพิ่มเข้าไปก่อน ก่อนที่จะเรียกใช้งาน |
แก้ไข Style Sheet
 |
| คลิกเม้าส์ปุ่มขวาที่ฟอร์มแล้วคลิกเลือก Change styleSheet |
 |
| หน้าจอ Edit Style Sheet ให้คลิกเลือก background-image ตามในรูป |
 |
| คลิกเลือก Prefix ที่เราสร้างและเก็บไฟล์รูปภาพไว้, คลิกเลือกรูปภาพและคลิกปุ่ม OK |
 |
| ที่หน้าจอ Edit Style Sheet จะมีข้อความคำสั่ง Style Sheet เพิ่มขึ้น คลิก Apply และ OK |
 |
| หน้าจอที่ได้ พื้นหลังแสดงตามรูปภาพที่เราต้องการ |
หลักการการเพิ่มรูปภาพพื้นหลัง
1. สร้างแหล่งเก็บและเพิ่มไฟล์ภาพลงใน Resource Files
2. เปิดหน้าจอ Style Sheet ของฟอร์ม
3. เลือกพื้นหลังจาก background-image
หลักการมีเพียงเท่านี้แต่ที่ยืดยาวนั้นคือแต่ละขั้นตอนซึ่งเป็นข้อปลีกย่อย
พื้นหลังแบบ Gradient
ปกติเราสามารถสร้างพื้นหลังสีต่างๆ ได้ง่าย แต่ก็ไม่ค่อยสวยงาม แต่หากเราสร้างพื้นหลังแบบ Gradient แล้วจะทำให้ฟอร์มของเราดูสวยงามขึ้นอย่างเด่นขัด วิธีการง่ายๆ ใน Qt มีให้เสร็จสรรพผ่าน Style Sheet
 |
| ที่หน้าจอ Edit Style Sheet เลือก Add Gradient และเลือก background-color |
 |
| ที่หน้าจอ Select Gradient ให้เลือกคลิกที่หมายเลข 1 และคลิก Edit จะได้หน้าจอใหม่ คลิกที่หมายเลข 2 โดยให้สังเกตกรอบหมายเลข 3 จะเป็นการไล่โทนสีจากดำไปหาสีขาว ในภาพคลิกเลือกจุดสีดำ ในกรอบหมายเลข 4 คือ สีที่เราคลิกเลือก |
 |
| คลิกเลือกจุดเริ่มต้น และคลิกเลือกสี จะมีกรอบให้เลือกสี เลือกคลิกได้ตามใจชอบ และสังเกตรูปนี้จะคัดลอก HTML Code ซึ่งเป็นคู่สีแบบ HTML เพื่อนำไปใช้กับสีอีกด้านหนึ่ง เพื่อให้สีสองด้านเหมือนกัน |
 |
| รูปนี้แสดงให้เห็นว่ากำหนดสีทั้งสองด้านเป็นสีน้ำเงินที่เหมือนกันแล้ว (เพราะใช้ HTML Code) แล้วให้ ดับเบิลคลิก เลือกจุดสีที่อยู่ตรงกลาง ดูตามในรูป และ คลิกเลือกสี เหมือนเดิมมีหน้าจอให้เลือกสี รอบนี้ คลิกสีที่ต้องการ โดยให้สีตรงกลางอ่อนกว่าสองด้าน จะทำให้เกิดมิติในไล่โทนสี และคลิก OK เมื่อเรียบร้อยแล้ว |
 |
| กลับมาที่หน้าจอ Gradient เมื่อคลิกปุ่ม OK แล้ว สีที่ไล่โทนแบบ Gradient จะปรากฏในหน้าจอ Select Gradient |
 |
| ที่หน้าจอ Select Gradient ให้คลิกเลือกสีที่ต้องการ (หมายเลข 1) และคลิกปุ่ม OK (หมายเลข 2) คำสั่ง Style Sheet ในการไล่โทนสีจะปรากฏในช่อง Edit Style Sheet (หมายเลข 3) แต่จะยังใช้ไม่ได้โดยมีข้อความแจ้ง (ในกรอบหมายเลข 4) |
 |
| พิมพ์คำว่า background-color: เพิ่มด้านหน้าคำสั่ง style sheet ที่ได้ และคลิกปุ่ม Apply ที่ฟอร์มจะเปลี่ยนพื้นหลัง และในกรอบสีแดงจะมีข้อความแจ้งว่า Style Sheet ที่พิมพ์นั้นถูกต้องใช้ได้แล้ว |
หลักการการทำ Background แบบ Gradient
1. คลิกเลือกรูปแบบของ Gradient
2. คลิก Edit เพื่อแก้ไขสีที่จะให้เป็น Gradient
3. แก้ไข Style Sheet ให้ถูกต้อง
ผลที่ได้
 |
| ผลลัพธ์ที่ได้ รุปซ้ายมือ คือ หน้าจอตามที่กำหนดครั้งแรก คือ 240x320, หน้าจอขวามือเมื่อขยายหน้าจอ พื้นหลังจะขยายตาม |
แก้ไขรูปแบบของ Gradient
 |
| การกำหนดรูปแบบ Gradient ทำได้หลายแบบในรูปคลิกวงกลม (ลูกศรสีเหลืองชี้) แล้วลากไปตำแหน่งต่างๆ Gradient จะเปลี่ยนไป ลองปรับหลายๆ แบบดูจะเห็นผลแตกต่างกันไป เมื่อเรียบร้อยแล้วหน้าจะก็เปลี่ยนไปเหมือนในรูป |
คลิปสาธิตการเปลี่ยนพื้นหลังด้วย StylSheet
ไม่มีความคิดเห็น:
แสดงความคิดเห็น