Friday, November 18, 2011

003. JLABEL



With the label (jLabel), we can display unselectable text and image. We can give the label various characteristics such as multiple lines, multiple fonts or multiple colors by specifying html code in a label's text. Label are not opaque by default, turn its opacity property to "true", if you need to paint the label's background.

Assume: we have created file Frame01 as following archive 001. THE BEGINNING.
  1. Open Frame01.
  2. In Palette, subtab Swing Controls click Label;



  3. Add 4 labels in panel, hold SHIFT + click, when adding a last label release SHIFT, just click.
  4. Select fourth label, hold SHIFT + drag then surround four labels.


  5. In tab Properties, subtab Other Properties, property border, click button … If there isn't border property, so click one jLabel, then repeat selecting 4 jLabels.




  6. In dialog select Line Border, click OK.



  7. Change size for every label, then compose them as following:



  8. Right click jLabel1, select Edit Text, then type This is the first, hit ENTER.

        
  9. In tab Properties, subtab Properties, property horizontalAlignment, select CENTER.
  10. Property background, select yellow. Though 've been OK, the viewing doesn't change, cause opaque property is false.



  11. Subtab Other Properties, checked opaque property.



  12. Right click jLabel1, select Change Variable Name… named lb1, click OK.

     


  13. Click jLabel2, hit F2.
  14. In mode edit, type “This is the second with multiline and multi-style”. Hit ENTER.

     

  15. But, there are not multiple-line and not multiple-style. you 've to do that using html script.
  16. When jLabel2 selected, In tab Properties, subtab Properties, property text, click button …
     


  17. In dialog type following text:
    <html>
    This is the first line<br>
    <center>This is the second line centered</center><br>
    <span style="color: red; font-weight: bold;">This is the first style</span><br>
    <big><font style="font-family: Arial; color: rgb(51, 102, 255);">This is the second style</font><big>
    </html>

    click OK.




  18. Copy image (.jpg) file with small size to folder …\Project01\src\package01
  19. Click jLabel3, in tab Properties, subtab Properties, property icon, click button …



  20. In dialog, choose option Image Within Project, select image file.Click OK.



  21. In tab Properties, follow this properties:
    subtab property value
    Properties horizotalAlignment CENTER
    Other Properties text This is an image


    		horizontalTextPosition CENTER


    		verticalTextPosition TOP
  22. To positioning text with image, use horizontalTextPosition and verticalTextPosition properties.

  23. To remove text, select jLabel3, hit F2, delete the text.
Weakness: we still hard to change an image size in label, and we need a particular script for that. It is, there is some alternative, that is a script html, but the location an image file has to be outside from folder Project01, for example:
  • Click jLabel4, hit F2.
    Type:
    <html><img src="file:///C:/globe.jpg" width="160" height="80"></html>

    Hit ENTER.


If the html-script is from an .html file, we would better using jTextPane component. In the next time we will discuss it in particular blog.


MNEMONIC
  1. Add jTextField and put it aside of lb1 (jLabel1);


  2. Right click jTextField1, select Change Variable Name… named tx1, click OK.



  3. Click lb1 (jLabel), in tab Properties, subtab Properties, property labelFor, choose tx1.
  4. Property displayedMnemonic, value= T.
The result: when we press ALT+T, a focus will move to tx1.




CHANGING PROPERTY AT RUNTIME
  1. Right click jButton1, choose Events, choose Action, choose actionPerformed.



  2. Change script:
    JOptionPane.showMessageDialog(null, lb1.getText());
    lb1.setText("We 've Test it!");



RUNNING PROGRAM
  • Press F6, if lb1 doesn't change, close program.
  • Click menu Run, select Clean and Build Project, or click toolbar



  • After finished, press F6.
  • Click jButton1, then click OK.
  • Click ALT+T, focus will move to tx1.


Thank you, please try it. In the next blog we will discuss about jTextField, jTextArea and jPasswordField.
Posted by at