The compositecomponentlogin Example Application

The compositecomponentlogin application creates a composite component that accepts a user name and a password. The component interacts with a managed bean. The component stores the user name and password in the managed bean, retrieves the values from the bean, and displays these values on the Login page.

The compositecomponentlogin application has a composite component file, a using page, and a managed bean.

The source code for this application is in the tut-install/examples/web/compositecomponentlogin/ directory.

The Composite Component File

The composite component file is an XHTML file, /web/resources/ezcomp/LoginPanel.xhtml. It has a composite:interface section that declares the labels for the user name, password, and login button. It also declares a managed bean, which defines properties for the user name and password.

<composite:interface>
    <composite:attribute name="namePrompt" default="User Name: "/>
    <composite:attribute name="passwordPrompt" default="Password: "/>

    <composite:attribute name="loginButtonText" default="Log In"/>
    <composite:attribute name="loginAction" 
                         method-signature="java.lang.String action()"/>
    <composite:attribute name="myLoginBean"/>
    <composite:editableValueHolder name="vals" targets="form:name"/>
    <composite:editableValueHolder name="passwordVal" targets="form:password"/>
</composite:interface>

The composite component implementation accepts input values for the user name and password properties of the managed bean.

<composite:implementation>
    <h:form id="form">
        <table columns="2" role="presentation">
            <tr>
                <td><h:outputLabel for="name" 
                                   value="#{cc.attrs.namePrompt}"/></td>
                <td><h:inputText id="name" 
                                 value="#{cc.attrs.myLoginBean.name}" 
                                 required="true"/></td>
            </tr>
            <tr>
                <td><h:outputLabel for="password" 
                                   value="#{cc.attrs.passwordPrompt}"/></td>
                <td><h:inputSecret id="password" 
                                   value="#{cc.attrs.myLoginBean.password}" 
                                   required="true"/></td>
            </tr>
        </table>
        <p>
            <h:commandButton id="loginButton" 
                             value="#{cc.attrs.loginButtonText}" 
                             action="#{cc.attrs.loginAction}"/>
        </p>
    </h:form>
    ...
</composite:implementation>

The Using Page

The using page in this example application, web/index.xhtml, is an XHTML file that invokes the login composite component file along with the managed bean. It validates the user’s input.

<div id="compositecomponent">
    <ez:LoginPanel myLoginBean="#{myLoginBean}"  
                   loginAction="#{myLoginBean.login}">
         <f:validateLength maximum="10" minimum="4" for="vals" />
         <f:validateRegex pattern="((?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{4,10})"
                          for="passwordVal"/>
    </ez:LoginPanel>
</div>

The f:validateLength tag requires the user name to have from 4 to 10 characters.

The f:validateRegex tag requires the password to have from 4 to 10 characters and to contain at least one digit, one lowercase letter, and one uppercase letter.

The Managed Bean

The managed bean, src/java/compositecomponentlogin/MyLoginBean.java, defines a method called login, which retrieves the values of the user name and password.

@ManagedBean
@RequestScoped
public class MyLoginBean {

    private String name;
    private String password;

    public MyLoginBean() {
    }

    public myloginBean(String name, String password) {
        this.name = name;
        this.password = password;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String newValue) {
        password = newValue;
    }

    public String getName() {
        return name;
    }

    public void setName(String newValue) {
        name = newValue;
    }

    public String login() {
        if (getName().equals("javaee")) {
            String msg = "Success.  Your user name is " + getName()
                    + ", and your password is " + getPassword();
            FacesMessage facesMsg = new FacesMessage(msg, msg);
            FacesContext.getCurrentInstance().addMessage(null, facesMsg);
            return "index";
        } else {
            String msg = "Failure. Your user name is " + getName()
                    + ", and your password is " + getPassword();
            FacesMessage facesMsg = 
                    new FacesMessage(FacesMessage.SEVERITY_ERROR, msg, msg);
            FacesContext.getCurrentInstance().addMessage(null, facesMsg);
            return "index";
        }
    }
}

Running the compositecomponentlogin Example

You can use either NetBeans IDE or Ant to build, package, deploy, and run the compositecomponentlogin example.

To Build, Package, and Deploy the compositecomponentlogin Example Using NetBeans IDE

1. From the File menu, choose Open Project.
2. In the Open Project dialog, navigate to:

   tut-install/examples/web/

3. Select the compositecomponentlogin folder.
4. Select the Open as Main Project checkbox.
5. Click Open Project.
6. In the Projects tab, right-click compositecomponentlogin and select Deploy.

To Build, Package, and Deploy the compositecomponentlogin Example Using Ant

1. In a terminal window, go to:

   tut-install/examples/web/compositecomponentlogin/

2. Type the following command:

   ant

3. Type the following command:

   ant deploy

To Run the compositecomponentlogin Example

1. In a web browser, type the following URL:

   http://localhost:8080/compositecomponentlogin/

   The Login Component page opens.

2. Type values in the User Name and Password fields, then click the Log In button.

   Because of the way the login method is coded, the login succeeds only if the user name is javaee.

   Because of the f:validateLength tag, if the user name has fewer than 4 characters or more than 10 characters, a validation error message appears.

   Because of the f:validateRegex tag, if the password has fewer than 4 characters or more than 10 characters or does not contain at least one digit, one lowercase letter, and one uppercase letter, a “Regex Pattern not matched” error message appears.