With the arrival of ADF 12.1.3 many new features has been introduced. One of those features is the brand new deck ui component. In this blogpost I want to give an example on how to use that new component.
Use Case
The use case is quite simple. Arrange pictures of soccer players in a grid. Once clicked on a picture it is flipped. On the backside you can see more details for the given player. Clicking once again on the card it flips back and shows the picture again. Let's look at the result:
Now clicking on the first pic it flips (with an animated transition) and show details.
How to implement
To implement the described use case create a panelGridLayout first with the following properties
- row: Fixed height
- cell: Fixed width, halign="stretch" and valign="stretch"
Inside each cell place the new af:deck component with two links as child components and two transition operations.
The commandLinks act as clickable cards on the deck. Each transition operation defines the desired animation when transitioning from one card to another. There are a lot of out-of-the-box transitions available as you can see in the screenshot.
Which card is currently displayed on the deck is controlled by the displayedChild attribute. It expects the component id of the given child ui component (in this case the af:commandLinks). The interesting piece of JSF Code for the sample to work is as follows:
To make the sample complete a backing bean is needed to handle the action events on each command link. Main task of the action listeners is to change the displayedChild attribut on the deck component and repaint it on the client (through a partial refresh)
Download
Observations
While implementing the deck sample I did not want to use the deprecated af:commandLink. But converting it to af:link implies a JSF compilation error. So I switched back to the deprecated component.
Looks like the new Link Component is not fully compatible. Is this a bug?
Further Information
- See more af:deck demos at the official JDev/ADF Demo http://jdevadf.oracle.com/adf-richclient-demo/faces/visualDesigns/deck.jspx, http://jdevadf.oracle.com/adf-richclient-demo/faces/components/deck.jspx
- See af:deck documentation in the ADF 12.1.3 Web Developers Guide http://docs.oracle.com/middleware/1213/adf/develop-faces/adf-faces-layout.htm#ADFUI13833
- See af:deck Tag Library Description: http://docs.oracle.com/middleware/1213/adf/tag-reference-faces/tagdoc/af_deck.html
No comments:
Post a Comment