การใช้ 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%");