Just to give you a taste of what we’re going to present I’ve prepared a sample application where I use JQuery with ADF Faces to create a slideshow. This sample has no HTML, of course... Otherwise it would be too easy. :)
If I had to create this app in html it would look like this:
1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2: <html xmlns="http://www.w3.org/1999/xhtml">
3: <head>
4: <meta content="text/html; charset=iso-8859-1"
5: http-equiv="Content-Type"/>
6: <script type="text/javascript" src="lib/jquery/jquery-1.3.2.min.js"></script>1:2: <script type="text/javascript" src="javascript/slide.js"></script>
7: <link rel="stylesheet" type="text/css" href="css/slide.css"/>
8: </head>
9: <body>
10: <div id="slideshow">
11: <img src="images/cristo1.jpg" alt="" class="active"/>
12: 13: <img src="images/cristo2.jpg" alt=""/>
14: 15: <img src="images/ipanema1.jpg" alt=""/>
16: </div>
17: </body>
18: </html>
So, the question is… How do I turn html tags into ADF Faces Layout Managers? There’s a tip here. PanelGroupLayouts can be easily mapped to html tags according to the layout attribute value you chose.
Layout | HTML Tag |
| default | span |
| horizontal | table |
| vertical | div |
| scroll | div (overflow: auto, height: 100% and width: 100%) |
Which means that in ADF terms the code would be:
1: <?xml version='1.0' encoding='UTF-8'?>
2: <jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"
3: xmlns:f="http://java.sun.com/jsf/core"
4: xmlns:h="http://java.sun.com/jsf/html"
5: xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
6: <jsp:directive.page contentType="text/html;charset=UTF-8"/>
7: <f:view>
8: <af:document id="d1" title="ADF plus JQuery">
9: <af:form id="f1">
10: <af:resource type="javascript"
11: source="/lib/jquery/jquery-1.3.2.min.js"/>
12: <af:resource type="javascript" source="/javascript/slide.js"/>
13: <af:resource type="css" source="/css/slide.css"/>
14: <af:panelGroupLayout id="slideshow" layout="vertical">
15: <af:group>
16: <af:image source="/images/cristo1.jpg" id="i1" styleClass="active"/>
17: <af:image source="/images/cristo2.jpg" id="i2"/>
18: <af:image source="/images/ipanema1.jpg" id="i3"/>
19: </af:group>
20: </af:panelGroupLayout>
21: </af:form>
22: </af:document>
23: </f:view>
24: </jsp:root>
Also notice the use of af:group. Not surrounding your images with af:group will cause ADF to create a separate div for each image inside your PanelGroupLayout.
No comments:
Post a Comment