Saturday, February 12, 2011

ADF and JQuery working together

Are you done with your schedule builder for Oracle Open World 2010? Don’t forget to register for Pretty UIs: creating great looking applications with ADF Faces (S316896). Different from last year’s presentation Maiko Rocha and myself are not going to be focusing on ADF Faces Layout Managers and Skinning. This time it’s more about tips and techniques on how to make you UI components more dynamic and reusable.

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" 
   2: <html xmlns="">
   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>

   2:         <script type="text/javascript" src="javascript/slide.js">
   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"/>
  13:             <img src="images/cristo2.jpg" alt=""/>
  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.


scrolldiv (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="" version="2.1"
   3:           xmlns:f=""
   4:           xmlns:h=""
   5:           xmlns:af="">
   6:   < 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