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

marți, 24 februarie 2015

[JSF Page Author Beginner's Guide] JSF <inputTextarea> / HTML5 <textarea> element

The <h:inputTextarea> renders an HTML "textarea" element
Common/basic usage in JSF:

<?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:pt="http://xmlns.jcp.org/jsf/passthrough"       
      xmlns:h="http://xmlns.jcp.org/jsf/html">
 <h:head>
  <title>JSF inputTextarea examples</title>        
 </h:head>
 <h:body>
  <h:form>          
   Text: <h:inputTextarea cols="30" rows="5" value="#{playerBean.text}" />           
   <h:commandButton value="Send" action="data"/>
  </h:form>
 </h:body>
</html>

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

<textarea name="j_idt6:j_idt8" cols="30" rows="5"></textarea>

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 text;

 public String getText() {
  return text;
 }

 public void setText(String text) {
  this.text = text;
 }           
}

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 -->           
  Text: <h:outputText value="#{playerBean.text}"/>                     
 </h:body>
</html>

Data flow in image:
More examples:

Add xmlns:pt="http://xmlns.jcp.org/jsf/passthrough" for pass-through attributes

Style textarea with CSS class
            
<h:form>          
 Text: <h:inputTextarea cols="30" rows="5" value="#{playerBean.text}" styleClass="textarea" />           
 <h:commandButton value="Send" action="data"/>
</h:form>

<!-- Style textarea with inline CSS -->           
<h:form>          
 Text: <h:inputTextarea cols="30" rows="5" value="#{playerBean.text}" 
         style=" background-color: graytext; color: greenyellow;" />           
 <h:commandButton value="Send" action="data"/>
</h:form>

Preset the text value via the bean's (post) constructor

<h:form>          
 Text: <h:inputTextarea cols="30" rows="5" value="#{playerBean.text}"/>           
 <h:commandButton value="Send" action="data"/>
</h:form>

And place initialization in the bean constructor:

@Named
@SessionScoped
public class PlayerBean implements Serializable {
 ...
 public PlayerBean() {
  text= "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() {
  text = 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 textarea via JSF (see below via HTML 5)

<h:form>          
 Text: <h:inputTextarea cols="30" rows="5" value="#{playerBean.text}" required="true"      requiredMessage="Please, enter some text!"/>           
 <h:commandButton value="Send" action="data"/>
</h:form>

Make a required textarea via HTML 5, required attribute

<!-- for any case add JSF attribute required="true" also -->    
<h:form>          
 Text: <h:inputTextarea cols="30" rows="5" value="#{playerBean.text}" 
          pt:required="true" required="true" requiredMessage="Please, enter some text!"/>           
 <h:commandButton value="Send" action="data"/>
</h:form>

Make a textarea with autofocus via HTML 5, autofocus attribute

<h:form>          
 Text: <h:inputTextarea cols="30" rows="5" value="#{playerBean.text}" pt:autofocus="true"/>           
 <h:commandButton value="Send" action="data"/>
</h:form>

Make a textarea with max length via HTML 5, maxlength attribute (e.g. 10 characters)

<h:form>          
 Text: <h:inputTextarea cols="30" rows="5" value="#{playerBean.text}" pt:maxlength="10"/>           
 <h:commandButton value="Send" action="data"/>
</h:form>

Make a textarea with placeholder via HTML 5 placeholder attribute

<h:form>          
 Text: <h:inputTextarea cols="30" rows="5" value="#{playerBean.text}" pt:placeholder="Type some text here"/>           
 <h:commandButton value="Send" action="data"/>
</h:form>

Make a textarea with wrapped text via HTML 5 wrap attribute

<h:form>          
 Text: <h:inputTextarea cols="30" rows="5" value="#{playerBean.text}" pt:wrap="hard"/>            
 <h:commandButton value="Send" action="data"/>
</h:form>
<!-- you can switch to pt:wrap="soft" and check the POST request via Firebug to see the 'wrap' effect -->

Complete source code on GitHub.
See also Mkyong.com.
More resources on Constantin Alin, ZEEF page.
Textarea in JSF Extension on JSF ShowCase ZEEF page.

Niciun comentariu :

Trimiteți un comentariu

JSF BOOKS COLLECTION

Postări populare

OmniFaces/JSF Fans

Follow by Email

Visitors Starting 4 September 2015

Locations of Site Visitors