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

joi, 19 februarie 2015

[JSF Page Author Beginner's Guide] JSF <inputSecret> / HTML5 <input> [password]

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

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

JSF BOOKS COLLECTION

Postări populare

OmniFaces/JSF Fans

Follow by Email

Visitors Starting 4 September 2015

Locations of Site Visitors