Integrating yFiles AJAX and ICEfaces

Demo Source Code


This article contains files needed to set up an example dynamic web project in Eclipse which integrates yFiles AJAX and ICEfaces.



There are two possibilities to integrate yFiles AJAX and ICEfaces. In the simple case, there is no interaction between yFiles AJAX widgets and facelet components. In this case you can integrate e.g. a graph canvas into a facelet as you would integrate it into any HTML page. The simple.xhtml resource attached to this article is an example for this kind of simple integration.

The rest of this article deals with the case, where interaction between a yFiles AJAX graph canvas with other components of an ICEfaces facelet should be possible.


The following software was used for testing this demo.


  1. Open Eclipse.
  2. Select File >> New >> Project... from the main menu.
  3. On the Select a Wizard page select the Web >> Dynamic Web Project wizard and click the Next > button.
  4. On the Dynamic Web Project page choose a project name, e.g. "yFiles AJAX JSF", choose or create a Target Runtime and choose the "ICEfaces 3 Default Project Configuration". Click the Next > button.
  5. On the Java page just click the Next > button.
  6. On the Web Module page enter the desired context root (e.g. "yfiles-ajax-jsf") and keep the default value for the content directory (WebContent). Do not select "Generate web.xml deployment descriptor". Click the Next > button.
  7. On the JSF Capabilities page click the small download button to the right of the JSF implementation library selection window. Choose the JSF 2 implementation from "ICEsoft Technologies". (Alternatively, you can create a user library that contains the ICEfaces javax.faces.jar). Click the Ok button. Click the Finish button.
  8. Click the top level folder of the new project in the Project Explorer and select File >> Import... from the main menu.
  9. On the Select page select General >> Archive File and click the Next > button.
  10. Select the archive (attached to this article as a resource) as the source and select the Eclipse project folder as the target folder. Optionally, you can check "Overwrite existing resources without warning" in the Options section. Click Finish.
  11. The following resources and libraries need to be copied from the yFiles AJAX distribution to the Eclipse project:
    Source Target Location
    demos/web-content/resources/graphs WebContent/resources
    lib/java WebContent/WEB-INF/lib
    Additionally, copy your yFiles AJAX license file (yfiles-ajax-license.xml) to the WebContent/WEB-INF directory of the Eclipse project.
  12. In the project properties go to the Java Build Path settings page. In the Order and Export tab, click "Select All" to make sure that all required libraries are deployed to the server.
  13. Create and start a Server for the Eclipse Project in the "Servers" view, and navigate to the root of the web application (e.g. http://localhost:8080/yfiles-ajax-jsf/)


For a detailed tutorial on creating custom JSF components, please see The Java EE 6 Tutorial.


Categories this article belongs to:
yFiles AJAX > Other
Applies to:
yFiles AJAX: 2.0
yFiles AJAX - ICEfaces - facelets - JSF