การใช้ Label ใน WaveMaker
CLASS: Label
SUPER CLASS: Control
Label เป็น widget ที่มีลักษณะเป็นข้อความที่ผู้ใช้ ไม่สามารถแก้ไขได้ ซึ่งหน้าที่ที่สำคัญของ Label ก็คือการแสดงข้อความ ซึ่งเราสามารถแสดง ในรูปแบบ dynamic ได้ โดยใช้ javascript
ก่อนอื่นเรามาดูหต้าตาของมันก่อนดีกว่าครับ ตามรูปด้านล่างเลย
ต่อไปมาดู property ต่าง ๆ กันครับ ตามรูปด้านล่างเลย
name ก็ชื่อของ label ครับ
showing กำหนดให้แสดงหรือไม่แสดง
align กำหนดตำแหน่งของตัวอักษร
caption กำหนดข้อความของ label
singleLine กำหนดให้ข้อความใน label อยู่ในบรรทัดเดียว
width กำหนดความกว้าง
height กำหนดความสูง
display กำหนดชนิดการแสดงผล
link กำหนดลิ้งค์ให้กับ label
autosize กำหนด autosize ตามขนาด
Methods
ต่อไปเรามาดู Methods ต่าง ๆ ใน label โดยการเซตโดยใช้ javascript กันครับ
Label.setAlign()
ใช้ในการกำหนด align ให้กับ label ดูตัวอย่างการใช้ด้านล่างครับ
this.label1.setAlign("right");
Label.setCaption()
ใช้ในการกำหนด caption ให้กับ label ดูตัวอย่างการใช้ด้านล่างครับ
this.label1.setCaption("โชว์ cation");
Label.setLink()
ใช้ในการกำหนด link ให้กับ label
this.label1.setLink("http://www.google.com");
this.label2.setLink("javascript:main.label1.setCaption("this is a better caption")");
// การ setLink แบบที่สองที่เมื่อกดแล้ว label1 ในหน้า main จะเปลี่ยน caption เป็นคำว่า this is a better caption
Label.setSingleLine()
ใช้ในการกำหนด sinblelind ให้กับ label ดูตัวอย่างการใช้ด้านล่างครับ
this.label1.setSingleLine(true);
Parent Class Methods
Component.destroy
ใช้ในการลบ component ออก ดูตัวอย่างการใช้ด้านล่างครับ
this.label1.destroy();
Component.getId()
ใช้ในการคืนค่า id ซึ่งจะเหมือนกับชื่อ ดูตัวอย่างการใช้ด้านล่างครับ แต่ถ้าต้องการ id ขณะรัน ให้ใช้ getRuntiomId
this.label1.getId(); // return label1
Component.getRuntimeId()
ใช้ในการคืนค่า id ขณะรันโปรแกรม ดูตัวอย่างการใช้ด้านล่างครับ
this.label1.getRuntimeId(); // return ชื่อหน้าเพจ.label1
Component.getValue()
ใช้ในการคืนค่า value ต่าง ๆ ของ Component ดูตัวอย่างการใช้ด้านล่างครับ
this.label1.getValue("caption"); // return ค่า caption
this.label1.getValue("width"); // return ค่า width
Component.isAncestorHidden()
ใช้ในการตรวจสอบว่า component นั้นได้โชว์อยู่หรือไม่ ซึ่งถ้าโชว์จะคืน false แต่ไม่โชว์จะคืน true ดูตัวอย่างการใช้ด้านล่างครับ
this.label1.isAncestorHidden();
Component.setBorder()
ใช้ในการกำหนดขอบให้กับ component ดูตัวอย่างการใช้ด้านล่างครับ
this.label1.setBorder("4");
this.label1.setBorder("4,2,4,2");
Component.setBorderColor()
ใช้ในการกำหนดสีของขอบให้กับ component ดูตัวอย่างการใช้ด้านล่างครับ
this.label1.setBorderColor("red");
this.label1.setBorderColor("rgb(255,0,0)");
this.label1.setBorderColor("#FF0000");
Component.setHeight()
ใช้ในการกำหนดความสูงให้กับ component ดูตัวอย่างการใช้ด้านล่างครับ
this.label1.setHeight("100px");
this.label1.setHeight("50%");
Component.setMargin()
ใช้ในการกำหนด margin ให้กับ component ดูตัวอย่างการใช้ด้านล่างครับ
this.label1.setMargin("4");
this.label1.setMargin("4,2,4,2");
Component.setPadding()
ใช้ในการกำหนด padding ให้กับ component ดูตัวอย่างการใช้ด้านล่างครับ
this.label1.setPadding("4");
this.label1.setPadding("4,2,4,2");
Component.setParent()
ใช้ในการกำหนด parent ให้กับ component ดูตัวอย่างการใช้ด้านล่างครับ
this.label1.setParent(this.panel1);
Component.setShowing()
ใช้ในการกำหนดว่าให้โชว์หรือไม่โชว์ให้กับ component ดูตัวอย่างการใช้ด้านล่างครับ
this.label1.setShowing(true);
this.label1.setShowing(false);
Component.setValue()
ใช้ในการกำหนด value ต่าง ๆ ให้กับ component ดูตัวอย่างการใช้ด้านล่างครับ
this.label1.setValue("caption", "Click me");
this.label1.setCaption("Click me");
// บรรทัด สองบรรทัดข้างบน มีค่าเท่ากัน นั่นคือ สามารถเซตแบบไหนก็ได้
Component.setWidth()
ใช้ในการกำหนดความกว้างให้กับ component ดูตัวอย่างการใช้ด้านล่างครับ
this.label1.setWidth("100px");
this.label1.setWidth("50%");