Thoughts on software development

Advanced injection of Maven properties into Java application

2012-02-17T07:36:00.001-08:00

In the last post I have shown how to inject Maven project informations into Java application. This topic describes the injection for more useful properties. Advantage: no needs to define then any project specific Java constants and change constants with each release. Current project infos already exist in pom.xml. In the PrimeFaces Extensions project we have defined some profile dependent properties like these

...
<dependency>
    <groupId>org.primefaces</groupId>
    <artifactId>primefaces</artifactId>
    <version>${primefaces.core.version}</version>
</dependency> 
<dependency>
    <groupId>org.primefaces.extensions</groupId>
    <artifactId>primefaces-extensions</artifactId>
    <version>${pe.impl.version}</version>
</dependency>
...
<properties>
    <java.version.source>1.6</java.version.source>
    <java.version.target>1.6</java.version.target>
    <jetty.server.version>8.1.0.RC2</jetty.server.version>
    <pe.jsf.impl>mojarra</pe.jsf.impl>
    <pe.jsf.displayname>Mojarra</pe.jsf.displayname>
    <pe.jsf.group>com.sun.faces</pe.jsf.group>
    <pe.jsf.artifact>jsf</pe.jsf.artifact>
    <pe.jsf.version>2.1.6</pe.jsf.version>
    <pe.impl.version>0.3.0-SNAPSHOT</pe.impl.version>        
    <pe.webapp.filter>development</pe.webapp.filter>
    <pe.webapp.online>false</pe.webapp.online>
    <primefaces.core.version>3.1.1</primefaces.core.version>
    <primefaces.theme.version>1.0.3</primefaces.theme.version>
</properties>

And we also configured two Maven plugins which put more useful properties to Maven based applications.

<plugin>
    <groupId>com.google.code.maven-svn-revision-number-plugin</groupId>
    <artifactId>maven-svn-revision-number-plugin</artifactId>
    <version>1.7</version>
    <executions>
        <execution>
            <goals>
                <goal>revision</goal>
            </goals>
        </execution>
    </executions>
    <configuration>
        <entries>
            <entry>
                <prefix>svn</prefix>
            </entry>
        </entries>
    </configuration>                    
</plugin>
<plugin>
    <groupId>org.codehaus.mojo</groupId>
    <artifactId>buildnumber-maven-plugin</artifactId>
    <version>1.0</version>
    <executions>
        <execution>
            <id>generate-timestamp</id>
            <phase>validate</phase>
            <goals>
                <goal>create-timestamp</goal>
            </goals>
        </execution>
    </executions>
    <configuration>
        <format>{0,date,yyyy-MM-dd HH:mm}</format>
        <items>
            <item>timestamp</item>
        </items>
    </configuration>
</plugin>

Let's start now. Property file under src/main/resources is called now pe-showcase.properties and has again only one line (surprise).

 
application.properties=${project.properties}

This line gets resolved at build time as follows:

application.properties={pe.jsf.impl=mojarra, pe.jsf.group=com.sun.faces, timestamp=1329486964505, svn.committedRevision=928, svn.revision=928, primefaces.theme.version=1.0.3, pe.impl.version=0.3.0-SNAPSHOT, pe.jsf.displayname=Mojarra, jetty.server.version=8.1.0.RC2, svn.committedDate=2012-02-17 01:48:44 +0100 (Fri, 17 Feb 2012), pe.jsf.version=2.1.6, primefaces.core.version=3.1.1, ...}

The task is now to parse this resolved line in a Java application. A good entry point for parsing in JSF is an application scoped bean noted with eager=true.

@ApplicationScoped
@ManagedBean(eager = true)
public class TechnicalInfo {

    private static final Logger LOGGER = Logger.getLogger(TechnicalInfo.class.getName());

    private String primeFaces;
    private String primeFacesExt;
    private String jsfImpl;
    private String server;
    private String revision;
    private String buildTime;
    private boolean online = false;
    private boolean mojarra = true;

    @PostConstruct
    protected void initialize() {
        ResourceBundle rb;
        try {
            rb = ResourceBundle.getBundle("pe-showcase");

            String strAppProps = rb.getString("application.properties");
            int lastBrace = strAppProps.indexOf("}");
            strAppProps = strAppProps.substring(1, lastBrace);

            Map<String, String> appProperties = new HashMap<String, String>();
            String[] appProps = strAppProps.split("[\\s,]+");
            for (String appProp : appProps) {
                String[] keyValue = appProp.split("=");
                if (keyValue != null && keyValue.length > 1) {
                    appProperties.put(keyValue[0], keyValue[1]);
                }
            }

            primeFaces = "PrimeFaces: " + appProperties.get("primefaces.core.version");
            primeFacesExt = "PrimeFaces Extensions: " + appProperties.get("pe.impl.version");
            jsfImpl = "JSF-Impl.: " + appProperties.get("pe.jsf.displayname") + " " + appProperties.get("pe.jsf.version");
            server = "Server: Jetty " + appProperties.get("jetty.server.version");
            revision = "SVN-Revision: " + appProperties.get("svn.revision");

            DateFormat formatter = new SimpleDateFormat("yyyy-MM-dd HH:mm");
            Calendar calendar = Calendar.getInstance();
            calendar.setTimeInMillis(Long.valueOf(appProperties.get("timestamp")));
            buildTime = "Build time: " + formatter.format(calendar.getTime());

            online = Boolean.valueOf(appProperties.get("pe.webapp.online"));
            mojarra = appProperties.get("pe.jsf.impl").contains("mojarra");
        } catch (MissingResourceException e) {
            LOGGER.warning("Resource bundle 'pe-showcase' was not found");
        }
    }

    ... getter ...

}

Access in JSF facelets:

<h:panelGrid columns="7" style="float: left;">
    <h:panelGroup styleClass="ui-icon ui-icon-info"/>
    <h:outputText value="#{technicalInfo.primeFaces},"/>
    <h:outputText value="#{technicalInfo.primeFacesExt},"/>
    <h:outputText value="#{technicalInfo.jsfImpl},"/>
    <h:outputText value="#{technicalInfo.server},"/>
    <h:outputText value="#{technicalInfo.revision},"/>
    <h:outputText value="#{technicalInfo.buildTime}"/>
</h:panelGrid>

And voilà. We have done this! Click on image to enlarge it.

Inject Maven project informations into Java application

2012-02-15T07:23:00.000-08:00

Do you have a Maven project and would like to inject project informations from pom.xml into your application to avoid duplications? This is possible with resource filtering. This small guide will help you to achieve that. More funny advanced examples are coming soon in the next post. I have applied this approach for PrimeFaces Extensions project, so that all examples are related to this project.

Step 1. Create a property file under src/main/resources. In my case it's called primefaces-extensions.properties and consists of only one line.

 
application.version=${project.version}

Placeholder ${...} gets resolved at project build time. Maven also exposes other project properties like ${project.artifactId}, ${project.name}, etc. Please refer Maven properties guide. Not only Maven self exposes such properties. Various Maven plugins as buildnumber-maven-plugin and maven-svn-revision-number-plugin expose useful properties too.

Step 2. To get placeholders replaced you need to enable filtering in your pom.xml.

<build>
    <resources>
        <resource>src/main/resources</resource>
        <filtering>true</filtering>
    </resources>
    ...
</build>

Step 3. Access in Java is simple. I have created a singleton class VersionProvider for that (because I only have one placeholder for project version). Project version is cached after the first access.

public final class VersionProvider {

    private static final Logger LOGGER = Logger.getLogger(VersionProvider.class.getName());

    private static final VersionProvider INSTANCE = new VersionProvider();
    private String version;

    private VersionProvider() {
        ResourceBundle rb;
        try {
            rb = ResourceBundle.getBundle("primefaces-extensions");
            version = rb.getString("application.version");
        } catch (MissingResourceException e) {
            LOGGER.warning("Resource bundle 'primefaces-extensions' was not found or error while reading current version.");
        }
    }

    public static String getVersion() {
        return INSTANCE.version;
    }
}

Step 4. Using in any places is simple as well. Just call VersionProvider.getVersion(). For instance in the following JSF listener class

public class PostConstructApplicationEventListener implements SystemEventListener {

    private static final Logger LOGGER = Logger.getLogger(PostConstructApplicationEventListener.class.getName());

    @Override
    public boolean isListenerForSource(final Object source) {
        return true;
    }

    @Override
    public void processEvent(final SystemEvent event) {
        if (StringUtils.isNotBlank(VersionProvider.getVersion())) {
            LOGGER.log(Level.INFO, "Running on PrimeFaces Extensions {0}", VersionProvider.getVersion());
        }
    }
}

or in JSF resource handler

public class PrimeFacesExtensionsResource extends ResourceWrapper {

    private Resource wrapped;
    private String version;

    public PrimeFacesExtensionsResource(final Resource resource) {
        super();
        wrapped = resource;

        // get current version
        if (StringUtils.isNotBlank(VersionProvider.getVersion())) {
            version = "&v=" + VersionProvider.getVersion();
        } else {
            version = UUID.randomUUID().toString();
        }
    }

    @Override
    public String getRequestPath() {
        return super.getRequestPath() + version;
    }

    ...
}

With resource filtering you don't need to care about available current project infos in Java programs.

Cron Job to restart Jetty Server

2012-01-31T08:57:00.000-08:00

If you have an Java hosting on a virtual server, you normally have limited resources for that. That means you only have a certain amount of RAM. This leads to memory problems when deploying large applications. Restart the server by hand is annoying. Fortunately there are cron jobs. A cron job is a task in Linux which is to be executed at specific times automatically. The simplest way to start a cron job in Linux is to place a shell script below one of the following folders:
/etc/cron.daily
/etc/cron.weekly
/etc/cron.monthly

I intend to show a shell script for Jetty 8 server which is installed in /opt/jetty-distribution-8.1.0.RC2/ (path on my virtual server). The script checks the process id of the running Jetty server, kills it if it was found and restarts the server with the command "nohup java -jar start.jar".

#! /bin/sh

jettyPid='pgrep -f "java -jar start.jar"'

if [ "$jettyPid" != "" ]
then
kill -9 $jettyPid
fi

jettyHome="/opt/jetty-distribution-8.1.0.RC2/"
cd $jettyHome
nohup java -jar start.jar

exit

Alternative shorter variant:

#! /bin/sh

pgrep -f "java -jar start.jar" | xargs -i kill {}

cd /opt/jetty-distribution-8.1.0.RC2/
nohup java -jar start.jar

exit

New release of web resource optimization plugin

2012-01-01T14:48:00.000-08:00

I have released a new 0.3 version of the Maven plugin for web resource optimization. As I mentioned in the last posts this plugin was created as a part of the PrimeFaces Extensions project. It produces better compression results than YUI Compressor and has some nice features. The current release fixes only one issue. Release notes are here. The plugin is available in the Maven central repository.

If you have any questions regarding to the configuration, ask me please in the PrimeFaces Extensions forum. This forum is also a good place for all questions to the components and more. Unfortunately, but PrimeFaces lead doesn't like to see any discussions related to our extensions in the main PrimeFaces forum. He considers such topics as advertisement and locks / removes them. That hurts and is weird because if it would be an advertisement, it would be an advertisement for PrimeFaces. We have "PrimeFaces" in the name "PrimeFaces Extensions". The aim was never to do an advertisement or get money. This project is just for fun, everybody can participate in.

Currently we are working on the last use cases for our showcase and plan to do a release in the middle of January. Next releases will be published at frequent intervals and include less stuff - approximately 2-4 new components, client behaviors, converters or similar JSF 2 related artefacts. Some stuff is amazing, so stay tuned.

Best wishes for the New Year!

Efficient component tree traversal in JSF

2011-12-30T02:53:00.000-08:00

Everybody knows about findComponent() and invokeOnComponent() methods in JSF to find a component and doing something with it. The first method expects a special search expression and the second one component's clientId. They belong to UIComponent class, so that any UIComponent can acts as a start point in the view hierarchy. But what is about if we want to find many components at some start point in the view hierarchy which match certain conditions? We can apply getChildren() rekursive, but we wish us a convenient method for tree traversal. Tree traversal refers to the process of visiting each node in a component tree data structure. There is an efficient method in JSF accomplishing this task - visitTree()

public boolean visitTree(VisitContext context, VisitCallback callback)

context is an instance of VisitContext class that is used to hold state relating to performing a component tree visit. callback is an instance of VisitCallback whose visit method will be called for each node visited. Let's start with a practical example. Our task is to find and gather all components implementing EditableValueHolder. Such components implement resetValue() method which allows to reset component's submitted, locale values, etc. to an un-initialized state. Furthermore, another requirement is to skip sub-tree traversal for a component which should be not rendered (don't visit sub-components). In other words we want to find only editable components to be rendered. Assume, the start component calls target

UIComponent target = ...

It can be got in an action / event listener by event.getComponent() or somewhere else by findComponent().

We are ready now to create a special EditableValueHoldersVisitCallback in order to find all mentioned above sub-components and call visitTree on the target component with this callback. EditableValueHoldersVisitCallback gathers sub-components we want to reset.

EditableValueHoldersVisitCallback visitCallback = new EditableValueHoldersVisitCallback();
target.visitTree(VisitContext.createVisitContext(FacesContext.getCurrentInstance()), visitCallback);

// iterate over found sub-components and reset their values
List<EditableValueHolder> editableValueHolders = visitCallback.getEditableValueHolders();
for (EditableValueHolder editableValueHolder : editableValueHolders) {
    editableValueHolder.resetValue();
}

Callback looks like this one

public class EditableValueHoldersVisitCallback implements VisitCallback {

    private List<EditableValueHolder> editableValueHolders = new ArrayList<EditableValueHolder>();

    @Override
    public VisitResult visit(final VisitContext context, final UIComponent target) {
        if (!target.isRendered()) {
            return VisitResult.REJECT;
        }

        if (target instanceof EditableValueHolder) {
            editableValueHolders.add((EditableValueHolder) target);
        }

        return VisitResult.ACCEPT;
    }

    public List<EditableValueHolder> getEditableValueHolders() {
        return editableValueHolders;
    }
}

Result VisitResult.REJECT indicates that the tree visit should be continued, but should skip the current component's subtree (remember our requirement?). VisitResult.ACCEPT indicates that the tree visit should descend into current component's subtree. There is also VisitResult.COMPLETE as return value if the tree visit should be terminated.

Some components extending UINamingContainer override the behavior of visitTree(). For instance, UIData overrides this method to handle iteration correctly.

Maven plugin for web resource optimization - advanced settings

2011-12-27T05:08:00.000-08:00

In the last post I have introduced a new Maven plugin resources-optimizer-maven-plugin. This post is about two advanced features. Aggregation tag has a sub-tag subDirMode. This is an aggregation per sub-folder. Assume, JavaScript / CSS files are grouped by sub-folders which represent software modules. Resources of each module can be optimized separately in an easy way. As output we would have aggregated files per sub-folder. Names of aggregated files are the same as their folder names where they are placed. Files are aggregated in the lexicographic order. The following pictures demonstrate this approach.

Original source files below sub-folder keyfilter:

Aggregated file in target below sub-folder keyfilter:

This can be achieved with the following resources set

<resourcesSet>
    <includes>
        ...
        <include>keyfilter/**</include>
        ...
    </includes>
    <aggregations>
        <aggregation>
            <inputDir>...</inputDir>
            <subDirMode>true</subDirMode>
        </aggregation>
    </aggregations>
</resourcesSet>

The second feature is a preparation of uncompressed resources. Sometimes you have to build / deliver compressed and uncompressed resources. In JSF you can use then uncompressed resources if ProjectStage is "Development". RichFaces has e.g. this handy feature. resources-optimizer-maven-plugin allows to define several aggregation tags, e.g. one for compressed and one for uncompressed resources. The following picture demonstrates this approach.

Two folders, for compressed (primefaces-extensions) and uncompressed (primefaces-extensions-uncompressed) resources:

That can be achieved with this resources set

<resourcesSet>
    <includes>
        ...
    </includes>
    <aggregations>
        <aggregation>
            <inputDir>${resources.dir.compressed}</inputDir>
            ...
        </aggregation>
        <aggregation>
            <withoutCompress>true</withoutCompress>
            <inputDir>${resources.dir.uncompressed}</inputDir>
            ...
        </aggregation>
    </aggregations>
</resourcesSet>

<properties>
    <resources.dir.compressed>
        ${project.build.directory}/classes/META-INF/resources/primefaces-extensions
    </resources.dir.compressed>
    <resources.dir.uncompressed>
        ${project.build.directory}/classes/META-INF/resources/primefaces-extensions-uncompressed
    </resources.dir.uncompressed>
</properties>

Output directory for uncompressed resources should be created first. Put maven-resources-plugin with phase generate-resources in front of resources-optimizer-maven-plugin (phase prepare-package).

<plugin>
    <groupId>org.apache.maven.plugins</groupId>
    <artifactId>maven-resources-plugin</artifactId>
    <executions>
        <execution>
            <id>copy-resources</id>
            <phase>generate-resources</phase>
            <goals>
                <goal>copy-resources</goal>
            </goals>
            <configuration>
                <outputDirectory>${resources.dir.uncompressed}</outputDirectory>
                <resources>
                    <resource>
                        <directory>${project.basedir}/src/main/resources/META-INF/resources/primefaces-extensions</directory>
                    </resource>
                </resources>
            </configuration>
        </execution>
    </executions>
</plugin>

These were examples for an JAR project. The same is also valid for WAR (web) projects of course.

New Maven plugin for web resource optimization

2011-12-19T11:17:00.000-08:00

Two months ago I released the first version of a new Maven plugin for web resource optimization. This plugin was created as a part of the PrimeFaces Extensions project. What is the PrimeFaces Extensions project? Thomas Andraschko and me have launched this young project with the aim of extending JSF library PrimeFaces. What does extending mean? We don't have "extends SomePrimeFacesComponent" in the code. It doesn't make sense to copy-&-paste or overwrite existing PrimeFaces code. PrimeFaces is a rapidly evolving component set and costs to maintain the entire code from release to release would be too high. Extending means, we use core functionality of PrimeFaces like core.js and CoreRenderer.java. Well. What for components and other stuff we have is not the topic of this post. This is a topic for next post(s). I just would like to appeal to everybody having JSF / PrimeFaces expert knowledge to contact us. Any help would be appreciated. We have great ideas and plans, but Thomas and me are full time worker and involving in various daily projects, so that time for PrimeFaces Extensions is very sparse. Even worse in my case. I can only work 15-20% for JSF in my daily work currently. So, everybody with experience in JSF / PrimeFaces can join this open source project.

Maven plugin for resource optimization can compress and merge JavaScript and CSS files very efficiently. It produces better results than all plugins I know. The new Maven plugin combines Google Closure Compiler (for JavaScript files) and YUI Compressor (for CSS files). The new plugin is highly configurable and allows some nice features which don't exist in other plugins. I would like to mention some highlights:

Flexible resource sets describing resources to be processed.
Settings for compilation and warning levels for Google Closure Compiler. Defaults are SIMPLE_OPTIMIZATIONS and QUIET.
Aggregation with or without compression.
Suffix for compressed / aggregated files if needed.
SubDirMode for files aggregation. Resources of each software module can be optimized separately in an easy way. It makes sense e.g. for component / widget development because you can say "merge files for component A to one big file and don't merge files for component B".
Possiblity to define a file to be prepended to the aggregated file.
Possiblity to build compressed and uncompressed resources at the same time. PrimeFaces community already asked about uncompressed resources for development stage. RichFaces and some other libs can deliver uncompressed resources if the ProjectStage is "Development". We have also done this for PrimeFaces Extensions by means of this plugin. A special JSF ResourceHandler can stream down uncompressed resources to the browser for the ProjectStage "Development". Never crypto-messages like "e is undefined" anymore!

I have tried to write a more or less comprehensive documentaion. Simple check it! We already use this plugin with success in 6-8 JAR and WAR projects. I have also drawn a comparison diagram for PrimeFaces: size in bytes without compression, with yuicompressor-maven-plugin and with our resources-optimizer-maven-plugin. And I have prepared a configuration for PrimeFaces to make changes easy. More details in the online documentation. We would be glad to see the resources-optimizer-maven-plugin in PrimeFaces! It's worth. This plugin is available in the Maven central repository. In the meantime I have released a new 0.2 version. Feedback is welcome. Thanks.

The next Maven plugin I'm planning to write is a CDK (component development kit) for PrimeFaces components (low prio, depends on free time). PrimeFaces has already one, but only for internal use. Futhermore, PrimeFaces's plugin doesn't generate component's source files under source folder (they are not under version control) and has an expensive configuration. The new CDK will be configurable via name conventions and avoid expensive configuration. The technique for that will be Java Emitter Templates (JET) from Eclipse Modeling Framework. Here is again - every help is appreciated. We have some code styles, so that our code is clean and optimized. But it's not a problem at all to follow them, even in a remote team. I'm convinced, the work in a distributed team can be very efficient.

Install Windows VHDs on Linux for testing websites with Internet Explorer

2011-12-16T07:01:00.000-08:00

Need to test websites in multiple Internet Explorer versions under Linux / Mac OSX? No problem. Microsoft created free Windows Virtual PC VHDs with the purpose of allowing web designers to test websites in Internet Explorer 7-9. There is a script ievms simplifying the installation. But before you have to install the latest VirtualBox. You can do this e.g. via Package Manager (Ubuntu), Yast (OpenSuse) or via Linux terminal

 
sudo apt-get install virtualbox-4.1

The next step is the installation of VirtualBox Extension Pack. This is necessary for USB 2.0 devices, shared folders, better screen resolution, etc. The best way is to download and install the package for the VirtualBox Extension Pack manually.

 
wget http://download.virtualbox.org/virtualbox/4.1.6/Oracle_VM_VirtualBox_Extension_Pack-4.1.6-74713.vbox-extpack
VBoxManage extpack install Oracle_VM_VirtualBox_Extension_Pack-4.1.6-74713.vbox-extpack

Open VirtialBox tnen and go to File > Preferences > Extensions tab. Click there the "add" button and browse to the VirtualBox Extension Pack. Now you need to install curl (tool to transfer data from or to a server) and unrar (command-line applications for extracting RAR archives). In Ubuntu, install them using the command below.

 
sudo apt-get install curl unrar

To download and run the mentioned above script, use the following command in a terminal.

 
curl -s https://raw.github.com/xdissent/ievms/master/ievms.sh | bash

The above command will download Windows VHDs for IE7, IE8 and IE9. If you only need one specific Internet Explorer version, e.g. IE9, you can run:

 
curl -s https://raw.github.com/xdissent/ievms/master/ievms.sh | IEVMS_VERSIONS="9" bash

At this point, the download will start and it will take a while. The VHD archives are massive and can take hours to download. Each version is installed into a subdirectory of ~/.ievms/vhd/. At the end you can delete the downloaded archives (*.exe and *.rar files) below this folder if you want to free up some space. You are ready to test websites in IE7-IE9 now. The password for all VMs is "Password1". The picture below shows a VirtualBox with IE9.

The next picture shows that I set shared folders to exchange data between Windows 7 in VM and my Kubuntu 11.10 (Oneiric Ocelot).

You can start your web application on Linux. But how to access a running web application on Windows (VirtualBox)? Linux has a command tool ifconfig to configure, control and query TCP/IP network interface parameters. Open a terminal and type ifconfig. Find an IP address you Linux mashine is accessible from. I have e.g. 192.168.254.21 for wlan0 interface. You are able to call now

 
http://192.168.254.21:8080/...

in Interner Exloper on Windows. The IP address is like a localhost for your web application running on Linix. Remaning part behind this address is the same on both OS.

5 useful methods JSF developers should know

2011-11-16T03:38:00.000-08:00

The aim of this post is a summary about some handy methods for JSF developers they can use in their day-to-day work. An utility class is a good place to put all methods together. I would call such class FacesAccessor. The first method is probably the most used one. It returns managed bean by the given name. The bean must be registered either per faces-config.xml or annotation. Injection is good, but sometimes if beans are rare called, it's not necessary to inject beans into each other.

public static Object getManagedBean(final String beanName) {
    FacesContext fc = FacesContext.getCurrentInstance();
    Object bean;
    
    try {
        ELContext elContext = fc.getELContext();
        bean = elContext.getELResolver().getValue(elContext, null, beanName);
    } catch (RuntimeException e) {
        throw new FacesException(e.getMessage(), e);
    }

    if (bean == null) {
        throw new FacesException("Managed bean with name '" + beanName
            + "' was not found. Check your faces-config.xml or @ManagedBean annotation.");
    }

    return bean;
}

Using:

@ManagedBean
public class PersonBean {
    ...
}

PersonBean personBean = (PersonBean)FacesAccessor.getManagedBean("personBean");

// do something with personBean

The second method is useful for JSF component developers and everyone who would like to evaluate the given value expression #{...} and sets the result to the given value.

public static void setValue2ValueExpression(final Object value, final String expression) {
    FacesContext facesContext = FacesContext.getCurrentInstance();
    ELContext elContext = facesContext.getELContext();

    ValueExpression targetExpression = 
        facesContext.getApplication().getExpressionFactory().createValueExpression(elContext, expression, Object.class);
    targetExpression.setValue(elContext, value);
}

Using:
I personally use this method for the "log off functionality". After an user is logged off, he/she will see a special "logoff page". The "logoff page" uses user settings (e.g. theme, language, etc.) from a sesion scoped bean. But this session scoped bean doesn't exist more because the session was invalidated. What to do? Here is the code snippet from my logout method.

UserSettings userSettings = (UserSettings) FacesAccessor.getManagedBean("userSettings");

// invalidate session
ExternalContext ec = FacesContext.getCurrentInstance().getExternalContext();
HttpSession session = (HttpSession) ec.getSession(false);
session.invalidate();

// create new session
((HttpServletRequest) ec.getRequest()).getSession(true);

// restore last used user settings because login / logout pages reference "userSettings"
FacesAccessor.setValue2ValueExpression(userSettings, "#{userSettings}");

// redirect to the specified logout page
ec.redirect(ec.getRequestContextPath() + "/views/logout.jsf");

The third method maps a variable to the given value expression #{...}. It uses javax.el.VariableMapper to assign the expression to the specified variable, so that any reference to that variable will be replaced by the expression in EL evaluations.

public static void mapVariable2ValueExpression(final String variable, final String expression) {
    FacesContext facesContext = FacesContext.getCurrentInstance();
    ELContext elContext = facesContext.getELContext();
    
    ValueExpression targetExpression =
        facesContext.getApplication().getExpressionFactory().createValueExpression(elContext, expression, Object.class);
    elContext.getVariableMapper().setVariable(variable, targetExpression);
}

Using:
Assume, "PersonBean" is a managed bean having "name" attribute and "PersonsBean" is a bean holding many instances of "PersonBean" (as array, collection or map). The following code allows to use "personBean" as a reference to a specific bean with "name" Oleg.

 
FacesAccessor.mapVariable2ValueExpression("personBean", "#{personsBean.person['Oleg']}");

In a facelets page, say so, personDetail.xhtml, we can write:

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html">
<ui:composition>
    ...
    <h:inputText value="#{personBean.name}"/>
    ...
</ui:composition>
</html>

Note, the reference "personBean" was set in Java. This mapping can be also used in facelets in declarative way via ui:include / ui:param.

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets">
<ui:composition>
    ...
    <ui:include src="personDetail.xhtml">
        <ui:param name="personBean" value="#{personsBean.person['Oleg']}"/>
    </ui:include>
    ...
</ui:composition>
</html>

The next two methods are used to create MethodExpression / MethodExpressionActionListener programmatically. They are handy if you use component binding via "binding" attribute or create some model classes in Java.

public static MethodExpression createMethodExpression(String valueExpression,
                                                      Class<?> expectedReturnType,
                                                      Class<?>[] expectedParamTypes) {
    MethodExpression methodExpression = null;
    try {
        FacesContext fc = FacesContext.getCurrentInstance();
        ExpressionFactory factory = fc.getApplication().getExpressionFactory();
        methodExpression = factory.
            createMethodExpression(fc.getELContext(), valueExpression, expectedReturnType, expectedParamTypes);
    } catch (Exception e) {
        throw new FacesException("Method expression '" + valueExpression + "' could not be created.");
    }
    
    return methodExpression;
}

public static MethodExpressionActionListener createMethodActionListener(String valueExpression,
                                                                        Class<?> expectedReturnType,
                                                                        Class<?>[] expectedParamTypes) {
    MethodExpressionActionListener actionListener = null;
    try {
        actionListener = new MethodExpressionActionListener(createMethodExpression(
            valueExpression, expectedReturnType, expectedParamTypes));
    } catch (Exception e) {
        throw new FacesException("Method expression for ActionListener '" + valueExpression
                          + "' could not be created.");
    }

    return actionListener;
}

Using:
In one of my projects I have created PrimeFaces MenuModel with menu items programmatically.

MenuItem mi = new MenuItem();
mi.setAjax(true);
mi.setValue(...);
mi.setProcess(...);
mi.setUpdate(...);
mi.setActionExpression(FacesAccessor.createMethodExpression(
    "#{navigationContext.setBreadcrumbSelection}", String.class, new Class[] {}));

UIParameter param = new UIParameter();
param.setId(...);
param.setName(...);
param.setValue(...);
mi.getChildren().add(param);

Do you have nice methods you want to share here? Tips / tricks are welcome.

Fix for CSS opacity in Internet Explorer

2011-10-29T13:48:00.000-07:00

How to set CSS opacity in Internet Explorer? It's easy for good browsers like Firefox, Google Chrome or new IE9:

opacity: 0.5;

For old Safary versions you probably also need

-khtml-opacity: 0.5;

For IE6, IE7 you can write

filter: alpha(opacity=50);

and for IE8

-ms-filter: "alpha(opacity=50)";

Saidly, but filter with opacity value in IE isn't enough. Element should be positioned, in order that opacity would work in IE. If the element doesn't have a position, there is a little trick in order to get it working. Add 'zoom: 1' to your CSS.

filter: alpha(opacity=50);        // IE6, IE7
-ms-filter: "alpha(opacity=50)"; // IE8
zoom: 1;

I have faced this problem with Schedule component in PrimeFaces. The button "today" is not disabled in IE7 for the current day although it has the jQuery UI style .ui-state-disabled. The fix would be

/* IE7 hack */
div.fc-button-today.ui-state-disabled {
    *zoom: 1;
}

* means the style is applied for IE7 only.

Draw masked images with Java 2D API and Jersey servlet

2011-10-07T03:45:00.000-07:00

The task I had for one Struts web project was the dynamic image painting. You maybe know a small flag icon in MS Outlook which indicates message states. It can be red, green, etc. We needed the similar flag icon with configurable colors. The color is variable and thus unknown a priori - it can be set dynamically in backend and passed to front-end. I develop Struts web applications with JSF in mind. We can't use custom JSF resource handler in Struts, but we can use servlets. A HTTP servlet is able to catch GET requests causing by Struts or JSF image tags and render an image. All parameters should be passed in URL - they should be parts of URL. We need following parameters:

image format like "png" or "jpg"
file name of base image
file name of mask image
color (in HEX without leading "#" or "0x" signs)

An URL-example is

 
http://host:port/webappcontext/masked/png/flag/flag-mask/FF0000/mfile.imgdrawer

To save me pain for manually parsing of URL string and extraction of all parameters I have took Jersey - reference implementation for building RESTful Web services. Jersey's RESTful Web services are implemented as servlet which takes requests and does some actions according to URL structure. We just need to implement such actions. My action (and task) is image drawing / painting. That occurs by means of Java 2D API - a set of classes for advanced 2D graphics and imaging. Let me show the end result at first. Base image looks as follows

Mask image looks as follows

And now the magic is comming. I'm sending a GET request to draw a red flag (color FF0000) dynamically:

I'm sending a GET request to draw a green flag (color 00FF00):

Do you want to see a blue image? No problem, I can type as color 00ff.

You need four things to achieve that:

1. Dependencies to Jersey and Java 2D Graphics. Maven users can add these as follows:

<dependency>
    <groupId>com.sun.jersey</groupId>
    <artifactId>jersey-server</artifactId>
    <version>... last version ...</version>
</dependency>
<dependency>
    <groupId>com.sun.media</groupId>
    <artifactId>jai_codec</artifactId>
    <version>... last version ...</version>
</dependency>
<dependency>
    <groupId>com.sun.media</groupId>
    <artifactId>jai_imageio</artifactId>
    <version>... last version ...</version>
</dependency>

2. Two image files in the web application. I have placed them under webapp/resources/themes/app/images/ and they are called in my case flag.png and flag-mask.png.

3. Configuration for Jersey servlet in web.xml. My configuration is

<servlet>
    <servlet-name>imagedrawer</servlet-name>
    <servlet-class>com.sun.jersey.spi.container.servlet.ServletContainer</servlet-class>
    <init-param>
        <param-name>com.sun.jersey.config.property.packages</param-name>
        <param-value>ip.client.commons.web.servlet</param-value>
    </init-param>
</servlet>
<servlet-mapping>
    <servlet-name>imagedrawer</servlet-name>
    <url-pattern>*.imgdrawer</url-pattern>
</servlet-mapping>

Image-URL should be ended with imgdrawer to be able to handled by Jersey servlet. By the way, my FacesServlet is mapped to *.jsf and Struts ActionServlet to *.do. Init parameter com.sun.jersey.config.property.packages points to the Java package where the handler class is placed. Writing of handler class is the step 4.

4. Handler class which treats GET requests and draws / paints a new masked image by means of Java 2D API. The new image is a composition of two predefined images from the step 2. The mask gets painted and overlapped with the base image. The code is more or less documented, so that I omit any comments :-)

/**
 * Jersey annotated class for image drawing. Drawed images don't need to be cached server side because they are cached
 * proper on the client side. Set "expires" and "max-age" ensure client side caching.
 */
@Path("/")
@Produces("image/*")
@Singleton
public class ImageDrawer {
    @Context ServletContext context;

    /** directory for image files (can be done configurable if needed) */
    private String imageDir = "/resources/themes/app/images/";

    /**
     * Gets composed image consist of base and mask image.
     *
     * @param  format   format, e.g. "png", "jpg".
     * @param  basefile file name of base image without file extension
     * @param  maskfile file name of mask image without file extension
     * @param  hexcolor color in HEX without leading "#" or "0x" signs
     * @return Response new composed image
     * @throws WebApplicationException thrown exception, 404 or 500 status code.
    */
    @GET
    @Path("/masked/{format}/{basefile}/{maskfile}/{hexcolor}/{img}")
    public Response getImage(@PathParam("format") String format,
                             @PathParam("basefile") String basefile,
                             @PathParam("maskfile") String maskfile,
                             @PathParam("hexcolor") String hexcolor) {
        // check parameters
        if (format == null || basefile == null || maskfile == null || hexcolor == null) {
            throw new WebApplicationException(404);
        }

        // try to get images from web application
        InputStream is1 = context.getResourceAsStream(imageDir + basefile + "." + format);
        if (is1 == null) {
            throw new WebApplicationException(404);
        }

        InputStream is2 = context.getResourceAsStream(imageDir + maskfile + "." + format);
        if (is2 == null) {
            throw new WebApplicationException(404);
        }

        RenderedImage img1 = renderImage(is1);
        RenderedImage img2 = renderImage(is2);

        // convert HEX to RGB
        Color color = Color.decode("0x" + hexcolor);

        // draw the new image
        BufferedImage resImage = drawMaskedImage(img1, img2, color);

        byte[] resImageBytes = null;
        ByteArrayOutputStream baos = new ByteArrayOutputStream();

        try {
            // use Apache IO
            ImageIO.write(resImage, format, baos);
            baos.flush();
            resImageBytes = baos.toByteArray();
        } catch (IOException e) {
            throw new WebApplicationException(500);
        } finally {
            try {
                baos.close();
            } catch (IOException e) {
                ;
            }
        }

        // cache in browser forever
        CacheControl cacheControl = new CacheControl();
        cacheControl.setMaxAge(Integer.MAX_VALUE);

        return Response.ok(resImageBytes, "image/" + format).cacheControl(cacheControl)
                       .expires(new Date(Long.MAX_VALUE)).build();
    }
 
    // Utilities (written not by me, copyright ©)

    private RenderedImage renderImage(InputStream in) {
        SeekableStream stream = createSeekableStream(in);
        boolean isImageIOAvailable = false;
        if (Thread.currentThread().getContextClassLoader().
            getResource("META-INF/services/javax.imageio.spi.ImageReaderSpi") != null) {
            isImageIOAvailable = true;
        }
        return JAI.create(isImageIOAvailable ? "ImageRead" : "stream", stream);
    }

    private BufferedImage drawMaskedImage(RenderedImage orig, RenderedImage mask, Color color) {
        BufferedImage overlay = manipulateImage(mask, null);
        return manipulateImage(orig, new ImageManipulator() {
            public void manipulate(final Graphics2D g2d) {
                float[] scaleFactors = new float[] {
                2f * (color.getRed() / 255f), 2f * (color.getGreen() / 255f),
                2f * (color.getBlue() / 255f), color.getAlpha() / 255f};
                float[] offsets = new float[] {0, 0, 0, 0};
                g2d.drawImage(overlay, new RescaleOp(scaleFactors, offsets, null), 0, 0);
            }
        });
    }

    private BufferedImage manipulateImage(RenderedImage orig, ImageManipulator manipulator) {
        BufferedImage image;
        boolean drawOriginal = false;
        ColorModel colorModel = orig.getColorModel();
        int colorSpaceType = colorModel.getColorSpace().getType();
        if (colorModel.getPixelSize() >= 4 && colorSpaceType != ColorSpace.TYPE_GRAY) {
            image = new RenderedImageAdapter(orig).getAsBufferedImage();
        } else if (colorSpaceType == ColorSpace.TYPE_GRAY) {
            image = new BufferedImage(orig.getWidth(), orig.getHeight(), BufferedImage.TYPE_INT_ARGB);
            drawOriginal = true;
        } else {
            image = new BufferedImage(orig.getWidth(), orig.getHeight(), BufferedImage.TYPE_BYTE_INDEXED);
            drawOriginal = true;
        }
   
        Graphics2D g2d = image.createGraphics();
        if (drawOriginal) {
            g2d.drawImage(new RenderedImageAdapter(orig).getAsBufferedImage(), 0, 0, null);
        }

        if (manipulator != null) {
            manipulator.manipulate(g2d);
        }
    
        return image;
    }

    private interface ImageManipulator {void manipulate(Graphics2D g2d);} 
}

Facelets with HTML5

2011-10-06T06:12:00.000-07:00

After reading this post on StackOverflow I have decided to use HTML5 DOCTYPE in JSF. Why to write long DOCTYPE with DTD, (X)HTML, Transitional, etc. like this one

<!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"
      ... >
      
</html>

if we can write much simpler <!DOCTYPE html>?

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      ... >
      
</html>

Using HTML5 DOCTYPE doesn't have side effects with Facelets parser and works fine in all browsers expect of IE6 which will render pages in quirks mode. IE6 usage is decreasing last years and it's not supported by many JSF libraries (like PrimeFaces) anymore. So, it doesn't hurt. If you are using HTML5 specific elements (e.g. file upload in PrimeFaces) and the browser doesn't support them, fallbacks will be applied. HTML5 specific elements will be gracefully degraded to HTML4.

One small issue I had during my changes of DOCTYPE was the entity   which I sometimes use for non-breaking space. The Facelets parser says

 
The entity "nbsp" was referenced, but not declared.

The solution is to replace   by the character reference   Also other entities like © should be replaced by character references. Apart from that JSF components which I use in my web apps are okey so far.

Summary: Using of <!DOCTYPE html> in Facelets is highly recommended. It's simple and future-proof.

Atmosphere and JSF are good friends

2011-09-29T02:57:00.001-07:00

Decision to write this long article was driven by PrimeFaces community. People have troubles to develop web applications with server push techniques. Even with Atmosphere - framework for building portable Comet and WebSocket based applications. Portable means it can run on Tomcat, JBoss, Jetty, GlassFish or any other application server which supports Servlet specification 2.5 or higher. If you want to be independent on underlying server and don't want to have headaches during implementation, use Atmosphere framework. It simplifies development and can be easy integrated into JSF or any other web frameworks (don't matter). I read Atmosphere doesn't play nice with JSF or similar. PrimeFaces had a special Athmosphere handler for JSF in 2.2.1. But that's all is not necessary. It doesn't matter what for a web framework you use - the intergration is the same. My intention is to show how to set up a bidirectional communication between client and server by using of Atmosphere. My open source project "Collaborative Online-Whiteboard" demonstrates that this approach works well for all three transport protocols - Long-Polling, Streaming and WebSocket. This is an academic web application built on top of the Raphaël / jQuery JavaScript libraries, Atmosphere framework and PrimeFaces. You can open two browser windows (browser should support WebSocket) and try to draw shapes, to input text, to paste image, icon, to remove, clone, move elements etc.

We need a little theory at first. For bidirectional communication we need to define a Topic at first (called sometimes "channel"). Users subscribe to the Topic and act as Subscribers to receive new data (called updates or messages as well). A subscriber acts at the same time as Publisher and can send data to all subscribers (broadcasting). Topic can be expressed by an unique URL - from the technical point of view. URL should be specified in such a manner that all bidirectional communication goes through AtmosphereServlet. JSF requests should go through FacesServlet. This is a very important decision and probably the reason why Atmosphere integration in various web frameworks like JSF and Struts sometimes fails. Bidirectional communication should be lightweight and doesn't run all JSF lifecycle phases! This can be achieved by proper servlet-mapping in web.xml. The picture below should demonstrate the architecture (example of my open source project).

For my use case I need messages in JSON format, but generally any data can be passed over bidirectional channel (XML, HTML). What is the Topic exactly? It depends on web application how you define the Topic. You can let user types it self (e.g. in chat applications) or make it predefined. In my application I equate Topic with Whiteboard-Id which is generated as UUID. Furthermore, I have introduced User-Id (= Publisher-Id) as well and called it Sender. Sender serves as identificator to filter Publisher out of all Subscribers. Publisher is normally not interested in self notification. I'm going to show using of Sender later. My Topic-URL follows this pattern

http://host:port/pubsub/{topic}/{sender}.topic

and looks like e.g. as

http://localhost:8080/pubsub/ea288b4c-f2d5-467f-8d6c-8d23d6ab5b11/e792f55e-2309-4770-9c48-de75354f395d.topic

I use Atmosphere with Jersey I think it's a better way than to write Atmosphere handlers or try to integrate MeteorServlet. Therefore, to start using of Atmosphere, you need a dependency to current Atmosphere and Jersey. Below is a dependency configuration for Maven users. Note: I cut logging off.

<dependency>
    <groupId>org.atmosphere</groupId>
    <artifactId>atmosphere-jersey</artifactId>
    <version>0.8-SNAPSHOT</version>
    <exclusions>
        <exclusion>
            <groupId>org.atmosphere</groupId>
            <artifactId>atmosphere-ping</artifactId>
        </exclusion>
        <exclusion>
            <groupId>org.slf4j</groupId>
            <artifactId>slf4j-api</artifactId>
        </exclusion>
    </exclusions>
</dependency>
<dependency>
    <groupId>org.apache.geronimo.specs</groupId>
    <artifactId>geronimo-servlet_3.0_spec</artifactId>
    <version>1.0</version>
</dependency>
<dependency>
    <groupId>org.slf4j</groupId>
    <artifactId>slf4j-api</artifactId>
    <version>1.6.2</version>
</dependency>
<dependency>
    <groupId>org.slf4j</groupId>
    <artifactId>slf4j-nop</artifactId>
    <version>1.6.2</version>
</dependency>

The next step is to add Atmosphere-jQuery plugin to the client side. This plugin can be downloaded from the Atmosphere's homepage. After placing jquery.atmosphere.js under webapp/resources/js you can include it with

<h:outputScript library="js" name="jquery.atmosphere.js" target="head"/>

Yes, I know that Atmosphere can load jquery.atmosphere.js from JAR file in classpath, but a manual include is better in JSF environment. Now we are able to subscribe to the Topic and communicate with the server on the client side. There are two calls: jQuery.atmosphere.subscribe() and jQuery.atmosphere.response.push(). To establish a bidirectional communication, you need to call subscribe(). You have to call this method just once when page has been loaded. After that the method push() is responsible for data publushing to all subsribers. In the mentioned above web application I have an JavaScript object WhiteboardDesigner which encapsulates the Atmosphere's subscribe() call in the method subscribePubSub().

// Subscribes to bidirectional channel.
// This method should be called once the web-application is ready to use.
this.subscribePubSub = function() {
  jQuery.atmosphere.subscribe(
    this.pubSubUrl,
    this.pubSubCallback,
    jQuery.atmosphere.request = {
      transport: this.pubSubTransport,
      maxRequest: 100000000
    });
    
    this.connectedEndpoint = jQuery.atmosphere.response;
}

The first parameter this.pubSubUrl is the shown above Topic-URL. The second parameter this.pubSubCallback is the callback function. The third parameter is the request configuration which keeps among other things transport protocol defined in this.pubSubTransport: "long-polling", "streaming" or "websocket". The last line assigns jQuery.atmosphere.response the variable this.connectedEndpoint which allows us data publishing via push(). So now when new data being received, the callback function this.pubSubUrl gets called. Inside of the callback we can extract received data from response object. You can get the idea how to handle broadcasted data from my example:

// Callback method defined in the subscribePubSub() method.
// This method is always called when new data (updates) are available on server side.
this.pubSubCallback = function(response) {
  if (response.transport != 'polling' &&
      response.state != 'connected' &&
      response.state != 'closed' && response.status == 200) {
      var data = response.responseBody;
      if (data.length > 0) {
        // convert to JavaScript object
        var jsData = JSON.parse(data);

       // get broadcasted data
        var action = jsData.action;
        var sentProps = (jsData.element != null ? jsData.element.properties : null);
        switch (action) {
          case "create" :
            ...
            break;
          case "update" :
            ...
            break;
          case "remove" :
            ...
            break;
          ... 
          default :
        }
        ...
      }
  }
}

To publish data over the Topic-URL you need to call this.connectedEndpoint.push(). this.connectedEndpoint is a defined above shortcut for jQuery.atmosphere.response. I call it in my example for created whiteboard elements as follows (just an example):

// Send changes to server when a new image was created.
this.sendChanges({
  "action": "create",
  "element": {
    "type": "Image",
    "properties": {
      "uuid": ...,
      "x": ...,
      "y": ...,
      "url": ...,
      "width": ...,
      "height": ...
    }
  }
});

// Send any changes on client side to the server.
this.sendChanges = function(jsObject) {
  // set timestamp
  var curDate = new Date();
  jsObject.timestamp = curDate.getTime() + curDate.getTimezoneOffset() * 60000;

  // set user
  jsObject.user = this.user;

  // set whiteboard Id
  jsObject.whiteboardId = this.whiteboardId;

  var outgoingMessage = JSON.stringify(jsObject);

  // send changes to all subscribed clients
  this.connectedEndpoint.push(this.pubSubUrl, null, jQuery.atmosphere.request = {data: 'message=' + outgoingMessage});
}

Passed JavaScript object jsObject is converted to JSON via JSON.stringify(jsObject) befor it's sending to the server.

What is necessary on the server side? Calls jQuery.atmosphere.subscribe() and jQuery.atmosphere.response.push() have to be caught on the server side. I use Jersey and its annotations to catch GET- / POST-requests for the certain Topic-URL in a declarative way. For that are responsible annotations @GET, @POST und @PATH. I have developed the class WhiteboardPubSub to catch the Topic-URL by means of @Path("/pubsub/{topic}/{sender}"). With @GET annotated method subscribe() catches the call jQuery.atmosphere.subscribe(). This method tells Atmosphere to suspend the current request until an event occurs. Topic (= Broadcaster) is also created in this method. Topic-String is extracted by the annotation @PathParam from the Topic-URL. You can imagine a Broadcaster as a queue. As soon as a new message lands in the queue all subscribers get notified (browsers which are connected with Topic get this message). With @POST annotated method publish() catches the call jQuery.atmosphere.response.push(). Client's data will be processed there and broadcasted to all subscribed connections. This occurs independent from the underlying transport protocol.

@Path("/pubsub/{topic}/{sender}")
@Produces("text/html;charset=ISO-8859-1")
public class WhiteboardPubSub
{
  private @PathParam("topic") Broadcaster topic;

  @GET
  public SuspendResponse<String> subscribe() {
    return new SuspendResponse.SuspendResponseBuilder<String>().
               broadcaster(topic).outputComments(true).build();
  }

  @POST
  @Broadcast
  public String publish(@FormParam("message") String message,
                      @PathParam("sender") String sender,
                      @Context AtmosphereResource resource) {
    // find current sender in all suspended resources and
    // remove it from the notification
    Collection<AtmosphereResource<?, ?>> ars = topic.getAtmosphereResources();
    if (ars == null) {
      return "";
    }

    Set<AtmosphereResource<?, ?>> arsSubset = new HashSet<AtmosphereResource<?, ?>>();
    HttpServletRequest curReq = null;
    for (AtmosphereResource ar : ars) {
      Object req = ar.getRequest();
      if (req instanceof HttpServletRequest) {
        String pathInfo = ((HttpServletRequest)req).getPathInfo();
        String resSender = pathInfo.substring(pathInfo.lastIndexOf('/') + 1);
        if (!sender.equals(resSender)) {
          arsSubset.add(ar);
        } else {
          curReq = (HttpServletRequest) req;
        }
      }
    }

    if (curReq == null) {
      curReq = (HttpServletRequest) resource.getRequest();
    }

    // process current message (JSON) and create a new one (JSON) for subscribed clients
    String newMessage = WhiteboardUtils.updateWhiteboardFromJson(curReq, message);

    // broadcast subscribed clients except sender
    topic.broadcast(newMessage, arsSubset);

    return "";
  }
}

In my case the method publish() looks for sender (= publisher of this message) among all subscribers and removes it from the notification. It looks a little bit complicated. In simple case you can write

@POST
@Broadcast
public Broadcastable publish(@FormParam("message") String message) {
  return new Broadcastable(message, "", topic);
}

and that's all! The last step is the mentioned above configuration in web.xml. *.jsf requests should be mapped to FacesServlet and *.topic requests to AtmosphereServlet. AtmosphereServlet can be configured comprehensively. Important configuration parameter is com.sun.jersey.config.property.packages. With this parameter you can tell Jersey where the annotated class is located (in my case WhiteboardPubSub). In my example Jersey scans the directory com.googlecode.whiteboard.pubsub.

<!-- Faces Servlet -->
<servlet>
  <servlet-name>Faces Servlet</servlet-name>
  <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
  <load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
  <servlet-name>Faces Servlet</servlet-name>
  <url-pattern>*.jsf</url-pattern>
</servlet-mapping>

<!-- Atmosphere Servlet -->
<servlet>
  <description>AtmosphereServlet</description>
  <servlet-name>AtmosphereServlet</servlet-name>
  <servlet-class>org.atmosphere.cpr.AtmosphereServlet</servlet-class>
  <init-param>
    <param-name>com.sun.jersey.config.property.resourceConfigClass</param-name>
    <param-value>com.sun.jersey.api.core.PackagesResourceConfig</param-value>
  </init-param>
  <init-param>
    <param-name>com.sun.jersey.config.property.packages</param-name>
    <param-value>com.googlecode.whiteboard.pubsub</param-value>
  </init-param>
  <init-param>
    <param-name>org.atmosphere.useWebSocket</param-name>
    <param-value>true</param-value>
  </init-param>
  <init-param>
    <param-name>org.atmosphere.useNative</param-name>
    <param-value>true</param-value>
  </init-param>
  <init-param>
    <param-name>org.atmosphere.cpr.WebSocketProcessor</param-name>
    <param-value>org.atmosphere.cpr.HttpServletRequestWebSocketProcessor</param-value>
  </init-param>
  <init-param>
    <param-name>org.atmosphere.cpr.broadcastFilterClasses</param-name>
    <param-value>org.atmosphere.client.JavascriptClientFilter</param-value>
  </init-param>
  <load-on-startup>2</load-on-startup>
</servlet>
<servlet-mapping>
  <servlet-name>AtmosphereServlet</servlet-name>
  <url-pattern>*.topic</url-pattern>
</servlet-mapping>

Please check Atmosphere documentation and showcases for more information.

Summary: We have seen that few things are needed to establish the bidirectional comminication: Topic-URL, callback function for data receiving, subsribe() und push() methods on client side, an Jersey class on server side and configuration in web.xml to bind all parts together. JSF- und Atmosphere-requests should be treated separately. You maybe ask "but what is about the case if I need to access JSF stuff in Atmosphere-request?" For a simple case you can use this technique to access managed beans. If you want to have a fully access to all JSF stuff you should use this technique which allows accessing FacesContext somewhere from the outside.

P.S. Good news. Atmosphere's lead Jeanfrancois Arcand announced his intention to pursue the work on Atmosphere. He can invest more time now in his great framework.

Quick practical introduction to JSDoc (JsDoc Toolkit)

2011-09-27T03:21:00.000-07:00

Documentation of JavaScript code is a very important part of software development and helps front-end developers to understand code of third-party libraries. There are really well documented libraries. One of them is Mojarra JavaScript documentation. Other libraries (and that's a common case) don't have JavaScript documentation at all or don't cover all their features, so that features stay undocumented (I hope PrimeFaces guys read this blog post :-)).

JSDoc is documentation generated for JavaScript code by means of JsDoc Toolkit. Documentation is not restricted to multi-page HTML, other formats are possible too. Look-&-feel can be fully customized by templates. In this quick introduction I use built-in templates and would like to show generated JSDoc on example of my open source project "Collaborative Online-Whiteboard". I use following tags in my example:

@fileOverview

This tag allows you to provide documentation for an entire file. It's often used with other tags @author and @version.

@class

This tag also allows you to add a description of the JavaScript class (if you write your code in OOP style).

@param

This tag allows you to document information about the parameters to a function, method or class (constructor)

@public

This tag allows you to document public methods or variables.

@private

This tag allows you to document private methods or variables.

@type

This tag allows you to document the type of value a variable refers to, or the type of value returned by a function.

@returns

This tag documents the value returned by a function or method. You can specify a type of the returned value in curly braces {...}.

@link

This tag allows you to create a HTML link to some other documented symbol (similar link in JavaDoc).

Let's document the JavaScript code! I have a class called WhiteboardDesigner which expects 5 parameters (to be passed to constructor) and has many public / private methods. The documented class looks like

/**
* @fileOverview
* @author <a href="mailto:ovaraksin@googlemail.com">Oleg Varaksin</a>
* @version 0.2
*/

/**
* Whiteboard designer class for element drawing.
* @class
* @param witeboardConfig whiteboard's configuration {@link WhiteboardConfig}
* @param whiteboardId whiteboard's id
* @param user user (user name) working with this whiteboard
* @param pubSubUrl URL for bidirectional communication
* @param pubSubTransport transport protocol "long-polling" | "streaming" | "websocket"
*/
WhiteboardDesigner = function(witeboardConfig, whiteboardId, user, pubSubUrl, pubSubTransport) {
    /**
     * Whiteboard's configuration {@link WhiteboardConfig}.
     * @public
     * @type WhiteboardConfig
     */
    this.config = witeboardConfig;
    /**
     * Whiteboard's id.
     * @public
     * @type uuid
     */    
    this.whiteboardId = whiteboardId;
    /**
     * User which works with this whiteboard.
     * @public
     * @type string
     */    
    this.user = user;
    /**
     * URL for bidirectional communication.
     * @public
     * @type string
     */    
    this.pubSubUrl = pubSubUrl;
    /**
     * Transport protocol "long-polling" | "streaming" | "websocket".
     * @public
     * @type string
     */    
    this.pubSubTransport = pubSubTransport;
    /**
     * Logging flag, true - logging is visible, false - otherwise.
     * @public
     * @type boolean
     */    
    this.logging = false;
    /**
     * Raphael's canvas.
     * @private
     * @type Raphael's paper
     */    
    var paper = Raphael(this.config.ids.whiteboard, whiteboard.width(), whiteboard.height());
    
    ...
    
    /** Draws image with default properties.
    * @public
    * @param inputUrl image URL.
    * @param width image width.
    * @param height image height.
    */    
    this.drawImage = function(inputUrl, width, height) {
        ...
    }
    
    /** Gets currently selected whiteboard element.
    * @public
    * @returns {Raphael's element} currently selected element
    */
    this.getSelectedObject = function() {
        ...
    }

    ...

    /** Outputs debug messages.
    * @private
    * @param msg message
    */
    var logDebug = function(msg) {
        ...
    }
}

How to generate a documentation now? I would like to show a quick and simple way. Download JsDoc Toolkit zip file at first. Extract it and go to the directory jsdoc-toolkit. Create there a new folder with any name which will contain your documented JavaScript files. I have created a folder called "whiteboard". Copy all JavaScript files into this folder. Open a DOS console or Linux terminal or whatever at jsdoc-toolkit and type

 
java -jar jsrun.jar app/run.js -a -p -t=templates/jsdoc ./<yours folder name>/*.*

In my case it's

 
java -jar jsrun.jar app/run.js -a -p -t=templates/jsdoc ./whiteboard/*.*

JsDoc Toolkit runs via the Mozilla JavaScript Engine "Rhino." Rhino is wrapped in a runner application called jsrun. Option -a says: include all functions, even undocumented ones. Option -p says: include symbols tagged as private, underscored and inner symbols (such symbols are not included per default). Option -t is required und used to point to templates for output formatting. Using of default build-in templates which are located under templates/jsdoc is satisfying in most cases.

After script running you will find generated files in the out folder. Entry file is index.html. Its location is .../jsdoc-toolkit/out/index.html You can see online here how does it look for my project. Have much fun!

Inheritance in Maven based web projects

2011-09-16T01:20:00.000-07:00

Sometimes you want to define a base web project and reuse all web based stuff in all other web projects. This is not rare in big projects. The first thought coming in mind is inheritance. Is there any inheritance between web projects at all? Yes, in a manner of speaking. In Maven based projects there is a nice "overlay" feature for maven-war-plugin. You can point to the base WAR project in the overlay tag and the base project gets extracted bevor it's stuff will be extended or overwritten by inherited project. An example:

<plugin>
    <artifactId>maven-war-plugin</artifactId>
    ...
    <configuration>
        <overlays>
            <overlay>
                <groupId>ip.client</groupId>
                <artifactId>ip-theme-framework</artifactId>
                <classifier>webapp</classifier>
                <excludes>
                    <exclude>META-INF/**</exclude>
                    <exclude>WEB-INF/web.xml</exclude>
                    <exclude>WEB-INF/lib/**</exclude>
                    <exclude>WEB-INF/classes/**</exclude>
                </excludes>
            </overlay>
        </overlays>
    </configuration>
</plugin>

You have also to add a dependency in your inherited project for the base project, of course. Well, this feature works fine, but there is a problem with transitive dependencies. Dependencies defined in the base project are "invisible" for inherited projects. You can not use transitive dependencies, they aren't going to be inherited. And adding of all dependencies again in inherited projects is error-prone and causes some issues during release management. To solve this problem, we can set packaging of all web projects as jar. That's what we do in my company.

<packaging>jar</packaging>

With packaging jar you have still a WAR archive at the end, but Java sources are packed to one jar file which is placed by Maven below WEB-INF/lib inside of the WAR. WEB-INF/classes stays empty. Dependencies get now accepted. One thing to keep in mind: WAR projects with packaging jar should be specified twice as dependencies. Once without <type> and once with <type>war</type>. An example:

<dependency>
    <groupId>ip.client</groupId>
    <artifactId>ip-theme-framework</artifactId>
</dependency>
<dependency>
    <groupId>ip.client</groupId>
    <artifactId>ip-theme-framework</artifactId>
    <classifier>webapp</classifier>
    <type>war</type>
    <scope>runtime</scope>
</dependency>

The last be not least is the support in IDEs. JAR projects are not recognized as web projects in Eclipse, IntelliJ or somewhere else and you lose all goodies from your preferred IDE. A solution is simple and uses profiles. Define a property ${packaging.war} for a special profile (see my last post).

<profile>
    <id>ide</id>
    <properties>
        <packaging.war>war</packaging.war>
    </properties>
</profile>

write variable packaging.war in the packaging tag of your project

<packaging>${packaging.war}</packaging>

and let Maven run with this profile when creating IDE specific files:

mvn -Pide eclipse:eclipse
mvn -Pide idea:idea
...

Summary: Overlays help to reuse web projects. They also help to customize web projects by having one big core project and many small custom specific projects which only have specific CSS, Images (logos, ect.) and messages in property files. Custom specific Maven projects don't have Java classes - the aim is to overwrite / extend resources of core project and achieve a custom Look-&-Feel.

Filter web.xml with Maven

2011-09-14T11:39:00.000-07:00

Maven (build manager for Java projects) has a feature called "filtering". As is generally known you can replace with Maven any variables defined with placeholders like ${my.variable}. Such variables can be placed in property files or any other resource files like CSS, JavaScript, (X)HTML. I normally place placeholders in web.xml and replace them by real values while Maven runs with a certain profile. My default Maven profile is e.g. "development". Another profile is "release". To build artefacts with "release" profile I run

mvn -Prelease clean install

Option -P is for profile you want to build software with. How to set up filtering of web.xml exactly? At first we need to create a directory "filter" under "src/main" and place two (or more) property files under "src/main/filter". In order to demonstrate filtering for two profiles I'm going to create development.properties and release.properties. So, our structure looks now as follows:

Let us define the content of development.properties as

jsf.faceletsRefreshPeriod=2
jsf.resourceUpdateCheckPeriod=2

and the content of release.properties as

jsf.faceletsRefreshPeriod=-1
jsf.resourceUpdateCheckPeriod=-1

The next step is to modify web.xml. web.xml gets two placeholders:

...
<context-param>
    <param-name>javax.faces.FACELETS_REFRESH_PERIOD</param-name>
    <param-value>${jsf.faceletsRefreshPeriod}</param-value>
</context-param>
<context-param>
    <param-name>com.sun.faces.resourceUpdateCheckPeriod</param-name>
    <param-value>${jsf.resourceUpdateCheckPeriod}</param-value>
</context-param>
...

The last step is to modify pom.xml. Actually we don't need two profiles. Let us only define the "release" profile and assume default case without any profiles as "development".

<profiles>
    <profile>
        <id>release</id>
        <properties>
            <webapp.filter>release</webapp.filter>
        </properties>
    </profile>
</profiles>

Important thing is to define a property "webapp.filter" for "release" profile. For default case we have also to add this line to pom.xml (somewhere at the end):

<properties>
    <webapp.filter>development</webapp.filter>
</properties>

To make it working together with maven-war plugin (in this case) we need to activate filtering feature. That means, before WAR archive gets packed, placeholders in web.xml should be already replaced by real values from property files. This task is simple:

<plugin>
    <artifactId>maven-war-plugin</artifactId>
    <executions>
        <execution>
            <id>war</id>
            <phase>package</phase>
            <goals>
                <goal>war</goal>
            </goals>
            <configuration>
                ...
                <filteringDeploymentDescriptors>true</filteringDeploymentDescriptors>
                <filters>
                    <filter>${basedir}/src/main/filter/${webapp.filter}.properties</filter>
                </filters>
            </configuration>
        </execution>
    </executions>
</plugin>

We leverages here the variable ${webapp.filter} which points to file name depends on currently active profile. That's all. You can now run builds with

// build for development
mvn clean install

// build for release
mvn -Prelease clean install

There is only one issue when using Jetty Maven plugin and let it runs with

mvn jetty:run

Jetty looks as default under source directory and scans src/main/webapp/WEB-INF/web.xml. But located there web.xml has placeholders. How to solve that? A solution is easy. This is a bonus part of this post. We can leverages overrideDescriptor tag and specify a XML file with our own parts of web.xml which overwrite the same parts in src/main/webapp/WEB-INF/web.xml when Jetty running.

<plugin>
    <groupId>org.mortbay.jetty</groupId>
    <artifactId>maven-jetty-plugin</artifactId>
    <configuration>
        <webAppConfig>
            ...
            <overrideDescriptor>src/main/resources/overrideweb.xml</overrideDescriptor>
        </webAppConfig>
    </configuration>
</plugin>

The content of overrideweb.xml is (we normally need settings for default "development" profile when Jetty running)

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5"
         xmlns="http://java.sun.com/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">

    <context-param>
        <param-name>javax.faces.FACELETS_REFRESH_PERIOD</param-name>
        <param-value>2</param-value>
    </context-param>
    <context-param>
        <param-name>com.sun.faces.resourceUpdateCheckPeriod</param-name>
        <param-value>2</param-value>
    </context-param>
    <context-param>
        <param-name>com.sun.faces.injectionProvider</param-name>
        <param-value>com.sun.faces.vendor.WebContainerInjectionProvider</param-value>
    </context-param>
    <context-param>
        <param-name>com.sun.faces.spi.AnnotationProvider</param-name>
        <param-value>com.sun.faces.config.AnnotationScanner</param-value>
    </context-param>
    
    <listener>
        <listener-class>com.sun.faces.config.ConfigureListener</listener-class>
    </listener>
</web-app>

Happy filtering!

Useful Maven commandos

2011-09-07T04:10:00.001-07:00

Everybody who uses Maven from console / terminal knows how sometimes difficult to remember all handy commandos using in day job. A small reference list should help.

Skip running tests for a particular project.

mvn clean install -Dmaven.test.skip=true

Continue build if it has been failed at certain point. Maybe you have many sub-projects and build your entire project from top to down. "-rf" parameters allow to continue maven running where you want after any build errors. Assume my current top directory where I let Maven run is D:\SVN and the build was broken at D:\SVN\eIP\CoreServer\DatastoreConnector. Following command let go on with the build and skip this not compilable or not testable sub-project.

mvn clean install -rf eIP\CoreServer\DatastoreConnector

Get source jar files (e.g. for Eclipse projects). Having source files in local repository allow to jump into this directly from your preferred IDE.

mvn eclipse:eclipse -DdownloadSources=true

or run

mvn dependency:sources

to download all source jars for a given project into local repository. The same for JavaDoc (if it's available).

mvn eclipse:eclipse -DdownloadJavadocs=true

Output project's dependency tree. I like that! You can see versions of all used artefacts.

mvn dependency:tree

Output is like this one

[INFO] ip.client:ip-jsftoolkit:jar:3.4.1-SNAPSHOT
[INFO] +- ip.client:ip-filter-security:jar:3.4.0:compile
[INFO] |  +- com.scalaris.commons:scalaris-commons-enterprise:jar:2.3.1-SNAPSHOT:compile
[INFO] |  |  +- com.scalaris.commons:scalaris-commons-lang:jar:2.3.0:compile
[INFO] |  |  +- org.apache.commons:commons-lang3:jar:3.0:compile
[INFO] |  |  \- commons-lang:commons-lang:jar:2.6:compile
[INFO] |  +- ip.client:ip-client-commons:jar:3.4.0:compile
[INFO] |  |  +- ip.services:ip-core-services:jar:3.4.0:compile
[INFO] |  |  |  \- ip.datatransfer:ip-datatransfer-commons:jar:3.4.0:compile
..................................................
[INFO] |  +- commons-httpclient:commons-httpclient:jar:3.0.1:compile
[INFO] |  +- org.apache.commons:commons-jexl:jar:2.0:compile
[INFO] |  \- joda-time:joda-time:jar:1.6.2:compile
[INFO] +- javax.ejb:ejb:jar:3.0:provided
[INFO] +- javax.servlet:servlet-api:jar:2.5:provided
[INFO] \- com.scalaris.commons:scalaris-commons-test:jar:2.2.8-SNAPSHOT:test
[INFO]    +- jmock:jmock:jar:1.2.0:test
[INFO]    +- junit:junit:jar:3.8.2:test

Filter project's dependency tree in order to see only a specified dependency. The syntax for filter patterns is as follows: [groupId]:[artifactId]:[type]:[version]

mvn dependency:tree -Dincludes=com.sun.faces:jsf-impl

Display the effective pom of a project. The effective pom represents the current pom state for a project (incl. maven super pom and active profiles).

mvn help:effective-pom

Generate files needed for an IntelliJ IDEA project setup.

mvn idea:idea

This plugin has no way to determine the name of the JDK you are using. It uses by default the same JDK as output java -version. Using with defined JDK:

mvn idea:idea -DjdkName=1.5

Create a web project from scratch.

mvn archetype:create 
 -DarchetypeGroupId=org.apache.maven.archetypes 
 -DarchetypeArtifactId=maven-archetype-webapp 
 -DarchetypeVersion=1.0 
 -DgroupId=com.maventest 
 -DartifactId=mywebtest 
 -Dversion=1.0-SNAPSHOT

Deploy artefact in global repository (located e.g. in file://///xyz.abc.com/maven/repo-m2).

mvn deploy:deploy-file
 -DgroupId=com.maventest
 -DartifactId=mywebtest
 -Dversion=1.0-SNAPSHOT
 -Dpackaging=war
 -Dfile=mywebapp.jar
 -DrepositoryId=xyz-release 
 -Durl=file://///xyz.abc.com/maven/repo-m2

Check all the dependencies used in your project and display a list of those dependencies with newer versions available.

mvn versions:display-dependency-updates

...
[INFO] The following dependency updates are available:
[INFO]   org.apache.maven:maven-artifact ........................ 2.0 -> 2.0.9
[INFO]   org.apache.maven:maven-plugin-api ...................... 2.0 -> 2.0.9
[INFO]   org.apache.maven:maven-project ....................... 2.0.2 -> 2.0.9
[INFO]   org.codehaus.plexus:plexus-utils ....................... 1.1 -> 1.5.6

Check all the plugins and reports used in your project and display a list of those plugins with newer versions available.

mvn versions:display-plugin-updates

...
[INFO] The following plugin updates are available:
[INFO]   maven-deploy-plugin ...................................... 2.5 -> 2.7
[INFO]   maven-jar-plugin ..................................... 2.3.1 -> 2.3.2
[INFO]   maven-plugin-plugin ...................................... 2.7 -> 2.9
[INFO]   maven-resources-plugin ................................. 2.4.3 -> 2.5

Decompile Java classes in the maven central repository :-). Useful if source code isn't available. The trick is here.

Combine jQuery Datepicker and Spinner for fast day incrementation / decrementation

2011-08-25T14:47:00.000-07:00

Is it possible to add + / - buttons to jQuery UI Datepicker in order to increment / decrement days in a comfortable way? Yes, it's possible. I have done this task - see screenshot.

This is an extended PrimeFaces Calendar with added "dateSpinner" mode. I would like to omit JSF part and only show HTML / CSS / JavaScript part of such combined calendar. All what you need is to wrap the datepicker markup with a span element, add themable up / down arrows and use datepicker utility functions $.datepicker.formatDate(format, date, settings) and $.datepicker.parseDate(format, value, settings).

HTML
Original HTML with a calendar icon (called icon trigger in jQuery Datepicker) looks very simple

 

<input id="datepicker" class="hasDatepicker" type="text">

<img class="ui-datepicker-trigger" src="images/calendar.gif" alt="..." title="...">

You have to extend this as follows

<span id="datepickerWrapper" class="ui-ccalendar ui-widget ui-corner-all">

	<input id="datepicker" class="hasDatepicker" type="text">

	<img class="ui-datepicker-trigger" src="images/calendar.gif" alt="..." title="...">

	<a class="ui-ccalendar-button ui-ccalendar-up ui-corner-tr ui-button ui-widget ui-state-default ui-button-text-only">

		<span class="ui-button-text">

			<span class="ui-icon ui-icon-triangle-1-n"></span>

		</span>

	</a>

	<a class="ui-ccalendar-button ui-ccalendar-down ui-corner-br ui-button ui-widget ui-state-default ui-button-text-only">

		<span class="ui-button-text">

			<span class="ui-icon ui-icon-triangle-1-s"></span>

		</span>

	</a>

</span>

CSS
The most CSS classes above are jQuery UI classes. I marked own classes with ui-ccalendar. In the CSS part is very important to shift spinner's arrow buttons to left. I have shifted absolute positioned buttons with CSS statement right: 17px;. We achieve with this displacement that the calendar icon is visible.

.ui-ccalendar {

    display: inline-block;

    overflow: visible;

    padding: 0;

    position: relative;

    vertical-align: middle;

}



.ui-ccalendar-button {

    cursor: default;

    display: block;

    font-size: 0.5em;

    height: 50%;

    margin: 0;

    overflow: hidden;

    padding: 0;

    position: absolute;

    right: 17px;

    text-align: center;

    vertical-align: middle;

    width: 16px;

    z-index: 100;

}



.ui-ccalendar .ui-icon {

    left: 0;

    margin-top: -8px;

    position: absolute;

    top: 50%;

}



.ui-ccalendar-up {

    top: 0;

}



.ui-ccalendar-down {

    bottom: 0;

}



.ui-ccalendar .ui-icon-triangle-1-s {

    background-position: -65px -16px;

}



.ui-ccalendar .ui-icon-triangle-1-n {

    margin-top: -9px;

}

JavaScript
In this part I use the mentioned above utility functions formatDate() / parseDate() and setDate() / getDate() API of Date object to increment / decrement a single day. Month and year boundaries are considered automatically and in- / decremented if necessary. In- / decrementation logic is bound to mousedown event on spinner buttons.

var datepickerInput = $('#datepicker');

datepickerInput.datepicker({dateFormat: 'yy-mm-dd', ... other configuration if needed ...});



$('#datepickerWrapper').children('.ui-ccalendar-button').mouseover(function() {

	$(this).addClass('ui-state-hover');

}).mouseout(function() {

	$(this).removeClass('ui-state-hover');

}).mouseup(function() {

	$(this).removeClass('ui-state-active');

}).mousedown(function() {

	var el = $(this);

	el.addClass('ui-state-active');

	try {

		// get configured date format

		var dateFormat = datepickerInput.datepicker("option", "dateFormat");



		// extract a date from a string value with a specified format

		var date = $.datepicker.parseDate(dateFormat, datepickerInput.val());

		if (el.hasClass('ui-ccalendar-up')) {

			// increment day

			date.setDate(date.getDate() + 1);

		} else {

			// decrement day

			date.setDate(date.getDate() - 1);

		}



		// format a date into a string value with a specified format

		var strDate = $.datepicker.formatDate(dateFormat, date);

		datepickerInput.val(strDate);

	} catch (err) {

		// ignore and nothing to do

	}

});

Important is here "dateFormat" option. Date format normally depends on user locale and should be passed from outside.

P.S. Just now I found a desktop example of such combined calendar too. So, you see, it's an useful and established widget :-).

GWT composite widgets vs. JSF composite components

2011-08-21T15:52:00.000-07:00

I have started to learn GWT (Google Web Toolkit). I don't want to compare all features of both frameworks. I would like to pick just one feature. In GWT you can write autonomous and reusable composite widgets and apply them many times on one or several pages. GWT following say that's not really possible in JSF 2 because one composite component is normally linked with a managed bean. If you use the same composite component twice and change value(s) in one composite component, changed value(s) will be propogated through the bean to another component too. Is it really true?

Take an example. Assume, we have to write a composite widget / component consist of a label, an input field and a button which are aligned horizontally. The GWT solution could be looked like this one

public class CompositeExample implements EntryPoint

{

	private static class LabeledInput extends Composite {

		private Label label = new Label();

		private TextBox textBox = new TextBox();

		private Button button = new Button("Jump!", new ClickHandler() {

			public void onClick(ClickEvent event) {

				// do something

			}

		});



		public LabeledInput() {

			HorizontalPanel panel = new HorizontalPanel();

			panel.add(label);

			panel.add(textBox);

			panel.add(button);



			initWidget(panel);

		}

	}



	public void onModuleLoad() {

		LabeledInput labeledInput = new LabeledInput();

		RootPanel.get().add(labeledInput);

	}

}

I defined a class named LabeledInput which extends the class com.google.gwt.user.client.ui.Composite. The new composite widget LabeledInput is well reusable many times on any pages. No problems here. A corresponding JSF solution could be implemented in a file labeledInput.xhtml as follows

<html xmlns="http://www.w3.org/1999/xhtml"

	  xmlns:h="http://java.sun.com/jsf/html"

	  xmlns:cc="http://java.sun.com/jsf/composite">

<cc:interface>

	<cc:attribute name="model" required="true">

		<cc:attribute name="labelValue" required="true"/>

		<cc:attribute name="inputValue" required="true"/>

		<cc:attribute name="jump" required="true" method-signature="void f(javax.faces.event.ActionEvent)"/>

	</cc:attribute>

	<cc:actionSource name="jump"/>

</cc:interface>

<cc:implementation>

	<h:panelGrid columns="3">

		<h:outputLabel for="#{cc.clientId}:input" value="#{cc.attrs.model.labelValue}"/>

		<h:inputText id="input" value="#{cc.attrs.model.inputValue}"/>

		<h:commandButton value="Jump!" actionListener="#{cc.attrs.model.jump}"/>

	</h:panelGrid>

</cc:implementation>

</html>

cc:attribute "model" should point to a managed bean having attributes "labelValue", "inputValue" and method (actionListener) "jump". Using of this custom component is simple

<h:form>

	...

	<custom:labeledInput id="cli1" model="#{someBean}">

	...

</h:form>



<h:form>

	...

	<custom:labeledInput id="cli2" model="#{someBean}">

	...

</h:form>

There is a problem with this JSF solution. If you change the input value (field h:inputText) in the first component and submit the surrounding form, the new value is going to set into the bean "someBean". This bean is also used by the second component. That means, the second component gets the changed value what is not a desired behavior of course. But JSF is powerful enough to solve this problem. There is a possibility to mix JSF components written in Java with declarative code written in XHTML. We can write a class LabeledInput extending UINamingContainer (according to specification) for our composite component. This class encapsulates then all attributes and has the mentioned above actionListener method.

@FacesComponent("mypackage.LabeledInput")

public class LabeledInput extends UINamingContainer

{

	enum PropertyKeys {labelValue, inputValue, jump;}



    public Object getLabelValue() {

		return getStateHelper().eval(PropertyKeys.labelValue);

    }



    public void setLabelValue(Object labelValue) {

		getStateHelper().put(PropertyKeys.labelValue, labelValue);

    }



    public Object getInputValue() {

		return getStateHelper().eval(PropertyKeys.inputValue);

    }



    public void setInputValue(Object inputValue) {

		getStateHelper().put(PropertyKeys.inputValue, inputValue);

    }



	public void jump(ActionEvent e) {

		// do something

	}

}

Component class can be linked now with the XHTML part via "componentType" attribute in cc:interface. Important part to be changed looks then as follows

<cc:interface componentType="mypackage.LabeledInput">

	<cc:attribute name="labelValue"/>

	<cc:attribute name="inputValue"/>

	<cc:actionSource name="jump"/>

</cc:interface>

<cc:implementation>

	<h:panelGrid columns="3">

		<h:outputLabel for="#{cc.clientId}:input" value="#{cc.labelValue}"/>

		<h:inputText id="input" value="#{cc.inputValue}"/>

		<h:commandButton value="Jump!" actionListener="#{cc.jump}"/>

	</h:panelGrid>

</cc:implementation>

Managed bean is not needed to be passed by this way. Now we can speak about an autonomous and reusable composite component and write <custom:labeledInput> on a page as much as we want without any collisions.

Raphaël Library evaluated

2011-07-21T08:15:00.000-07:00

About three months ago I was evaluating JavaScript Library Raphaël. This is a library for simplifying the work with vector graphics on the web. It uses SVG and VML (Internet Explorer), is highly compatible with every browser environment and doesn't depend on Flash or Canvas. I'm developing a collaborative online whiteboard just now by means of Raphaël and several frameworks for bidirectional communication in the web. Presentation is coming soon. I will also post examples how to use Raphaël library to draw shapes and more in the web. In this post I just wanted to tell that my first example (at the beginning of my evaluation) has been included to the known Raphaël Source Examples. You find it there under "Other related sites" as "Oleg's online collaborative whiteboard is evolving". The direct link to the test application is here.

Have much fun with Raphaël ;-)

Unified JSF Connection (Ajax) Status Indicator

2011-07-21T07:37:00.000-07:00

Real JSF web applications consist of various ajaxifed components. The good practise is to tell users that they should be waiting for something to finish. A global Ajax Status Indicator seems to be very handy in ajaxifed applications. Such components exist e.g. in RichFaces, ICEFaces and PrimeFaces. If you only use one of these component libraries, you can skip this post :-) But what is about if you use a mix composed of standard f:ajax with any standard and not standard components + ajaxified components from any libraries? I have counted f:ajax and PrimeFaces' p:ajax appearances in my applications. Approximately 50% to 50%. Probably you used f:ajax too because p:ajax had issues in early PrimeFaces versions. The question is now how to adjust p:ajaxStatus in order to consider standard Ajax requests in addition to PrimeFaces Ajax requests based on jQuery Ajax? We can add global callbacks for event handling from standard JSF

 
jsf.ajax.addOnEvent(callback)
jsf.ajax.addOnError(callback)

Let me extend PrimeFaces AjaxStatus, register new global callbacks and show an example in action. At first we have to add the standard JS library for Ajax and our extended script ajaxstatus.js.

import javax.faces.application.ResourceDependencies;
import javax.faces.application.ResourceDependency;

@ResourceDependencies({
    @ResourceDependency(library="primefaces", name="jquery/jquery.js"),
    @ResourceDependency(library="primefaces", name="core/core.js"),
    @ResourceDependency(library="primefaces", name="ajaxstatus/ajaxstatus.js"),
    @ResourceDependency(library="javax.faces", name="jsf.js"),
    @ResourceDependency(library="js", name="ajaxstatus.js")
})
public class AjaxStatus extends org.primefaces.component.ajaxstatus.AjaxStatus
{
}

Renderer class is simple

import javax.faces.context.FacesContext;
import javax.faces.context.ResponseWriter;
import java.io.IOException;

public class AjaxStatusRenderer extends org.primefaces.component.ajaxstatus.AjaxStatusRenderer
{
    protected void encodeScript(FacesContext context, org.primefaces.component.ajaxstatus.AjaxStatus st)
        throws IOException {
        AjaxStatus status = (AjaxStatus)st;
        ResponseWriter writer = context.getResponseWriter();
        String clientId = status.getClientId(context);
        String widgetVar = status.resolveWidgetVar();

        writer.startElement("script", null);
        writer.writeAttribute("type", "text/javascript", null);

        writer.write(widgetVar + " = new PrimeFaces.widget.ExtendedAjaxStatus('" + clientId + "');");

        encodeCallback(context, status, widgetVar, "ajaxSend", "onprestart", AjaxStatus.PRESTART_FACET);
        encodeCallback(context, status, widgetVar, "ajaxStart", "onstart", AjaxStatus.START_FACET);
        encodeCallback(context, status, widgetVar, "ajaxError", "onerror", AjaxStatus.ERROR_FACET);
        encodeCallback(context, status, widgetVar, "ajaxSuccess", "onsuccess", AjaxStatus.SUCCESS_FACET);
        encodeCallback(context, status, widgetVar, "ajaxComplete", "oncomplete", AjaxStatus.COMPLETE_FACET);

        writer.endElement("script");
    }
}

Note: Prestart event "ajaxSend" is not supported in the standard Ajax, but it's rarely used anyway. "ajaxStart" is normally enough. JavaScript ajaxstatus.js is a little bit complicate. I register there global handlers for Ajax events by jsf.ajax.addOnError / jsf.ajax.addOnEvent.

PrimeFaces.widget.ExtendedAjaxStatus = function(id) {
    this.id = id;
    this.jqId = PrimeFaces.escapeClientId(this.id);
}

PrimeFaces.widget.ExtendedAjaxStatus.prototype.bindFacet = function(eventName, facetToShow) {
    var _self = this;

    // jQuery
    jQuery(document).bind(eventName, function() {
        _self.showFacet(facetToShow);
    });

    // Standard
    if (eventName == "ajaxError") {
        jsf.ajax.addOnError(this.processAjaxOnErrorFacet(facetToShow));
    } else {
        jsf.ajax.addOnEvent(this.processAjaxOnEventFacet(eventName, facetToShow));
    }    
}

PrimeFaces.widget.ExtendedAjaxStatus.prototype.bindCallback = function(eventName, fn) {
    // jQuery
    jQuery(document).bind(eventName, fn);

    // Standard
    if (eventName == "ajaxError") {
        jsf.ajax.addOnError(this.processAjaxOnErrorCallback(fn));
    } else {
        jsf.ajax.addOnEvent(this.processAjaxOnEventCallback(eventName, fn));
    }
}

PrimeFaces.widget.ExtendedAjaxStatus.prototype.processAjaxOnEventFacet = function(eventName, facetToShow) {
    var _self = this;

    function processEvent(data) {
        if (eventName == "ajaxStart" && data.status == "begin") {
            _self.showFacet(facetToShow);
        } else if (eventName == "ajaxComplete" && data.status == "complete") {
            _self.showFacet(facetToShow);
        } else if (eventName == "ajaxSuccess" && data.status == "success") {
            _self.showFacet(facetToShow);
        }
    }

    return processEvent;
}

PrimeFaces.widget.ExtendedAjaxStatus.prototype.processAjaxOnErrorFacet = function(facetToShow) {
    var _self = this;

    function processEvent() {
        _self.showFacet(facetToShow);
    }

    return processEvent;
}

PrimeFaces.widget.ExtendedAjaxStatus.prototype.processAjaxOnEventCallback = function(eventName, fn) {
    function processEvent(data) {
        if (eventName == "ajaxStart" && data.status == "begin") {
            fn();
        } else if (eventName == "ajaxComplete" && data.status == "complete") {
            fn();
        } else if (eventName == "ajaxSuccess" && data.status == "success") {
            fn();
        }
    }

    return processEvent;
}

PrimeFaces.widget.ExtendedAjaxStatus.prototype.processAjaxOnErrorCallback = function(fn) {
    function processEvent() {
        fn();
    }

    return processEvent;
}

PrimeFaces.widget.ExtendedAjaxStatus.prototype.showFacet = function(facetToShow) {
    jQuery(this.jqId).children().hide();
    jQuery(this.jqId + '_' + facetToShow).show();
}

Using on the page along with JS handling could be

<p:ajaxStatus onstart="ajaxOnStartIndicator()" onerror="ajaxOnErrorIndicator()" onsuccess="ajaxOnSuccessIndicator()"/>
<h:graphicImage id="ajaxIndicatorActive" library="img" name="connect_active.gif"
    style="display: none;" styleClass="ajaxIndicator"/>
<h:graphicImage id="ajaxIndicatorCaution" library="img" name="connect_caution.gif"
    style="display: none;" styleClass="ajaxIndicator" title="Connection problem" alt="Connection problem"/>

function ajaxOnStartIndicator() {
    document.body.style.cursor = 'wait';
    jQuery("#ajaxIndicatorCaution").css("display", "none");
    jQuery("#ajaxIndicatorActive").css("display", "block");

    // get the current counter
    var jqDoc = jQuery(document);
    var requestCount = jqDoc.data("ajaxStatus.requestCount");
    if (typeof requestCount === 'undefined') {
        requestCount = 0;
    }

    // increase the counter
    jqDoc.data("ajaxStatus.requestCount", requestCount+1);
}

function ajaxOnSuccessIndicator() {
    // get the current counter
    var jqDoc = jQuery(document);
    var requestCount = jqDoc.data("ajaxStatus.requestCount");

    // check the counter
    if (typeof requestCount !== 'undefined') {
        if (requestCount == 1) {
            // hide indicators
            document.body.style.cursor = 'auto';
            jQuery("#ajaxIndicatorActive").css("display", "none");
            jQuery("#ajaxIndicatorCaution").css("display", "none");
            jqDoc.data("ajaxStatus.requestCount", 0);
        } else if (requestCount > 1) {
            // only decrease the counter
            jqDoc.data("ajaxStatus.requestCount", requestCount-1);
        }
    }
}

function ajaxOnErrorIndicator() {
    document.body.style.cursor = 'auto';
    jQuery("#ajaxIndicatorActive").css("display", "none");
    jQuery("#ajaxIndicatorCaution").css("display", "block");
    // reset counter
    jQuery(document).data("ajaxStatus.requestCount", 0);
}

The implementation is smart enough and avoid collisions with parallel running Ajax requests (s. counters). Furthermore, the cursor is set to 'wait' if an Ajax request is running. It's how desktop applications behaves.

I took connection icons from ICEFaces showcase.

Filter keyboard input of JSF input components

2011-07-13T07:30:00.000-07:00

jQuery keyfilter plugin is a good choice if you want to filter input by specified regular expression. It allows you to input only specified characters via regular expression. Assume, your input field has an ID "myinput" and you want to restrict any user input to hexadecimal characters. This task can be done as follows

 
$('#myinput').keyfilter(/[0-9a-f]/i);

You can also pass a test function instead of regular expression. It expects two arguments: event target (DOM element) and incoming character. If the return value is true, the input character is valid and allowed, otherwise - not.

 
$('#myinput').keyfilter(function(c) {
    return c != 'a';
});

Easy? There are a lot of predefined masks too - for numeric, alphanumeric, etc. signs. Do we have something like in JSF? No. Well, there is a component MaskedInput in PrimeFaces, but it's restricted to a fix length. Length of the input value can not be variable and there is a very small set of signs to configure input masks. Conclusion - poor component :-). Keyfilter covers MaskedInput and offers more flexibility. Can we implement the keyfilter functionality in JSF? Yes, ideally as client behavior. The aim of this post is not this implementation. The aim of this topic is to show how to attach this functionality to an existing JSF component (hard-coded). I would like to take PrimeFaces AutoComplete. I would also like to show a tooltip if user input some disallowed characters. Let's start. We extend the component class by adding new resources - CSS and JS files for jQuery tooltip (qTip2), keyfilter plugins and an own extension for the AutoComplete widget.

@ResourceDependencies({
    @ResourceDependency(library="primefaces", name="forms/forms.css"),
    @ResourceDependency(library="primefaces", name="jquery/ui/jquery-ui.css"),
    @ResourceDependency(library="primefaces", name="jquery/jquery.js"),
    @ResourceDependency(library="primefaces", name="jquery/ui/jquery-ui.js"),
    @ResourceDependency(library="primefaces", name="core/core.js"),
    @ResourceDependency(library="primefaces", name="autocomplete/autocomplete.js"),
    @ResourceDependency(library = "css", name = "jquery.qtip.css"),
    @ResourceDependency(library = "js", name = "tooltip/jquery.qtip.js"),
    @ResourceDependency(library = "js", name = "autocomplete/jquery.keyfilter.js"),
    @ResourceDependency(library = "js", name = "autocomplete/autocomplete.js")
})
public class AutoComplete extends org.primefaces.component.autocomplete.AutoComplete {
}

In the AutoCompleteRenderer.java we add these lines to encodeScript()

// get tooltip text for invalid characters
String tooltipText = MessageUtils.getMessageText(facesContext,
    facesContext.getApplication().getMessageBundle(), "autocomplete.invalidChars");
if (tooltipText != null) {
    tooltipText = tooltipText.replaceAll("'", "\\\\'");
} else {
    // fallback
    tooltipText = "Input character is not allowed";
}
writer.write(",tooltipText:'" + tooltipText + "'");

I used here an own utility class MessageUtils to get a message from message bundle. The most complicated step is the writing of an extended widget.

PrimeFaces.widget.ExtendedAutoComplete = function(id, cfg) {
    this.superWidget = PrimeFaces.widget.AutoComplete;
    this.superWidget(id, cfg);
    var _self = this;

    // initialize flag whether the current input character is valid
    this.jq.data("allowedChar", true);

    // define tooltip
    this.jq.qtip({
        content: {
            text: cfg.tooltipText
        },
        style: {
            widget: true,
            classes: 'ui-tooltip-rounded ui-tooltip-shadow'
        },
        position: {
            my: 'bottom center',
            at: 'top center'
        },
        events: {
            show: function(event, api) {
                try {
                    if (_self.jq.data("allowedChar")) {
                        event.preventDefault();
                    }
                } catch(e) {
                    // IE can throw an error
                }
            },
            hide: function(event, api) {
                _self.jq.data("allowedChar", true);
            }
        },
        show: {
            event: false
        },
        hide: {
            event: 'blur'
        }
    });

    // filter input
    this.filterKeys(cfg);
}

jQuery.extend(PrimeFaces.widget.ExtendedAutoComplete.prototype, PrimeFaces.widget.AutoComplete.prototype);

PrimeFaces.widget.ExtendedAutoComplete.prototype.filterKeys = function(cfg) {
    var _self = this;

    _self.jq.keyfilter(function(c) {
        var isAllow = _self.allowChar(c);
        _self.jq.data("allowedChar", isAllow);

        if (cfg.pojo) {
            _self.jq.unbind('keyup');
        }

        if (isAllow) {
            // hide tooltip
            _self.jq.qtip('hide');

            if (cfg.pojo) {
                _self.jq.keyup(function(e) {
                    if (e.keyCode != 13) {
                        jQuery(_self.jqh).val(jQuery(this).val());
                    }
                });
            }
        } else {
            // show tooltip
            _self.jq.qtip('show');
        }

        return isAllow;
    });
}

PrimeFaces.widget.ExtendedAutoComplete.prototype.allowChar = function(c) {
    return c != '%' && c != '?' && c != '&';
}

I wrote here a test function instead of regular expression to prevent % ? & signs to be input. The result looks pretty fine

Cross-browser fonts (aka @font-face)

2011-07-06T02:26:00.000-07:00

Recently I have experimented with web fonts to figure out the best one and take it as standard for my company. There are not much predefined web fonts at all. "Verdana" was too wide for me, "Arial" was too narrow, "Tahoma" and "Trebuchet MS" were different displayed dependent on browser, ... I ended up with a cross browser font face implementation. There are many wonderful fonts which can be added to web applications by using of @font-face. @font-face is a css rule which allows you to download a particular font from your server to render a webpage if the user hasn't got that font installed. @font-face is supported by all browsers, even old Internet Explorer. There are dozens of Internet ressources with quality and amazing fonts. For instance, go to the Font Squirrel. That's the best resource for free, high-quality, commercial-use fonts. Choose a font and download a @font-face kit for it (a zip file). You need four types of font files. Each @font-face kit come with:

EOT fonts for Internet Explorer 4+
TrueType fonts for Firefox 3.5+ , Opera 10+, Safari 3.1+, Chrome 4.0.249.4+
WOFF fonts for Firefox 3.6+, Internet Explorer 9+, Chrome 5+
SVG fonts for iPad and iPhone

After downloading unpack the zip file somewhere in your web application. You will find files with extensions .eot, .ttf, .woff, .svg and a stylesheet.css. stylesheet.css has ready-to-use definitions - examples how to add @font-face for the desired font to your web application. Assume, you have choosen a font named as "BPreplayRegular". @font-face will look like then as follows

@font-face {
    font-family: 'BPreplayRegular';
    src: url('BPreplay-webfont.eot');
    src: url('BPreplay-webfont.eot?#iefix') format('embedded-opentype'),
         url('BPreplay-webfont.woff') format('woff'),
         url('BPreplay-webfont.ttf') format('truetype'),
         url('BPreplay-webfont.svg#BPreplayRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

To match your directory structure you should set right paths to your four files in "url", of course. After that you are able to apply the font to any HTML element, e.g.

body {
    font-family: 'BPreplayRegular', Verdana, sans-serif;
    padding: 0px;
    margin:  0px;
}

Such web fonts work fine and look identical in IE6-IE9, Firefox, Chrome, Safari, Opera. The good news - there are hundreds of free fonts which leave nothing to be desired.

Auto updatable JSF components are easy done

2011-07-01T04:41:00.000-07:00

Do you want to update automatically any JSF components with each ajax response? Are you looking for a dynamic way without needs to touch and change components? Nothing is easier than that. Auto updatable components make sense. They could be messages, tooltips, or everything else what is avalaible on every page and have to be updated. An own PartialViewContext and JSF system events on the component level will help us to archieve this aim. We start with a listener which must be fired on the PreRenderComponentEvent. Components to be auto updated are added there to the view map of the view root. More precisely - client IDs of such components will be added shortly before components get rendered.

package com.xyz.webapp.jsf

import ...

public class AutoUpdatableComponentListener implements SystemEventListener {
    public static final String AUTO_UPDATED_IDS = "com.xyz.webapp.jsf.AutoUpdatedIds";

    @SuppressWarnings("unchecked")
    public void processEvent(SystemEvent event) throws AbortProcessingException {
        FacesContext fc = FacesContext.getCurrentInstance();
        if (fc.getPartialViewContext().isAjaxRequest()) {
            // auto updatable component was already added to the view map
            return;
        }

        UIComponent component = (UIComponent) event.getSource();
        Map<String, Object> viewMap = fc.getViewRoot().getViewMap();
        Collection<String> autoUpdatedIds = (Collection<String>) fc.getViewRoot().getViewMap().get(AUTO_UPDATED_IDS);

        if (autoUpdatedIds == null) {
            autoUpdatedIds = new HashSet<String>();
        }

        autoUpdatedIds.add(component.getClientId());
        viewMap.put(AUTO_UPDATED_IDS, autoUpdatedIds);
    }

    public boolean isListenerForSource(Object source) {
        return true;
    }
}

The view map is accessed in a special implementaion of the PartialViewContext where all client IDs of auto updatable components have to be added to IDs getting from getRenderIds().

package com.xyz.webapp.jsf.context;

import com.xyz.webapp.jsf.AutoUpdatableComponentListener;
import javax.faces.context.FacesContext;
import javax.faces.context.PartialViewContext;
import javax.faces.context.PartialViewContextWrapper;
import javax.faces.event.PhaseId;
import java.util.ArrayList;
import java.util.Collection;
import java.util.List;

public class MyPartialViewContext extends PartialViewContextWrapper {
    private PartialViewContext wrapped;

    public MyPartialViewContext(PartialViewContext wrapped) {
        this.wrapped = wrapped;
    }

    public PartialViewContext getWrapped() {
        return this.wrapped;
    }

    public void setPartialRequest(boolean isPartialRequest) {
        getWrapped().setPartialRequest(isPartialRequest);
    }

    @SuppressWarnings("unchecked")
    public Collection<String> getRenderIds() {
        FacesContext fc = FacesContext.getCurrentInstance();
        if (PhaseId.RENDER_RESPONSE.compareTo(fc.getCurrentPhaseId()) != 0) {
            return getWrapped().getRenderIds();
        } else {
            List<String> ids = new ArrayList<String>(getWrapped().getRenderIds());
            Collection<String> autoUpdatedIds = (Collection<String>) FacesContext.getCurrentInstance().
                getViewRoot().getViewMap().get(AutoUpdatableComponentListener.AUTO_UPDATED_IDS);

            if (autoUpdatedIds != null) {
                ids.addAll(autoUpdatedIds);
            }

            return ids;
        }
    }
}

package com.xyz.webapp.jsf.context;

import javax.faces.context.FacesContext;
import javax.faces.context.PartialViewContext;
import javax.faces.context.PartialViewContextFactory;

public class MyPartialViewContextFactory extends PartialViewContextFactory {
    private PartialViewContextFactory parent;

    public MyPartialViewContextFactory(PartialViewContextFactory parent) {
        this.parent = parent;
    }

    @Override
    public PartialViewContextFactory getWrapped() {
        return this.parent;
    }

    @Override
    public PartialViewContext getPartialViewContext(FacesContext fc) {
        return new MyPartialViewContext(getWrapped().getPartialViewContext(fc));
    }
}

For MyPartialViewContext is important to know that getRenderIds() is called in four JSF lifecycle phases. We are only interesting in the "render response" phase. That is why I made this check

if (PhaseId.RENDER_RESPONSE.compareTo(fc.getCurrentPhaseId()) != 0) {
    return getWrapped().getRenderIds();
}

The last step - register all stuff in the faces-config.xml.

<factory>
    <partial-view-context-factory>
        com.xyz.webapp.jsf.context.MyPartialViewContextFactory
    </partial-view-context-factory>
</factory>

<system-event-listener>
    <system-event-listener-class>com.xyz.webapp.jsf.AutoUpdatableComponentListener</system-event-listener-class>
    <system-event-class>javax.faces.event.PreRenderComponentEvent</system-event-class>
    <source-class>com.xyz.webapp.jsf.component.MyComponent</source-class>
</system-event-listener>

I have registered the listener for com.xyz.webapp.jsf.component.MyComponent, but we can made the configuration a little bit more flexible via a config parameter in web.xml.

<context-param>
    <param-name>AUTO_UPDATABLE_COMPONENTS</param-name>
    <param-value>
        com.xyz.webapp.jsf.component.MyComponent,
        javax.faces.component.html.HtmlMessage,
        org.primefaces.component.tooltip.Tooltip
    </param-value>
</context-param>

We have no needs then to specify source-class and the isListenerForSource() method looks like

// This is just an example. Evaluation of init parameters should be done outside of the isListenerForSource() of course.
public boolean isListenerForSource(Object source) {
    String components = 
        FacesContext.getCurrentInstance().getExternalContext().getInitParameter("AUTO_UPDATABLE_COMPONENTS");
    if (components == null) {
        return false;
    }

    String[] arr = components.split("[,\\s]+");
    for (String component : arr) {
        if (component.equals(source.getClass().getName())) {
            return true;
        }
    }

    return false;
}

We can go on and configure components client IDs instead of their fully qualified names (better in my opinion). Check against IDs happens in the isListenerForSource() too. More flexible and precise configurations are possible - e.g. client IDs + pages (= view root IDs) where auto updatable components are placed exactly.

Global tooltips with PrimeFaces and qTip2

2011-06-30T14:41:00.000-07:00

PrimeFaces uses jQuery qTip plugin in the version 1 for global tooltips which are applied to all HTML elements having title attribute. There is an issue with ajax updates - global tooltips with qTip1 are gone after an ajax update. An ajax update of any element having the title attribute causes disappearance of nice tooltip. Native tooltips are still here but they are very plain, not beautiful and not themes aware. The official statement from the PrimeFaces team - "known issue, won't be fixed for global ones at the moment". In this post you will see how to resolve this issue in the simple way. The first step is to upgrade the qTip plugin to qTip2 and write a component class. The component class extends PrimeFaces' one and overwrites all methods what tooltip's default values have been changed for.

@ResourceDependencies({
    @ResourceDependency(library="primefaces", name="jquery/jquery.js"),
    @ResourceDependency(library="primefaces", name="core/core.js"),
    @ResourceDependency(library = "css", name = "jquery.qtip.css"),
    @ResourceDependency(library = "js", name = "tooltip/jquery.qtip.js"),
    @ResourceDependency(library = "js", name = "tooltip/tooltip.js")
})
public class Tooltip extends org.primefaces.component.tooltip.Tooltip
{
    public java.lang.String getTargetPosition() {
        return (java.lang.String) getStateHelper().eval(PropertyKeys.targetPosition, "bottom right");
    }

    public java.lang.String getPosition() {
        return (java.lang.String) getStateHelper().eval(PropertyKeys.position, "top left");
    }

    public java.lang.String getShowEffect() {
        return (java.lang.String) getStateHelper().eval(PropertyKeys.showEffect, "fadeIn");
    }

    public java.lang.String getHideEffect() {
        return (java.lang.String) getStateHelper().eval(PropertyKeys.hideEffect, "fadeOut");
    }

    public java.lang.String getShowEvent() {
        return (java.lang.String) getStateHelper().eval(PropertyKeys.showEvent, "mouseenter");
    }

    public java.lang.String getHideEvent() {
        return (java.lang.String) getStateHelper().eval(PropertyKeys.hideEvent, "mouseleave");
    }    
}

jquery.qtip.js is a new qTip script placed under the folder webapp/resources/js/tooltip and the tooltip.js is our one. In the tooltip.js I use the jQuery .live() method playing together with qTip2. This method allows us to easily add qTips to certain elements on a page, even when updating the DOM and adding new elements.

PrimeFaces.widget.Tooltip = function(cfg) {
    this.cfg = cfg;
    var _self = this;

    if (this.cfg.global) {
        // Bind the qTip within the event handler
        jQuery('*[title]').live(this.cfg.show.event, function(event) {
            var extCfg = _self.cfg;
            // Show the tooltip as soon as it's bound
            extCfg.show.ready = true;
            jQuery(this).qtip(extCfg, event);
        });
    } else {
        jQuery(PrimeFaces.escapeClientId(this.cfg.forComponent)).qtip(this.cfg);
    }
}

// make tooltip theme aware
jQuery.fn.qtip.defaults.style.widget = true;
jQuery.fn.qtip.defaults.style.classes = "ui-tooltip-rounded ui-tooltip-shadow";

jQuery ThemeRoller integration is done by the last two lines. The last step is to extend PrimeFaces's TooltipRenderer (because tooltip API has been changed) and register then all stuff in the faces-config.xml

public class TooltipRenderer extends org.primefaces.component.tooltip.TooltipRenderer
{
    public void encodeEnd(FacesContext facesContext, UIComponent component) throws IOException {
        Tooltip tooltip = (Tooltip) component;

        // dummy markup for ajax update (not really necessary)
        ResponseWriter writer = facesContext.getResponseWriter();
        writer.startElement("span", tooltip);
        writer.writeAttribute("id", tooltip.getClientId(facesContext), "id");
        writer.endElement("span");

        encodeScript(facesContext, tooltip);
    }

    protected void encodeScript(FacesContext facesContext, org.primefaces.component.tooltip.Tooltip tp)
        throws IOException {
        Tooltip tooltip = (Tooltip) tp;
        ResponseWriter writer = facesContext.getResponseWriter();
        boolean global = tooltip.isGlobal();
        String owner = getTarget(facesContext, tooltip);

        writer.startElement("script", null);
        writer.writeAttribute("type", "text/javascript", null);

        writer.write("jQuery(function() {");
        writer.write(tooltip.resolveWidgetVar() + " = new PrimeFaces.widget.Tooltip({");
        writer.write("global:" + global);

        if (!global) {
            writer.write(",forComponent:'" + owner + "'");
            writer.write(",content:'");
            if (tooltip.getValue() == null) {
                renderChildren(facesContext, tooltip);
            } else {
                writer.write(ComponentUtils.getStringValueToRender(facesContext, tooltip).replaceAll("'", "\\\\'"));
            }
            writer.write("'");
        }

        writer.write(",show:{event:'" + tooltip.getShowEvent() + "',delay:" + tooltip.getShowDelay() + 
            ",effect:function(){jQuery(this)." + tooltip.getShowEffect() + "(" + tooltip.getShowEffectLength() + ");}}");
        writer.write(",hide:{event:'" + tooltip.getHideEvent() + "',delay:" + tooltip.getHideDelay() + 
            ",effect:function(){jQuery(this)." + tooltip.getHideEffect() + "(" + tooltip.getHideEffectLength() + ");}}");
        writer.write(",position: {");
        String container = owner == null ? 
            "jQuery(document.body)" : "jQuery(PrimeFaces.escapeClientId('" + owner + "')).parent()";
        writer.write("container:" + container);
        writer.write(",at:'" + tooltip.getTargetPosition() + "'");
        writer.write(",my:'" + tooltip.getPosition() + "'");
        writer.write("}});});");

        writer.endElement("script");
    }
}

Have much fun! In one of my next post I will explain how to show a nice tooltip attached to the PrimeFaces Autocomplete component if user input disallowed characters.

Edit: I think a binding with namespace would be better to avoid collisions. Furthermore, a call of .die() before .live() is necessary in order to prevent miltiply binding of the same event if the tooltip gets updated via ajax. The same is for non global tooltips

jQuery('*[title]').die(this.cfg.show.event + ".tooltip").live(this.cfg.show.event + ".tooltip", ...
    ...
});

... in else ...

// delete previous tooltip to support ajax updates and create a new one
jQuery(PrimeFaces.escapeClientId(this.cfg.forComponent)).qtip('destroy').qtip(this.cfg);

The container element which the tooltip is appended to should be always document.body in order to play nice with layout, datatable, etc. Changes in TooltipRenderer.java:

writer.write("container:jQuery(document.body)");

Client-side validation with jQuery validation plugin. Advanced examples.

2011-06-08T12:41:00.000-07:00

In the last post I covered the basics of the great jQuery validation plugin - state-of-the-art for client-side validation. I'm going to show now an advanced example how to write validation rules, own validation methods and put all together. I'm writing a collaborative whiteboard just now and needed two dialogs placed in the same HTML form. My task were:

1) Write a dialog to input a valid image URL, image width and height. This dialog looks as follows

and was written in JSF (PrimeFaces) as

<p:dialog id="dialogInputImage" header="Input image URL" resizable="false" closable="true" modal="true" styleClass="validatable">
    <ul id="errorImageUl" class="errormsg"/>
    <h:panelGrid id="dlgImageGrid" columns="2" columnClasses="...">
        <h:outputLabel value="Image URL" for="inputUrl"/>
        <p:inputText id="inputUrl"/>
        <h:outputLabel value="Image width (px)" for="imgWidth"/>
        <h:panelGroup>
            <p:inputText id="imgWidth" maxlength="4"/>
            <h:outputLabel value="Image height (px)" for="imgHeight" style="margin: 0 10px 0 10px;"/>
            <p:inputText id="imgHeight" maxlength="4"/>
        </h:panelGroup>
    </h:panelGrid>
</p:dialog>

2) Write a second dialog with input fields for whiteboard width and height. This dialog looks as follows

and was written in JSF (PrimeFaces) as

<p:dialog id="dialogResize" header="Resize Whiteboard" resizable="false" closable="true" modal="true" styleClass="validatable">
    <ul id="errorResizeUl" class="errormsg"/>
    <h:panelGrid id="dlgResizeGrid" columns="4" columnClasses="...">
        <h:outputLabel value="Whiteboard width (px)" for="wbWidth"/>
        <p:inputText id="wbWidth" maxlength="4"/>
        <h:outputLabel value="Whiteboard height (px)" for="wbHeight"/>
        <p:inputText id="wbHeight" maxlength="4"/>
    </h:panelGrid>
</p:dialog>

3) Validation requirements:

First dialog.
- If nothing was input (all fields are empty) ==> no validation for all fields.
- If the URL field is empty ==> no validation for all fields.
- If the URL field is not empty ==> check if the URL is valid and input image width / height are positive digits (greater than 0).

Second dialog.
- Always check input width and height which should be positive digits (greater than 0).

Furthermore, error messages should be groupped. I use "errorPlacement" option for this. We need an error container to play nice with "errorPlacement". Therefore, I defined an error container in each dialog by UL element which will contain LI elements if any errors occur.

 
<ul id="..." class="errormsg"/>

Let me show the JavaScript part now. Comments help to understand the logic behind my code. The code should be placed after all p:dialog tags

jQuery(function() {
    // add a new validation method to validate image width / height
    jQuery.validator.addMethod("imageSize", function(value, element, param) {
        // check parameter "#inputUrl:filled" (see validate(...) method below) 
        if (jQuery.find(param).length < 1) {
            return true;
        }

        // use built-in "digits" validator and check if digits are positive
        return !this.optional(element) && jQuery.validator.methods['digits'].call(this, value, element) && parseInt(value) > 0;
    }, "Please enter a valid image size (only positive digits are allowed).");

    // create an object with rules for convenience (using in validate(...))
    var dimensionRules = {
        required: true,
        digits: true,
        min: 1
    };

    // create a validator with rules for all dialog fields
    dialogValidator = jQuery("#mainForm").validate({
        // validation is on demand ==> set onfocusout and onkeyup validation to false
        onfocusout: false,
        onkeyup: false,
        errorPlacement: function(label, elem) {
            elem.closest(".validatable").find(".errormsg").append(label);
        },
        wrapper: "li",
        rules: {
            inputUrl: {
                url: true
            },
            imgWidth: {
                // validation of image size depends on input URL - validate size for not empty URL only
                imageSize: "#inputUrl:filled"
            },
            imgHeight: {
                // validation of image size depends on input URL - validate size for not empty URL only
                imageSize: "#inputUrl:filled"
            },
            wbWidth: dimensionRules,
            wbHeight: dimensionRules
        },
        messages: {
            // define validation messages
            inputUrl: "Please enter a valid image URL.",
            imgWidth: "Please enter a valid image width (only positive digits are allowed).",
            imgHeight: "Please enter a valid image height (only positive digits are allowed).",
            wbWidth: "Please enter a valid whiteboard width (only positive digits are allowed).",
            wbHeight: "Please enter a valid whiteboard height (only positive digits are allowed)."
        }
    });

    // configure the first dialog
    jQuery("#dialogInputImage").dialog("option", "buttons", {
        "Accept": function() {
            // validate all fields if user click on the "Accept" button
            var isValid1 = dialogValidator.element("#inputUrl");
            var isValid2 = dialogValidator.element("#imgWidth");
            var isValid3 = dialogValidator.element("#imgHeight");

            if ((typeof isValid1 !== 'undefined' && !isValid1) || (typeof isValid2 !== 'undefined' && !isValid2) ||
               (typeof isValid3 !== 'undefined' && !isValid3)) {
                // validation failed
                return false;
            }

            // do something ...
        },
        "Close": function() {
            jQuery(this).dialog("close");
        }
    }).bind("dialogclose", function(event, ui) {
        // reset input
        jQuery(this).find("#inputUrl").val('');
        // clean up validation messages
        jQuery("#errorImageUl").html('');
    });

    // configure the second dialog
    jQuery("#dialogResize").dialog("option", "buttons", {
        "Accept": function() {
            // validate all fields if user click on the "Accept" button
            var isValid1 = dialogValidator.element("#wbWidth");
            var isValid2 = dialogValidator.element("#wbHeight");

            if ((typeof isValid1 !== 'undefined' && !isValid1) || (typeof isValid2 !== 'undefined' && !isValid2)) {
                // validation failed
                return false;
            }

            // do something ...

            jq.dialog("close");
            
            // do something ...
        },
        "Close": function() {
            jQuery(this).dialog("close");
        }
    }).bind("dialogclose", function(event, ui) {
        // clean up validation messages
        jQuery("#errorResizeUl").html('');
    });
});

Validation looks now as follows

In fact I already implemented partially client-side validation as JSF components ;-).

Client-side validation with jQuery validation plugin. Basic concepts.

2011-06-04T08:30:00.000-07:00

jQuery validation plugin is my favorite framework for client-side validation. I'm surprised more and more about its power and flexibility. Before I start to describe my recently task for client-side validation I would like to say few words how this plugin works at all. jQuery validation plugin has a predefined set of validation methods for required fields, emails, URLs, credit card, numbers, dates, etc. All bundled methods come with default error messages in english and translations into 32+ languages. By default, error messages are displayed after the invalid element, but this is also customizable. It is also possible to put them into an error container at some other places and show them bundled all together. Desired validation methods can be specified in two ways:

1) By HTML "class" attribute.
2) By rules in JavaScript.

The first way is simple. Assume, you have a form with Id "registerForm" containing fields "Name" and "E-mail". Both fields should be required. In additional, the field "Name" requires minimum 3 letters and the field "E-mail" accepts only valid e-mail inputs.

<form id="registerForm" method="get" action="...">
    <label for="name">Name</label>
    <input id="name" name="name" size="25" class="required" minlength="3" />
    <label for="email">E-Mail</label>
    <input id="email" name="email" size="25" class="required email" />
</form>

Validation methods are specified here by "class" attributes. The form can be validated now by the call

 
jQuery("#registerForm").validate();

How does this plugin behave? By default, forms are validated on submit, triggered by the user clicking the submit button or pressing enter when a form input is focused. There is also validation on single elements on demand.

var validator;

jQuery(document).ready(function(){
     validator = jQuery("#registerForm").validate();
     ...
     doSomething();
});

function doSomething() {
    var isNameValid = validator.element("#name");
    if (isNameValid) {
        // do something
        ...
    }
}

The call validator.element("#name") above validates a single field "Name" and returns true if it is valid, false otherwise.

Before submitting the form for the first time the validation is lazy. The user can tab through fields without getting annoying messages. He has a chance to correct input values. Once a field was marked invalid, it is eagerly validated. The plugin validates on keyup if the user types something. When the user enters something invalid into a valid field, it is also validated when the field loses focus (onblur). In addition, a field can be highlighted as invalid. As soon as the user entered the necessary value, the error message is removed.

I prefer the second way - validation by rules definitions via JavaScript. This is more flexible and leaves nothing to be desired - there are many configuration parameters. Rules and messages can be configured in the validate(...) method. Each rule specifies Id of the field to be validated and desired validation methods for this field.

jQuery("#registerForm").validate({
    rules: {
        name: {
            required: true,
            minlength: 3
        },
        email: {
            required: true,
            email: true
        }
    },
    messages: {
        name: "Please enter a valid name.",
        email: "Please enter a valid e-mail."
    }
});

Rules can be added dynamically too after validate() was called. Like this one for the field with Id "name" above.

 
jQuery("#name").rules("add", {minlength: 3});

Validation methods can be grouped as one. For example if you want to group all three built-in validation methods "required", "date" and "dateRange", you can write

jQuery.validator.addClassRules({
    requiredDateRange: {required:true, date:true, dateRange:true}
});

The new validation method is called now "requiredDateRange". Another nice feature - overwriting of default messages. Example for "required" and "date" validations:

jQuery.extend(jQuery.validator.messages, {
    required: "These fields are required",
    date: "Please specify valid dates"
});

Last but not least - adding of new validation methods by

 
jQuery.validator.addMethod(name, method, [message]);

In the next post I will show an example for jQuery.validator.addMethod and more other advanced tricks. Stay tuned.

Testing client-server communication with Java Scripting API

2011-05-29T12:19:00.000-07:00

I would like to share my best practice for client- and server-side testing with Java Scripting API introduced in Java SE 6. As example I want to test simultaneous JSON serialization / deserialization on both sides. I'm going to use json2 from Douglas Crockford on client-side and Gson on server-side. I want to utilize the class Circle from my previous post and write JUnit tests for its serialization / deserialization. At first we need to implement the same interface by Java and JavaScript. It's convenient to implement an Java interface by script functions or methods. By using interfaces we can avoid having to use the javax.script API in many places.

JsonProvide.java

public interface JsonProvider
{
    public Object fromJson(String json);

    public String toJson(Object object);
}

JsonProvider is an interface which is used later to access correspondent JavaScript methods.

jsonTest.js

var jsonProvider = new Object();

// produces an JavaScript object or array from an JSON text.
jsonProvider.fromJson = function(json) {
    var obj = JSON.parse(json);
    return makeTestable(obj);
};

// produces an JSON text from an JavaScript object or array
jsonProvider.toJson = function(object) {
    var obj = makeTestable(object);
    return JSON.stringify(obj);
};

function makeTestable(obj) {
    obj.getValue = function(property) {
        return this[property];
    };

    return obj;
}

// Test object
var circle = {
    uuid: "567e6162-3b6f-4ae2-a171-2470b63dff00",
    x: 10,
    y: 20,
    movedToFront: true,
    rotationDegree: 90,
    radius: 50,
    backgroundColor: "#FF0000",
    borderColor: "#DDDDDD",
    borderWidth: 1,
    borderStyle: "-",
    backgroundOpacity: 1.0,
    borderOpacity: 0.5,
    scaleFactor: 1.2
};

There are two methods fromJson / toJson and a helper function makeTestable in order to get any value of JavaScript objects from Java. The test object in JavaScript is called circle. The corresponding Java class is called Circle and has the same fields with getter / setter. We can write an JUnit test now.

import com.google.gson.Gson;
import com.googlecode.whiteboard.model.Circle;
import org.apache.commons.beanutils.PropertyUtils;
import org.junit.AfterClass;
import org.junit.Assert;
import org.junit.BeforeClass;
import org.junit.Test;

import javax.script.Invocable;
import javax.script.ScriptEngine;
import javax.script.ScriptEngineManager;
import javax.script.ScriptException;
import java.io.FileNotFoundException;
import java.util.Map;
import java.util.Set;
import java.util.UUID;

public class JsonTest
{
    private static Gson gson;
    private static ScriptEngine engine;
    private static JsonProvider jsonProvider;

    @BeforeClass
    public static void runBeforeClass() {
        // create Gson
        GsonBuilder gsonBilder = new GsonBuilder();
        gson = gsonBilder.serializeNulls().create();

        // create a script engine manager
        ScriptEngineManager factory = new ScriptEngineManager();
        // create JavaScript engine
        engine = factory.getEngineByName("JavaScript");

        try {
            // evaluate JavaScript code from the json2 library and the test file
            engine.eval(new java.io.FileReader("src/main/webapp/resources/js/json2-min.js"));
            engine.eval(new java.io.FileReader("src/test/resources/js/jsonTest.js"));

            // get an implementation instance of the interface JsonProvider from the JavaScript engine,
            // all interface's methods are implemented by script methods of JavaScript object jsonProvider
            Invocable inv = (Invocable) engine;
            jsonProvider = inv.getInterface(engine.get("jsonProvider"), JsonProvider.class);
        } catch (ScriptException e) {
            e.printStackTrace();
        } catch (FileNotFoundException e) {
            e.printStackTrace();
        }
    }

    @AfterClass
    public static void runAfterClass() {
        gson = null;
        jsonProvider = null;
    }

    @Test
    public void JavaScript2Java() {
        // get JavaScript object
        Object circle1 = engine.get("circle");

        // client-side: make JSON text from JavaScript object
        String json = jsonProvider.toJson(circle1);

        // server-side: convert JSON text to Java object
        Circle circle2 = gson.fromJson(json, Circle.class);

        // compare two objects
        testEquivalence(circle2, circle1);
    }

    @Test
    public void Java2JavaScript() {
        // create Java object
        Circle circle1 = new Circle();
        circle1.setUuid(UUID.randomUUID().toString());
        circle1.setX(100);
        circle1.setY(100);
        circle1.setMovedToFront(false);
        circle1.setRotationDegree(0);
        circle1.setRadius(250);
        circle1.setBackgroundColor("#FFFFFF");
        circle1.setBorderColor("#000000");
        circle1.setBorderWidth(3);
        circle1.setBorderStyle(".");
        circle1.setBackgroundOpacity(0.2);
        circle1.setBorderOpacity(0.8);
        circle1.setScaleFactor(1.0);

        // server-side: convert Java object to JSON text
        String json = gson.toJson(circle1);

        // client-side: make JavaScript object from JSON text
        Object circle2 = jsonProvider.fromJson(json);

        // compare two objects
        testEquivalence(circle1, circle2);
    }

    @SuppressWarnings("unchecked")
    private void testEquivalence(Object obj1, Object obj2) {
        try {
            Map<String, Object> map = PropertyUtils.describe(obj1);
            Set<String> fields = map.keySet();
            Invocable inv = (Invocable) engine;

            for (String key : fields) {
                Object value1 = map.get(key);
                if (!key.equals("class")) {
                    Object value2 = inv.invokeMethod(obj2, "getValue", key);
                    if (value1 instanceof Number && !(value1 instanceof Double)) {
                        // JS number is always converted to Java double ==> only doubles can be compared,
                        // see http://www.mozilla.org/js/liveconnect/lc3_method_overloading.html
                        value1 = new Double(value1.toString());
                    }

                    Assert.assertEquals("Value of property '" + key + "' was wrong converted", value2, value1);
                }
            }
        } catch (Exception e) {
            throw new IllegalStateException("Equivalence test of two objects failed!", e);
        }
    }
}

I create a Gson and a ScriptEngine instances in the method runBeforeClass() and load all needed scripts into the ScriptEngine. After that I get an implementation instance of the interface JsonProvider from the JavaScript engine. Now I'm able to call JavaScript methods from my JsonProvider implementation. There are two tests:

@Test public void JavaScript2Java()

I test here the use case if an JavaScript object (circle) gets converted to an JSON text, sent to the server and converted there to an Java object (Circle). The original JavaScript object and the result Java object are compared afterwards.

@Test public void Java2JavaScript()

I test here the use case if a created Java object (Circle) gets converted to an JSON text, sent to the client and converted there to an JavaScript object (circle). The objects are compared to ensure their equivalence.

You can also use "JavaScript to Java Communication" with Java Scripting API and access Java classes, objects and methods from JavaScript. Pretty cool.

Auto sized jQuery UI dialogs and PrimeFaces

2011-05-26T05:12:00.000-07:00

jQuery (modal) dialog causes some problems in Internet Explorer like scrollbars on page and not working auto width. See e.g. tickets http://bugs.jqueryui.com/ticket/3623 and http://bugs.jqueryui.com/ticket/4437. width:auto is very important for most dialogs because you often don't know how large the dialog's content is (think e.g. about multi-language labels). General you will not get problems with width:auto and can write

<div id="dialog" title="My dialog">
  ... content ...
</div>

$('#dialog').dialog({
    modal: true,
    height: 'auto',
    width: 'auto'
});

or define CSS class

.autoWidthDialog {
    width: auto !important;
}

and write in PrimeFaces

<p:dialog id="dialog" styleClass="autoWidthDialog" header="My dialog">
  ... content ...
</p:dialog>

Working well except one problem - broken dialog's header in IE7 and below. Titelbar is shrunk to the title text length. Unfortunately, jQuery team doesn't want to fix this issue and support flexible dialogs with width:auto, so that a workaround is needed. Annoying scrollbars on page for modal dialogs should be fixed too. I came up with the following solution:

Native jQuery UI dialog:

jQuery("#dialog").dialog({
    modal: true,
    height: 'auto',
    width: 'auto'
    ... other various options ...
}).bind("dialogopen", function(event, ui) {
    // fix for width:auto in IE
    var jqDialog = jQuery(this);
    var parent = jqDialog.parent();
    var contentWidth = jqDialog.width();
    parent.find('.ui-dialog-titlebar').each(function() {
        jQuery(this).width(contentWidth);
    });
    parent.width(contentWidth + 26);
    jqDialog.dialog('option', 'position', 'center');

    // fix for scrollbars in IE
    jQuery('body').css('overflow', 'hidden');
    jQuery('.ui-widget-overlay').css('width', '100%');
}).bind("dialogclose", function(event, ui) {
    // fix for width:auto in IE
    jQuery(this).parent().css("width", "auto");

    // fix for scrollbars in IE
    jQuery('body').css('overflow', 'auto');
});

PrimeFaces dialog built on the top of native one:

<p:dialog id="dialog" styleClass="autoWidthDialog"
          onShow="onShowAutoWidthDialog(this.jq);"
          onHide="onHideAutoWidthDialog(this.jq);">
  ... content ...
</p:dialog>

function onShowAutoWidthDialog(jqDialog) {
    // fix for auto width in IE
    var parent = jqDialog.parent();
    var contentWidth = jqDialog.width();
    parent.find('.ui-dialog-titlebar').each(function() {
        jQuery(this).width(contentWidth);

    });
    parent.removeClass("autoWidthDialog").width(contentWidth + 26);
    jqDialog.dialog('option', 'position', 'center');

    // fix for scrollbars in IE
    jQuery('body').css('overflow', 'hidden');
    jQuery('.ui-widget-overlay').css('width', '100%');
}

function onHideAutoWidthDialog(jqDialog) {
    // fix for auto width in IE
    var parent = jqDialog.parent();
    parent.find('.ui-dialog-titlebar').each(function() {
        // reset titlebar width
        jQuery(this).css('width', '');
    });
    parent.addClass("autoWidthDialog");

    // fix for scrollbars in IE
    jQuery('body').css('overflow', 'auto');
}

I use onShow / onHide client side callbacks. Settings onShow="onShowAutoWidthDialog(this.jq);" onHide="onHideAutoWidthDialog(this.jq);" fix mentioned above IE issues. Unfortunately, PrimeFaces p:confirmDialog doesn't have these attributes (why?), so that I had to add onShow / onHide to p:confirmDialog similar to p:dialog. Component / renderer classes can be easy extended and for JavaScript widget I can post the code if somebody needs it. :-)

Edit: There isn't cross-browser pure CSS solution; I didn't find it and didn't see anywhere.

JSON with GSON and abstract classes

2011-05-16T14:27:00.000-07:00

I have switched to Google Gson after many years of using org.json library for supporting JSON data interchange format in Java. org.json is a lower-level library, so that you have to create JSONObject, JSONArray, JSONString, ... and do other low-level work. Gson simplifies this work. It provides simple toJson() and fromJson() methods to convert arbitrary Java objects to JSON and vice-versa, supports Java Generics, allows custom representations for objects, generates compact and readability JSON output and has many other goodies. I love it more and more. The using is simple. Assume, we have a class called Circle.

public class Circle {
    private int radius = 10;
    private String backgroundColor = "#FF0000";
    private String borderColor = "#000000";
    private double scaleFactor = 0.5;
    ...

    // getter / setter
}

Serialization (Java object --> JSON) can be done as follows:

Circle circle = new Circle();
Gson gson = new Gson();
String json = gson.toJson(circle); 
==> json is
{
    "radius": 10,
    "backgroundColor": "#FF0000",
    "borderColor": "#000000",
    "scaleFactor": 0.5,
    ...
}

Deserialization (JSON --> Java object) is just one line of code:

Circle circle2 = gson.fromJson(json, Circle.class);  
==> circle2 is the same as the circle above

Everything works like a charm. There is only one problem I have faced with abstract classes. Assume, we have an abstract class AbstractElement and many other classes extending this one

public abstract class AbstractElement {
    private String uuid;

    // getter / setter
}

public class Circle extends AbstractElement {
   ...
}

public class Rectangle extends AbstractElement {
   ...
}

public class Ellipse extends AbstractElement {
   ...
}

Assume now, we store all concrete classes in a list or a map parametrized with AbstractElement

public class Whiteboard
{
    private Map<String, AbstractElement> elements = 
            new LinkedHashMap<String, AbstractElement>();
    ...
}

The problem is that the concrete class is undisclosed during deserialization. It's unknown in the JSON representation of Whiteboard. How the right Java class should be instantiated from the JSON representation and put into the Map<String, AbstractElement> elements? I have nothing found in the documentation what would address this problem. It is obvious that we need to store a meta information in JSON representations about concrete classes. That's for sure. Gson allows you to register your own custom serializers and deserializers. That's a power feature of Gson. Sometimes default representation is not what you want. This is often the case e.g. when dealing with third-party library classes. There are enough examples of how to write custom serializers / deserializers. I'm going to create an adapter class implementing both interfaces JsonSerializer, JsonDeserializer and to register it for my abstract class AbstractElement.

GsonBuilder gsonBilder = new GsonBuilder();
gsonBilder.registerTypeAdapter(AbstractElement.class, new AbstractElementAdapter());
Gson gson = gsonBilder.create();

And here is AbstractElementAdapter:

package com.googlecode.whiteboard.json;

import com.google.gson.*;
import com.googlecode.whiteboard.model.base.AbstractElement;
import java.lang.reflect.Type;

public class AbstractElementAdapter implements JsonSerializer<AbstractElement>, JsonDeserializer<AbstractElement> {
    @Override
    public JsonElement serialize(AbstractElement src, Type typeOfSrc, JsonSerializationContext context) {
        JsonObject result = new JsonObject();
        result.add("type", new JsonPrimitive(src.getClass().getSimpleName()));
        result.add("properties", context.serialize(src, src.getClass()));

        return result;
    }

    @Override
    public AbstractElement deserialize(JsonElement json, Type typeOfT, JsonDeserializationContext context)
        throws JsonParseException {
        JsonObject jsonObject = json.getAsJsonObject();
        String type = jsonObject.get("type").getAsString();
        JsonElement element = jsonObject.get("properties");

        try {
            return context.deserialize(element, Class.forName("com.googlecode.whiteboard.model." + type));
        } catch (ClassNotFoundException cnfe) {
            throw new JsonParseException("Unknown element type: " + type, cnfe);
        }
    }
}

I add two JSON properties - one is "type" and the other is "properties". The first property holds a concrete implementation class (simple name) of the AbstractElement and the second one holds the serialized object itself. The JSON looks like

{
    "type": "Circle",
    "properties": {
        "radius": 10,
        "backgroundColor": "#FF0000",
        "borderColor": "#000000",
        "scaleFactor": 0.5,
        ...
    }
}

We benefit from the "type" property during deserialization. The concrete class can be instantiated now by Class.forName("com.googlecode.whiteboard.model." + type) where "com.googlecode.whiteboard.model." + type is a fully qualified class name. The following call

 
public <T> T deserialize(JsonElement json, Type typeOfT) throws JsonParseException

from JsonDeserializationContext invokes default deserialization on the specified object and completes the job.

Prevent multiple clicks in JSF

2011-05-08T02:09:00.000-07:00

Preventation of multiple clicks on buttons / links is a common and important task during web development. There are many discussions about double click problem in JSF I will try to cover all relevant approaches.

1) Server-side solution.
Server-side solutions are normally based on token concept, phase listeners, filters or other complex tricks. Here is just one example for the server-side preventation of double-form submit Server-side solutions have disadvantages. Every request is handled by a special phase listener, filter or something near it, even if we are not interesting in multiple clicks preventation. There are problems in a cluster environment if session data get replicated. This a real problem I faced many years ago - our server-side solution didn't work proper if the web application was running in a cluster environment. Client-side solutions seems to be simpler and are more reliable.

2) Disable button / link on click.
The simplest client-side solution consists in writing this.disabled=true in onclick. An example:

 
<h:commandbutton action="..." onclick="this.disabled=true;" value="...">

I had kinda troubles with this solution and ajaxified buttons like PrimeFaces' p:commandButton - it didn't work. Furthermore the entire button gets frozen and doesn't respond anymore. We want to have a still responding button or link if user clicks on it multiple times.

3) Ajax queue and request delaying.
This is probably the best solution at all. Many popular component libraries already have this solution for the multiple clicks preventation. OpenFaces has e.g. a nice concept in order to avoid frequent requests. OpenFaces' Ajax framework sends only one request in case of several events during the short period of time specified with the "delay" attribute. RichFaces has a4j:queue and a4j:attachQueue. These components have an attribute "requestDelay". This attribute specifies the number of milliseconds to wait before sending a request in order to combine similar requests. The greater the value the fewer requests will be sent when fast typing. Similar requests in the queue are "combined" while waiting for the request delay. This feature results in just one request from a component being sent. For more details see RichFaces showcase and try to do double clicks to see they are "combined" to just one. Unfortunately, but PrimeFaces doesn't have similar feature what would prevent sending of miltiple requests from the same component like buttons / links, datatable filtering on keyup if user types very fast (important for large tables), etc.

4) Using jQuery's bind / unbind methods.
Ajax queue prevents double clicks, but doesn't ensure sending of slow multiple clicks. I have implemented my own solution for PrimeFaces' buttons / links. The idea is to bind onlick handler bind('click', function() {..}) and call unbind('click') within the handler :-) I have also tried jQuery .one() method but it didn't work as desired. We should prepare the renderer class at first. I have these lines there (only short outline for button renderer to get the idea):

writer.write(button.resolveWidgetVar() + 
    " = new PrimeFaces.widget.ExtendedCommandButton('" + clientId + "', {");
...
writer.write("});");
if (button.isPreventMultiplyClicks()) {
    writer.write(button.resolveWidgetVar() + ".bindOneClick('" + clientId + "', function(){" + onclick + "});");
}

ExtendedCommandButton is an extended widget based on the PrimeFaces' one. bindOneClick is a method in this widget and onclick is an onlick handler generated by PrimeFaces for Ajax / non Ajax requests. The extension looks as follows:

PrimeFaces.widget.ExtendedCommandButton = function(id, cfg) {
    PrimeFaces.widget.CommandButton(id, cfg);
}

jQuery.extend(PrimeFaces.widget.ExtendedCommandButton.prototype, PrimeFaces.widget.CommandButton.prototype);

PrimeFaces.widget.ExtendedCommandButton.prototype.bindOneClick = function(clientId, commandFunc) {
    var buttonEl = jQuery(PrimeFaces.escapeClientId(clientId));
    buttonEl.data('commandFunc', commandFunc);
    buttonEl.unbind('click');

    buttonEl.bind('click', function() {
        buttonEl.unbind('click');
        commandFunc();
    });
}

One problem still exists - if user stays on the same page (in case of Ajax updates) and the button is not updated, it doesn't respond more by reason of unbind. We should "reinitialize" it. Therefore I added this method too:

PrimeFaces.widget.ExtendedCommandButton.prototype.reinitialize = function(clientId) {
    var buttonEl = jQuery(PrimeFaces.escapeClientId(clientId));
    buttonEl.unbind('click');

    buttonEl.bind('click', function() {
        buttonEl.unbind('click');
        buttonEl.data('commandFunc')();
    });
}

So, if we navigate to another page (a non-Ajax request), we can write now:

 
<p:commandButton preventMultiplyClicks="true" ajax="false" ...>

If user stays on the same page (an Ajax request), a call PrimeFaces.widget.ExtendedCommandButton.reinitialize(clientId) is necessary in "oncomplete" to get multi-click preventation working again. Like this

 
<p:commandButton id="myButton" preventMultiplyClicks="true" ...
                oncomplete="PrimeFaces.widget.ExtendedCommandLink.reinitialize('myButton')">

Or you can try to include the button Id to the "update" attribute

 
<p:commandButton preventMultiplyClicks="true" update="@this,..." ...>

p:commandLink will be updated and reinitialized again. We can also extend the button renderer a little bit and reinitialize it automatically (if it's not in the Ajax update region). Result: the button / link will be a quite usually PrimeFaces' button / link with a new attribute for multiple clicks. No differences otherwise.

 
<p:commandLink "general PF attributes" preventMultiplyClicks="true">

What to do if @PostConstruct is not called for JSF managed beans?

2011-05-02T07:34:00.000-07:00

I have read and faced self the problem that methods annotated with @PostConstruct / @PreDestroy get never called. Even in JEE 6 compliant servers (weird). This problem had e.g. Tomcat in early 6.x releases, Jetty 6.1.x, etc. Jetty 6.1.x maven plugin can not be used than during development.

There is a simple solution when using Mojarra JSF. Well, if you use Spring framework, you probably don't have this problem. This post provides a solution for JSF projects without Spring (because it doesn't make sense to use Spring in small, lightweight projects). Since Mojarra 1.2 there is a context parameter for web.xml com.sun.faces.injectionProvider. This parameter specifies a class that implements the InjectionProvider SPI. This implementation represents a hook the JSF implementation will use to provide resource injection support. If no provider, shipped with application server, was found and @PostConstruct / @PreDestroy are not called, we can set the value for this context parameter to com.sun.faces.vendor.WebContainerInjectionProvider as follows

<context-param>
    <param-name>com.sun.faces.injectionProvider</param-name>
    <param-value>
        com.sun.faces.vendor.WebContainerInjectionProvider
    </param-value>
</context-param>

Annotations will be parsed and annotated methods invoked now and you will see a message during application startup.

...
02.05.2011 16:04:13 com.sun.faces.spi.InjectionProviderFactory createInstance
INFO: JSF1048: PostConstruct/PreDestroy-Annotationen available. ...
...

It's also possible to use the JBoss implementaion org.jboss.web.jsf.integration.injection.JBossInjectionProvider. I have never tested it, but I think it would be a proper alternative.

<context-param>
    <param-name>com.sun.faces.injectionProvider</param-name>
    <param-value>
        org.jboss.web.jsf.integration.injection.JBossInjectionProvider
    </param-value>
</context-param>

JBoss 5 and above uses it automatically, so that no needs exist for the mentioned parameter.

Get running Broadcom WLAN under OpenSuse 11.4

2011-04-30T03:54:00.000-07:00

I described how I did it in OpenSuse 11.3. OpenSuse 11.4 is shipped with an open source driver brcm80211 on board and you don't need proprietary broadcom-wl-... drivers anymore (downloaded by PackMan) for many new Broadcom cards. Please check this page for compatibility issues before you start with an installation. To see details to the available Broadcom card, use the commando lspci. My output is e.g.:

/sbin/lspci -nnk | grep -i -A2 broad

12:00.0 Network controller [0280]: Broadcom Corporation BCM4313 802.11b/g/n Wireless LAN Controller [14e4:4727] (rev 01)

Subsystem: Dell Device [1028:0010]

13:00.0 Ethernet controller [0200]: Realtek Semiconductor Co., Ltd. RTL8111/8168B PCI Express Gigabit Ethernet controller [10ec:8168] (rev 03)

The driver brcm80211 supports BCM4313 and BCM43224, BCM43225, BCM4329 chips. The installation is straightforward.

1) Remove all WLAN configurations in NetworkManager.
2) Install kernel-firmware from a DVD with OpenSuse 11.4. That's is the file kernel-firmware-2.6.38-1.2.1.noarch.rpm. You should see after that all brcm80211 stuff under /lib/firmware/brcm
3) You will see Broadcom WLAN Controller with the device name wlan0 in Yast's Network Settings. All stuff is recognized well. Broadcom WLAN Controller needs a small configuration if you have a WLAN router (my one is FRITZ!Box Fon WLAN 7270). You should set default gateway and input WAP or WEP key for the authentication.
4) Reboot and enjoy the wireless LAN.

Edit: I was asked whether b43 drivers (for old BCM chips) should be removed. Yes, you can remove b43 and broadcom-wl-... drivers or do them blacklisted (see blacklist config files under /etc/modprobe.d/), so that they are not loaded at all.

Hooking of PrimeFaces Ajax calls as a kind of callbacks. Part II.

2011-04-13T13:42:00.000-07:00

This is the continuation of the part I where I intended to add client-side callbacks for any PrimeFaces Ajax calls. PrimeFaces components normally have callbacks like onstart and oncomplete, but not for all events. PrimeFaces tree has e.g. onselectStart and onselectComplete, but what is about onexpandStart and onexpandComplete in dynamic trees? I guess, all such callbacks would blow up the component interface. I believe all existing component libraries mimic each other and have countless callbacks and listeners as component attributes. Why do they need them at all for Ajax calls? There is f:ajax and derivations like p:ajax which already have "listener", "execute", "render" attributes and provide all Ajax callbacks with "onevent" attribute automatically. Do they really need to blow up component attributes or would be a simple attaching of Ajax behaviors enough? Well. It's not the topic of this post.

The component blockUI is used here as reference implementation. It prevents user activity with any part of the page as long as an Ajax request / response cycle is running. We need a component class BlockUI.java, a renderer class BlockUIRenderer.java and an JavaScript blockUI.js. The component class is trivial. It has attributes "widgetVar", "for", "forElement", "source" und getter / setter. More interesting are the renderer and the script.

BlockUIRenderer.java

public class BlockUIRenderer extends CoreRenderer
{
 private static final Log LOG = LogFactory.getLog(BlockUIRenderer.class);

 @Override
 public void encodeEnd(FacesContext fc, UIComponent component) throws IOException {
  encodeMarkup(fc, component);
  encodeScript(fc, component);
 }

 public void encodeMarkup(FacesContext fc, UIComponent component) throws IOException {
  ResponseWriter writer = fc.getResponseWriter();

  writer.startElement("div", null);
  writer.writeAttribute("id", component.getClientId(fc) + "_content", null);
  writer.writeAttribute("style", "display: none;", null);
  renderChildren(fc, component);
  writer.endElement("div");
 }

 protected void encodeScript(FacesContext fc, UIComponent component) throws IOException {
  ResponseWriter writer = fc.getResponseWriter();
  BlockUI blockUI = (BlockUI) component;
  String clientId = blockUI.getClientId(fc);
  String widgetVar = blockUI.resolveWidgetVar();

  String source;
  UIComponent sourceComponent = blockUI.findComponent(blockUI.getSource());
  if (sourceComponent == null) {
   source = "";
   LOG.warn("Source component could not be found for 'source' = " + blockUI.getSource());
  } else {
   source = sourceComponent.getClientId(fc);
  }

  String target;
  if (blockUI.getFor() != null) {
   UIComponent targetComponent = blockUI.findComponent(blockUI.getFor());
   if (targetComponent == null) {
    target = "";
    LOG.warn("Target component could not be found for 'for' = " + blockUI.getFor());
   } else {
    target = targetComponent.getClientId(fc);
   }
  } else if (blockUI.getForElement() != null) {
   target = blockUI.getForElement();
  } else {
   target = "";
   LOG.warn("Target is missing, either 'for' or 'forElement' attribute is required");
  }

  UIComponent facet = blockUI.getFacet("events");

  // collect all f:param
  List<UIParameter> uiParams = new ArrayList<UIParameter>();
  if (facet instanceof UIParameter) {
   // f:facet has one child and that's f:param
   uiParams.add((UIParameter) facet);
  } else if (facet != null && facet.getChildren() != null) {
   // f:facet has no or more than one child (all children included into an UIPanel)
   for (UIComponent kid : facet.getChildren()) {
    if (kid instanceof UIParameter) {
     uiParams.add((UIParameter) kid);
    }
   }
  }

  // build a regular expression for event key, value pair.
  String eventRegExp;
  if (uiParams.isEmpty()) {
   // no or empty "events" facet means all events of the given source are accepted
   eventRegExp = "/" + Constants.PARTIAL_SOURCE_PARAM + "=" + source + "(.)*$/";
  } else {
   StringBuffer sb = new StringBuffer("/");
   sb.append(source);
   sb.append("_");

   Iterator<UIParameter> iter = uiParams.iterator();
   while (iter.hasNext()) {
    UIParameter param = iter.next();

    // not set event name / value means any name / value is accepted
    sb.append("(");
    sb.append(param.getName() != null ? param.getName() : "(.)*");
    sb.append("=");
    sb.append(param.getValue() != null ? param.getValue() : "(.)*");
    sb.append("$)");

    if (iter.hasNext()) {
     sb.append("|");
    }
   }

   sb.append("/");
   eventRegExp = sb.toString();
  }

  writer.startElement("script", blockUI);
  writer.writeAttribute("type", "text/javascript", null);
  writer.write(widgetVar + " = new JsfToolkit.widget.BlockUI('"
               + ComponentUtils.escapeJQueryId(clientId) + "','"
               + ComponentUtils.escapeJQueryId(source) + "','"
               + ComponentUtils.escapeJQueryId(target) + "'," + eventRegExp + ");");
  writer.write(widgetVar + ".setupAjaxSend();");
  writer.write(widgetVar + ".setupAjaxComplete();");

  writer.endElement("script");
 }

 @Override
 public boolean getRendersChildren() {
  return true;
 }

 @Override
 public void encodeChildren(FacesContext fc, UIComponent component) throws IOException {
  // nothing to do
 }
}

The most important thing is the building of regular expressions. If we are not interesting in any special events, we will only check whether the source component in available in passed Ajax parameters (see the JS script below). The regular expression using for this check is

 
/javax.faces.source=<source>(.)*$/

where <source> is the clientId of the source component. Radio buttons and checkboxes I mentioned in the part I send e.g.

 
javax.faces.source=accessLevels_1
javax.faces.source=accessLevels_2
javax.faces.source=accessRights_1
javax.faces.source=accessRights_2

The regular expressions should be therefore

 
/javax.faces.source=accessLevels(.)*$/
/javax.faces.source=accessRights(.)*$/

If we interesting in specified events, we build a regular expression for each event and concatenate them with the logical OR-operator. A regular expression for each event looks as follows

 
/<source>_(<event name>=<event value>)$/

If the event name or value is not important, we use (.)* for any strings (empty is also allowed). Some examples:

 
/dtPropTemplates_(filtering=true)$|dtPropTemplates_(sorting=true)$/
/treeSocs_(action=SELECT)$/
/selectedGroupsUsers_(instantSelectedRowIndex=(.)*)$/

Corresponding Ajax requests have parameters (Ajax options):

 
dtPropTemplates_filtering=true
dtPropTemplates_sorting=true
treeSocs_action=SELECT
selectedGroupsUsers_instantSelectedRowIndex=<rowId>
// <rowId> is the internal Id of the currently selected row

blockUI.js

The script provides two functions to register ajaxSend and ajaxComplete events where I check Ajax options in order to find the appropriate event. The check uses mentioned above regular expressions.

JsfToolkit.widget.BlockUI = function(id, source, target, regExp) {
 var clientId = id;
 var sourceId = source;
 var targetId = target;
 var eventRegExp = regExp;
 
 // global settings
 jQuery.blockUI.defaults.theme = true;
 jQuery.blockUI.defaults.fadeIn = 0;
 jQuery.blockUI.defaults.fadeOut = 0;
 jQuery.blockUI.defaults.applyPlatformOpacityRules = false;
 
 /* public access */
 
 this.setupAjaxSend = function () {
  jQuery(sourceId).ajaxSend(function(event, xhr, ajaxOptions) {
   // first, check if event should be handled 
   if (isAppropriateEvent(ajaxOptions)) {
    var targetEl = jQuery(targetId);

    // second, check if the target element has been found
    if (targetEl.length > 0) {
     // block the target element
     targetEl.block({message: jQuery(clientId + "_content").html()});

     // get the current counter
     var blocksCount = targetEl.data("blockUI.blocksCount");
     if (typeof blocksCount === 'undefined') {
      blocksCount = 0;
     }

     // increase the counter
     targetEl.data("blockUI.blocksCount", blocksCount+1);
    }
   }
  });
 }
 
 this.setupAjaxComplete = function () {
  jQuery(sourceId).ajaxComplete(function(event, xhr, ajaxOptions) {
   // first, check if event should be handled
   if (isAppropriateEvent(ajaxOptions)) {
    var targetEl = jQuery(targetId);

    // second, check if the target element has been found
    if (targetEl.length > 0) {
     // get the current counter
           var blocksCount = targetEl.data("blockUI.blocksCount");

           // check the counter
     if (typeof blocksCount !== 'undefined') {
      if (blocksCount == 1) {
       // unblock the target element and reset the counter
       jQuery(targetId).unblock();
       targetEl.data("blockUI.blocksCount", 0);
      } else if (blocksCount > 1) {
       // only decrease the counter
       targetEl.data("blockUI.blocksCount", blocksCount-1);
      }
     }
    }
   }
  });
 }
 
 /* private access */
 
 var isAppropriateEvent = function (ajaxOptions) {
  if (typeof ajaxOptions === 'undefined' || ajaxOptions == null ||
   typeof ajaxOptions.data === 'undefined' || ajaxOptions.data == null) {
   return false;
  }

  // split options around ampersands
  var params = ajaxOptions.data.split(/&/g);
  
  // loop over the ajax options and try to match events
  for (var i = 0; i < params.length; i++) {
   if (eventRegExp.test(params[i])) {
    return true;
   }
  }

  return false;
 }
}

ajaxSend increase a counter bound to target element and ajaxComplete decrease the counter. This is necessary if many sources blocks the same target. The target is unblocked if the counter is 1. The parsing of Ajax options is the main part and the clou of the question how to find any Ajax events to be able to fire client-side callbacks.

Hooking of PrimeFaces Ajax calls as a kind of callbacks. Part I.

2011-04-09T10:10:00.000-07:00

Using PrimeFaces I have needed client-side callbacks for events causing Ajax calls like sorting, pagination, filtering of datatable or tree node expansion. I can understand that it's impossible to define all kinds of callbacks. Therefore I was looking for a generic way and believe I have found it. I'm able now to "add" any callbacks to any components. Firstly some words about PrimeFaces Ajax driven events. A PrimeFaces Ajax request triggered by any component has a parameter describing the event. It consist of component's clientId, underline, name and value, e.g. myTabview_tabChange=true. We are especially interesting in names and values. They are e.g.

 
Datatable:
name="filtering" value="true"
name="sorting" value="true"
name="paging" value="true"

Tree:
name="action" value="SELECT"
name="action" value="EXPAND"

TabView:
name="tabChange" value="true"

This anatomy is not disclosed. Name / value pairs are undocumented, so that you need to look into JS files (for something like params[this.id + '_tabChange'] = true;) or corresponding component renderers to figure out what are the parameters of any event. The other problem is that a name / value pair can be changed in next releases. The new tree (since PrimeFaces 3.x) will have e.g.

 
name="instantSelection" value="<Node Id>"
name="expandNode" value="<Node Id>"

It would be very nice and appreciated by community if the PrimeFaces team could standardize and document all Ajax driven events. Please :-)

jQuery has a capability to register callbacks for Ajax events. There are ajaxStart .... ajaxComplete events in jQuery. With ajaxStart you can register a handler to be called when the first Ajax request begins, with ajaxComplete a handler to be called when Ajax requests complete, etc. We can use them to catch PrimeFaces Ajax calls and check passed parameters in order to figure out whether the event occurs we are interesting in.

I'm going to demonstrate this approach on basis of a component I have implemented recently. This component calls blockUI and it's based on the jQuery plugin blockUI. By means of this component we can block any piece of page during various Ajax calls. Very handy if you have e.g. a large datatable and sorting, filtering, pagination takes much time. The component has the following parameters: "widgetVar" for the underlying widget (as all PrimeFaces components have it), "for", "forElement" to specify target component or HTML element which gets blocked and "source" to specify source component which causes an Ajax request. Events, we are interesting in, are specified via a facet "events" and f:param within the facet. I'm going to start with facelets part and show three examples.

Playing together with p:dataTable

 
<h:panelGroup id="dtPropTemplatesGroup" layout="block">
 <p:dataTable id="dtPropTemplates" var="propTemplate"
       value="#{propTemplates.templates}" paginator="true" rows="20" ...>
  ...
 </p:dataTable>
 <jtcomp:blockUI source="dtPropTemplates" for="dtPropTemplates">
  <f:facet name="events">
   <f:param name="filtering" value="true"/>
   <f:param name="paging" value="true"/>
   <f:param name="sorting" value="true"/>
  </f:facet>
  <h:panelGrid columns="2">
   <h:graphicImage library="themes" name="app/images/ajaxIndicator.gif"/>
   <h:outputText value="Please wait, data are processing ..."/>
  </h:panelGrid>
 </jtcomp:blockUI>
</h:panelGroup>

Filtering, paging and sorting events display a half transparent overlay over the same table and a rotating Ajax indicator with the message "Please wait, data are processing ...".

Playing together with p:tree

 
<h:panelGroup id="treeSocsGroup" layout="block">
 <p:tree id="treeSocs" value="#{socsBean.socsRootNode}" var="socNode" 
  dynamic="true" cache="true" selectionMode="single" 
  nodeSelectListener="#{socsBean.onNodeSelect}"
  nodeExpandListener="#{socsBean.onNodeExpand}" ...>
  <p:treeNode>
   <h:outputText value="#{socNode.displayName}" escape="false"/>
  </p:treeNode>
  <p:treeNode type="leafSoc" styleClass="leafSoc">
   <h:outputText value="#{socNode.displayName}" styleClass="leafContent"/>
  </p:treeNode>
 </p:tree>
 <jtcomp:blockUI source="treeSocs" forElement="overviewSocsRightGroup">
  <f:facet name="events">
   <f:param name="action" value="SELECT"/>
  </f:facet>
  // the same stuff as above
 </jtcomp:blockUI>

 <h:panelGroup id="overviewSocsRightGroup" layout="block">
  // menus, tables and other stuff
 </h:panelGroup>
</h:panelGroup>

A click on any tree node blocks the panelGroup with id "overviewSocsRightGroup" and the mentioned above overlay, indicator and message are displayed.

Playing together with p:ajax

Sometimes we are not interesting in any special events. In this case no f:facet for events is required. Assume we have a table, radio buttons and checkboxes. A click on any table row should block the radio buttons and checkboxes. A click on any radio button or checkbox should block the table, radio buttons and checkboxes. Remaining part of the page should stay untouched. Note: tables should be wrapped with a div element if they have to be blocked because a table can't be blocked nice in all browsers.

 
<h:panelGroup id="rightsGroup" layout="block">
 <h:panelGroup id="selectedGroupsUsersGroup">
  <p:dataTable id="selectedGroupsUsers" var="selGrUs" value="#{rightsBean.selectedGroupsUsers}" dynamic="false"
        selection="#{rightsBean.selectedGroupUser}" selectionMode="single" update="levelsRightsGrid">
   ...
  </p:dataTable>
  <jtcomp:blockUI source="selectedGroupsUsers" forElement="levelsRightsPanel">
   <f:facet name="events">
    <f:param name="instantSelectedRowIndex"/>
   </f:facet>
   // the same stuff as above
  </jtcomp:blockUI>
 </h:panelGroup>

 <h:panelGrid id="levelsRightsGrid" columns="2">
  <h:panelGroup id="accessLevelsGroup">
   <h:selectOneRadio id="accessLevels" value="#{rightsBean.level}" layout="pageDirection">
    <f:selectItem itemLabel="Custom" itemValue="Custom" itemDisabled="true"/>
    <f:selectItems value="#{rightsBean.selectableLevels}"/>
    <p:ajax event="click" process="@this" update="accessRightsGroup,selectedGroupsUsersGroup"/>
   </h:selectOneRadio>
   <jtcomp:blockUI source="accessLevels" for="rightsGroup">
    // the same stuff as above
   </jtcomp:blockUI>
  </h:panelGroup>
  
  <h:panelGroup id="accessRightsGroup">
   <h:selectManyCheckbox id="accessRights" value="#{rightsBean.selectedAccessRights}" layout="pageDirection">
    <f:selectItems value="#{rightsBean.accessRights}"/>
    <p:ajax event="click" process="@this" update="accessLevelsGroup,selectedGroupsUsersGroup"/>
   </h:selectManyCheckbox>
   <jtcomp:blockUI source="accessRights" for="rightsGroup">
    // the same stuff as above
   </jtcomp:blockUI>
  </h:panelGroup>
 </h:panelGrid>
</h:panelGroup>

The event instantSelectedRowIndex doesn't have a specified value. That means we are not interesting in a value (everything is valid). Unfortunately Ajax handlers can not be bound with jQuery .live() method. Therefore I had to wrap radio button and checkboxes with a h:panelGroup to get blockUI updated every time together with corresponding radio button and checkboxes.

The second part will cover the implementation and reveal more details. Stay tuned.

How to filter p:dataTable on enter event

2011-04-07T02:12:00.000-07:00

PrimeFaces' datatable doesn't support the filtering for "onenter" event. It's not a DOM event, but it makes sense for large datatables to filter a dataset when the enter (return) key was pressed. Many users complain that they can't filter large datasets on each keystroke, only hitting of return key makes sense for them. That's exactly my case too. I use "onenter" event for filtering because a datatable sends too many requests if user inputs and removes characters very quickly. An update of the table is very slow then. The solution is not difficult. Use filterEvent="enter" in any p:column needing a filtering like this

 
<p:dataTable id="myTable" var="user" value="#{myBean.users}"
             widgetVar="myTblWidget">
  ...
  <p:column filterBy="#{user.name}" filterEvent="enter">
    ...
  </p:column>
  ...
</p:dataTable>

and place this little JavaScript direct after p:dataTable (can be also placed into an ui:include for better reusing)

 
<script type="text/javascript">
/* <![CDATA[ */
  jQuery(myTblWidget.jqId).find('th .ui-column-filter[onenter]').each(function(idx) {
  var curEl = jQuery(this);
  curEl.unbind('keydown');

  curEl.keydown(function(event) {
    var e = (window.event) ? window.event : event;
    if(e.keyCode == 13) {
      event.preventDefault();
      eval(curEl.attr('onenter'));
    }
  })
});
/* ]]> */
</script>

The script binds "keydown" event for the enter key on every input field using for the filtering (select boxes using for this purpose don't matter here). If the enter key has been detected, the built-in client-side callback being executed (by means of the JS eval function) and sends an Ajax request to filter the table. It works like a charm. I also have a meaningful tooltip for every input field using for the filtering. The reason is clear - this kind of the filtering is not always easy to understand for end users. A tooltip seems to be very handy.

Subclass creation and inheritance in JavaScript or how to extend widgets

2011-04-01T01:44:00.000-07:00

There are many books and articles describing the inheritance in JavaScript. I'm using Prototype, jQuery an YUI JavaScript frameworks in my old and new web projects. A quite common task for me is an extension of existing widgets. There is a classic article from John Resig which shows a pure simple solution for JavaScript inheritance without using of any frameworks. Nice implementation. I'm going to show my approved techniques with and without frameworks. They are quite simple. They work for me and I would like to share them with readers of my blog.

Assume we have a JS object (widget) called SuperWidget and want to create a subclass of it called ExtendedWidget. Assume ExtendedWidget has a constructor with four parameters and SuperWidget with two parameters.

1) Pure JS
First we create a new constructor for ExtendedWidget and call the super constructor inside of this to make sure that the instance will be correctly initiated. After that we set some new property values. Finally if the constructor is created we set the prototype to a "new SuperWidget".

 
function ExtendedWidget(param1, param2, param3, param4) {
   // call super
   this.SuperWidget = SuperWidget;
   this.SuperWidget(param1, param2);
   
   // set additional properties
   this.param3 = param3;
   var param4 = param4;

   // implement a new public method
   this.myNewMethod = function(a, b) {
      // do something
      ...
   }
   
   // implement a new private method
   var mySecondNewMethod = function(c, d) {
      // do something
      ...
   }
}

ExtendedWidget.prototype = new SuperWidget;

This examples also shows a definition of public and private fields and methods. The keyword "this" marks fields and methods with public access and "var" with private one. In this example "param4" and "mySecondNewMethod" can not be accessed outside after ExtendedWidget was instantiated.

2) Yahoo UI
Yahoo library offers a couple of simple calls out-of-box for subclass creation.

 
ExtendedWidget = function(param1, param2, param3, param4) {
   // call super
   ExtendedWidget.superclass.constructor.call(param1, param2);

   // set additional properties
   this.param3 = param3;
   var param4 = param4;

   // do something
   ...
}

// extend super class
YAHOO.lang.extend(ExtendedWidget, SuperWidget);

// implement a new method
ExtendedWidget.prototype.myNewMethod = function(a, b) {
   // do something
   ...
}

// extend an existing method for additional functionality
ExtendedWidget.prototype.someMethod = function(c, d) {
   ExtendedWidget.superclass.someMethod.call(this, c, d);
   
   // do something extra
   ...
}

3) jQuery
jQuery doesn't offer this feature directly, but we can call the superclass constructor in the extended object and extend properties by using of "extend" method. The method jQuery.extend() merges the contents of two or more objects together. We need to merge prototypes.

 
ExtendedWidget = function(param1, param2, param3, param4) {
   // call super    
   SuperWidget(param1, param2);

   // set additional properties
   this.param3 = param3;
   var param4 = param4;

   // do something
   ...
}

// merge properties into the first object ExtendedWidget
jQuery.extend(ExtendedWidget.prototype, SuperWidget.prototype);

// implement a new method
ExtendedWidget.prototype.myNewMethod = function(a, b) {
   // do something
   ...
}

4) Prototype
Prototype offers the JS inheritance with "Class.create". I don't want to blow up this post, read the official documentation please :-)

That's all. Now we can use ExtendedWidget as the subclass of SuperWidget like this

 
var extendedWidget = new ExtendedWidget(1, 2, 3, 4);
extendedWidget.myNewMethod("Hello", "World");

Announcement: In the next post I will show how to extend a PrimeFaces widget (my preferred JSF library) for command button in order to prevent multiple clicks. I will leverage the jQuery based approach 3). But before I want to present a quite special "delicacy" - hooking of PrimeFaces Ajax calls as a kind of callbacks. Anatomy of PrimeFaces events will be revealed. You will be able to "add" any callbacks to any components on-the-fly. As example I have implemented a new component based on the jQuery plugin blockUI to block any piece of page during various Ajax calls.

Install Java 1.6 and Tomcat 6 under Ubuntu

2011-03-20T02:22:00.000-07:00

I have installed Java und Tomcat on my VPS http://www.fractalsoft.net many times but never noted necessary steps. Here some helpful infos.

1) Issue following command to find out current jdk version in apt-get
apt-cache search jdk

2) Install java JRE with apt-get install
sudo apt-get install openjdk-6-jre

3) Set environment variable JAVA_HOME. Copy following statement and append to /etc/profile or .bashrc
export JAVA_HOME="/usr/lib/jvm/java-6-openjdk;"

4) Install Tomcat 6
sudo apt-get install tomcat6 tomcat6-admin tomcat6-common tomcat6-user tomcat6-docs tomcat6-examples

5) Change tomcat server to run on port 80 in
/var/lib/tomcat6/conf/server.xml (symbolic link) or etc/tomcat6/server.xml

7) Start tomcat server sudo /etc/init.d/tomcat6 start
Stop tomcat server sudo /etc/init.d/tomcat6 stop
Restart tomcat server sudo /etc/init.d/tomcat6 restart
Get tomcat server status sudo /etc/init.d/tomcat6 status

8) To enable admin web based features add the following lines to
/etc/tomcat6/tomcat-user.xml

<role rolename="manager"/>
<role rolename="admin"/>
<user name="admin" password="admin" roles="manager,admin"/>

Manager app http://www.fractalsoft.net/manager/html has now user / pwd = “admin”.

9) Adjust default Tomcat page below /var/lib/tomcat6/webapps/ROOT/index.html if nessesary.

Edit: If you get this exception

SEVERE: Exception sending context initialized event to listener instance of class com.sun.faces.config.ConfigureListener

java.lang.ExceptionInInitializerError

...

Caused by: java.security.AccessControlException: access denied (java.util.PropertyPermission com.sun.aas.installRoot read) at java.security.AccessControlContext.checkPermission(AccessControlContext.java:342)

...

and the deployte web application doesn't start, set TOMCAT6_SECURITY=no (instead of yes) in the file /etc/init.d/tomcat6. Restart your Tomcat after that (login via ssh username@hostname and call sudo /etc/init.d/tomcat6 restart). Thanks to this post from ICEFaces forum!

How to validate multiple required fields all at once

2011-03-08T04:03:00.000-08:00

Foreword:
The most desired feature in JSF is a multi-component validation. At the moment there is a lack of support for this feature because there is no standard way to attach one validator to multiple fields. There are proposed enhancements to JSF 2.1 which should cover this lack. These are "generic subtree validation" and "multi-component validation using bean validation". The aim of this article is to give an idea for multi-component validation. The main point is the validation of required fields in a real project.

Starting position:
Many required fields with required="true" attribute. They produce default messages from JSF implementation like: j_id_id19: Validation Error: Value is required. An end-user gets kinda confused.

Task definition:
Improve the required validation message with less costs and without any touch of existing code if possible. We would like to have messages with exact labels belong to fields, like "The required field 'User Name' is not filled in". The message severity should be WARNING and not ERROR as produced with the JSF standard validator. The solution should be reliable, maintainable and have a good performance.

We will go step by step, evaluate available solutions and figure out the best one.

1) The first Ad-hoc solution coming in mind is one with a custom validator for required fields I described in the previous post. Sure, it's not an ideal solution because we need to define the label text twice and to attach the validator to each field to be validated. It's not good maintainable as well, but there are cases (discussed below) where we need it.

2) BalusC wrote a useful post "Validator for multiple fields". His solution illustrates an idea how to attach a validator to the last component of the group (components are validated in the same order as defined) and gather Ids of the all component(s) to be validated. Nice, but hard-coded, not configurable and still needs many adjustments in the existing code.

3) Cagatay Civici presented in his blog a nice approach based on SystemEventListener and PreValidateEvent for HtmlOutputLabel components. Really interesting idea. But the first question coming in mind - why do we need to scan all labels and do the same work as it's already done by labels self? I mean, LabelRenderer looks for the corresponding editable component in order to find out a proper client Id in the RENDER_RESPONSE phase. It seems, we are doing the same job twice. I'm developing document management systems and we sometimes have about 100 labels on a form. Document's or folder's properties have them in DMS. If we have 100 labels and only 1-2 required fields, we don't need to treat all 100 labels from the view point of performance. We need to treat 1-2 required fields and only when validation has failed (in best case is nothing to do at all). In my opinion, we should look for invalid fields at first and then for corresponding labels. Not inverted as in the proposed approach. Furthermore, there are some limitations. This solution doesn't consider the cross-implementations algorithm for component referencing. Simple findComponent is not enough. Mojarra walks up the ancestor chain and call findComponent() for each component in the ancestor chain. If the root is reached, it walks down the successor chain. Obviously (if I got the picture), the value in "for" attribute and the Id of the corresponding editable component may not match in Mojarra. Result: If a label and its corresponding editable field are located in different forms for example, we are not always able to find the editable field starting from the label component. The last point is the fact that we can't use h:outputLabel in certain circumstances and depend on h:outputText. h:outputText should be considered too. Message severity is not customizable, so that we need a custom validator.

4) Another great idea which gave me the right direction comes from the Mkyong blog. The idea is to group components, e.g. with a h:panelGrid component, and attach the event tag f:event with PostValidateEvent to the group. f:event expects "listener" and "type" attributes which have to be registered declarative. We are worried with this approach about the listener method for PostValidateEvent, where we place it and how we write it, etc. It would be nice to hide this information and accomplish all work programmatically. The autor could probably achieve an optimization by extension of h:panelGrid like

<h:panelGrid columns="..." validateRequired="true">

The component HtmlPanelGrid would have processEvent method.

@ListenerFor(systemEventClass = PostValidateEvent.class)
public class HtmlPanelGrid extends javax.faces.component.html.HtmlPanelGrid
{
    protected enum PropertyKeys {
        validateRequired;
        ...
    }

    ...

    public void processEvent(ComponentSystemEvent event)
                       throws AbortProcessingException {
        if (isValidateRequired()) {
            ....
        }
    }
}

I would like to avoid extensions of any components, but general I like the idea of component subtree validation by means of PostValidateEvent. My idea is based on this system event and a custom TagHandler. I want to write a tag handler with a zero configuration and apply it to the body tag

<h:body>
   <custom:requiredFieldsValidator/>
   ...
</h:body>

or some other component acts as parent for required fields and their labels. Good candidates would be h:panelGroup, h:panelGrid or h:dataTable. Note: For Ajax requests <custom:requiredFieldsValidator/> should be placed within area being processed. For cases where we can't use h:outputLabel we would like to use h:outputText with <f:attribite name="for" value="..."/>. The custom validator for single editable fields (Ad-hoc solution mentioned above) should be applicable too because sometimes there is one label for two and more fields and other rare scenarios. It should also have the higher precedence than a multi-component validator. An example covering all cases:

<h:panelGrid columns="2">
  <custom:requiredFieldsValidator/>

  <h:outputLabel for="username" value="User name"/>
  <h:inputText id="username" value="#{bean.username}" required="true"/>
  <h:outputLabel for="password" value="Password"/>
  <h:inputText id="password" value="#{bean.password}" required="true"/>

  <h:outputText value="Confirm Password">
    <f:attribite name="for" value="confirmPassword"/>
  </h:outputText> 
  <h:inputText id="confirmPassword" 
               value="#{bean.confirmPassword}" required="true"/>

  <h:outputText value="Start date - End date">
  <h:panelGroup>
    <h:inputText value="#{bean.startDate}" required="true">
      <custom:requiredFieldValidator label="Start date"/>
    </h:inputText>
    <h:inputText value="#{bean.endDate}" required="true">
      <custom:requiredFieldValidator label="End date"/>
    </h:inputText>
  </h:panelGroup>
</h:panelGrid>

The tag handler is straightforward. It calls subscribeToEvent for PostValidateEvent and its listener ValidateRequiredFieldsEventListener (explained below).

import javax.faces.component.UIComponent;
import javax.faces.event.PostValidateEvent;
import javax.faces.event.SystemEvent;
import javax.faces.view.facelets.FaceletContext;
import javax.faces.view.facelets.TagConfig;
import javax.faces.view.facelets.TagHandler;
import java.io.IOException;

public class ValidateRequiredFieldsHandler extends TagHandler
{
    public ValidateRequiredFieldsHandler(TagConfig config) {
        super(config);
    }

    public void apply(FaceletContext fc, UIComponent parent) throws IOException {
        if (isNew(parent)) {
            Class<? extends SystemEvent> eventClass = PostValidateEvent.class;
            parent.subscribeToEvent(eventClass, new ValidateRequiredFieldsEventListener());
        }
    }

    protected static boolean isNew(UIComponent component) {
        UIComponent c = component;
        if (c != null) {
            UIComponent parent = c.getParent();
            if (parent != null) {
                if (UIComponent.isCompositeComponent(parent)) {
                    c = parent;
                }
            }
            return c.getParent() == null;
        } else {
            return false;
        }
    }
}

ValidateRequiredFieldsHandler is registered in a tag library

<tag>
    <description>Handler for validation of required fields</description>
    <tag-name>requiredFieldsValidator</tag-name>
    <handler-class>
        xyz.webapp.jsf.validator.ValidateRequiredFieldsHandler
    </handler-class>
</tag>

The message key for any empty required field is defined in the JSF 2 specification, chapter 2.5.2.4 "Localized Application Messages". We are going to redefine the message of this key in the own message bundle (registered in faces-config.xml) as follows

 
javax.faces.component.UIInput.REQUIRED=xyz.faces.component.UIInput.REQUIRED

The event listener ValidateRequiredFieldsEventListener iterates through all messages and looks for required fields which were empty. For each such field the corresponding label will be found and the message will be regenerated. The label will be present in the message which is more user friendly now.

import javax.faces.application.FacesMessage;
import javax.faces.component.UIComponent;
import javax.faces.context.FacesContext;
import javax.faces.event.AbortProcessingException;
import javax.faces.event.ComponentSystemEvent;
import javax.faces.event.ComponentSystemEventListener;
import java.io.Serializable;
import java.util.Iterator;
import java.util.ResourceBundle;

public class ValidateRequiredFieldsEventListener implements ComponentSystemEventListener, Serializable
{
    private static final long serialVersionUID = 20110227L;

    private static final String MESSAGE_SUMMARY_PLACEHOLDER =
            "xyz.faces.component.UIInput.REQUIRED";

    public void processEvent(ComponentSystemEvent event) throws AbortProcessingException {
        FacesContext fc = FacesContext.getCurrentInstance();
        UIComponent parent = event.getComponent();
        if (parent == null) {
            return;
        }

        Iterator<String> iterClientIds = fc.getClientIdsWithMessages();
        while (iterClientIds.hasNext()) {
            String clientId = iterClientIds.next();

            Iterator<FacesMessage> iterFacesMessages = fc.getMessages(clientId);
            while (iterFacesMessages.hasNext()) {
                FacesMessage facesMessage = iterFacesMessages.next();

                if (MESSAGE_SUMMARY_PLACEHOLDER.equals(facesMessage.getSummary())) {
                    iterFacesMessages.remove();

                    // find label
                    ValidateRequiredFieldsCallback vrfCallback = 
                       new ValidateRequiredFieldsCallback(parent);
                    parent.invokeOnComponent(fc, clientId, vrfCallback);

                    String message;
                    ResourceBundle resourceBundle = MessageUtils.getMessageBundle(fc);

                    // create new user friendly message
                    if (vrfCallback.getLabel() == null) {
                        message = MessageUtils.getMessageText(
                           resourceBundle, "validator.emptyMandatoryField.1");
                    } else {
                        message = MessageUtils.getMessageText(
                           resourceBundle, "validator.emptyMandatoryField.2",
                              vrfCallback.getLabel());
                    }

                    fc.addMessage(clientId, new FacesMessage(FacesMessage.SEVERITY_WARN,
                                  "", message));
                    break;
                }
            }
        }
    }
}

ValidateRequiredFieldsCallback is responsible for mentioned above cross-implementations algorithm for component referencing. I use visitTree method for component traversing. VisitLabelCallback encapsulates a check whether the corresponding label is encountered during the component traversing.

import javax.faces.component.ContextCallback;
import javax.faces.component.UIComponent;
import javax.faces.component.visit.VisitContext;
import javax.faces.context.FacesContext;

public class ValidateRequiredFieldsCallback implements ContextCallback
{
    private UIComponent parent;
    private String label;

    public ValidateRequiredFieldsCallback(UIComponent parent) {
        this.parent = parent;
    }

    public void invokeContextCallback(FacesContext fc, UIComponent component) {
        UIComponent currentParent = parent;
        VisitLabelCallback visitLabelCallback = new VisitLabelCallback(fc, component.getId());

        while (currentParent != null) {
            currentParent.visitTree(VisitContext.createVisitContext(fc), visitLabelCallback);

            if (visitLabelCallback.getLabel() != null) {
                label = visitLabelCallback.getLabel();
                return;
            }

            currentParent = currentParent.getParent();
        }

        fc.getViewRoot().visitTree(VisitContext.createVisitContext(fc), visitLabelCallback);
        label = visitLabelCallback.getLabel();
    }

    public String getLabel() {
        return label;
    }
}

Note: Start point from invalid fields brings us a nice bonus. We could highlight invalid fields. e. g. with red borders. After a new message has been added (s. ValidateRequiredFieldsEventListener), we could update the styleClass attribute

String originalStyleClass = component.getAttributes().get("styleClass");
component.getAttributes().put("styleClass", 
                          originalStyleClass + " invalidField");

CSS according to this

div.invalidField,
select.invalidField,
input.invalidField,
.invalidField input {
    border: solid 1px red;
    line-height: 1.4em;
    height: 1.4em;
}

What does VisitLabelCallback do exactly? It checks HtmlOutputLabel, UIOutput (like h:outputText) and a custom composite component (not considered here custom:requiredLabel). It uses a regular expression for values in „for“ attribute, so that valid definitions like

<h:outputLabel for=":mainForm:myTable:userName" .../>
<h:outputLabel for="mainForm:userName" .../>
<h:outputLabel for=":userName" .../>

are considered.

import javax.faces.component.UIComponent;
import javax.faces.component.UINamingContainer;
import javax.faces.component.UIOutput;
import javax.faces.component.html.HtmlOutputLabel;
import javax.faces.component.visit.VisitCallback;
import javax.faces.component.visit.VisitContext;
import javax.faces.component.visit.VisitResult;
import javax.faces.context.FacesContext;

public class VisitLabelCallback implements VisitCallback
{
    private String regExprForAttr;
    private String label;

    public VisitLabelCallback(FacesContext context, String idOfInvalidComp) {
        regExprForAttr = "(" + idOfInvalidComp + ")|.*[" + UINamingContainer.getSeparatorChar(context) + "]{1}(" + idOfInvalidComp + ")$";
    }

    public VisitResult visit(VisitContext context, UIComponent target) {
        if (target instanceof HtmlOutputLabel && ((HtmlOutputLabel) target).getFor() != null) {
            String forAttr = ((HtmlOutputLabel) target).getFor();
            if (forAttr.matches(regExprForAttr)) {
                label = (String) ((HtmlOutputLabel) target).getValue();

                return VisitResult.COMPLETE;
            }
        } else if (target instanceof UIOutput && target.getAttributes().get("for") != null) {
            String forAttr = (String) target.getAttributes().get("for");
            if (forAttr.matches(regExprForAttr)) {
                label = (String) ((UIOutput) target).getValue();

                return VisitResult.COMPLETE;
            }
        } else if (target != null && UIComponent.isCompositeComponent(target) && target.getAttributes().get("for") != null) {
            // TODO: do more reliable check for requiredLabel.xhtml, e.g. check resource name
            String forAttr = (String) target.getAttributes().get("for");
            if (forAttr.matches(regExprForAttr)) {
                label = (String) target.getAttributes().get("value");

                return VisitResult.COMPLETE;
            }
        }

        return VisitResult.ACCEPT;
    }

    public String getLabel() {
        return label;
    }
}

Other validators are possible too by this way. The validator from BaluC's example can be rewritten by means of PostValidateEvent, any "single" Date / Time / Number validators can be done multi-component capable, etc.

The end of a long story. Your feedback is welcome.

JSF form for container-based authentication

2011-03-01T02:42:00.000-08:00

If you have a HTML form with j_security_check

 
<form method="post" action="j_security_check">

and want to rewrite it as JSF h:form, it's easy to do. You can write

 
<h:form id="login" onsubmit="document.login.action = j_security_check;">

or better (if you aren't sure about client Id of the form)

 
<h:form id="login" onsubmit="document.#{p:component('login')}.action='j_security_check';">

p:component is an EL function from the PrimeFaces library calculating client Id of any component. RichFaces has a similar function rich:component.

Custom JSF validator for required fields

2011-02-25T04:06:00.000-08:00

JSF components implementing EditableValueHolder interface have two attributes "required" and "requiredMessage" - a flag indicating that the user is required to input / select not empty value and a text for validation message. We can use that, but it's not flexible enough, we can't parameterize the message directly in view (facelets or jsp) and we have to do something for a proper message customization. What is about a custom validator attached to any required field? We will write one. At first we need to register such validator in a tag library.

<?xml version="1.0"?>
<facelet-taglib version="2.0" ... >
    <namespace>http://ip.client/ip-jsftoolkit/validator</namespace>
    <tag>
        <tag-name>requiredFieldValidator</tag-name>
        <validator>
            <validator-id>ip.client.jsftoolkit.RequiredFieldValidator</validator-id>
        </validator>
        <attribute>
            <description>Resource bundle name for the required message</description>
            <name>bundle</name>
            <required>false</required>
            <type>java.lang.String</type>
        </attribute>
        <attribute>
            <description>Key of the required message in the resource bundle</description>
            <name>key</name>
            <required>false</required>
            <type>java.lang.String</type>
        </attribute>
        <attribute>
            <description>Label string for the required message</description>
            <name>label</name>
            <required>false</required>
            <type>java.lang.String</type>
        </attribute>
    </tag>
</facelet-taglib>

We defined three attributes in order to achieve a high flexibility. A simple using would be

<h:outputLabel for="myInput" value="#{text['myinput']}"/>
<h:inputText id="myInput" value="...">
    <jtv:requiredFieldValidator label="#{text['myinput']}"/>
</h:inputText>

The validator class itself is not difficult. Dependent on the "key" parameter (key of the required message) and the "label" parameter (text of the corresponding label) there are four cases how the message gets acquired.

/**
 * Validator for required fields.
 */
@FacesValidator(value = RequiredFieldValidator.VALIDATOR_ID)
public class RequiredFieldValidator implements Validator
{
    /** validator id */
    public static final String VALIDATOR_ID = "ip.client.jsftoolkit.RequiredFieldValidator";

    /** default bundle name */
    public static final String DEFAULT_BUNDLE_NAME = "ip.client.jsftoolkit.validator.message";

    private String bundle;
    private String key;
    private String label;

    @Override
    public void validate(FacesContext facesContext,
        UIComponent component, Object value) throws ValidatorException
    {
        if (!UIInput.isEmpty(value)) {
           return;
        }

        String message;
        String bundleName;

        if (bundle == null) {
           bundleName = DEFAULT_BUNDLE_NAME;
        } else {
           bundleName = bundle;
        }

        if (key == null && label == null) {
            message = MessageUtils.getMessageText(
               MessageUtils.getResourceBundle(facesContext, bundleName),
                  "jsftoolkit.validator.emptyMandatoryField.1");
        } else if (key == null && label != null) {
            message = MessageUtils.getMessageText(
               MessageUtils.getResourceBundle(facesContext, bundleName),
                  "jsftoolkit.validator.emptyMandatoryField.2", label);
        } else if (key != null && label == null) {
            message = MessageUtils.getMessageText(
               MessageUtils.getResourceBundle(facesContext, bundleName), key);
        } else {
            message = MessageUtils.getMessageText(
               MessageUtils.getResourceBundle(facesContext, bundleName), key, label);
        }

        throw new ValidatorException(new FacesMessage(FacesMessage.SEVERITY_WARN, message, StringUtils.EMPTY));
       
        // getter / setter
        ... 
    }
}

MessageUtils is an utility class to get ResourceBundle and message text. We also need two text in the resource bundle (property file)

jsftoolkit.validator.emptyMandatoryField.1=Some required field is not filled in.
jsftoolkit.validator.emptyMandatoryField.2=The required field '{0}' is not filled in.

and the following context parameter in web.xml

<context-param>
    <param-name>javax.faces.VALIDATE_EMPTY_FIELDS</param-name>
    <param-value>true</param-value>
</context-param>

This solution is not ideal because we need to define the label text (like #{text['myinput']}) twice and to attach the validator to each field to be validated. A better and generic validator for multiple fields will be presented in the next post. Stay tuned!

Invalidate browser cache with custom JSF resource handler

2011-02-19T16:27:00.000-08:00

Browser caches static resources like CSS, JavaScript files, images if they don't have proper expire time in the response header. An usual task is to find a solution which allows refetching of resources with each software release. We can modify all resource URLs by appending "&rv=1234" or "?rv=1234" to the end. rv is a current software revision. Such modified URL leads to the refetching of resources. The current revision can be acquired during project build and stored somewhere, e.g. in a text file, in order to make it available in the web application. Maven has e.g. a special plugin for this task called buildnumber-maven-plugin. This plugin allows to get the current revision from a version control system.

We will write a custom JSF resource handler CustomResourceHandler which will accomplish the URL modifying. The resource handler can be registered in faces-config.xml as follows:

<application>
    <resource-handler>packagename.CustomResourceHandler</resource-handler>
</application>

Writing of any resource handler is straightforward. We need to extend javax.faces.application.ResourceHandlerWrapper

public class CustomResourceHandler extends javax.faces.application.ResourceHandlerWrapper
{
    private ResourceHandler wrapped;

    public CustomResourceHandler(ResourceHandler wrapped) {
        this.wrapped = wrapped;
    }

    @Override
    public ResourceHandler getWrapped() {
        return this.wrapped;
    }

    @Override
    public Resource createResource(String resourceName, String libraryName) {
        Resource resource = super.createResource(resourceName, libraryName);

        // here a check of library name could be necessary, etc.
        ...
        return new CustomResource(resource);
    }
}

We need now a class CustomResource. CustomResource should extend javax.faces.application.ResourceWrapper and delegate all calls to this wrapper class except one call getRequestPath(). Method getRequestPath() needs to be overwritten.

public class CustomResource extends javax.faces.application.ResourceWrapper
{
    private javax.faces.application.Resource resource;

    public CustomResource(Resource resource) {
        this.resource = resource;
    }

    @Override
    public Resource getWrapped() {
        return this.resource;
    }

    @Override
    public String getRequestPath() {
        String requestPath = resource.getRequestPath();
                 
        // get current revision
        String revision = ...

        if(requestPath.contains("?"))
            requestPath = requestPath + "&rv=" + revision;
        else
            requestPath = requestPath + "?rv=" + revision;

        return requestPath;
    }

    @Override
    public String getContentType() {
        return getWrapped().getContentType();
    }

    ...
}

That's all. For more control in Mojarra JSF implementation there are two handy config parameters for web.xml.

com.sun.faces.defaultResourceMaxAge set expire time (in milliseconds) into response header and is responsible for browser-caching. Default value in Production ProjectStage is ca. 10 min.
com.sun.faces. resourceUpdateCheckPeriod gives frequency in minutes to check for changes to webapp artifacts that contain resources.

Two handy CSS hacks for Internet Explorer

2011-02-17T02:04:00.000-08:00

Web developers often face with deficiencies of Internet Explorer. There are many CSS hacks for IE allowing to overcome deficiencies in most cases, but I always use two hacks which are valid for all IE versions. That are * html and \9. Examples:

 
* html .ui-spinner {
    vertical-align: middle;
}

.ui-spinner {
    vertical-align: middle\9;
}

Only IE understand them. Other browsers ignore these syntax.

Passing JSF action methods into ui:include

2011-02-17T01:36:00.000-08:00

Parameters like Java plain, complex objects and beans can be transfered into an ui:include to be available in the included page. An example:

<ui:include src="/sections/edit.xhtml">
    <ui:param name="editBean" value="#{editTemplate}"/>
    <ui:param name="param1" value="value1"/>
    <ui:param name="param1" value="value1"/>
</ui:include>

The facelets edit.xhtml has then an access to these parameters. Well, but what is about action methods? They can be passed by array notation. We can include a facelets from many other facelets and specify the action by its name. E.g.

<ui:include src="/sections/edit.xhtml">
    <ui:param name="editBean" value="#{editTemplate}"/>
    <ui:param name="deleteAction" value="deleteById"/>
    <ui:param name="obj" value="#{listTemplates.selectedId}"/>
</ui:include>

<ui:include src="/sections/edit.xhtml">
    <ui:param name="editBean" value="#{editTemplate}"/>
    <ui:param name="deleteAction" value="deleteByTemplate"/>
    <ui:param name="obj" value="#{listTemplates.selectedTemplate}"/>
</ui:include>

deleteAction is an action name as String which is defined in the passed bean #{editTemplate}. In the included edit.xhtml we can access the proper action and call it with parameter as follows

 
<h:commandButton value="Delete" action="#{editBean['deleteAction'](obj)}"/>

or if you don't use EL 2.x

 
<h:commandButton value="Delete" action="#{editBean['deleteAction']}">
    <f:setPropertyActionListener target="#{editBean.selectedObject}" value="#{obj}"/>
</h:commandButton>

Like JavaScript objects we can use the array notation in EL expressions.

Escape characters in ResponseWriter

2011-02-09T06:16:00.000-08:00

While development of JSF components I have faced a task to escape apostrophe ' in the HTTP response generated by javax.faces.context.ResponseWriter. Here is a solution:

ResponseWriter writer = facesContext.getResponseWriter();
...
// swap writers
FastStringWriter fsw = new FastStringWriter();
ResponseWriter clonedWriter = writer.cloneWithWriter(fsw);
facesContext.setResponseWriter(clonedWriter);

// render children
renderChildren(facesContext, uiTreeNode);

// restore the original writer
facesContext.setResponseWriter(writer);

// escape output and write it back
String renderedKids = fsw.toString();
if (renderedKids != null && !renderedKids.isEmpty()) {
    writer.write(renderedKids.replace("'", "\\\'"));
}
...

We replace the original Writer by FastStringWriter, write there, get the output from it, do escaping and write the escaped output to the response.

P.S. This post was triggered by an issue in PrimeFaces. I guess, writeText would do the escaping. But if you have a third-party library and don't have many control over the rendering of component subtrees (s. renderChildren), you have not much alternatives.

Subversion - merge changes in trunk and brunch from command line

2010-12-20T02:26:00.000-08:00

Command line junkies can merge revisions from branch to trunk via svn command if they have a SVN command line client:

Go to the project in the branch and show the log (via repo-browser or IDE).
Look the revision at the beginning of your changes. Subtract 1 from the revision number.
Look the revision at the end of your changes. Add 1 to the revision number.
Go to the trunk working copy and type "svn merge -r <revision from step 2>:<revision from step 3> branchURL".

Example:

/svn/trunk/myproject> svn merge -r 30308:30648 svn+ssh://xyz.com:65000/var/svn/mycompany/dev/branches/1.0/myproject

Conflicts (if they exist) must be resolved manually.

Another tip to file comparision between two projects (brunch vs. trunk).

Goto the the trunk working copy and type

svn -c <change> svn+ssh://xyz.com:65000/var/svn/mycompany/dev/branches/1.0/myproject

This is a short command of

svn -r <change - 1>:<change> svn+ssh://xyz.com:65000/var/svn/mycompany/dev/branches/1.0/myproject

<change> is the revision number in the branch to be compared with the head revision in the trunk.

A bunch of changes can be compared with
svn -r <changeVon>:<changeBis> svn+ssh://xyz.com:65000/var/svn/mycompany/dev/branches/1.0/myproject
where <changeVon> is the start revision and <changeBis> is the end one.

The same operations can be done vice versa if you go to the brunch working copy and compare with trunk (by typing trunk URL).

Install SUN Java-Plugin für Firefox under OpenSuse 11.x

2010-11-06T15:43:00.000-07:00

IcedTea-Plugin is the standard Java-Pligin for Applets in OpenSuse. It's provided by openjdk. Some application, e.g. ElstarOnline, don't work with IcedTea and need Java-Plugin from SUN. Steps to install SUN's Java-Plugin:

1) Download SUN's JRE from http://www.java.com/de/download/. Current version is 1.6.0_21.

2) Install it. I've installed it under /usr/local/java/jre1.6.0_21

3) Create the following symbolic link in /usr/lib/browser-plugins/ (root rights are needed)

sudo ln -s /usr/local/java/jre1.6.0_21/lib/i386/libnpjp2.so /usr/lib/browser-plugins/

4) Start Firefox and go to the Extras --> Add-ons --> Plugins

5) Deactivate IcedTea NPR Web Browser Plugin

Activate (if not yet activated) Java(TM) Plug-in 1.6.0.21

Tests with PowerMock and MyFaces Test frameworks

2010-10-27T07:16:00.000-07:00

In one of projects we use Mockito as test framework. It's a great framework having some limitations. We also use different mock objects for JSF environment which come from various sources. A not comfortable mishmash. I have decided to introduce PowerMock and MyFaces Test frameworks. This changing was very effective. First I want to compare two test approaches:

Old approach: Utilization of Mockito and JSF / Servlet mocks from "dead" Apache Shale, Spring, ebtam FacesContext.
Disadvantages: Limitations, no mocking of static, final, private classes / methods. Mix of different mocks causes an unconsistent environment. Hacks for the production code.

New approach: Utilization of PowerMock and MyFaces Test frameworks.
Advantages: Mocking of static, final, private classes / methods and more is possible. Unified mock objects and consistent weaving for all fundamental JSF / Servlet pendants.

PowerMock extends Mockito by using a custom classloader and bytecode manipulation. It enables mocking of static methods, constructors, final classes and methods, private methods and more. MyFaces Test Framework provides mock object libraries and base classes for creating own test cases. Mocks for the following APIs are provided:

JavaServer Faces
Servlet

The mock netting is as real. Created FacesContext instance will have been registered in the appropriate thread local variable, to simulate what a servlet container would do. The following section shows how to write power JSF 2 tests. For easing use of the new approach there is a class JsfServletMock which provides an access to JSF 2 and Servlet mocks.

package com.xyz.webapp.basemock;

import org.apache.myfaces.test.base.junit4.AbstractJsfTestCase;
import org.apache.myfaces.test.mock.*;
import org.apache.myfaces.test.mock.lifecycle.MockLifecycle;

public class JsfServletMock extends AbstractJsfTestCase
{
    public MockApplication20 mockApplication;
    public MockExternalContext20 mockExternalContext;
    public MockFacesContext20 mockFacesContext;
    public MockLifecycle mockLifecycle;
    public MockServletContext mockServletContext;
    public MockServletConfig mockServletConfig;
    public MockHttpSession mockHttpSession;
    public MockHttpServletRequest mockHttpServletRequest;
    public MockHttpServletResponse mockHttpServletResponse;

    public JsfServletMock() {
        try {
            super.setUp();
        } catch (Exception e) {
            throw new IllegalStateException("JSF / Servlet mocks could not be initialized");
        }

        // JSF API
        mockApplication = (MockApplication20) application;
        mockExternalContext = (MockExternalContext20) externalContext;
        mockFacesContext = (MockFacesContext20) facesContext;
        mockLifecycle = lifecycle;

        // Servlet API
        mockServletContext = servletContext;
        mockServletConfig = config;
        mockHttpSession = session;
        mockHttpServletRequest = request;
        mockHttpServletResponse = response;
    }
}

An object of this class can be used in tests per delegation pattern. Define the PowerMockRunner with @RunWith at the beginning. Define classes which static, final, private methods will be mocked / tested with @PrepareForTest. Take an example.

import com.xyz.webapp.basemock.JsfServletMock;
import com.xyz.webapp.util.FacesUtils;
import com.xyz.webapp.util.Observer;
import com.xyz.webapp.util.ObserverUtil;
import org.junit.Before;
import org.junit.Test;
import org.junit.runner.RunWith;
import org.mockito.Mock;
import org.powermock.core.classloader.annotations.PrepareForTest;
import org.powermock.modules.junit4.PowerMockRunner;

import static org.junit.Assert.assertEquals;
import static org.mockito.Matchers.any;
import static org.mockito.Matchers.eq;
import static org.mockito.Mockito.verify;
import static org.powermock.api.mockito.PowerMockito.*;

@RunWith(PowerMockRunner.class)
@PrepareForTest({FacesUtils.class, ObserverUtil.class})
public class DataExportWorkflowPageTest
{
    private JsfServletMock jsfServletMock;

    @Mock
    private StatusProfileFinder statusProfileFinder;

    @Mock
    private Collection<Observer> observers;

    private DataExportWorkflowPage dewp = new DataExportWorkflowPage();

    @Before
    public void before() {
        jsfServletMock = new JsfServletMock();

        dewp.setObservers(observers);
        dewp.setStatusProfileFinder(statusProfileFinder);
    }

    @Test
    public void initialize() {
        mockStatic(FacesUtils.class);

        DataExportHistoryForm dehf = mock(DataExportHistoryForm.class);
        DataExportContentForm decf = mock(DataExportContentForm.class);

        WorkflowData workflowData = mock(WorkflowData.class);

        when(FacesUtils.accessManagedBean("dataExportHistoryForm")).thenReturn(dehf);
        when(FacesUtils.accessManagedBean("dataExportContentForm")).thenReturn(decf);

        List<StatusProfile> spList = new ArrayList<StatusProfile>();
        StatusProfile sp1 = new StatusProfile(GenericObjectType.DOCUMENT);
        sp1.setBusinessKey("document");
        spList.add(sp1);
        StatusProfile sp2 = new StatusProfile(GenericObjectType.ACTIVITY);
        sp2.setBusinessKey("activity");
        spList.add(sp2);
        StatusProfile sp3 = new StatusProfile(GenericObjectType.EXPENSE_DOCUMENT_ITEM);
        sp3.setBusinessKey("expense");
        spList.add(sp3);

        jsfServletMock.mockHttpSession.setAttribute(Constants.SESSION_CLIENT, new Client());

        when(statusProfileFinder.getAllLimitBy(any(Client.class), eq(Constants.MAX_RESULTS_DEFAULT))).thenReturn(spList);
        when(FacesUtils.accessManagedBean("workflowData")).thenReturn(workflowData);

        dewp.initialize();

        verify(observers).add(dehf);
        verify(observers).add(decf);
        verifyNoMoreInteractions(observers);

        assertEquals(GenericObjectType.DOCUMENT.getId(), dewp.getStatusProfile());
        assertEquals(workflowData, dewp.getWorkflowData());
    }

    ...
}

After JsfServletMock instantiation in a method annotated with @Before we have a full access to mock objects. E.g. MockHttpSession can be accessed by jsfServletMock.mockHttpSession. In the example I want to mock the static method FacesUtils.accessManagedBean(String) in the static class. We have to write first

mockStatic(FacesUtils.class);

to achieve that. And then quite normally

when(FacesUtils.accessManagedBean(...)).thenReturn(...);

In another small example I use the call

verifyStatic();

to verify if the subsequent static call got really called. In the example below we verify if

ObserverUtil.notifyAll(depd);

was called within

depd.setProcedureStep2(null);

@RunWith(PowerMockRunner.class)
@PrepareForTest(ObserverUtil.class)
public class DataExportProcedureDataTest
{
    private DataExportProcedureData depd;

    @Mock
    private Collection<Observer> observers;

    @Before
    public void before() {
        depd = new DataExportProcedureData();
        depd.setObservers(observers);
    }

    @Test
    public void setProcedureStep2() {
        mockStatic(ObserverUtil.class);

        depd.setProcedureStep2(null);

        verifyStatic();
        ObserverUtil.notifyAll(depd);
    }

    ...
}

You see we can do both - mock static methods and verify behaviors.

Bring power to JSF tests! No need for workarounds any more! Keep your production code clean from the test driven stuff!

Global handling of all unchecked / unexpected exceptions in JSF 2

2010-10-19T06:59:00.000-07:00

JSF 2 specification introduced a new ExceptionHandler API. All exceptions can be handled globally by an ExceptionHandler instance. Advantage of this centralization is that it allows developers to devise more error handling strategies. I was inspired by the great article of Ed Burns "Dealing Gracefully with ViewExpiredException in JSF2" and developed my own central Exception Handler.
Firstly, we need a factory class that creates and returns a new Exception Handler instance.

public class DefaultExceptionHandlerFactory extends ExceptionHandlerFactory {
    private ExceptionHandlerFactory parent;

    public DefaultExceptionHandlerFactory(ExceptionHandlerFactory parent) {
        this.parent = parent;
    }

    @Override
    public ExceptionHandler getExceptionHandler() {
        ExceptionHandler eh = parent.getExceptionHandler();
        eh = new DefaultExceptionHandler(eh);

        return eh;
    }
}

This factory class has to be registered in faces-config.xml

<factory>
    <exception-handler-factory>
        ip.client.jsftoolkit.commons.DefaultExceptionHandlerFactory
    </exception-handler-factory>
</factory>

Secondly, we need a class DefaultExceptionHandler. This is the default implementation of the exception handler to catch unchecked / unexpected exceptions in order to proper display.

public class DefaultExceptionHandler extends ExceptionHandlerWrapper {
    private static final Log LOG = LogFactory.getLog(DefaultExceptionHandler.class);

    /** key for session scoped message detail */
    public static final String MESSAGE_DETAIL_KEY = "ip.client.jsftoolkit.messageDetail";

    private ExceptionHandler wrapped;

    public DefaultExceptionHandler(ExceptionHandler wrapped) {
        this.wrapped = wrapped;
    }

    @Override
    public ExceptionHandler getWrapped() {  
        return this.wrapped;
    }

    @Override
    public void handle() throws FacesException {
        if (fc.isProjectStage(ProjectStage.Development)) {
            // Code for development mode. E.g. let the parent handle exceptions
            getWrapped().handle();
        } else {
            for (Iterator<ExceptionQueuedEvent> i = getUnhandledExceptionQueuedEvents().iterator(); i.hasNext();) {
                ExceptionQueuedEvent event = i.next();
                ExceptionQueuedEventContext context = (ExceptionQueuedEventContext) event.getSource();

                String redirectPage = null;
                FacesContext fc = FacesContext.getCurrentInstance();
                Throwable t = context.getException();

                try {
                    if (t instanceof AbortProcessingException) {
                        // about AbortProcessingException see JSF 2 spec.
                        LOG.error("An unexpected exception has occurred by event listener(s)", t);
                        redirectPage = "/views/error.jsf?statusCode=jsftoolkit.exception.UncheckedException";
                        fc.getExternalContext().getSessionMap()
                            .put(DefaultExceptionHandler.MESSAGE_DETAIL_KEY, t.getLocalizedMessage());
                    } else if (t instanceof ViewExpiredException) {
                        if (LOG.isDebugEnabled()) {
                            LOG.debug("View '" + ((ViewExpiredException) t).getViewId() + "' is expired", t);
                        }

                        ApplicationConfiguration appConfiguration =
                            (ApplicationConfiguration) FacesAccessor.accessManagedBean(
                                ApplicationConfiguration.BEAN_NAME_APPLICATION_CONFIGURATION);
                        HttpSession session = (HttpSession) fc.getExternalContext().getSession(false);
                        if (session != null) {
                            // should not happen
                            session.invalidate();
                        }

                        if (appConfiguration.getBoolean(ConfigKeys.KEY_LOGOFF_2_LOGOUT_PAGE, false)) {
                            // redirect to the specified logout page
                            redirectPage = "/views/logout.jsf";
                        } else {
                            // redirect to the login page
                            redirectPage = "";
                        }
                    } else if (t instanceof ServiceNotAvailableException) {
                        LOG.error("'" + ((ServiceNotAvailableException) t).getServiceName() + "' is not available", t);
                            redirectPage = "/views/error.jsf?statusCode=jsftoolkit.exception.ServiceNotAvailableException";
                    } else {
                        // custom handling of unexpected exceptions can be done in the method handleUnexpected
                        String messageKey = handleUnexpected(fc, t);
                        redirectPage = "/views/error.jsf?statusCode=" + messageKey;
                        fc.getExternalContext().getSessionMap()
                            .put(DefaultExceptionHandler.MESSAGE_DETAIL_KEY, t.getLocalizedMessage());
                    }
                } finally {
                    i.remove();
                }

                SecurityPhaseListener spl = new SecurityPhaseListener();
                spl.doRedirect(fc, redirectPage);

                break;
        }
    }

    protected String handleUnexpected(FacesContext facesContext, final Throwable t) {
        LOG.error("An unexpected internal error has occurred", t);

        return "jsftoolkit.exception.UncheckedException";
    }
}

The method handleUnexpected(FacesContext, Throwable) can be overwritten in derived classes in order to customization. Handling of various unexpected exceptions can be done there. An example of using:

protected String handleUnexpected(FacesContext facesContext, final Throwable t) {
    if (t instanceof IllegalStateException) {
        // some special handling here
        ...
        return "key.exception.IllegalStateException";
    } else {
        return super.handleUnexpected(facesContext, t);
    }
}

SecurityPhaseListener is the phase listener from my last post allowing JSF redirects.

JSF Ajax redirect after session timeout

2010-10-19T05:57:00.000-07:00

JSF 2 has a facility to be able to do Ajax redirects. The specification says - an element <redirect url="redirect url"/> found in the response causes a redirect to the URL "redirect url". JSF component libraries often write other "redirect" elements into response, but the end result is the same - a redirect happens. It works great in case of JSF Ajax redirects.
A web application normally has a security filter - an own solution or from Spring framework or something else. Such security filter does a redirect if user is not authenticated to use requested web resources. This is not an JSF redirect. The filter doesn't pass current request to the FacesServlet at all. Here is an example:

public class SecurityFilter implements Filter {

    private Authenticator authenticator;
    private String loginPage;
    
    public void init(FilterConfig config) throws ServletException {
        ...
        // create an Authenticator  
        authenticator = AuthenticatorFactory.createAuthenticator(config);
        loginPage = getLoginPage(config);
        ...
    }

    public void doFilter(ServletRequest request, ServletResponse response,
        FilterChain chain) throws IOException, ServletException {
        HttpServletRequest hReq = (HttpServletRequest) request;
        HttpServletResponse hRes = (HttpServletResponse) response;
        ...
        // get user roles
        Collection roles = ... 
        // get principal
        Principal principal = hReq.getUserPrincipal();
        
        if (!roles.isEmpty() && principal == null) {
            // user needs to be authenticated
            boolean bRet = authenticator.showLogin(hReq, hRes);
            if (!bRet) {
         // redirect the a login page or error sending
                ...
            }
        }
        ...
    }
}

Problem: indeed an Ajax request is redirected to a specified page after session timeout, but the response can not be proper treated on the client-side. We have a quite regular redirect in this case and the specified page in the response. Client-side Ajax code doesn't expect the entire page coming back.
A possible solution would be to pass "not authenticated" request through FacesServlet. We need to write an Authenticator class which stores the page URL we want to be redirected to in the request scope.

public class FormAuthenticator {
    ...

    public boolean showLogin(HttpServletRequest request, 
        HttpServletResponse response, String loginPage) throws IOException {
        ...
        request.setAttribute("web.secfilter.authenticator.showLogin", loginPage);
 
        return true;
    }
}

The method showLogin returns true in order to avoid a redirect by filter. Let us execute the redirect by JSF! The call gets now a third parameter "loginPage".

authenticator.showLogin(hReq, hRes, loginPage);

If you use Spring security you should have an entry point in your XML configuration file like this one

<beans:bean id="authenticationProcessingFilterEntryPoint"
       class="com.xyz.webapp.security.AuthenticationProcessingFilterEntryPoint">
    <beans:property name="loginFormUrl" value="/login.html"/>
    <beans:property name="serverSideRedirect" value="true"/>
</beans:bean>

The class AuthenticationProcessingFilterEntryPoint is derived from Spring's one

/**
 * Extended Spring AuthenticationProcessingFilterEntryPoint for playing together with JSF Ajax redirects.
 */
public class AuthenticationProcessingFilterEntryPoint extends
    org.springframework.security.ui.webapp.AuthenticationProcessingFilterEntryPoint
{
    public static final String ATTRIBUTE_LOGIN_PAGE = "web.secfilter.authenticator.showLogin";

    public void commence(ServletRequest request, ServletResponse response, AuthenticationException authException)
        throws IOException, ServletException {

        request.setAttribute(ATTRIBUTE_LOGIN_PAGE, getLoginFormUrl());
        super.commence(request, response, authException);
    }
}

On the JSF side we need a special phase listener to do the redirect by ExternalContext. We check at first the buffered page URL in the beforePhase. If it was set - an JSF redirect is needed and will be done.

/**
 * Phase listener for the Restore View Phase which manages display of login page.
 */
public class SecurityPhaseListener implements PhaseListener
{
    private static final Log LOG = LogFactory.getLog(SecurityPhaseListener.class);

    public void afterPhase(PhaseEvent event) { ; }

    public void beforePhase(PhaseEvent event) {
        FacesContext fc = event.getFacesContext();

        String loginPage = (String) fc.getExternalContext().getRequestMap().
            get("web.secfilter.authenticator.showLogin");
        if (StringUtils.isNotBlank(loginPage)) {
            doRedirect(fc, loginPage);
        }
    }

    public PhaseId getPhaseId() {
        return PhaseId.RESTORE_VIEW;
    }

    /**
     * Does a regular or ajax redirect.
     */
    public void doRedirect(FacesContext fc, String redirectPage) 
        throws FacesException {
        ExternalContext ec = fc.getExternalContext();

        try {
            if (ec.isResponseCommitted()) {
                // redirect is not possible
                return;
            }

            // fix for renderer kit (Mojarra's and PrimeFaces's ajax redirect)
            if ((RequestContext.getCurrentInstance().isAjaxRequest()
                || fc.getPartialViewContext().isPartialRequest())
                && fc.getResponseWriter() == null
                && fc.getRenderKit() == null) {
                    ServletResponse response = (ServletResponse) ec.getResponse();
                    ServletRequest request = (ServletRequest) ec.getRequest();
                    response.setCharacterEncoding(request.getCharacterEncoding());

                    RenderKitFactory factory = (RenderKitFactory)  
                     FactoryFinder.getFactory(FactoryFinder.RENDER_KIT_FACTORY);

                    RenderKit renderKit = factory.getRenderKit(fc,
                     fc.getApplication().getViewHandler().calculateRenderKitId(fc));

                    ResponseWriter responseWriter =
                        renderKit.createResponseWriter(
                        response.getWriter(), null, request.getCharacterEncoding());
                        fc.setResponseWriter(responseWriter);
            }

            ec.redirect(ec.getRequestContextPath() + 
                (redirectPage != null ? redirectPage : ""));
        } catch (IOException e) {
            LOG.error("Redirect to the specified page '" + 
                redirectPage + "' failed");
            throw new FacesException(e);
        }
    }
}

It works in both cases - for Ajax and regular request.

Install Dropbox under OpenSuse 11.3

2010-10-03T04:01:00.000-07:00

Dropbox is a great online tool to share data between computers. The software for OpenSuse can be found either here http://software.opensuse.org/113/en and installed directly or you have to add this repository

http://download.opensuse.org/repositories/openSUSE:/11.3:/Contrib/standard/

to the YAST and install it by YAST. After installation open a terminal and type

dropbox start -i

Just follow the prompts to create an account and choose a dropbox folder on your PC.

Install Skype under OpenSuse 11.x

2010-09-21T08:43:00.000-07:00

If you have installed Skype and it crashes while starting you maybe have an old version of Skype. Here are steps to install Skype on Linux:

1) Delete currently installed Skype

zypper rm skype

2) Delete hidden file .skype in the user home directory.

3) Make sure you have installed libpng12-0 package. Install it by YaST if needed.

4) Grab the current Skype version from http://www.skype.com/intl/en/get-skype/on-your-computer/linux/ and install it. You can also install it directly, e.g.

rpm -Uvh http://download.skype.com/linux/skype-2.1.0.81-suse.i586.rpm

WLAN with Dell notebook and OpenSuse 11.x

2010-09-21T08:19:00.000-07:00

Dell notebooks are normally equipped with Broadcom card for WLAN. All 802.11n Broadcom devices need to use the Broadcom STA driver. You need to accomplish the following steps to install such drivers:

1) Download current drivers from http://packman.links2linux.de/package/broadcom-wl. You need two drivers. In my case

broadcom-wl-5.60.48.36-7.pm.8.5.i586.rpm

broadcom-wl-kmp-default-5.60.48.36_k2.6.34.7_0.2-7.pm.8.5.i586.rpm

2) Open Linux terminal and go to the directory where you downloaded these drivers. Let run two commandos one after another

rpm -ivh broadcom-wl-kmp-default-5.60.48.36_k2.6.34.7_0.2-7.pm.8.5.i586.rpm

rpm -ivh broadcom-wl-5.60.48.36-7.pm.8.5.i586.rpm --force

3) Reboot your PC. If you still don't have a WLAN connection go to the YaST and configure WLAN in network devices. You should see at least your drivers.

Assists in creating consistent equals(), hashCode(), toString()

2010-09-21T07:44:00.000-07:00

I often see many different implementations for methods equals(), hashCode() and toString(). There is a good and simple approach in Apache Commons Lang which I always use for this purpose. Classes EqualsBuilder, HashCodeBuilder and ToStringBuilder from the package org.apache.commons.lang.builder provide methods to build consistent and good equals() hashCode() and toString() methods of any class.
We can use either Java reflection or call successive append method for our purpose. Assume we have the following Java class:

public class MyClass {
    private String name;
    private int count;
    private List keys;
    ...
}

1) Use Java reflection:

@Override
public boolean equals(final Object obj)
{
    return EqualsBuilder.reflectionEquals(this, obj);
}

@Override
public int hashCode()
{
    return HashCodeBuilder.reflectionHashCode(this);
}

@Override
public String toString()
{
    return ToStringBuilder.reflectionToString(this);
}

2) Include fields manually:

@Override
public boolean equals(final Object obj)
{
    if (obj == null) {
        return false;
    }

    if (obj == this) {
        return true;
    }

    if (obj.getClass() != getClass()) {
        return false;
    }

    MyClass mc = (MyClass) mc;

    return new EqualsBuilder().append(name, mc.name).append(count, mc.count).append(keys, mc.keys).isEquals();
}

@Override
public int hashCode()
{
    return new HashCodeBuilder(17, 37).append(name).append(count).append(keys).toHashCode();
}

@Override
public String toString()
{
    return new ToStringBuilder(this, ToStringStyle.SHORT_PREFIX_STYLE).
                               append("name", name).append("count", count).append("keys", keys).toString();
}

In the second case we have more control and can decide which fields we want to compare and which not. And don't care about data types. They can be primitive, Collection, Map or something else.

Replacement of h:head in order to fix resources rendering

2010-08-05T03:35:00.000-07:00

I came up against need to reimplement JSF 2 head component by reason of an issue. I have implemented my custom head tag and achieved more flexibility. I'm going to begin with a history before I will show the code. I'm working with PrimeFaces component library. PrimeFaces comes with predefined CSS settings. Developers often want to overwrite these predefined styles. I do that quite simple - include PrimeFaces resources inside of the head tag and include my own resources close to the body tag. Including of PrimeFaces resources (by p:resource) is actually not necessary for regular requests with full page refresh. But it's necessary if you have partial updates via ajax. An output looks like

<!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"><head>
<link rel="stylesheet" type="text/css" href="/icManagement/primefaces_resource/2.0.2/yui/tabview/assets/skins/sam/tabview.css" />
<link rel="stylesheet" type="text/css" href="/icManagement/primefaces_resource/2.0.2/yui/accordion/assets/skins/sam/accordionview.css" />
<link rel="stylesheet" type="text/css" href="/icManagement/primefaces_resource/2.0.2/yui/menu/assets/skins/sam/menu.css" />
<script type="text/javascript" src="/icManagement/primefaces_resource/2.0.2/yui/menu/menu-min.js"></script>
<script type="text/javascript" src="/icManagement/primefaces_resource/2.0.2/yui/json/json-min.js"></script>
...
<link type="text/css" rel="stylesheet" href="/icManagement/javax.faces.resource/sky/css/ip-jsftoolkit.css.jsf?ln=themes" />
<link type="text/css" rel="stylesheet" href="/icManagement/javax.faces.resource/sky/css/incursa-management.css.jsf?ln=themes" />
<script type="text/javascript" src="/icManagement/javax.faces.resource/ip-jsftoolkit.js.jsf?ln=js"></script>
<script type="text/javascript" src="/icManagement/javax.faces.resource/incursa-management.js.jsf?ln=js"></script>

Custom CSS, JavaScript files are places after PrimeFaces' one. Well. Mojarra 2.0.2 had an issue, that CSS selectors placed in h:head cannot override styles in implicitly added resources. This issue was fixed in Mojarra 2.0.3. But this bugfixing is not enough because it fixed one issue and caused another one. Why? Often we need <meta> tags to prevent page caching or make sites search engine friendly. Using the <link> tag you can add a "canonical" url to your page and a favicon. The order of these additional tags can be very important. Internet Explorer introduced e.g. a special <meta> tag

<meta http-equiv="X-UA-Compatible" content="..." />

Content of the X-UA-Compatible <meta> tag helps to control document compatibility. We can specify the rendering engine. For example, inserting this:

<meta http-equiv="X-UA-Compatible" content="IE=8" />

into the head of a document would force IE8 renders the page using the new standards mode. I often heard "IE8 breaks my site". Add this <meta> tag or HTTP header which can fix the site:

<meta http-equiv="X-UA-Compatible" content="IE=7" />

It fixes your site, at least until you can sort out the IE8 issues. I use on my pages some great features which are supported by IE8 only. For instance, IE6 / IE7 don't support border color for select elements. You cannot set border color for h:selectOneMenu or h:selectManyLisbox. Unfortunately, IE8 was rendering my pages in IE7 mode. DOCTYPE was ok, but maybe Apache settings were fault or something else. I decided to put content="IE=8" on all my XHTML pages. But it didn't have any effect. The reason: X-UA-Compatible must be the first child of the head! Internet Explorer doesn't accept this <meta> tag if it's placed after <link> or <script> tags. Many people also encountered the same problem and trey tried making the <meta> tag X-UA-Compatible as the first child of the head to solve this problem. But how could I place this <meta> tag quite at the beginning? The standard h:head tag of the last Mojarra implementation doesn't have this possibility. It always renders at first resources added by JSF 2 facility (don't matter what is placed within head). My output was similar this:

<!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"><head>
<link rel="stylesheet" type="text/css" href="/icManagement/primefaces_resource/2.0.2/yui/tabview/assets/skins/sam/tabview.css" />
<link rel="stylesheet" type="text/css" href="/icManagement/primefaces_resource/2.0.2/yui/accordion/assets/skins/sam/accordionview.css" />
<link rel="stylesheet" type="text/css" href="/icManagement/primefaces_resource/2.0.2/yui/menu/assets/skins/sam/menu.css" />
<script type="text/javascript" src="/icManagement/primefaces_resource/2.0.2/yui/menu/menu-min.js"></script>
<script type="text/javascript" src="/icManagement/primefaces_resource/2.0.2/yui/json/json-min.js"></script>
...
<meta http-equiv="X-UA-Compatible" content="IE=8"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="pragma" content="no-cache"/>
<meta http-equiv="cache-control" content="no-cache"/>
<meta http-equiv="expires" content="0"/>

You see, the standrad h:head is not flexible enough. Oracle ADF has a special <af:document> tag where you can use the facet "metaContainer" of the <af:document> to output the tags in the right place. Eureka! We need facets in the head component for right order controling of rendered resources. Let's write a custom head component:

public class Head extends UIOutput
{
 public static final String COMPONENT_TYPE = "ip.client.jsftoolkit.components.Head";
 public static final String COMPONENT_FAMILY = "ip.client.jsftoolkit.components";
 private static final String DEFAULT_RENDERER = "ip.client.jsftoolkit.components.HeadRenderer";

 /**
  * Properties that are tracked by state saving.
  */
 protected enum PropertyKeys
 {
  title, shortcutIcon;

  String toString;

  PropertyKeys(String toString)
  {
   this.toString = toString;
  }

  PropertyKeys()
  {
  }

  public String toString()
  {
   return ((this.toString != null) ? this.toString : super.toString());
  }
 }

 public Head()
 {
  setRendererType(DEFAULT_RENDERER);
 }

 public String getFamily()
 {
  return COMPONENT_FAMILY;
 }

 public String getTitle()
 {
  return (String) getStateHelper().eval(PropertyKeys.title, null);
 }

 public void setTitle(String title)
 {
  getStateHelper().put(PropertyKeys.title, title);
 }

 public String getShortcutIcon()
 {
  return (String) getStateHelper().eval(PropertyKeys.shortcutIcon, null);
 }

 public void setShortcutIcon(String shortcutIcon)
 {
  getStateHelper().put(PropertyKeys.shortcutIcon, shortcutIcon);
 }
}

I took "title" and "shortcutIcon" attributes to the head component in order to achieve more convenience by using. Now the renderer:

import java.io.IOException;
import java.util.ListIterator;
import javax.faces.component.UIComponent;
import javax.faces.component.UIViewRoot;
import javax.faces.context.FacesContext;
import javax.faces.context.ResponseWriter;
import javax.faces.render.Renderer;

public class HeadRenderer extends Renderer
{
 public void encodeBegin(FacesContext facesContext, UIComponent component) throws IOException
 {
  ResponseWriter writer = facesContext.getResponseWriter();
  writer.startElement("head", component);

  UIComponent first = component.getFacet("first");
  if (first != null) {
   first.encodeAll(facesContext);
  }

  UIViewRoot viewRoot = facesContext.getViewRoot();
  ListIterator<UIComponent> iter = (viewRoot.getComponentResources(facesContext, "head")).listIterator();
  while (iter.hasNext()) {
   UIComponent resource = (UIComponent) iter.next();
   resource.encodeAll(facesContext);
  }
 }

 public void encodeChildren(FacesContext facesContext, UIComponent component) throws IOException
 {
 }

 public void encodeEnd(FacesContext facesContext, UIComponent component) throws IOException
 {
  ResponseWriter writer = facesContext.getResponseWriter();
  Head head = (Head) component;

  UIComponent last = component.getFacet("last");
  if (last != null) {
   last.encodeAll(facesContext);
  }

  if (head.getTitle() != null) {
   writer.startElement("title", null);
   writer.write(head.getTitle());
   writer.endElement("title");
  }

  if (head.getShortcutIcon() != null) {
   writer.startElement("link", null);
   writer.writeAttribute("rel", "shortcut icon", null);
   writer.writeAttribute("href", head.getShortcutIcon(), null);
   writer.endElement("link");
  }

  writer.endElement("head");
 }
}

I introduced two facets called "first" and "last". The resource rendering order with this approach:

Resources placed into "first" facet.
Resources added by JSF 2 facility.
Resources placed into "last" facet.
Page title and shortcut icon.

The new component and its tag have be registered as usual in faces-config and taglib XMLs.

<renderer>
 <component-family>ip.client.jsftoolkit.components</component-family>
 <renderer-type>ip.client.jsftoolkit.components.HeadRenderer</renderer-type>
 <renderer-class>ip.client.jsftoolkit.components.head.HeadRenderer</renderer-class>
</renderer>
<component>
 <component-type>ip.client.jsftoolkit.components.Head</component-type>
 <component-class>ip.client.jsftoolkit.components.head.Head</component-class>
</component>

<tag>
 <tag-name>head</tag-name>
 <component>
  <component-type>ip.client.jsftoolkit.components.Head</component-type>
  <renderer-type>ip.client.jsftoolkit.components.HeadRenderer</renderer-type>
 </component>
</tag>

Using on page:

<!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:ui="http://java.sun.com/jsf/facelets"
   xmlns:jtcomp="http://ip.client/ip-jsftoolkit/components">
<f:view contentType="text/html" locale="#{userSettings.locale}">
<ui:insert name="metadata"/>
<jtcomp:head title="#{messageParameters['frameworkTitle']}" shortcutIcon="#{request.contextPath}/favicon.ico">
  <f:facet name="first">
    <meta http-equiv="X-UA-Compatible" content="IE=8"/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta http-equiv="pragma" content="no-cache"/>
    <meta http-equiv="cache-control" content="no-cache"/>
    <meta http-equiv="expires" content="0"/>
  </f:facet>
  <f:facet name="last">
    <style type="text/css">
      html, body {
        width: 100%;
        height: 100%;
        margin: 0px;
      }
    </style>
    <script type="text/javascript">...</script>
  </f:facet>
  <ui:insert name="resources-pf"/>
</jtcomp:head>
<h:body>
...
 <ui:insert name="resources-app"/>
</h:body>
</f:view>
</html>

Generated output in the right defined order:

<!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"><head>
  <meta http-equiv="X-UA-Compatible" content="IE=8" />
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta http-equiv="pragma" content="no-cache" />
  <meta http-equiv="cache-control" content="no-cache" />
  <meta http-equiv="expires" content="0" />
  
  <link rel="stylesheet" type="text/css" href="/icManagement/primefaces_resource/2.0.2/yui/tabview/assets/skins/sam/tabview.css" />
  <link rel="stylesheet" type="text/css" href="/icManagement/primefaces_resource/2.0.2/yui/accordion/assets/skins/sam/accordionview.css" />
  <link rel="stylesheet" type="text/css" href="/icManagement/primefaces_resource/2.0.2/yui/menu/assets/skins/sam/menu.css" />
  <script type="text/javascript" src="/icManagement/primefaces_resource/2.0.2/yui/menu/menu-min.js"></script>
  <script type="text/javascript" src="/icManagement/primefaces_resource/2.0.2/yui/json/json-min.js"></script>
  ...
  <link type="text/css" rel="stylesheet" href="/icManagement/javax.faces.resource/sky/css/ip-jsftoolkit.css.jsf?ln=themes" />
  <link type="text/css" rel="stylesheet" href="/icManagement/javax.faces.resource/sky/css/incursa-management.css.jsf?ln=themes" />
  <script type="text/javascript" src="/icManagement/javax.faces.resource/ip-jsftoolkit.js.jsf?ln=js"></script>
  <script type="text/javascript" src="/icManagement/javax.faces.resource/incursa-management.js.jsf?ln=js"></script>
  <style type="text/css">
   html, body {
    width: 100%;
    height: 100%;
    margin: 0px;
   }
  </style>
  <script type="text/javascript">...</script>
  <title>Management Client</title>
  <link rel="shortcut icon" href="/icManagement/favicon.ico" />
  </head>
...

Cool? :-)

Metadata extraction from MS Outlook messages

2010-08-04T03:55:00.001-07:00

In the previous post I showed how to extract metadata from MS Office documents. In this post I will show how to extract metadata from MS Outlook messages. There are some solutions like Apache POI-HSMF oder msgparser. But all these solutions are not universal enough, API are restricted and algorithm are not reliable because they try to find / match some subsequences without deep knowledge about MSG file structure. My task was to extract the properties "Subject", "From", "To", "Cc", "Sent", "Received". Well. Let's start with MsgExtractor. The method to be called after instantiation is parseMetaData. The idea is similar to the one for MS Office documents.

public class MsgExtractor
{
 public static final String PROPERTY_SUBJECT = "Subject";
 public static final String PROPERTY_FROM = "From";
 public static final String PROPERTY_TO = "To";
 public static final String PROPERTY_CC = "Cc";
 public static final String PROPERTY_SENT = "Sent";
 public static final String PROPERTY_RECEIVED = "Received";

 private static final Map TEMPLATE_PROPERTY_2_GET_METHODS;

 static {
  TEMPLATE_PROPERTY_2_GET_METHODS = new HashMap();
  TEMPLATE_PROPERTY_2_GET_METHODS.put(PROPERTY_SUBJECT, "getSubject");
  TEMPLATE_PROPERTY_2_GET_METHODS.put(PROPERTY_FROM, "getDisplayFrom");
  TEMPLATE_PROPERTY_2_GET_METHODS.put(PROPERTY_TO, "getDisplayTo");
  TEMPLATE_PROPERTY_2_GET_METHODS.put(PROPERTY_CC, "getDisplayCc");
  TEMPLATE_PROPERTY_2_GET_METHODS.put(PROPERTY_SENT, "getClientSubmitTime");
  TEMPLATE_PROPERTY_2_GET_METHODS.put(PROPERTY_RECEIVED, "getMessageDeliveryTime");
 }
 
 final String[] properties;

 public MsgExtractor(final String[] properties)
 {
  this.properties = (properties == null ? new String[] {} : properties);
 }

 public Map parseMetaData(final byte[] data) throws MetaDataExtractionException
 {
  // check at first whether byte array data is null and throw an exception if it's null
  ...
  
  if (properties.length == 0) {
   return Collections.EMPTY_MAP;
  }

  Map metaData = new HashMap();
  OutlookMessage outlookMessage = new OutlookMessage(new ByteArrayInputStream(data));

  try {
   for (int i = 0; i < properties.length; i++) {
    Object propertyValue = null;
    String strMethod = (String) TEMPLATE_PROPERTY_2_GET_METHODS.get(properties[i]);
    if (strMethod != null) {
     Method method = OutlookMessage.class.getMethod(strMethod, (Class[]) null);
     propertyValue = method.invoke(outlookMessage, (Object[]) (Object[]) null);
    } else {
     LOG.warn("No Get-Method to the MAPI-Property was found for the defined template property '"
              + properties[i] + "'");
    }

    // buffer property values
    metaData.put(properties[i], propertyValue);
   }
  } catch (final Exception e) {
   // failed to extract meta data ==> error handling
   ...
  }

  return metaData;
 }
}

The main class is OutlookMessage which hides a magic work. It looks as follows

import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.UnsupportedEncodingException;
import java.util.Date;
import java.util.Iterator;

import org.apache.commons.io.EndianUtils;
import org.apache.commons.lang.ArrayUtils;
import org.apache.commons.lang.StringUtils;
import org.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory;
import org.apache.poi.poifs.filesystem.DirectoryEntry;
import org.apache.poi.poifs.filesystem.DocumentEntry;
import org.apache.poi.poifs.filesystem.DocumentInputStream;
import org.apache.poi.poifs.filesystem.Entry;
import org.apache.poi.poifs.filesystem.POIFSFileSystem;

**
 * Reads an Outlook MSG File in and provides hooks into its data structure. Some hints to the structure were found under
 *
 * <ul>
 *   <li>http://www.fileformat.info/format/outlookmsg/</li>
 *   <li>http://svn.apache.org/viewvc/poi/trunk/src/scratchpad/src/org/apache/poi/hsmf/</li>
 *   <li>http://www.tech-archive.net/Archive/Development/microsoft.public.win32.programmer.ole/2006-08/msg00123.html
 *   </li>
 * </ul>
 *
 */
public class OutlookMessage
{
 private static final Log LOG = LogFactory.getLog(OutlookMessage.class);

 /** id for the mapi property "subject" */
 private static final int PROP_SUBJECT = 0x0037;

 /** id for the mapi property "display from" */
 private static final int PROP_DISPLAY_FROM = 0x0C1A;

 /** id for the mapi property "display to" */
 private static final int PROP_DISPLAY_TO = 0x0E04;

 /** id for the mapi property "display cc" */
 private static final int PROP_DISPLAY_CC = 0x0E03;

 /** reversed endian format of the property id "client submit time" */
 private static final byte[] PROP_CLIENT_SUBMIT_TIME = {0x40, 0x00, 0x39, 0x00};

 /** reversed endian format of the property id "message delivery time" */
 private static final byte[] PROP_MESSAGE_DELIVERY_TIME = {0x40, 0x00, 0x06, 0x0E};

 private String subject;

 private String displayFrom;

 private String displayTo;

 private String displayCc;

 private Date clientSubmitTime;

 private Date messageDeliveryTime;

 public OutlookMessage(String filename) throws IOException
 {
  this(new FileInputStream(new File(filename)));
 }

 public OutlookMessage(InputStream in)
 {
  try {
   POIFSFileSystem fs = new POIFSFileSystem(in);
   initMapiProperties(fs);
  } catch (IOException ioe) {
   LOG.warn("Some properties could be not parsed from given MSG message " + ioe);
  } finally {
   if (in != null) {
    try {
     in.close();
    } catch (IOException e) {
     ;
    }
   }
  }
 }

 private void initMapiProperties(POIFSFileSystem fs) throws IOException
 {
  DirectoryEntry root = fs.getRoot();

  for (Iterator iter = root.getEntries(); iter.hasNext();) {
   Entry entry = (Entry) iter.next();
   if (!(entry instanceof DocumentEntry)) {
    continue;
   }

   String entryName = entry.getName();
   if (entryName == null) {
    continue;
   }

   // parse MAPI properties
   if (entryName.startsWith("__substg1.0_")) {
    byte[] substgBytes = getBytes((DocumentEntry) entry);

    int id = Integer.parseInt(entryName.substring(12, 16), 16);
    int type = Integer.parseInt(entryName.substring(16, 20), 16);

    if (id == PROP_SUBJECT) {
     // subject
     this.subject = getString(substgBytes, isUnicodeString(type));
    } else if (id == PROP_DISPLAY_FROM) {
     // display from
     this.displayFrom = getString(substgBytes, isUnicodeString(type));
    } else if (id == PROP_DISPLAY_TO) {
     // display to
     this.displayTo = getString(substgBytes, isUnicodeString(type));
    } else if (id == PROP_DISPLAY_CC) {
     // display cc
     this.displayCc = getString(substgBytes, isUnicodeString(type));
    }
   } else if (entryName.startsWith("__properties_version1.0")) {
    byte[] propBytes = getBytes((DocumentEntry) entry);
    int offset = 0;
    int bytesLength = propBytes.length;

    while (offset + 16 <= bytesLength) {
     byte[] propId = read4(propBytes, offset);

     if (compare(propId, PROP_CLIENT_SUBMIT_TIME)) {
      // read value
      this.clientSubmitTime = getDate(propBytes, offset);
     } else if (compare(propId, PROP_MESSAGE_DELIVERY_TIME)) {
      // read value
      this.messageDeliveryTime = getDate(propBytes, offset);
     }

     offset = offset + 16;
    }
   }
  }
 }

 private byte[] getBytes(DocumentEntry docEntry) throws IOException
 {
  DocumentInputStream dis = new DocumentInputStream(docEntry);
  byte[] propBytes = new byte[dis.available()];

  try {
   byte[] bytes = new byte[4096];
   int readCount;
   int curPosition = 0;
   while ((readCount = dis.read(bytes)) > -1) {
    System.arraycopy(bytes, 0, propBytes, curPosition, readCount);
    curPosition = curPosition + readCount;
   }
  } finally {
   dis.close();
  }

  return propBytes;
 }

 private String getString(byte[] bytes, boolean isUnicode)
 {
  if (ArrayUtils.isEmpty(bytes)) {
   return null;
  }

  try {
   String str;
   if (isUnicode) {
    str = new String(bytes, 0, bytes.length, "UTF-16LE");
   } else {
    str = new String(bytes, 0, bytes.length, "ISO8859_1");
   }

   int len = str.length();
   while (len > 0 && str.charAt(len - 1) == '\0') {
    len--;
   }

   if (len != str.length()) {
    str = str.substring(0, len);
   }

   if (StringUtils.isBlank(str)) {
    str = null;
   }

   return str;
  } catch (UnsupportedEncodingException ignore) {
   ;
  }

  return null;
 }

 private boolean isUnicodeString(int type)
 {
  return (type == 0x001F ? true : false); // for not unicode string type = 0x001E
 }

 private byte[] read4(byte[] data, int offset)
 {
  byte[] readBytes = new byte[4];
  System.arraycopy(data, offset, readBytes, 0, 4);

  return readBytes;
 }

 private byte[] read8(byte[] data, int offset)
 {
  byte[] readBytes = new byte[8];
  System.arraycopy(data, offset, readBytes, 0, 8);

  return readBytes;
 }

 private boolean compare(byte[] b1, byte[] b2)
 {
  for (int i = 0; i < b1.length; ++i) {
   if (b1[i] != b2[i]) {
    return false;
   }
  }

  return true;
 }

 private Date getDate(byte[] propBytes, int offset)
 {
  // read value
  byte[] value = read8(propBytes, offset + 8);

  // convert to long (reverse Endian format)
  long time = EndianUtils.readSwappedLong(value, 0);

  // FILETIME 64-bit int number of 100ns periods since Jan 1, 1601 ==>
  // convert ns to ms and substruct milliseconds between 1/1/1601 and 1/1/1970
  time = (time / 10 / 1000) - 1000L * 60L * 60L * 24L * (365L * 369L + 89L);

  return new Date(time);
 }
 
 // getter

 public String getSubject() {return subject;}

 public String getDisplayFrom() {return displayFrom;}

 public String getDisplayTo() {return displayTo;}

 public String getDisplayCc() {return displayCc;}

 public Date getClientSubmitTime() {return clientSubmitTime;}

 public Date getMessageDeliveryTime() {return messageDeliveryTime;}
}

Parse of MAPI properties in the stream __substg1.0_ don't cause any problems. That are quite normally strings. But some properties are in a binary stream called __properties_version1.0. This is the most interesting stream.
Hint to the structure of __properties_version1.0: Each MAPI property has a well documented hex id, available on the MSDN site. For example, the property PR_CLIENT_SUBMIT_TIME has an identifier of 0x00390040. If you open the properties stream and work with 16 byte rows, divided into two 8 byte sections (just like a hex editor), you will see that the property identifier is in the first 8 byte section and the value is in the second. The trick is to reverse the Endian of the property ID. So the ID for the PR_CLIENT_SUBMIT_TIME property becomes 40 00 39 00. Locate this hex block and you will have the value (in Big Endian FILETIME format) in the next 8 byte section.

With a little code extension you can extract "creation time" (reversed endian format of the property id {0x40, 0x00, 0x07, 0x30}), "last modification time" (reversed endian format of the property id {0x40, 0x00, 0x08, 0x30}) or all other imaginable properties. You can use a Viewer for MS Outlook Messages to find out proper endian formats. I have tried this approach for MSG files produced with MS Outlook 2003 / 2007, for unicode / non unicode messages and any other combinations. It was working in all cases.

Metadata extraction from MS Office documents with Apache POI

2010-07-27T08:32:00.000-07:00

Microsoft Office documents have several metadata or properties like "Title", "Author", "Comments", "Keywords", "CreateDateTime", "LastSaveDateTime", etc. Apache POI HPSF, Java API for Microsoft documents, is a neat library to extract such properties from Word, Excel or PowerPoint documents. It can be useful if user upload MS Office files and would like to show / edit metadata before uploaded files are stored in a content repository or somewhere else. Let's write an Java class named MsOfficeExtractor.

import java.io.ByteArrayInputStream;
import java.io.IOException;
import java.io.InputStream;
import java.lang.reflect.Method;
import java.util.Arrays;
import java.util.Collections;
import java.util.HashMap;
import java.util.Map;
import org.apache.poi.hpsf.PropertySetFactory;
import org.apache.poi.hpsf.SummaryInformation;
import org.apache.poi.poifs.eventfilesystem.POIFSReader;
import org.apache.poi.poifs.eventfilesystem.POIFSReaderEvent;
import org.apache.poi.poifs.eventfilesystem.POIFSReaderListener;

public class MsOfficeExtractor
{
 private String[] properties;
 private Map<String, Method> methodMap;

 public MsOfficeExtractor(final String[] properties)
 {
  this.properties = (properties == null ? new String[] {} : properties);
  methodMap = new HashMap<String, Method>();
  try {
   for (int i = 0; i < properties.length; i++) {
    methodMap.put(properties[i], SummaryInformation.class.getMethod("get" + properties[i], (Class[]) null));
   }
  } catch (SecurityException e) {
   // error handling
  } catch (NoSuchMethodException e) {
   // error handling
  }
 }
 
 public Map<String, Object> parseMetaData(final byte[] data)
 {
  if (properties.length == 0) {
   return Collections.EMPTY_MAP;
  }

  InputStream in = null;
  try {
   in = new ByteArrayInputStream(data);
   POIFSReader poifsReader = new POIFSReader();
   MetaDataListener metaDataListener = new MetaDataListener();
   poifsReader.registerListener(metaDataListener, "\005SummaryInformation");
   poifsReader.read(in);

   return metaDataListener.metaData;
  } catch (final IOException e) {
   // error handling
  } catch (final RuntimeException e) {
   // error handling
  } finally {
   if (in != null) {
    try {
     in.close();
    } catch (IOException e) {
     // nothing to do
    }
   }
  }
 }
}

The constructor expects property names of the properties we want to extract. All valid names are defined in org.apache.poi.hpsf.SummaryInformation. The map methodMap defines a mapping between a property to be extracted and a method to be called in the listener explained below. The core method is parseMetaData which expects a byte array of given MS Office file. We need now a listener class MetaDataListener which is called while parsing.

public class MetaDataListener implements POIFSReaderListener
{
 public final Map<String, Object> metaData;

 public MetaDataListener()
 {
  metaData = new HashMap<String, Object>();
 }

 public void processPOIFSReaderEvent(final POIFSReaderEvent event)
 {
  try {
   final SummaryInformation summaryInformation = (SummaryInformation) PropertySetFactory.create(event.getStream());

   for (int i = 0; i < properties.length; i++) {
    Method method = (Method) methodMap.get(properties[i]);
    Object propertyValue = method.invoke(summaryInformation, (Object[]) (Object[]) null);

    metaData.put(properties[i], propertyValue);
   }
  } catch (final Exception e) {
   // error handling
  }
 }
}

The goal of this listener is to build a map with extracted values to the given properties (which values we want to extract). The using is simple:

// initialize extractor
String[] poiProperties = new String[] {"Comments", "CreateDateTime", "LastSaveDateTime"};
MsOfficeExtractor msOfficeExtractor = new MsOfficeExtractor(poiProperties);

// get byte array of any MS office document
byte[] data = ...

// extract metadata
Map<String, Object> metadata = msOfficeExtractor.parseMetaData(data);

In the next post I will show how to extract metadata from MS Outlook msg files. Apache POI-HSMF, Java API to access MS Outlook msg files, has limits and is not flexible enough. I will present my own powerful solution.

Encode / decode parameters for GET request

2010-07-21T05:31:00.000-07:00

As is well-known GET request parameters (query string) must be encoded on client-side and decoded on server-side. Normally an application server is responsible for decoding URL parameters. But in the real world I already had a case where parameters were not decoded (maybe some settings were wrong). Well. The client-side solution which I wrote for my web apps is to pass request parameters through this function

// Replaces all special characters in the passed string.
function encodeString(thestring)
{
    var encodedValue;
    if(window.encodeURIComponent) {
        encodedValue = encodeURIComponent(thestring);
    } else {
        encodedValue = escape(thestring);
        encodedValue = encodedValue.replace(new RegExp('\\+', 'g'), '%2B');
    }
    return encodedValue;
}

The Java based server-side solution (if needed) is easy.

String encoding = request.getCharacterEncoding();
if (encoding == null) {
    encoding = "UTF-8";
}

try {
    String decodedParameter = java.net.URLDecoder.decode(originalParameter, encoding);
    ...
} catch (UnsupportedEncodingException e) {
    // do something
}

What element mouse comes from or goes to

2010-07-21T04:10:00.000-07:00

Sometimes we want to know where the mouse comes from or goes to in case of mouseover / mouseout event. Assume, we have assigned to any HTML element a mouseout listener mouseOut. We can easy acquire the source (from element) and target (to element) by fired event.

function mouseOut(evt)
{
    evt = (evt) ? evt : ((window.event) ? window.event : "");
    var fromElement = (evt.target) ? evt.target : evt.srcElement;
    var toElement = (evt.relatedTarget) ? evt.relatedTarget : evt.toElement;
    
    // do something with fromElement / toElement
}

Easy. Is not?

A cross-browser solution to get iframe body element

2010-07-21T03:40:00.000-07:00

An often task while web development is the working with iframe. If we have iframe's body object bodyIframe we can use quite normally JavaScript means to do for instance its content empty

...
bodyIframe.innerHTML = "";
...

or to get any HTML form like

...
var form = bodyIframe.getElementsByTagName("form")[0];
...

or something else. Unfortunately there isn't an uniform access to iframe's body object. It's dependent on browser. I have found out an universal way to get this element by iframe Id (<iframe id="..." .../>). The appropriate JS function looks as follows

function getIframeBody(iframeId)
{
   var obj = document.getElementById(iframeId);
   if (obj == null) {
      return null;
   }

   var bodyIframe = null;
   if (obj.contentWindow && obj.contentWindow.document.body) {
      bodyIframe = obj.contentWindow.document.body;
   } else if (obj.document && obj.document.body) {
      bodyIframe = obj.document.body;
   } else if (obj.contentDocument && obj.contentDocument.body) {
      bodyIframe = obj.contentDocument.body;
   }

   return bodyIframe;
}