Using AJAX with Java EE web app Part II

The are two basic ways of adding Asynchronus Javascript resources ( AJAX ) to Java EE web app
1. Using the f:ajax tag along with the facelets tag : This method requires no additional configuration or coding…
2. Using jsf.ajax.request(s,e,o); , this method allows customized control of component…. Where s = source , e = event , o = option
Example 1 : Using Method 1
Create login.html

<!Doctype html >

<html lang ="en"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:jsf="http://xmlns.jcp.org/jsf" >

<head>
<title> Login </title>
<body>
<center>

<f:ajax execute ="#{app.loginName}" render="@all" onerror="@all" ... >

<h:form name="#{app.loginName}" id="#{app.loginId}" ... >

<br/>

<input type="text" jsf:id="#{app.nameID}" name="#{app.uNameTxt}" value="#{app.userName}" required="required" requiredMessage="#{req.userName}" errorMessage="#{error.userName}" >
<f:validateRegex pattern="#{val.userName}" for="#{app.nameID}" />

<br/>

<input type="password" jsf:id="#{app.pwdID}" name="#{app.pwdTxt}" value="#{app.userPwd}" required="required" requiredMessage="#{req.userPwd}" errorMessage="#{error.userPwd}" > 
<f:validateRegex pattern="#{val.userPwd}" for="#{app.pwdID}" />


<br/> <input type="submit" jsf:action="#{app.submitLogin(app.userName, app.userPwd )" value="#{app.submitTxt}" />


</h:form>

</f:ajax>

</center>
</head>

create App.java

@Named
@RequestedScope
@ManagedBean(name="app")
public class App
{
    private String userName, userPwd, uNameTxt="Username", pwdTxt="Passsword", pwdID="password",uNameID="userName";

    public String getUserName()
    {
        return userName;
    }

    public void setUserName(String newUName)

    {
        this.userName = newName;

    }
...

}

Create Validate.java

 @Named
    @RequestedScope
    @ManagedBean(name="val")

    public classs Validate
{
public String userName="[a-zA-Z0-9]{5,15}", userPwd="[a-zA-Z0-9]{10,}";

        ...
        }

Example 2 : Using Method 2 ( jsf.ajax.request(s,e,o);

Where s = source , e = event , o = option
Step 1 : Identify or make a reference call to your Javascript resources using

<h:outputScript name="imageLoader.js" library="javascript location example myjslib or https://github.com/google/js/image/fastLoader" target="head" >


<input type="submit" jsf:action="#{app.submitLogin(app.userName, app.userPwd )" value="#{app.submitTxt}"

onclick="jsf.ajax.request( this, event, {execute:'userName','userPwd',render"app.submitLogin(app.userName,app,userPwd)"})"
return false />

Explanation
The source parameter identifies the DOM element that triggered the Ajax
request, typically this.
The optional event parameter identifies the DOM event that
triggered this request.
The optional options parameter contains a set of name/value
pairs

Lastly, Loading the js in the BeanClass

@ResourceDependency(name=”app.js” library=”javax.faces” target=”head”)
I hope you enjoy this. Have you read The Software Developer Joke ?

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Blog at WordPress.com.

Up ↑

%d bloggers like this: