Archive for the ‘Ajax’ Category

Which JSF AJAX framework to use.

Saturday, January 22nd, 2011

There are tens AJAX frameworks available. I have noticed more RichFaces, OpenFaces and PrimeFaces.

RichFaces seems to be more used than others but what is currently missing is proper JSF 2.0 support.

My second choice of JSF 2.0 compatible frameworks was OpenFaces. Works fine but it is lacking some essential components like periodic updates.

Finally i found PrimeFaces, which has loads of components, and just works. Also PrimeFaces is tied into TouchFaces which helps you to build good mobile device UI-s

Ajax menu navigation in JSF with OpenFaces

Monday, January 3rd, 2011

Problem: Webpage must change body contents fast without reloading whole page when user clicks link in menu.

Solution: It can be achieved using OpenFaces o:layeredPane component.

In menu can be used commandLinks surrounded with form. Commandlinks include f:param which sends to server what contents must be displayed. When clicking link then browser sends ajax request to server and bean action method is performed.

        <h:form>
            <h:panelGrid columns="1">
                <h:commandLink value="#{msgs.frontpagelink}" action="#{frontPageBean.changeBody}">
                    <f:param name="pageViewId" value="0"/>
                    <f:ajax render=":fbody"></f:ajax>
                </h:commandLink>
                <h:commandLink value="#{msgs.contactlink}" action="#{frontPageBean.changeBody}">
                    <f:param name="pageViewId" value="1"/>
                    <f:ajax render=":fbody"></f:ajax>
                </h:commandLink>
            </h:panelGrid>
        </h:form>

Bean contains following method that extracts request parameter and assigns it to bean parameter.

public String changeBody() { FacesContext fc = FacesContext.getCurrentInstance(); String includedPage = fc.getExternalContext().getRequestParameterMap().get("pageViewId"); setFrontpageBody(includedPage); return null; }

In body part is OpenFaces o:layeredPane where are defined all possible o:subPanels

        <ui:define name="body">
              <o:layeredPane id="fbody"
                           selectedIndex="#{frontPageBean.frontPageBody}">
                <o:subPanel>
                    <ui:include src="mainpage.xhtml"></ui:include>
                </o:subPanel>
                <o:subPanel>
                    <ui:include src="contact.xhtml"></ui:include>
                </o:subPanel>
            </o:layeredPane>
        </ui:define>

As a conclusion when clicking menu link then request parameter with page index is sent to server with ajax. Server updates correct page index and when rerendering o:layeredPane then correct page is included into webpage contents.

f:ajax not working in JSF

Wednesday, December 29th, 2010

Problem is that in JavaServer Faces application ajax request are just not working. o:ajax in openfaces nor f:ajax in plain JSF 2.0 is not sending any requests to server. For testing can be used simple echo application.

<h:form>
<h:inputText value="#{ajaxTestBean.testValue}" >
  <f:ajax event="keyup" render="text"/>
</h:inputText>
<h:outputText id="text" value="#{ajaxTestBean.testValue}" />
</h:form>

Normally this should work without problems but there is little catch. <h:head></h:head> tag must be included in order for ajax to work properly. Definind h:head includes some more needed javascripts to complete everything. Try this code below to get it working:
index.xhtml

<?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://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<f:view>
<h:head>
  <title>AjaxTest</title>
</h:head>
<h:body>
<h:form>
<h:inputText value="#{ajaxTestBean.testValue}" >
  <f:ajax event="keyup" render="text"/>
</h:inputText>
<h:outputText id="text" value="#{ajaxTestBean.testValue}" />
</h:form>
</h:body>
</f:view>
</html>

AjaxTestBean.java

package com.ajaxtest; 

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped; 

@ManagedBean(name = "ajaxTestBean")
@SessionScoped
public class AjaxTestBean {
private String testValue = "default";

public String getTestValue() {
  return testValue;
} 

public void setTestValue(String testValue) {
   this.testValue = testValue;
 }
}