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.
la

Niciun comentariu:

Trimiteți un comentariu