Sun Developer Network
Using DynaFaces with jMaki and a Scroller Component

Dojo FishEye with JSF ValueChangeListener

Back to demo index.

JSF, Dynamic Faces, and the Dojo FishEye widget.

This example shows how the jMaki dojo FishEye component is fully integrated with JSF. The page has two message areas that are updated via Ajax in response to the selection of one of the items in the fishEye. The jMaki FishEye widget has a value binding to an int property on a request scoped managed bean. It also has a valueChangeListener method binding pointing to a method on that same managed bean. Choosing one of the items in the list both causes the current value of the component to be updated, with type conversion to int, and the valueChangeListener to be called, which stores a message in request scope which is output by an outputText as well as making it so only the two outputText components are rendered. The selected message strings are all pulled from the managed bean.
Selected Person Ben Galbraith Message from ValueChangeListener
Example Files
fisheye.jsp
mainColumnFishEye.jsp
WEB-INF/web.xml
WEB-INF/faces-config.xml
FishEyeBean.java
devtime.js
jmaki.js
fisheye/component.js
fisheye/component.css
fisheye/component.htm
Running the Demo

Click any of the pictures and notice the messages change in the page.

  1. Click on the first image from the left.

  2. In the "Message from ValueChangeListener" area of the page, notice that a message appears showing the old and new value of the selected index.

  3. In the "Selected Person" message, notice that the caption for the person is updated as well.

If you examine the source for mainColumnFishEye.jsp, you will see that the jMaki widget has a valueChangeListener attribute installed on it. This is a JSF MethodExpression that takes the following action.

  1. Construct an informational message containing the old and new values of the component.

  2. Store that message in request scope.

  3. Clear the set of partial ids to be rendered.

  4. Add to the set of partial ids to be rendered the, fishEyeMessage, the personMessage, and the fisheye component itself.

When the view is partially re-rendered using Dynamic Faces, only the components requested by the ValueChangeListener are rendered.