การใช้งาน pop-up menu

ในตัวอย่างนี้ผมจะอธิบายการใช้งาน Pop-up Menu ในหัวข้อต่างๆ ดังต่อไปนี้นะครับ

1. การสร้าง Pop-up Menu
2. การอ่านค่าจาก Pop-up Menu
3. การกำหนดค่าให้ Pop-up Menu
4. การกำหนดค่าอัตโนมัติ เมื่อเริ่มรันโปรแกรม
5. การใช้งาน Pop-up Menu หลายอันร่วมกัน

ถ้าพร้อมแล้วเราก็มาดูกันทีละหัวข้อเลยครับ
*ในตัวอย่างนี้ผมสร้าง GUI ที่ชื่อว่า "PopUp_Example" นะครับ ถ้าใครยังสร้างไม่เป็นให้ไปอ่านหัวข้อบนสุดนะครับ

1. การสร้าง Pop-up Menu

คลิกที่ Pop-up Menu ตามรูป แล้วเอามาลากวางใส่พื้นที่ว่างๆ ในหน้า GUI

หลังจากนั้นให้สร้าง Pop-up menu 2 อันแบบนี้

หลังจากนั้นให้ดับเบิ้ลคลิกที่ pop-up menu ทีละอันเพื่อกำหนดค่าต่างๆ ซึ่งเครื่องมือที่ใช้สร้าง GUI แต่ละตัวจะมี Property คล้ายๆ กันประมาณนี้

ส่วนที่ผมตีกรอบสี่เหลี่ยมเอาไว้คือ property ส่วนที่เราจะเปลี่ยนค่านะครับ
- FontSize เอาไว้กำหนดขนาด
- String คือข้อความที่แสดงเวลาเราคลิกที่ pop-up menu (ตอนรันโปรแกรม)
- Tag คือชื่อของ object (ผมจะเรียกเครื่องมือแต่ละตัวที่เอามาวางบนหน้า GUI ว่า object นะครับ) ซึ่งชื่อ tag นี่สำคัญมาก เพราะเวลาเราเขียนโปรแกรม เมื่อจะอ่านค่า หรือเขียนค่ามาที่ object ตัวนี้ เราจะใช้ชื่อ tag นี่แหละครับ

Property อีกตัวที่ควรจะจำไว้ก็คือ Value มันจะเก็บค่าที่เราคลิกใน pop-up menu ยกตัวอย่างเช่น ถ้าใน pop-up menu ของเรามีตัวเลือก 3 ตัวดังนี้
- Apple
- Mango
- Banana
ถ้าเราคลิกเลือกที่ Mango ค่าตรง Value ก็จะเป็น 2 ซึ่งหมายความว่า ผู้ใช้งานโปรแกรมเลือกเมนูที่ 2 นั่นเอง

เมื่อเราตั้งค่า property เสร็จแล้วให้กด save แล้ว matlab จะสร้างโค้ดสำหรับ object ตัวนี้ให้เราโดยอัตโนมัติ ดังนี้

ในตัวอย่างนี้ pop-up menu ทั้ง 2 ตัว ผมตั้งชื่อว่า pop1 และ pop2 นะครับ เวลา matlab สร้างโค้ดให้เราก็จะเห็นชื่อ tag อยู่ข้างหน้า แล้วตามด้วย _ (under scroll) ซึ่ง pop-up menu แต่ละตัวจะมีโค้ดอยู่ 2 ฟังก์ชัน คือ
- Callback ฟังก์ชัน เวลาเขียนโค้ดให้เขียนใส่ตรงนี้
- CreateFcn เป็นฟังก์ชันสำหรับสร้าง object ตัวนั้นในหน้า GUI เราไม่จำเป็นต้องไปแก้ไขอะไร

อีกอย่างที่สำคัญคือ การเขียนฟังก์ชันใน GUI ห้ามใส่ end ต่อท้ายฟังก์ชันนะครับ

2. การอ่านค่าจาก Pop-up Menu

การอ่านค่าจาก object ทุกชนิดในหน้า GUI เราจะใช้คำสั่ง get โดยมีรูปแบบคำสั่งดังนี้

get(handles.xxx , 'propName')

xxx คือชื่อ tag ของ object
propName คือชื่อ property ที่เราต้องการอ่านค่า

ตัวอย่างเช่น
Pop-up menu ทั้ง 2 ตัวผมตั้งชื่อว่า pop1 และ pop2 ตามลำดับ
สมมุติว่าเราอยากจะอ่านค่าเมนูของ pop1 ว่ามีเมนูอะไรบ้าง
เราสามารถเขียนโค้ดได้ดังนี้

A = get(handles.pop1,'string');

ตัวแปร A ก็จะเก็บค่าเมนูของ pop1 เอาไว้ในรูปแบบ cell array โดยที่ชื่อเมนูที่ 1 ก็จะอยู่ตำแหน่งที่ 1
ชื่อเมนูที่ 2 ก็จะอยู่ตำแหน่งที่ 2 ไปเรื่อยๆ ตามลำดับ ดังนั้นหากเราใช้คำสั่ง length(A) เราก็จะทราบว่า ใน pop1 มีเมนูอยู่ทั้งหมดกี่เมนู

มาลองดูตัวอย่างการเขียนกันดีกว่าครับ
สมมุติว่าใน pop1 ผมกำหนดให้มีเมนูอยู่ 3 เมนูดังนี้

เมื่อเรากำหนดค่า string ของ pop1 เสร็จแล้ว ให้เรากด save ในหน้า GUI ทุกครั้งนะครับ หลังจากนั้นเมื่อกดรันโปรแกรม เราก็จะเห็นว่าใน pop1 มีเมนูให้เลือก 3 ตัวตามที่เรากำหนดไว้

จากนั้นเราไปเขียนโค้ดใน pop1_Callback ดังนี้ครับ

A = get(handles.pop1,'string');
B = get(handles.pop1,'value');
C = A{B};
msgbox(C)

เมื่อเรารันโปรแกรม แล้วคลิกเลือกเมนูใน pop1 ก็จะมีข้อความแจ้งเตือนเด้งขึนว่าว่าเมนูที่เราเลือกคืออะไร

เราใช้คำสั่ง get 2 ครั้งเพื่ออ่านค่า string มาเก็บไว้ในตัวแปร A ดังนั้นในตัวแปร A ก็จะมีข้อความเก็บไว้ในรูปแบบ cell จำนวน 3 ข้อความ คือ Black-White, Gray, Color

และเราใช้คำสั่ง get ครั้งที่สอง เพื่ออ่านค่า value เพื่อดูว่า user กดเลือกเมนูไหนใน 3 เมนูนี้ จากนั้นเราเลือกเอาเฉพาะเมนูนั้นออกมาแสดง โดยใช้คำสั่ง msgbox

*หมายเหตุ คำสั่ง C = A{B} ก็คือการเข้าถึงข้อมูลในเซลล์อาเรย์ธรรมดาทั่วไป เหมือนอย่างเช่น
X = {'Hello', 'Hi', 'How are you'};
Y = X{1};

ตัวแปร Y ก็จะเก็บคำว่า Hello เอาไว้

3. การกำหนดค่าให้ Pop-up Menu

การกำหนดค่าให้ object ทุกชนิดใน GUI จะใช้คำสั่ง set ซึ่งมีรูปแบบดังนี้

set(handles.xxx, 'propName', yyy)

xxx คือชื่อ tag ของ object
propName คือชื่อ property ที่เราต้องการอ่านค่า
yyy คือค่าที่ต้องการกำหนดใส่เข้าไป

จะเห็นว่าคล้ายๆ กับคำสั่ง get เลยใช่ไหมครับ ต่างกันแค่ว่าคำสั่ง set จะต้องมีการกำหนดค่าต่อท้ายเท่านั้นเอง

สำหรับตัวอย่างคำสั่ง set ดูในหัวข้อที่ 4 และ 5 ได้เลยนะครับ

4. การกำหนดค่าอัตโนมัติ เมื่อเริ่มรันโปรแกรม

ถ้าเกิดเราไม่อยากเข้าไปตั้งค่าเมนูใน property string เราก็สามารถเขียนโค้ดเพื่อกำหนดค่า string ได้เองโดยอัตโนมัติ ทุกครั้งที่เริ่มรันโปรแกรม ซึ่งเราสามารถทำได้ง่ายๆ โดยเขียนคำสั่งใส่ไว้ในฟังก์ชัน
OpeningFcn ซึ่งเป็นฟังก์ชันที่ 2 นับจากด้านบนสุดของโปรแกรมเสมอ

เมื่อเรากดปุ่มรันโปรแกรม GUI จะมาเริ่มทำงานที่ฟังก์ชันนี้โดยอัตโนมัติทุกครั้ง ดังนั้นหากเราต้องการกำหนดค่าเริ่มต้นอะไรให้กับ object เราก็สามารถมาเขียนกำหนดได้ในฟังก์ชันนี้

ตัวอย่างเช่น
ถ้าหากเราใส่โค้ด

set(handles.pop2,'string', '-');

เมื่อกดรันโปรแกรมทุกครั้ง เมนูของ pop2 ก็จะถูกกำหนดค่าเป็น " - " เสมอ

5. การใช้งาน Pop-up Menu หลายอันร่วมกัน

จริงๆ แล้วมันก็คือการประยุกต์ใช้คำสั่ง get และ set เท่านั้นเองครับ ไม่มีอะไรซับซ้อน

ยกตัวอย่างเช่น ในโปรแกรมนี้
pop1 มี 3 เมนูได้แก่
- Black-White
- Gray
- Color

ผมจะกำหนดให้ pop2 เปลี่ยนค่าเมนูไปตาม pop1 โดยมีเงื่อนไขดังนี้
1. ถ้าหาก user เลือก pop1 เป็น Black-White เมนูใน pop2 จะเป็นดังนี้
    - Black
    - White

2. ถ้าหาก user เลือก pop1 เป็น Gray เมนูใน pop2 จะเป็นดังนี้
    - Gray 50%
    - Gray 80%

3. ถ้าหาก user เลือก pop1 เป็น Color เมนูใน pop2 จะเป็นดังนี้
    - Red
    - Green
- Blue

วิธีทำก็ง่ายๆ ครับ ดังนี้

B = get(handles.pop1,'value');
switch(B)
    case 1
        X = {'Black','White'};
    case 2
        X = {'Gray 50%','Gray 80%'};
    case 3
        X = {'Red','Green','Blue'};
    otherwise
        X = '-';        
end
set(handles.pop2,'string',X);

หลังจากนั้นเมื่อเรารันโปรแกรม เมนูที่แสดงใน pop2 จะเปลี่ยนไปตามเมนูใน pop1 เสมอ

จบหัวข้อ

ค้นหาบล็อกนี้

KRITTHANIT