005. JFORMATTEDTEXTFIELD

JFormattedTextField provide a way to specify the valid set of characters that can be typed in aJTextField.

Assume: we have understood about a blog archive 001. THE BEGINNING.

1. In package01, create a new jFrame, named FrameFormattedText01.
   
   
   
2. Add jPanel, set layout=null;
   
   
3. Add 8 jLabel and 8 jFormattedTextField controls, like as following picture:
   
   
   
   
   
4. Change their properties as table below:
   

   Controls	Property	Value
   jLabel1	text	just letter (mask)
   jLabel2	text	just number (mask)
   jLabel3	text	with a format (mask)
   jLabel4	text	date
   jLabel5	text	number with decimal
   jLabel6	text	percent
   jLabel7	text	number
   jLabel8	text	result
   jFormattedTextField1	name (right click - Change Variabel Name ...)	ft1
   jFormattedTextField2	name	ft2
   jFormattedTextField3	name	ft3
   jFormattedTextField4	name	ft4
   jFormattedTextField5	name	ft5
   jFormattedTextField6	name	ft6
   jFormattedTextField7	name	ft7
   jFormattedTextField8	name	ft8

   
   
5. Select all jLabel, set horizontalAlignment property = RIGHT.
   
6. Select all jFormattedTextField, then remove text property.
7. Click ft1, set formatterFactory property, Category= Mask, Format= ?????, click OK.
   
   
   
   
   
8. Click ft2, set formatterFactory property, Category= Mask, Format= #####, click OK.
9. Click ft3, set formatterFactory property, Category= Mask, Format= (****) *****, click OK.
10. Click ft4, set formatterFactory property, Category= Date, Format= dd-MM-yyyy, click OK.
11. Click ft5, set formatterFactory property, Category= Number, Format= #,##0.00, click OK.
12. Click ft6, set formatterFactory property, Category= Percent, Format= #0.00%, click OK.
13. Click ft7, set formatterFactory property, Category= Number, Format= #,##0.###, click OK.
14. Click ft8, set formatterFactory property, Category= Number, Format= #,##0.###, click OK.
15. Add jButton, named btsum, set Text property = calculate.
    
    
    
16. Right click btsum, select Events - actionPerformed
17. Add script:
    Float percent=Float.valueOf(ft6.getValue().toString());
    Float m=Float.valueOf(ft7.getValue().toString());
    ft8.setValue((percent * m) + m);
    
    
    
    
18. Run this jFrame by press SHIFT+F6
19. We will see:
    
    • ft1 just accepted the letter (limited)
    • ft2 just accepted the number (limited)
    • ft3 accepted any character (limited)
    • ft4 accepted date, and returning a datetype
    • ft8 display the result of calculation, when we clicked the button.
      
      

Note:
To get a zero-length string from a blank mask-jFormattedTextField, we have to set trim() function. Example:
String zerolength = ft1.getText().trim();


These are the characters that you can use in the formatting mask:

Character	Description
#	Any valid number (Character.isDigit)
'	Escape character, used to escape any of the special formatting characters.
U	Any character (Character.isLetter). All lowercase letters ar mapped to uppercase
L	Any character(Character.isLetter). All uppercase letters ar mapped to lowercase
A	Any character or number (Character.isLetter or Character.isDigit)
?	Any character (Character.isLetter)
*	Anything
H	Any hex character (0-9, a-f, A-F)

Note:
Be careful if we will rename the class/file that contains a mask-JFormattedTextField. The error-message will be displayed when we run the program. We have to reset a formatterFactory property.

004. JTEXTFIELD, JPASSWORDFIELD, JTEXTAREA

A jTextField is a basic text control that lets the user enter a small amount of text. A textfield fires an action event when the user pressing the ENTER.
The jPasswordField class, a subclass of jTextField, provides specialized text fields for password entry. For security reason, a passwordfield doesn't show the characters that the user types. A passwordfield store its value as an array of characters, rather than as string. A passwordfield fires an action event when the user pressing the ENTER.
The jTextArea class provides a component that displays multiple lines of text and optionally allows the user to edit the text.

Assume: we have understood about a blog archive 001. THE BEGINNING.

1. In package01, create a new jFrame, named FrameText01.
    
   
   
   
   
2. Add jPanel, set layout=null;
   
   
   
   
   
   
   
   
   
   
   
   
3. Add 2 jTextFields;
   
   
   
   
   
   
4. Right click jTextField1 select Edit Text, set empty.
   
5. Right click jTextField1,select Change Variable Name ..., named tx1.
6. Do the same to jTextField2,Change Variable Name = tx2, click OK. Set horizontalAlignment property to CENTER.
   
   
   
   
7. Right click tx1, select Events - Action - actionPerformed. type following script:
   
   tx2.setText(tx1.getText());
   tx1.transferFocus();
   
   transferFocus methode for moving focus from tx1.
   
   
   
8. Run that file particularly by press SHIFT+F6.
9. Test it by type in tx1 then press ENTER, we will see the result in tx2.
10. Close that running program.
11. Add jPasswordField, Right click select Change Variable Name..., named pf.
    Press F2, then remove the text.
     
    
    
    
    
    
12. Set pf position as following:
    
    
    
13. Right click pf, select Events - Action - actionPerformed type following script:
    tx2.setText(String.valueOf(pf.getPassword()));
    tx2.requestFocus();
    
    
    
    requestFocus methode for moving focus to tx2.
    
    
14. Run that file particularly by press SHIFT+F6.
15. Type some characters in pf control then press ENTER, we will see the result in tx2.
16. Close that running program.
17. Add jTextArea, then right click select Change Variable Name..., named ta.
    
    
    
    Before giving a name for jTextArea, we have to sure that jTextArea is being selected, by noticing the  inspector tab.
    
    
    
    
18. Set ta position as following.
    
    
     
    
    
    
    
19. Run that file particularly by press SHIFT+F6.
20. Type some characters in ta control then press ENTER, the cursor move to the next line.
    It is different from jTextField control, if we pressed ENTER. In jTextArea, We must press CTRL-TAB for moving cursor to another control.
    
    
21. If we want to set right alignment property on jTextArea, we must add the following script :
    ta.setComponentOrientation(ComponentOrientation.RIGHT_TO_LEFT);
    
    
    

But, it would be better using jFormattedTextField if we would:

• calculate the number that we 've entried;
• limit the number of character that we 've entried;
• limit the type of character (number or alphabet);
  
• display a date format; or
• accept some input with a certain format (mask).

Thank you, please try it. If I have a time, in the next blog we will discuss about JFormattedTextField.

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.