Snappy Components - Now open source
I have just released my Snappy JSF Components as an Open source project. You can download the source here. Contributions are appreciated.
Archive for Icefaces
Introducing Snappy Calendar
Snappy Calendar provides a client side date picker for ICEFaces. Unlike the standard calendar control you will not have to wait for a server round trip when a user selects a date, or changes a month.
Other features include
Render as a Text Box or a Link.
Uses dynamic effects to slide the calendar up and down.
Support for custom date formats
Snappy Calendar is now included in the Developer Preview release. Download a new copy for evaluation today.
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.
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