Integrating yFiles AJAX and ICEfacesDemo Source Code
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.
- Java Runtime Environment (JRE) 7
- yFiles AJAX 2.0
- Eclipse 3.7.2 (Indigo) for Java EE Development
- ICEfaces 3.0.1 and the Eclipse plugins for ICEfaces
- Tomcat 7.0
- Open Eclipse.
- Select File >> New >> Project... from the main menu.
- On the Select a Wizard page select the Web >> Dynamic Web Project wizard and click the Next > button.
- 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.
- On the Java page just click the Next > button.
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.
- 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.
- Click the top level folder of the new project in the Project Explorer and select File >> Import... from the main menu.
- On the Select page select General >> Archive File and click the Next > button.
yfiles-ajax-icefaces.ziparchive (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.
The following resources and libraries need to be copied from the yFiles AJAX distribution
to the Eclipse project:
Source Target Location
- 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.
Create and start a Server for the Eclipse Project in the "Servers" view, and navigate to the root of the web application
WebContent/WEB-INF/tags/yfiles-ajax_taglib.xmlfile defines a custom taglib with just one new tag
<yworks:graphCanvas>for embedding a yFiles AJAX GraphCanvas widget into an ICEfaces facelet.
The new tag is handled by the
com.yworks.yfiles.jsf.components.GraphCanvascomponent and the
com.yworks.yfiles.jsf.renderers.GraphCanvasRendererrenderer. Moreover there is a bean
com.yworks.yfiles.jsf.managedbeans.GraphCanvasBeanwhich can be used as a managed bean to enable value bindings and thus glueing other components in a facelet to the graph canvas.
WebContent/WEB-INF/faces-config.xmlfile does not contain any configuration settings, because the JSF component, renderer and bean are configured using Annotations instead (see e.g. the
@FacesComponent) Annotation of the GraphCanvas class.
WebContent/WEB-INF/web.xmlfile configures the taglib. Moreover, it configures the servlets for ICEfaces and yFiles AJAX.
WebContent/resourcesdirectory contains the graphs, which can be loaded into a yFiles AJAX graph canvas and other resources like style sheets.
WebContent/index.xhtmlfile is a facelet which uses the new
<yworks:graphCanvas>tag in conjunction with a managed
GraphCanvascomponent supports two attributes,
zoomattribute demonstrates how events are communicated from the yFiles AJAX graph canvas widget to the surrounding facelet. If you zoom in or out with the mouse wheel, the changed zoom value is passed via partial submit to the server side. At the server side, the new zoom is set in the managed bean. In the next render phase, the changed zoom value gets to the
outputTextcomponent, because it is bound to the
zoomattribute of the managed bean.
graphNameattribute demonstrates how to talk to the graph canvas widget from the facelet. There is a
selectOneMenucomponent, which contains the names of graphs which can be displayed. The graph names are provided by the managed bean. If the user selects a graph, the new value for the graph name is transferred to the managed bean. In the next render phase, the
<yworks:graphCanvas>tag has to be used inside an
<ice:form>component with partial submit. The
idattribute has to be set. All facelets containing a graph canvas and the
canvas.htmlfile have to reside in the