ใช้ GUI Designer ด้วย WxRuby

วันนี้ต้องขอเขียนถึงการสร้าง GUI หน่อยครับ ต้องขอออกตัวก่อนนะครับว่าอาจไม่ได้ลงรายละเอียดลึกมากถึงที่มาที่ไปของตัวช่วยต่างๆที่จะนำมาใช้ ส่วนนึงเพราะความรู้ที่ยังจำกัดของผม - -'' แต่จุประสงค์ทีสำคัญมากกว่าคืออยากให้คุณผู้อ่านได้รู้ถึงเทคนิกของการสร้าง GUI ใน Ruby ด้วยการใช้ GUI Designer ครับ

อ่าฮ้า Ruby มี GUI designer ให้ใช้ด้วยเหรอ?

อันนี้หลายคนอาจสงสัยเหมือนผม เพราะหลังจากที่ค้นหาพวก tools ที่ใช้ในการสร้าง Ruby GUI อยู่นาน ก็ยังไม่เจอ tools ที่สามารถแบบจับ widget มาวางเหมือนใน Visual studio หรือ NetBean เลย เหมือนจะต้องเขียนโค้ดมือตลอด กรำ...

หลังจากวนเวียนหาอยู่นาน ในที่สุดผมก็พบว่ามันมีหนทางที่จะใช้ tool แบบจับวางมาสร้าง Ruby GUI ซึ่งหนทางที่ว่าก็คือการใช้ WxRuby นั้นเอง
อย่างไรก็ตามการสร้าง Ruby GUI ด้วย WxRuby นั้นมีกระบวนการทำที่ต้องอาศัยการจดจำอยู่หลายขั้นตอน ผมเป็นหนึ่งในคนที่เคยใช้ WxRuby สร้าง Ruby GUI แล้วพอจะกลับมาทำใหม่ก็ลืมวิธีการทำทุกที ดังนั้นในโอกาสที่ผมกำลังนำ WxRuby มาใช้อีกครั้งผมจึงขอใช้โอกาสเดียวกันนี้เขียน how to ตัวนี้ขึ้นมาเพื่อกันลืมและเพื่อเป็นอีกทางเลือกหนึ่งให้คุณผู้อ่านได้ลองเล่นดูนะครับ

จะสร้าง GUI ต้องมีเตรียมอะไรบ้าง
Library ที่สามารถสร้าง GUI ใน Ruby มีอยู่หลายตัวครับเช่น FxRuby, WxRuby, Shoes หรือจะใช้ Win32 ก็ได้ แต่วันนี้เรามา focus กันที่ WxRuby ครับ ซึ่งเจ้า WxRuby เนี่ยก็เปน library ตัวลูกของทาง WxWidgets เขา ซึ่งทางนั้นเขาทำ Cross platform GUI library ออกมาให้ dev ทั้งหลายใช้กัน ก็ถือว่า WxWidget ก็เป็นค่ายใหญ่อีกค่ายนึงในส่วนของ cross plateform GUI ที่เป็นที่รู้จักกันดีของ dev ครับ

เราจะเริ่มจากไป download gem ของ WxRuby มาติดตั้งก่อนโดยการพิมพ์คำสั่งต่อไปนี้ใน command line(ต่อ net ให้เรียบร้อยก่อนนะครับ)

C:\gem install wxruby

จากนั้นให้ download library gem ที่ชื่อว่า wxSugar มาติดตั้งซึ่ง library ตัวนี้จะทำหน้าที่ในการ convert ไฟล์ที่ได้มาจากการสร้าง GUI แบบลากแปะให้กลายเป็นโค้ดภาษา Ruby
ให้พิมพ์คำสั่งนี้ในการติดตั้ง wxSugar นะครับ

C:\gem install wx_sugar

สุดท้ายให้ไป download โปรแกรม DialogBlocks ซึ่งโปรแกรมตัวนี้เป็น IDE ที่ทำหน้าที่สร้าง layout ของ GUI(หรือที่เรียกกันว่า widget) โดยใช้ library มาตรฐานของ WxWidget แล้ว export ออกมาเป็น xrc file เพื่อให้เรานำไป convert เป็นโค้ด ruby ต่อไป

เมื่อพร้อมแล้วก็มาเริ่มลงมือสร้าง GUI กันเลย
1) เปิดโปรแกรม DialogBlocks ขึ้นมาแล้วไปที่ File > New Project จากนั้นก็ตั้งชื่อ project แล้วกด next แล้วทำตามขั้นตอนทีละหน้าดังนี้
- หน้า mode ให้เลือก mode เป็น Generate XRC only แล้วกด next
- หน้า configuration ไปต้องใส่อะไร กด next ไปได้เลย
- หน้า Source encoding ถ้าไม่เปลี่ยนอะไรก็กด finish ได้เลย เป็นอันเสร็จสิ้นการ project

Figure 1

2) เริ่มสร้าง Frame ให้กับ GUI ของเราโดยไปที่เมนู Element > Add Frame แล้วตั้งชื่อ Windows Title และชื่อของ xrc file ซึ่งเจ้า xrc file ตัวนี้จะทำหน้าที่เก็บข้อมูลรูปร่างหน้าตารวมถึงรายละเอียดต่างๆของ GUI ที่เราสร้างให้อยู่ในรูปของ XML format

3) เมื่อตั้งชื่อเสร็จแล้วเราจะได้ Frame ออกมามีหน้าตาดังรูป จากนั้นเราต้องไปกำหนดชื่อคลาสให้กับ Frame ที่เราสร้างขึ้นครับ โดยให้เลือกไปที่ icon ที่ 2 ตรงมุมขวาล่างของ DialogBlock แล้วไปแก้ไขในส่วนของ field ที่ชื่อว่า class ดังรูปที่ 2 ซึ่งในที่นี้ผมตั้งชื่อ class นี้ว่า MyRubyFrame

Figure 2

4)จากนั้นให้ add sizer เข้าไปใน Frame ซึ่งเจ้า Sizer นั้นเป็นตัวกำหนดรูปแบบของ layout ให้กับ component ต่างๆเช่น ปุ่ม หรือ กล่องข้อความที่เราจะนำมาใส่ต่อไป การ add sizer ทำได้โดยการ click ไปที่ icon ของ tabs Sizers ซึ่งในที่นี้ผมเลย layout แบบ BoxSizer Vertical

5)ผมเพิ่ม component ต่างเข้าไปใน sizer โดยให้กำหนดชื่อของ component แต่ละตัวไว้ใน field 'id' ดังรูป เพื่อใช้ในการอ้างอิงตอนที่เราต้องนำไปใช้ในโค้ดภาษา Ruby ต่อไป นอกจากนี้เรายังสามารถกำหนด properties ต่างๆให้กับ components ได้เช่นขนาดของ Frame สี พื้นหลัง ขนาดตัวอักษร etc...ตรงนี้คุณผู้อ่านต้องลองเล่นดูนะครับ

Figure 3

6) เมื่อได้หน้าตาของ GUI ในแบบที่พอใจแล้ว คราวนี้ save project เอาไว้ก่อนเผื่อแก้ไข จากนั้นให้เลือก File > Export XRC เพื่อเก็บข้อมูลของ GUI ให้อยู่ในรูปของไฟล์ xrc

7) ขั้นตอนนี้จะเป็นการ convert file แบบ xrc ที่เรา export มาจากข้อ 6 ให้กลายเป็นโค้ดภาษา Ruby ซึ่งโค้ดดังกล่าวจะเป็นคลาสของ GUI ที่เราสร้างขึ้นโดยมีชื่อคลาสตามที่เราตั้งชื่อเอาไว้จากข้อ 3
ให้ไปที่ directory ที่เราเก็บไฟล์ xrc เอาไว้แล้วรันคำสั่งดังตัวอย่างต่อไปนี้

xrcise -o my_ruby_gui.rb my_ruby_gui.xrc

8) ขั้นตอนสุดท้ายคือการเขียนโค้ดเพื่อแสดงผล GUI ที่เราสร้างขึ้น โดยผมสร้างไฟล์ขึ้นมาใหม่อีกไฟล์ชื่อว่า the_gui.rb เพื่อเรียกให้ GUI ซึ่งมีโค้ดดังนี้ (โค้ดที่เขียนเพื่อเรียกใช้ library WxRuby นั้นต้องไปศึกษาเพิ่มเติมต่างหากครับ ไม่ยากครับไม่ยาก)

the_gui.rb

1 2 3 4 5 6 7 8 9 10 11

require 'Wx' require 'my_ruby_gui.rb' class MyRubyGUI < MyRubyFrame end # Run GUI by wx show method Wx::App.run do MyRubyGUI.new.show end

9) เมื่อรันโค้ด the_gui.rb แล้วก็จะได้ผลลัพธ์เป็น GUI ที่เราสร้างจากโปรแกรม DialogBlock ดังรูปครับ เย้ๆๆๆ

Figure 4

โดยส่วนตัวแล้วการสร้าง GUI ด้วยวิธีนี้ช่วยเราได้เยอะเลยครับ อยางน้องก็ไม่ต้องปวดหัวเวลาเขียนโค้ดจัดการกับพวก Sizer ทำให้เหลือแต่โค้ดที่เกี่ยวกับ Event ของ widget แต่ละตัวเท่านั้นที่เราแค่เขียนเพิ่มเข้าไป

ลองไปลองมา WxWidgets ก็ไม่เลวเหมือนกันนะ คิดเหมือนผมมั้ยครับ