📝 add demo to password field, number field and textarea docs

Author: SaifJerbi

demo/src/main/java/io/asfjava/ui/demo/screen/DemoForm.java

@@ -2,36 +2,29 @@
 
 import java.io.Serializable;
 
-import io.asfjava.ui.core.form.TextField;
+import io.asfjava.ui.core.form.TextArea;
 
 public class DemoForm implements Serializable {
 
-	@TextField(title = "Full Name", minLenght = 3)
-	private String fullName;
+	@TextArea(title = "Comment", description = "Add your Comment here", placeHolder = "fill your comment please")
+	private String comment;
 
-	@TextField(title = "Email", pattern = "^\\S+@\\S+$")
-	private String mail;
+	@TextArea(title = "Tweet", placeHolder = "This message will be tweeted", maxLenght = 140, validationMessage = Messages.TWEET_VALIDATION)
+	private String tweet;
 
-	@TextField(title = "Repository", fieldAddonLeft = "https://github.com/")
-	private String githubRepository;
+	@TextArea(title = "Fill a message", minLenght = 50)
+	private String message;
 
-	@TextField(title = "Github user name", fieldAddonRight = "@Github.com")
-	private String githubUserName;
-
-	public String getMail() {
-		return mail;
-	}
-
-	public String getFullName() {
-		return fullName;
+	public String getComment() {
+		return comment;
 	}
 
-	public String getGithubRepository() {
-		return githubRepository;
+	public String getTweet() {
+		return tweet;
 	}
 
-	public String getGithubUserName() {
-		return githubUserName;
+	public String getMessage() {
+		return message;
 	}
 
 	private static final long serialVersionUID = -5073515619469444978L;

demo/src/main/java/io/asfjava/ui/demo/screen/Messages.java

@@ -0,0 +1,8 @@
+package io.asfjava.ui.demo.screen;
+
+public final class Messages {
+	static final String TWEET_VALIDATION = "Twitter limits Tweet length to 140 characters making the definition of a “character” and how they are counted central to any Twitter application";
+
+	private Messages() {
+	}
+}

docs/images/numberField.png

@@ -24,7 +24,7 @@ To render a field as a TextField the developer must add the [@TextField](../src/
 | fieldAddonLeft    | String         | [Extend form controls](http://getbootstrap.com/components/#input-groups) by adding text on the left side of the Text Field |
 | fieldAddonRight   | String         | [Extend form controls](http://getbootstrap.com/components/#input-groups) by adding text on the right side of the Text Field |
 
-The code below is an example using the TextField annotation. Feel free to try this code snipet:
+The code below is an example using the TextField annotation. Feel free to try this code snippet:
 
 ```Java
 import java.io.Serializable;
@@ -64,8 +64,9 @@ public class DemoForm implements Serializable {
 
 ```
 
+1- Demo TextField
+
 ![Demo TextField](images/textField.png)
-<center>*1- Demo TextField*</center>
 
 
 
@@ -84,6 +85,54 @@ The given component can be used to fill numeric values, it can be applied to fie
 | fieldAddonLeft    | String         | [Extend form controls](http://getbootstrap.com/components/#input-groups) by adding text on the left side of the Number Field |
 | fieldAddonRight   | String         | [Extend form controls](http://getbootstrap.com/components/#input-groups) by adding text on the right side of the Number Field |
 
+The code below is an example using the Number annotation. Feel free to try this code snippet:
+
+
+```Java
+import java.io.Serializable;
+
+import io.asfjava.ui.core.form.Number;
+
+public class DemoForm implements Serializable {
+
+	@Number(title = "Average", description = "This a double")
+	private Double average;
+
+	@Number(title = "Rating", placeHolder = "Rate me")
+	private short rating;
+
+	@Number(title = "USA Phone Number", fieldAddonLeft = "+1")
+	private Long phone;
+
+	@Number(title = "Amount", fieldAddonRight = "$")
+	private Double amount;
+
+	public Double getAverage() {
+		return average;
+	}
+
+	public short getRating() {
+		return rating;
+	}
+
+	public Long getPhone() {
+		return phone;
+	}
+
+	public Double getAmount() {
+		return amount;
+	}
+
+}
+
+
+```
+
+2- Demo NumberField
+
+![Demo NumberField](images/numberField.png)
+
+
 ### PasswordField:
 
 For some use cases, the developer need to use a encrypted UI input field to fill the user value. So he can use [@Password](../src/main/java/io/asfjava/ui/core/form/Password.java).
@@ -102,6 +151,32 @@ For some use cases, the developer need to use a encrypted UI input field to fill
 | fieldAddonLeft    | String         | [Extend form controls](http://getbootstrap.com/components/#input-groups) by adding text on the left side of the Password Field |
 | fieldAddonRight   | String         | [Extend form controls](http://getbootstrap.com/components/#input-groups) by adding text on the right side of the Password Field |
 
+The code below is an example using the Password annotation. Feel free to try this code snippet:
+
+```Java
+
+import java.io.Serializable;
+
+import io.asfjava.ui.core.form.Password;
+
+public class DemoForm implements Serializable {
+
+	@Password(title = "Password", description = "Fill your password")
+	private String password;
+
+	public String getPassword() {
+		return password;
+	}
+
+}
+
+```
+
+3- Demo PasswordField
+
+![Demo PasswordField](images/passwordField.png)
+
+
 ### TextArea
 
 The TextArea component is a multiline text field with a border and optional scroll bars. To use a this component the developer must use [@TextArea](../src/main/java/io/asfjava/ui/core/form/TextArea.java)
@@ -118,3 +193,44 @@ The TextArea component is a multiline text field with a border and optional scro
 | noTitle           | Boolean        | Set to true to hide title |
 | fieldAddonLeft    | String         | [Extend form controls](http://getbootstrap.com/components/#input-groups) by adding text on the left side of the Text Area |
 | fieldAddonRight   | String         | [Extend form controls](http://getbootstrap.com/components/#input-groups) by adding text on the right side of the Text Area |
+
+The code below is an example using the TextArea annotation. Feel free to try this code snippet:
+
+```Java
+
+import java.io.Serializable;
+
+import io.asfjava.ui.core.form.TextArea;
+
+public class DemoForm implements Serializable {
+
+	@TextArea(title = "Comment", description = "Add your Comment here", placeHolder = "fill your comment please")
+	private String comment;
+
+	@TextArea(title = "Tweet", placeHolder = "This message will be tweeted", maxLenght = 140, validationMessage = Messages.TWEET_VALIDATION)
+	private String tweet;
+
+	@TextArea(title = "Fill a message", minLenght = 50)
+	private String message;
+
+	public String getComment() {
+		return comment;
+	}
+
+	public String getTweet() {
+		return tweet;
+	}
+
+	public String getMessage() {
+		return message;
+	}
+
+	private static final long serialVersionUID = -5073515619469444978L;
+}
+
+```
+
+4- Demo TextArea
+
+![Demo TextArea](images/textArea.png)
+