Archive for Icefaces

Setting up an Icefaces facelet project from scratch.

Icefaces is a rich extension to Java Server Faces. One of the problems in getting an icefaces application up and running is the inital setup. In this tutorial I’ll walk through how to build a basic Icefaces application (Using facelets).

I love IDEs like intellij and Eclipse. They make setting up projects easy. But I have found that setting up my projects from scratch gives me the flexibility I need, and also makes integrating with an automated build system easier.

Project layout

/simple-ice-facelet/ Project Root
/simple-ice-facelet/lib/ Required Jar files to run the web app
/simple-ice-facelet/src Java source
/simple-ice-faceletd/web Web Contents

Required Jars found in icefaces/lib

  • backport-util-concurrent.jar
  • commons-beanutils.jar
  • commons-collections.jar
  • commons-digester.jar
  • commons-fileupload.jar
  • commons-logging.jar
  • commons-logging-api.jar
  • el-api.jar
  • icefaces.jar
  • icefaces-comps.jar
  • icefaces-facelets.jar
  • xercesImpl.jar
  • xml-apis.jar

Bare bones app config

/simple-ice-facelet/web/WEB-INF/faces-config.xml


<?xml version=”1.0″ encoding=”UTF-8″?>
<faces-config xmlns=”http://java.sun.com/JSF/Configuration”>

<application>
<view-handler>
com.icesoft.faces.facelets.D2DFaceletViewHandler
</view-handler>
</application>
</faces-config>

/simple-ice-facelet/web/WEB-INF/web.xml


<!DOCTYPE web-app PUBLIC “-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN” “http://java.sun.com/dtd/web-app_2_3.dtd”>

<web-app>

<display-name>Simple ICEFaces App</display-name>

<description>
Just getting started
</description>

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

<context-param>
<param-name>facelets.DEVELOPMENT</param-name>
<param-value>true</param-value>
</context-param>

<context-param>
<param-name>javax.faces.application.CONFIG_FILES</param-name>
<param-value>/WEB-INF/faces-config.xml</param-value>
</context-param>

<context-param>
<param-name>javax.faces.DEFAULT_SUFFIX</param-name>
<param-value>.xhtml</param-value>
</context-param>

<context-param>
<param-name>com.sun.faces.validateXml</param-name>
<param-value>true</param-value>
</context-param>

<context-param>
<param-name>com.sun.faces.verifyObjects</param-name>
<param-value>true</param-value>
</context-param>

<context-param>
<param-name>com.icesoft.faces.concurrentDOMViews</param-name>
<param-value>true</param-value>
</context-param>

<servlet>
<servlet-name>faces</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup> 1 </load-on-startup>
</servlet>

<servlet>
<servlet-name>icefaces</servlet-name>
<servlet-class>com.icesoft.faces.webapp.xmlhttp.PersistentFacesServlet</servlet-class>
<load-on-startup> 1 </load-on-startup>
</servlet>

<servlet>
<servlet-name>block</servlet-name>
<servlet-class>com.icesoft.faces.webapp.xmlhttp.BlockingServlet</servlet-class>
<load-on-startup> 1 </load-on-startup>
</servlet>

<servlet-mapping>
<servlet-name>icefaces</servlet-name>
<url-pattern>/xmlhttp/*</url-pattern>
</servlet-mapping>

<servlet-mapping>
<servlet-name>icefaces</servlet-name>
<url-pattern>*.iface</url-pattern>
</servlet-mapping>

<servlet-mapping>
<servlet-name>block</servlet-name>
<url-pattern>/block/*</url-pattern>
</servlet-mapping>

</web-app>

And now for a basic facelet page.

/simple-ice-facelet/web/test.xhtml


<!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:f=”http://java.sun.com/jsf/core”
xmlns:h=”http://java.sun.com/jsf/html”
xmlns:ice=”http://www.icesoft.com/icefaces/component”
xmlns:ui=”http://java.sun.com/jsf/facelets”
>
<head>
<title>Testing</title>

</head>
<body>
<ice:form>
<ice:panelGroup draggable=”true” style=”width:200px;border:1px solid black;”>
<ice:outputText value=”If you can drag me then it works!”/>
</ice:panelGroup>
</ice:form>
</body>
</html>

And Finally the build file. You will need to have TOMCAT_HOME defined.

/simple-ice-facelet/build.xml


<project name=”simple-ice-facelet” default=”war” basedir=”.”>
<description>
Simple Icefaces Facelet app
</description>

<property name=”src” location=”src”/>
<property name=”build” location=”web/WEB-INF/classes”/>
<property name=”icefaces-lib” location=”lib/”/>
<path id=”base.path”>
<pathelement path=”${classpath}”/>
<fileset dir=”${icefaces-lib}”>
<include name=”**/*.jar”/>
</fileset>

</path>
<property environment=”env”/>

<target name=”compile”
description=”compile the source ” >
<mkdir dir=”${build}”/>
<javac srcdir=”${src}” destdir=”${build}”>
<classpath refid=”base.path”/>
</javac>
<copy todir=”${build}”>
<fileset dir=”${src}”>
<include name=”**/*.xml”/>
<include name=”**/*.tld”/>
<include name=”**/*.js”/>
</fileset>
</copy>
</target>

<target name=”war” depends=”compile”
description=”generate the distribution” >
<war destfile=”facelet.war” webxml=”web/WEB-INF/web.xml”>
<fileset dir=”web”/>
<lib dir=”lib”>
</lib>
</war>
</target>

<target name=”clean”
description=”clean up” >
<delete dir=”${build}”/>
</target>

<target name=”copy.war” depends=”clean, war”>
<copy file=”facelet.war” todir=”${env.TOMCAT_HOME}/webapps”/>
</target>
</project>

Run the copy war then open http://localhost:8080/facelet/test.iface If you can drag the div around the screen then this tutorial has been a success!

Need help developing your ICEFaces application? I can provide ICEFaces consulting. Contact me at rob.mayhew@gmail.com for more information.

Comments

Fun with icefaces effects

This tutorial will walk you though some of the fun things you can do with effects.
You will need an App server, Ant and Icefaces-bin-1.5.1 for this tutorial.

1. Make a copy of the icefaces\samples\tutorial\effects1 folder and rename it funwitheffects (Keep it in the icefaces\samples\tutorial folder).

2. Open up the build.xml file. Change


<project name="effects1" default="build.war">

To

<project name="funwitheffects" default="build.war">

3. Open web/effect.jsp delete everything in the body tags.Creating a sliding div
4. Add the following code to the body.

<ice:form>
<ice:commandbutton value="#{effectBean.buttonValue}" actionlistener="#{effectBean.buttonPressed}"></ice:commandbutton>
<ice:panelgroup style="border: 1px solid black; width: 200px; height: 200px" visible="#{effectBean.visible}" effect="#{effectBean.effect}">
<ice:outputtext value="Hello"></ice:outputtext>
</ice:panelgroup>
</ice:form>

5. open com.icesoft.tutorial.EffectBean


import com.icesoft.faces.context.effects.*;

import javax.faces.event.ActionEvent;

public class EffectBean {

private Effect effect = null;
private boolean visible = false;
private String[] buttonValues = new String[]{
“Slide Down”,
“Slide Up”
};
private String buttonValue = buttonValues[0];

public Effect getEffect() {
return effect;
}

public void setEffect(Effect effect) {
this.effect = effect;
}

public boolean isVisible() {
return visible;
}

public void setVisible(boolean visible) {
this.visible = visible;
}

public String getButtonValue() {
return this.buttonValue;
}

public void setButtonValue(String buttonValue) {
this.buttonValue = buttonValue;
}

public void buttonPressed(ActionEvent e){
if(visible){
effect = new SlideUp();
buttonValue = buttonValues[0];
}else{
effect = new SlideDown();
buttonValue = buttonValues[1];
}
effect.setTransitory(false);
effect.setSubmit(true);
}
}
6. Run ant and copy the funwitheffects.war to your app server

7. open http://localhost:8080/funwitheffects For tomcat

Clicking on the button will slide the panel down and change the text of the button. Clicking again will slide the panel back up.

The code

effect.setTransitory(false);
effect.setSubmit(true);

Sets the effect to inform the server when the effect is complete, and changes the visible value. You can also slide down the panel and then click refresh, and the panel will still be in the visible state.

(Check out my custom JSF components. Compatible with ICEFaces. http://snappy.sensemaker.net

Comments (1)

Icefaces is Open Source

Icefaces, the product I have been working on at icesoft has just been released as an open source product!

Check out the coverage here and here.

Comments

Writing Icefaces components - part 1

I work for icesoft on the component team, and I am just about to write a new component and I thought I would
walk you through the process.

The Slider Control Part 1

I’m going to be implementing script.aclo.us slider control in icefaces.

Looking at the slider example in the script.aclo.us download I see that it requires the following HTML.

So the first step will be to create a new component that will render that HTML.

So fire up your editor of choice and lets get started.

The component class

Silder.java defines the properties or model of this component. This is where you could put things
like style and styleClass for example. But for now its going to be blank. I just want to get the framework in
place first.

Slider.java

package com.icesoft.faces.component.slider;

import javax.faces.component.UIInput;

public class Slider extends UIInput {

public static final String COMPONENET_TYPE = "com.icesoft.faces.Slider";
public static final String DEFAULT_RENDERER_TYPE = "com.icesoft.faces.SliderRenderer";
public static final String COMPONENT_FAMILY = "com.icesoft.faces.SliderFamily";

public Slider() {
super();
}

public String getFamily() {
return COMPONENT_FAMILY;
}

public String getRendererType() {
return DEFAULT_RENDERER_TYPE;
}

}

Again this is just a skeleton to get started.

Up next. The renderer. Where all the magic happens. Again like the first step we are just getting started
so all I’m going to do is output the HTML show above.

SliderRenderer.java

package com.icesoft.faces.component.slider;

import com.icesoft.faces.renderkit.dom_html_basic.DomBasicRenderer;
import com.icesoft.faces.renderkit.dom_html_basic.HTML;
import com.icesoft.faces.context.DOMContext;

import javax.faces.context.FacesContext;
import javax.faces.component.UIComponent;

import org.w3c.dom.Element;

public class SliderRenderer extends DomBasicRenderer {

public void encodeEnd(FacesContext facesContext, UIComponent uiComponent) {
DOMContext domContext = DOMContext.attachDOMContext(facesContext, uiComponent);
if (!domContext.isInitialized()) {
Element root = domContext.createRootElement(HTML.DIV_ELEM);
root.setAttribute(HTML.STYLE_ATTR,"width:200px;background-color:#aaa;height:5px;");
Element slider = domContext.createElement(HTML.DIV_ELEM);
slider.setAttribute(HTML.STYLE_ATTR,"width:5px;height:10px;background-color:#f00;");
root.appendChild(slider);
}
}
}

Now we need a tag for out JSP. Since we don’t have any attributes just yet its going to be simple.

SliderTag.java

package com.icesoft.faces.component.slider;

import javax.faces.webapp.UIComponentTag;

public class SliderTag extends UIComponentTag {

public String getComponentType() {
return Slider.COMPONENET_TYPE;
}

public String getRendererType() {
return Slider.DEFAULT_RENDERER_TYPE;
}
}


Adding to faces-config.xml

We need to tell icefaces about this new component. Add the following to the faces-config.xml.



com.icesoft.faces.SliderFamily
com.icesoft.faces.SliderRenderer
com.icesoft.faces.component.slider.SliderRenderer


com.icesoft.faces.Slider
com.icesoft.faces.component.slider.Slider


Creating a TLD

This part here is a bit strange. You need to create a tld file, Then you need to put the tld file in a jar. and
include it in  your web application lib directory.

0.03
1.2
slider
http://icesoft.com/slider

Slider


slider
com.icesoft.faces.component.slider.SliderTag
JSP
Slider Tag



There you go! Step 1 is complete.

Comments (1)