My JSF Books/Videos My JSF Tutorials OmniFaces/JSF PPTs
JSF 2.3 Tutorial
JSF Caching Tutorial
JSF Navigation Tutorial
JSF Scopes Tutorial
JSF Page Author Beginner's Guide
OmniFaces 2.3 Tutorial Examples
OmniFaces 2.2 Tutorial Examples
JSF Events Tutorial
OmniFaces Callbacks Usages
JSF State Tutorial
JSF and Design Patterns 		JSF 2.3 New Features (2.3-m04)
Introduction to OmniFaces
25+ Reasons to use OmniFaces in JSF
OmniFaces Validators
OmniFaces Converters
JSF Design Patterns
Mastering OmniFaces
Reusable and less-verbose JSF code

My JSF Resources ...

 Java EE Guardian
Member of JCG Program
Member MVB DZone
Blog curated on ZEEF
OmniFaces is an utility library for JSF, including PrimeFaces, RichFaces, ICEfaces ...

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

[OmniFaces Utilities] - Find the right JSF OmniFaces 2 utilities methods/functions

Search on blog

Petition by Java EE Guardians

Twitter

sâmbătă, 14 februarie 2015

[JSF Page Author Beginner's Guide] JSF <inputText> / HTML5 <input> [textbox]

The <h:inputText> renders an HTML "input" element of "type" "text"

Common/basic usage in JSF - without <h:outputLabel> :

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"              
      xmlns:h="http://xmlns.jcp.org/jsf/html">
 <h:head>
  <title>JSF inputText examples</title>        
 </h:head>
 <h:body>
  <h:form>
   Name: <h:inputText value="#{playerBean.name}"/>
   <h:commandButton value="Send" action="data"/>
  </h:form>
 </h:body>
</html>

The <h:inputText> will be rendered in HTML as:

<input type="text" name="j_idt6:j_idt8" />

Common/basic usage in JSF - with <h:outputLabel> :

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"              
      xmlns:h="http://xmlns.jcp.org/jsf/html">
 <h:head>
  <title>JSF inputText examples</title>        
 </h:head>
 <h:body>
  <h:form>
   <h:outputLabel for="nameId" value="Name:"/>
   <h:inputText id="nameId" value="#{playerBean.name}"/>
   <h:commandButton value="Send" action="data"/>
  </h:form>
 </h:body>
</html>

The <h:inputText> will be rendered in HTML as:

<input id="j_idt5:nameId" type="text" name="j_idt5:nameId" />

The PlayerBean will be:

package beans;

import java.io.Serializable;
import javax.enterprise.context.SessionScoped;
import javax.inject.Named;

@Named
@SessionScoped
public class PlayerBean implements Serializable{
   
    private String name;
   
    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }                      
}

And the data.xhtml page simply display the user inputs:

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"    
      xmlns:h="http://xmlns.jcp.org/jsf/html">
 <h:head>
  <title></title>        
 </h:head>
 <h:body>
  <!-- View submitted data -->           
  Name: <h:outputText value="#{playerBean.name}"/><br/>                             
 </h:body>
</html>

Data flow in image:
More examples:
Add xmlns:pt="http://xmlns.jcp.org/jsf/passthrough" for pass-through attributes
Simple tooltip usage

<h:form>
 Name: <h:inputText value="#{playerBean.name}" title="Enter player name here"/>
 <h:commandButton value="Send" action="data"/>
</h:form>
Simple inline style

<h:form>
 Name: <h:inputText value="#{playerBean.name}" style="background-color: darkorange; color: brown; width: 250px; height: 25px;"/>
 <h:commandButton value="Send" action="data"/>
</h:form>
Simple CSS style

<h:form>
 Name: <h:inputText value="#{playerBean.name}" styleClass="input" />
 <h:commandButton value="Send" action="data" />
</h:form>
Preset the input text value via the bean's (post) constructor

<h:form>
 Name: <h:inputText value="#{playerBean.name}"/>
 <h:commandButton value="Send" action="data"/>
</h:form>

And place initialization in the bean constructor:

@Named
@SessionScoped
public class PlayerBean implements Serializable {
 ...
 public PlayerBean() {
  name = "Roger Federer";
 }
 ...
}

Or in post constructor (this is useful if you need to perform initialization based on some injected artifacts):

@Named
@SessionScoped
public class PlayerBean implements Serializable {

 @Inject
 private SelectedPlayerBean selectedPlayerBean; 
 ...
 @PostConstruct
 public void init() {
  name = selectedPlayerBean.getPlayer();
 }
...
}

Keep in mind that constructor (and post constructor) are invoked at each request in case of request scoped beans, so initialization will take place at each request ! This kind of initialization is commonly useful in view/session scoped beans where constructor (and post constructor) are invoked per view/session.
Make a required text box via JSF (see below via HTML 5)

<h:form>
 Name: <h:inputText value="#{playerBean.name}" required="true"/>
 <h:commandButton value="Send" action="data"/>
</h:form>
Make a required text box via HTML 5

<!-- for any case add JSF attribute required="true" also -->
<h:form>
 Name: <h:inputText value="#{playerBean.name}" required="true" pt:required="true"/>
 <h:commandButton value="Send" action="data"/>
</h:form>
Make an text box with placeholder via HTML 5, placeholder="some_placeholder"

<h:form>
 Name: <h:inputText value="#{playerBean.name}" pt:placeholder = "Type player name"/>
 <h:commandButton value="Send" action="data"/>
</h:form>
Make an text box with autofocus via HTML 5, autofocus="true"

<h:form>
 Name: <h:inputText value="#{playerBean.name}" pt:autofocus = "true"/>
 <h:commandButton value="Send" action="data"/>
</h:form>
Make an e-mail text box via HTML 5, type="email"

<h:form>
 E-mail: <h:inputText value="#{playerBean.email}"  pt:type="email" pt:required="true" required="true"/>
 <h:commandButton value="Send" action="data"/>
</h:form>
Make an URL text box via HTML 5, type="url"

<h:form>
 Website URL: <h:inputText value="#{playerBean.weburl}"  pt:type="url" pt:required="true" required="true"/>
 <h:commandButton value="Send" action="data"/>
</h:form>
Make an color chooser text box via HTML 5, type="color"

<h:form>
 Favorite color: <h:inputText value="#{playerBean.color}"  pt:type="color" pt:required="true" required="true"/>
 <h:commandButton value="Send" action="data"/>
</h:form>
Make a date text box via HTML 5, type="date", min="min_date", max="max_date"

<h:form>
 Birthday: <h:inputText value="#{playerBean.date}"  pt:type="date" pt:min="2015-01-01" pt:max="2025-12-30" pt:required="true" required="true"/>
 <h:commandButton value="Send" action="data"/>
</h:form>
Make a date/time local text box via HTML 5, type="datetime-local"

<h:form>
 Birth time: <h:inputText value="#{playerBean.localtime}"  pt:type="datetime-local" pt:required="true" required="true"/>
 <h:commandButton value="Send" action="data"/>
</h:form>
Make a month selector text box via HTML 5, type="month"

<h:form>
 Birth month: <h:inputText value="#{playerBean.month}"  pt:type="month" pt:required="true" required="true"/>
 <h:commandButton value="Send" action="data"/>
</h:form>
Make a week selector text box via HTML 5, type="week"

<h:form>
 Birth week: <h:inputText value="#{playerBean.week}"  pt:type="week" pt:required="true" required="true"/>
 <h:commandButton value="Send" action="data"/>
</h:form>

Make a number text box via HTML 5, type="number", min="some_min", max="some_max" (moreover: step="some_step")

 <h:form>
  Age: <h:inputText value="#{playerBean.age}"  pt:type="number" pt:min="18" pt:max="150" pt:required="true" required="true"/>
  <h:commandButton value="Send" action="data"/>
</h:form>

Make a range text box via HTML 5, type="range", min="some_min", max="some_max"

<h:form>
 Tournaments: <h:inputText value="#{playerBean.tournaments}"  pt:type="range" pt:min="0" pt:max="1500" pt:required="true" required="true"/>
 <h:commandButton value="Send" action="data"/>
</h:form>
Make a pattern text box via HTML 5, pattern="some_pattern" (e.g. three letter country code)

<h:form>
 Country code: <h:inputText value="#{playerBean.countrycode}" pt:pattern="[A-Za-z]{3}" pt:required="true" required="true"/>
 <h:commandButton value="Send" action="data"/>
</h:form>
Make a text box with hints via HTML 5, list="some_list"

<h:form>
 Name: <h:inputText value="#{playerBean.name}" pt:list="players" pt:required="true" required="true"/>
 <datalist id="players">
  <option value="Rafael Nadal"/>
  <option value="Roger Federer"/>
  <option value="David Ferrer"/>
  <option value="Novak Djokovic"/>
  <option value="Andy Murray"/>
 </datalist>
 <h:commandButton value="Send" action="data"/>
</h:form>     
Complete source code on GitHub.
See also Mkyong.com.
More resources on Constantin Alin, ZEEF page.
InputText in JSF Extension on JSF ShowCase ZEEF page.
Publicat de la
Etichete: , ,

Niciun comentariu :

Trimiteți un comentariu

Abonați-vă la: Postare comentarii ( Atom )

JSF BOOKS COLLECTION

Postări populare

OmniFaces/JSF Fans

Visitors Starting 4 September 2015

Locations of Site Visitors