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;" />
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;
...
@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.
...
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!"/>
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