Redirect without submit button

This simple tip is an example of how to redirect without submit button using the JavaScript onclick:

<form>
<input type="button" value="To Page" onClick="location.href='newpage.html'">
</form>

PrimeFaces updating JSF components

Well, a few days ago I tried to accomplish the following task using JSF and PrimeFaces (an amazing set of JSF components): I tried to upload an avatar on my site, and after the avatar is successfully uploaded, to re-render it in page without reloading the page (AJAX refresh style). For this, I have used only PrimeFaces components - I used the <p:graphicImage> to display the avatar, and <p:fileUpload> to upload the avatar picture (a small .jpg). Now, the particularity of this upload is that the avatar picture is always overwriting the existing one, therefore the URL to this picture is always the same (the picture is saved in a public folder (outside WEB-INF), and it is loaded through a link, not dynamically as a stream), like this:

<p:graphicImage id="avatarImageId" url="#{uploadBean.avatarUrl}" width="50" height="50"/>

And, the upload component look like this:

<h:form enctype="multipart/form-data" prependId="false">
 <p:fileUpload id="uploadAvatarId" fileUploadListener="#{uploadBean.handleAvatarUpload}" 
update="avatarImageId,uploadMessages" sizeLimit="102400" multiple="false"
 label="choose" auto="false" allowTypes="*.jpg;" description="Images"/>
</h:form>

As you probaly know, <p:fileUpload> component provides PPR integration "FileUpload is powered by PrimeFacs Partial Page Rendering so after a file is uploaded you can update any JSF component." - http://www.primefaces.org:8080/prime-showcase/ui/fileUploadUpdate.jsf, and this is exacly what the update attribute should do.
Well, the problem is that the avatar is always uploaded correctly (by a request scoped managed bean), but is not correctly displayed/updated. Per example, if the picture is named wqWwqWwq.jpg you can see in figure below how the displayed picture and the uploaded one are not the same:

It seems that this is happening because the picture URL is always the same, therefore we solved this problem by adding a random parameter in the request, like this:

...
Random random = new Random();
String randomString = String.valueOf(random.nextInt(100000));
avatarUrl = "../resources/scripts/web/avatars/" + localAvatar + ";" + randomString;
...

Notice that localAvatar represents the picture name!
Now, the Firebug harvest the next URL:

Done! Now, the problem is solved, and AJAX works fine!

PPR multi-file upload with PrimeFaces 2.0

The below recipe is just an example of what you can find in the JSF 2.0 Cookbook from Packt.

In this recipe you will see how to use a great PrimeFaces 2.0 component for multi-file upload with PPR support. Notice that PrimeFaces offers four types of upload as follows:
• Single Upload
• Multiple File Upload
• Auto Upload
• PPR Integration (presented in this recipe)

PPR stands for Partial Page Rendering, which means that after a file is uploaded you can update any JSF component. Our example will update a growl notifier, which is another PrimeFaces great component.
Getting ready
We developed this recipe with NetBeans 6.8, JSF 2.0 and GlassFish v3. The JSF 2.0 classes were obtained from NeBeans JSF 2.0 bundled library. In addition, we have used PrimeFaces 2.0, which provide support for JSF 2.0. You can download this distribution from http://www.primefaces.org/.
How to do it...
Practically, PrimeFaces offers these four uploads types through a single component named p:fileUpload, and configured through its attributes as follows:

• for single upload the multiple attribute is set to false;
• for multiple upload the multiple attribute is set to true;
• for auto upload the auto attribute is set to true;
• for PPR integration effect, the update attribute should indicate the id of the JSF component to be updated after a file was uploaded successfully or not.

Now, we wrote a JSF form that integrates the fileUpload component with the following characteristics:

• multiple file-upload – multiple attribute set to true;
• limit upload size – sizeLimit attribute set to the desired limit in bytes;
• upload only pictures – extensions listed in allowTypes attribute;
• update a growl component – id was specified in update attribute;

Now, the p:fileUpload complete tag reference is available at http://primefaces.prime.com.tr/docs/tag/. You will be pleased to find out that you can customize this component exactly as you want.
Now, let’s see code of JSF page for our upload:

…
<h:form enctype="multipart/form-data" prependId="false">
 <p:growl id="messages" showSummary="true" showDetail="true" />
 <p:fileUpload fileUploadListener="#{uploadBean.handleFileUpload}" 
   update="messages"  sizeLimit="1073741824"
   multiple="true" label="choose" allowTypes="*.jpg;*.png;*.gif;" 
   description="Images"/>
</h:form>
…

The PrimeFaces p:growl component “brings the Mac's growl widget to JSF with the ability of displaying FacesMessages. Growl simply replaces h:messages component.”

Now, the UploadBean implements the hadleFileUpload method like this:

public class UploadBean {

    private static final int BUFFER_SIZE = 6124;

    /** Creates a new instance of UploadBean */
    public UploadBean() {
    }

    public void handleFileUpload(FileUploadEvent event) {

    ExternalContext extContext = FacesContext.getCurrentInstance().
                                 getExternalContext();
    File result = new File(extContext.getRealPath
     ("//WEB-INF//upload") + "//" + event.getFile().getFileName());

try {
    FileOutputStream fileOutputStream = new FileOutputStream(result);

    byte[] buffer = new byte[BUFFER_SIZE];

    int bulk;
    InputStream inputStream = event.getFile().getInputstream();
    while (true) {
      bulk = inputStream.read(buffer);
      if (bulk < 0) {
             break;
             }
      fileOutputStream.write(buffer, 0, bulk);
      fileOutputStream.flush();
      }

      fileOutputStream.close();
      inputStream.close();

      FacesMessage msg = new FacesMessage("Succesful", 
          event.getFile().getFileName() + " is uploaded.");
      FacesContext.getCurrentInstance().addMessage(null, msg);

      } catch (IOException e) {
            e.printStackTrace();

      FacesMessage error = new FacesMessage("The files were
                                                 not uploaded!");
      FacesContext.getCurrentInstance().addMessage(null, error);
      }
    }
}

The upload example is ready, but we still need to add some configuration in web.xml descriptor (these configurations are not altering the PrimeFaces default configurations). These are specific to upload process and they are listed next:

• set the javax.faces.STATE_SAVING_METHOD context param to server:

<context-param>
 <param-name>javax.faces.STATE_SAVING_METHOD</param-name>
 <param-value>server</param-value>
</context-param>

• optionally, you may specify a temporary folder for storing the uploaded files, like this:

<init-param>
 <param-name>uploadDirectory</param-name>
 <param-value>/tmp/fileUpload</param-value>
</init-param>

• add the PrimeFaces FileUpload Filter as a filter for the Faces Servlet (keep in mind that this should be the first filter in web.xml, if you have more):

<filter>
 <filter-name>PrimeFaces FileUpload Filter</filter-name>
 <filter-class>
   org.primefaces.webapp.filter.FileUploadFilter
 </filter-class>
 <init-param>
  <param-name>thresholdSize</param-name>
  <param-value>51200</param-value>
 </init-param>       
</filter>
<filter-mapping>
 <filter-name>PrimeFaces FileUpload Filter</filter-name>
 <servlet-name>Faces Servlet</servlet-name>
</filter-mapping>

Now, if test our upload you will see something like in figure below:

How it works...
As you can see the PrimeFaces upload is based on a filter and on a listener. The filter intercepts requests in front of Faces Servlet and detects the upload requests, while the listener has the particularity that requires an FileUploadEvent object, which extends the javax.faces.event.FacesEvent. The upload process is configured in the JSF page through p:uploadFile component, and it is controlled by the developer in the listener implemented in managed bean, like you just saw.

The above recipe is just an example of what you can find in the JSF 2.0 Cookbook from Packt.

Validate forms with RichFaces rich:beanValidator

The below recipe is just an example of what you can find in the JSF 2.0 Cookbook from Packt.

The rich:beanValidator is a component designed to provide validation using Hibernate Validator model-based constraints (details about Hibernate Validator can be found at https://www.hibernate.org/412.html). In this recipe we will validate a simple form made up of two fields representing e-mail and age of a user.
Getting ready
We developed this recipe with NetBeans 6.8, JSF 2.0 and GlassFish v3. The JSF 2.0 classes were obtained from NeBeans JSF 2.0 bundled library. In addition, we have used RichFaces 3.3.3.BETA1, which provide support for JSF 2.0. You can download this distribution from http://www.jboss.org/richfaces.
How to do it...
The rich:beanValidator tag is usually nested in a UI Component, like h:inputText. Below you can see an example (notice that the summary attribute will contain details displayed about the validation error):

<h:form id="form">
 <h:panelGrid columns="3">
  <h:outputLabel for="email" value="Email Address:" />
  <h:inputText id="email" value="#{bean.email}" label="Email">
   <rich:beanValidator summary="Invalid Email address"/>
  </h:inputText>
  <rich:message for="email"/> 
  <h:outputLabel for="age" value="Age:" />
  <h:inputText id="age" value="#{bean.age}" label="Age">
   <rich:beanValidator 
       summary="Invalid age, must be between 18 and 90"/>
  </h:inputText>
  <rich:message for="age"/>  
 </h:panelGrid>
 <h:commandButton value="Submit"></h:commandButton>
 <rich:messages/>
</h:form>

The validator restrictions are specified in Hibernate style using the corresponding annotations in a bean. In our example, the Bean bean looks like below:

package bean;

import org.hibernate.validator.Email;
import org.hibernate.validator.Range;
import org.hibernate.validator.NotEmpty;

public class Bean {
 
 private String email;
 private Integer age;
  
 @Range(min=18, max=90)
 public Integer getAge() {
  return age;
 }

 public void setAge(Integer age) {
  this.age = age;
 }

 @NotEmpty
 @Email
 public String getEmail() {
  return email;
 }

 public void setEmail(String email) {
  this.email = email;
 } 
}

For more Hibernate validators check the org.hibernate.validator package. In our example we have used the @Email, @NotEmpty and @Range validators.
How it works...
It works like a common validator, but this time the validator restrictions are taken directly from the bean, instead of using dedicated attributes inside the validator tag.
There's more...
Another important validator from RichFaces is the rich:graphValidator. The rich:graphValidator component is more like rich:beanValidator. The difference between these two components is that in order to validate some input data with a rich:beanValidator component, it should be a nested element of an input component, whereas rich:graphValidator wraps multiple input components and validates the data received from them.

The above recipe is just an example of what you can find in the JSF 2.0 Cookbook from Packt.

Enable/Disable a HTML select list

In this recipe you can see how to enable/disable a select list from JavaScript. The HTML list is:

<form name="formId">
 <select id = "listId" name="listName" size="1">
  <option value="value_1">Value 1
  <option value="value_2">Value 2
  <option value="value_3">Value 3
 </select>
</form>

Now, the JavaScript code can enable/disable this list like below:

//enabled
document.formId.listId.disabled = false; 
//disabled
document.formId.listId.disabled = true;

Show/Hide an image

This recipe is a simple trick for showing/hiding an image. For start the image is hidden, because we set the width and height attributes equals to 1 (behind the scene the browser is loading the entire picture). The HTML code is like this:

<img id="imgId" src="picture.gif" width="1" height="1">

Now, we can show/hide the picture from JavaScript, like this:

//show
document.getElementById("imgId").setAttribute("width", 20); //20 is just an example
document.getElementById("imgId").setAttribute("height", 20);
//hide
document.getElementById("imgId").setAttribute("width", 1);
document.getElementById("imgId").setAttribute("height", 1);

Enable/Disable a HTML button

In this recipe you can see how to enable/disable a HTML button from JavaScript code. For start let's take an HTML usual button:

<input id="buttonId" type="button" value="Button Label"/>

Now, we can use the id attribute to enable/disable this button like below:

//enabled
document.getElementById("buttonId").disabled = true;
//disabled
document.getElementById("buttonId").disabled = false;