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.
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.
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.
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