The <h:inputSecret> renders an HTML "input" element of "type" "password"
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:h="http://xmlns.jcp.org/jsf/html">
<h:head>
<title>JSF inputSecret examples</title>
</h:head>
<h:body>
<h:form>
Password: <h:inputSecret
value="#{playerBean.password}" />
<h:commandButton value="Send"
action="data" />
</h:form>
</h:body>
</html>
The <h:inputSecret>
will be rendered in HTML as:
<input
type="password" name="j_id6:j_id8" value="" />
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 password;
public String getPassword() {
return
password;
}
public void setPassword(String password) {
this.password = password;
}
}
And the data.xhtml
page simply display the user password:
<?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 -->
Password: <h:outputText
value="#{playerBean.password}"/>
</h:body>
</html>
Data flow in
image:
More examples:
Add xmlns:pt="http://xmlns.jcp.org/jsf/passthrough" for pass-through attributes
Add xmlns:pt="http://xmlns.jcp.org/jsf/passthrough" for pass-through attributes
Simple tooltip usage
<h:form>
Password: <h:inputSecret
value="#{playerBean.password}" title="Enter password
here"/>
<h:commandButton value="Send" action="data"/>
</h:form>
Simple inline style
<h:form>
Password: <h:inputSecret
value="#{playerBean.password}" style="color: red;
background-color: black;"/>
<h:commandButton value="Send"
action="data"/>
</h:form>
Simple CSS style
<h:form>
Password : <h:inputSecret
value="#{playerBean.password}" styleClass="password" />
<h:commandButton value="Send"
action="data" />
</h:form>
Make a required password text box via JSF (see below via HTML 5)
<h:form>
Password : <h:inputSecret
value="#{playerBean.password}" required="true"
requiredMessage="Please, provide a password!"/>
<h:commandButton value="Send"
action="data"/>
</h:form>
Make a required password text box via HTML 5, required="true"
<!-- for
any case add JSF attribute required="true" also -->
<h:form>
Password : <h:inputSecret
value="#{playerBean.password}" pt:required="true"
required="true" requiredMessage="Please, provide a
password!"/>
<h:commandButton value="Send"
action="data"/>
</h:form>
Make an password text box with placeholder via HTML 5, placeholder="some_placeholder"
<h:form>
Password: <h:inputSecret
value="#{playerBean.password}" pt:placeholder = "Type a
password"/>
<h:commandButton value="Send"
action="data"/>
</h:form>
Make an password text box with autofocus via HTML 5, autofocus="true"
<h:form>
Password: <h:inputSecret
value="#{playerBean.password}" pt:autofocus = "true"/>
<h:commandButton value="Send"
action="data"/>
</h:form>
Make a password pattern text box via HTML 5, pattern="some_pattern" (e.g. minim 6 characters long)
Password: <h:inputSecret
value="#{playerBean.password}" pt:pattern=".{6,}"
pt:required="true" required="true"/>
<h:commandButton value="Send"
action="data"/>
</h:form>
Complete source code on GitHub.
See also Mkyong.com.
More resources on Constantin Alin, ZEEF page.
InputSecret in JSF Extension on JSF ShowCase ZEEF page.
Niciun comentariu:
Trimiteți un comentariu