tag:blogger.com,1999:blog-66593019370753854572024-02-20T06:37:17.106-08:00ADF GarageTaking a look under the hood of ADF.Maiko Rochahttp://www.blogger.com/profile/17589428760474682504noreply@blogger.comBlogger9125tag:blogger.com,1999:blog-6659301937075385457.post-68154350831330475422010-07-09T10:21:00.001-07:002010-08-02T16:55:39.963-07:00If you're seeing StringIndexOutOfBoundsException in org.apache.myfaces.trinidadinternal.style.util.CSSGenerationUtils ...... then, as explicitly noted on <a href="http://www.oracle.com/technology/products/jdev/htdocs/11/11.1.1.3.0/knownissues.html">JDeveloper 11g PS2 Release Notes</a>, what you're seeing is a JDK regression bug, namely, <a href="http://bugs.sun.com/bugdatabase/view_bug.do?bug_id=6875866">6875866</a>. To workaround it you need to use the <b>-XX:-UseSS42Intrinsics</b> option on two places: <div> <br /></div> <blockquote style="border-bottom-style: none; padding-bottom: 0px; border-right-style: none; margin: 0px 0px 0px 40px; padding-left: 0px; padding-right: 0px; border-top-style: none; border-left-style: none; padding-top: 0px" class="webkit-indent-blockquote"> <div>1. Project Properties -> Run/Debug/Profile -> Default (or whatever is your Run Configuration name) -> Edit... -> Java Options -> enter -<b>XX:-UseSSE42Intrinsics</b> in the text box.</div> <div>2. Edit to your <b><JDEV_HOME>/jdev/bin/jdev.conf</b>  and add this line:  <b>AddVMOption -XX:-UseSS42Intrinsics </b></div> </blockquote> <div> <br /></div> <div>Note that the <i>Release Notes</i> only talk about adding the option to WLS's runtime settings, but you also need it for design time as ADF Faces is being called behind the scenes to render the JSPX files in the IDE. I also recommend to turn on the <b>"Show Design Time Messages in Log"</b> option so you can see any error messages being raised by the JSP/HTML Visual Editor. Go to <b>Preferences -> JSP and HTML Visual Editor</b> panel to turn it on.</div> Maiko Rochahttp://www.blogger.com/profile/17589428760474682504noreply@blogger.com6tag:blogger.com,1999:blog-6659301937075385457.post-10616742864297839802010-04-13T11:06:00.001-07:002010-04-13T15:24:33.797-07:00Using PMD Extension and Custom Rule Sets with JDeveloper 11g<p> </p> <p align="justify">Recently I’ve worked with a customer that was evaluating the use of <a href="http://pmd.sourceforge.net/" target="_blank">PMD code quality tool</a> integrated with JDeveloper 11g and their custom build process (using Maven/ANT) to improve their code quality and enforce their standards. They were specifically interested in custom ADF Business Components rules.</p> <p align="justify">Although I knew that PMD it provides an extension for JDeveloper 11g I’ve never done any work with PMD before. So I dug into its <a href="http://pmd.sourceforge.net/howtowritearule.html" target="_blank">documentation</a> and found out that you can actually create rules based on both XPath expressions and Java. </p> <p align="justify">Without any previous knowledge of PMD or XPath it took me less than an hour to quickly right some basic XPath rules; and believe me, I’m just your average developer! :^)</p> <p align="justify">I’ve created 5 simple XPath-based rules: </p> <ul> <li> <div align="justify">Avoid using ViewObjectImpl.getRowCount();</div> </li> <li> <div align="left">Avoid calling transaction methods from ADF BC (commit/rollback/potChanges);</div> </li> <li> <div align="justify">Avoid using DBTransaction class;</div> </li> <li> <div align="justify">Avoid using direct JDBC calls to the Database;</div> </li> <li> <div align="justify">Use of wrong super class for your Application Module.</div> </li> </ul> <p align="justify">I won’t go into the PMD implementation details. You can check the <a href="http://pmd.sourceforge.net/xpathruletutorial.html" target="_blank">excellent PMD documentation</a> for that. And just to make it crystal-clear: I’m not a PMD or XPath expert, so the XPath expression can still be wrong or raise false positives; the objective is just to give an idea of what can quickly be done using PMD and XPath <strong>no matter which framework you’re using</strong>.</p> <p align="justify">So, here is the step by step process:</p> <p align="justify">1. Fire up JDeveloper, go to Help->Check for Updates and download the PMD Extension. If you cannot find it through the Update Center, <a href="http://sourceforge.net/projects/pmd/files/pmd-jdeveloper/pmd-jdeveloper-4.2.5/pmd-jdeveloper1111-bundle-4.2.5.3.0.zip/download" target="_blank">download it here</a> and install it.</p> <p align="justify">2. After installing, shutdown JDev. We will need to do some refactoring on the extension jar files due to the way the extension reads the rulesets properties. </p> <p align="justify">3. Open your preferred file browser or command line and go to <font face="Courier New"><JDEV_HOME>\jdeveloper\jdev\extensions\net.sourceforge.pmd.jdeveloper.4.2.5.3.0\lib</font></p> <p align="justify">4. Open the pmd-4.2.5.jar file with your preferred tool. You’ll see that there is a <strong>rulesets</strong> directory in it. Extract this directory to your file system and remove the <strong>rulesets</strong> directory from the jar file. We need to do this to modify the rulesets/rulesets.properties config file that is bundled within the jar file.</p> <p align="justify">5. Open the <font face="Courier New">rulesets.properties</font> file and at the end of the rulesets.filenames append <font face="Courier New">rulesets/adfbc.xml</font> . It should look like this:</p> <div id="codeSnippetWrapper"> <div style="border-bottom-style: none; text-align: left; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'Courier New', courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px" id="codeSnippet"> <pre style="border-bottom-style: none; text-align: left; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'Courier New', courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px">rulesets.filenames=rulesets/android.xml,rulesets/basic.xml,rulesets/braces.xml,rulesets/clone.xml,rulesets/codesize.xml,rulesets/controversial.xml,rulesets/coupling.xml,rulesets/design.xml,rulesets/finalizers.xml,rulesets/imports.xml,rulesets/j2ee.xml,rulesets/javabeans.xml,rulesets/junit.xml,rulesets/logging-jakarta-commons.xml,rulesets/logging-java.xml,rulesets/migrating.xml,rulesets/naming.xml,rulesets/optimizations.xml,rulesets/strictexception.xml,rulesets/strings.xml,rulesets/sunsecure.xml,rulesets/unusedcode.xml,rulesets/adfbc.xml</pre><br /><!--CRLF--></div><br /></div><br /><br /><p>6. Download the <a href="http://groups.google.com/group/adfgarage/web/adfbc.xml" target="_blank">adfbc.xml ruleset file</a> to the rulesets folder. Now create a new jar called rulesets.jar with the rulesets directory. <a href="http://groups.google.com/group/adfgarage/web/rulesets.jar" target="_blank">You can download the one I’ve prepared from here</a>. Just remember that you still need to remove the original rulesets directory from pmd-4.2.5.jar as explained above.</p><br /><br /><p>7. Back on the pmd-4.2.5.jar, open its <font face="Courier New">META-INF/MANIFEST.MF</font> and add a reference to rulesets.jar:</p><br /><br /><p><font face="Courier New">Manifest-Version: 1.0 <br /> <br />Ant-Version: Apache Ant 1.7.1 <br /><br /> <br />Created-By: 11.2-b01 (Sun Microsystems Inc.) <br /><br /> <br />Main-Class: net.sourceforge.pmd.PMD <br /><br /> <br />Class-Path: jaxen-1.1.1.jar asm-3.1.jar<strong> rulesets.jar</strong></font></p><br /><br /><p>What we did was to remove the rulesets dependency from the original jar to an external jar that we can modify at will. Unfortunately the import rules feature of the extension does not work as one would expect.</p><br /><br /><p>8. Launch JDev and go to Preferences->PMD. You should see the following rule entries at the bottom of the rules list:</p><br /><br /><p><a href="http://lh4.ggpht.com/_45lOvS5bTAk/S8SyjFSHstI/AAAAAAAAAWo/FGHZUtWteZk/s1600-h/PMDCustomRules%5B3%5D.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="PMDCustomRules" border="0" alt="PMDCustomRules" src="http://lh5.ggpht.com/_45lOvS5bTAk/S8Syj8cZRdI/AAAAAAAAAWs/3qR1rZC0A4A/PMDCustomRules_thumb%5B1%5D.png?imgmax=800" width="428" height="315" /></a> </p><br /><br /><p>9. I’ve created a <em>Bad Practice ADF BC </em>Project and added some offending code in my ApplicationModuleImpl class to test the rules. If I right click on my AM java source and pick PMD at the bottom of the context menu this is the the output generated:</p><br /><br /><p><a href="http://lh5.ggpht.com/_45lOvS5bTAk/S8SyksveaYI/AAAAAAAAAWw/EIR2U7OqavU/s1600-h/PMDReport%5B3%5D.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="PMDReport" border="0" alt="PMDReport" src="http://lh6.ggpht.com/_45lOvS5bTAk/S8SylRmg3CI/AAAAAAAAAW0/J9cU1HBQR90/PMDReport_thumb%5B1%5D.png?imgmax=800" width="451" height="366" /></a>  </p><br /><br /><p>Here it is also a call for action: if you want to tackle the task of creating new XPath expressions for ADF, or to improve the existing PMD extension, please get in contact with me. I will try my best to help you.</p><br /><br /><p>I won’t go into the details of writing a custom Java-based rule; the <a href="http://pmd.sourceforge.net/howtowritearule.html" target="_blank">documentation at the PMD site is pretty good</a>. The only drawback is that PMD is not able to analyze XML files, which is an essential feature for a good ADF analysis. For that, I will be unleashing the full power of <strong>ojaudit</strong> and how to write custom audit rules to it. Stay tuned!</p> Maiko Rochahttp://www.blogger.com/profile/17589428760474682504noreply@blogger.com4tag:blogger.com,1999:blog-6659301937075385457.post-32388905020664109182010-04-01T17:02:00.001-07:002010-04-01T17:02:04.398-07:00Quick ADF Faces af:table / af:column tip: case insentive QBE<p> </p> <p>Alright, so today I was playing with the out of the box af:table QBE feature, and I noticed that the inputText filters displayed at the top of the table header were case sensitive. I was intrigued and started to debug some internal classes only to be snapped by my fellow colleagues from the ADF Faces team that this is actually a built-in feature of the af:column tag:</p> <div style="border-bottom: silver 1px solid; text-align: left; border-left: silver 1px solid; padding-bottom: 4px; line-height: 12pt; background-color: #f4f4f4; margin: 20px 0px 10px; padding-left: 4px; width: 97.5%; padding-right: 4px; font-family: 'Courier New', courier, monospace; direction: ltr; max-height: 200px; font-size: 8pt; overflow: auto; border-top: silver 1px solid; cursor: text; border-right: silver 1px solid; padding-top: 4px" id="codeSnippetWrapper"> <div style="border-bottom-style: none; text-align: left; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'Courier New', courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px" id="codeSnippet"> <pre style="border-bottom-style: none; text-align: left; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'Courier New', courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060" id="lnum1"> 1:</span> <span style="color: #0000ff"><</span><span style="color: #800000">af:column</span> <span style="color: #ff0000">sortProperty</span><span style="color: #0000ff">="FirstName"</span> <span style="color: #ff0000">filterable</span><span style="color: #0000ff">="true"</span></pre><br /><!--CRLF--><br /><br /> <pre style="border-bottom-style: none; text-align: left; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'Courier New', courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060" id="lnum2"> 2:</span> <span style="color: #ff0000">sortable</span><span style="color: #0000ff">="true"</span></pre><br /><!--CRLF--><br /><br /> <pre style="border-bottom-style: none; text-align: left; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'Courier New', courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060" id="lnum3"> 3:</span> <span style="color: #ff0000">headerText</span><span style="color: #0000ff">="#{bindings.Employees.hints.FirstName.label}"</span></pre><br /><!--CRLF--><br /><br /> <pre style="border-bottom-style: none; text-align: left; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'Courier New', courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060" id="lnum4"> 4:</span> <span style="color: #ff0000">id</span><span style="color: #0000ff">="resId1c2"</span> <span style="color: #ff0000">width</span><span style="color: #0000ff">="300"</span></pre><br /><!--CRLF--><br /><br /> <pre style="border-bottom-style: none; text-align: left; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'Courier New', courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060" id="lnum5"> 5:</span> <span style="color: #ff0000">filterFeatures</span><span style="color: #0000ff">="caseInsensitive"</span><span style="color: #0000ff">></span></pre><br /><!--CRLF--></div><br /></div><br /><br /><p>This is correctly documented in the <a href="http://jdevadf.oracle.com/adf-richclient-demo/docs/tagdoc/af_column.html" target="_blank"><strong>af:column tag documentation</strong></a>. </p><br /><br /><p>So, lesson learned: read the fraking doc before annoying your developer friends! >_<</p> Maiko Rochahttp://www.blogger.com/profile/17589428760474682504noreply@blogger.com2tag:blogger.com,1999:blog-6659301937075385457.post-17404530316882759052010-02-24T17:34:00.001-08:002010-02-24T17:39:13.188-08:00Fine grained WebCenter customization using MDS<p> </p> <p align="justify">Recently a customer contacted me asking if it is possible to customize WebCenter Spaces or, more specifically, the Content Presenter Component. The requirement is to, according to some arbitrary condition, show the document title property from UCM instead of its file name – unfortunately the title property is not currently publicly exposed – I’ve create Enhancement Request #<b>9392299</b> to make the propertyMap property accessible. For now I will show how you can customize a WebCenter library to add the user that last modified the file will to be shown along the file name.</p> <p align="justify">This is a screenshot of the Document Library File Picker window. Only the filename is shown in the file picker dialog:</p> <p><a href="http://lh4.ggpht.com/_45lOvS5bTAk/S4XTaFRi7vI/AAAAAAAAAUA/MXXRtiSpzYA/s1600-h/ContentPresenterFileBrowserFile1%5B1%5D.png"><img title="ContentPresenterFileBrowserFile1" style="border-top-width: 0px; display: block; border-left-width: 0px; float: none; border-bottom-width: 0px; margin-left: auto; margin-right: auto; border-right-width: 0px" height="343" alt="ContentPresenterFileBrowserFile1" src="http://lh6.ggpht.com/_45lOvS5bTAk/S4XTauYWZeI/AAAAAAAAAUE/6GpGVHG20-g/ContentPresenterFileBrowserFile1_thumb.png?imgmax=800" width="458" border="0" /></a> </p> <p align="justify">At first one would think that this is way too fine grained to be customized, or you would have to actually modify the source code for the page to add your own customizations and running the risk of breaking the component/application in case it is patched/upgraded – or, file an enhancement request that could take a couple of releases to make its way into the product. But that’s not the case with WebCenter and MDS.</p> <p align="justify">As you probably know already, Oracle ADF and MDS are the foundations for WebCenter, so the same customization that can be applied to your own custom applications can be applied to WebCenter Spaces or any of its components in the same way.</p> <p align="justify">This is what you will need for this exercise:</p> <ul> <li><a href="http://www.oracle.com/technology/software/products/jdev/index.html" target="_blank">Oracle JDeveloper 11g, PS1 (11.1.1.2.0)</a> </li> <li>Oracle WebCenter Extension (download it from JDev’s Check For Updates menu) </li> <li><a href="http://e20tricks.blogspot.com/2010/02/webcenter-quick-install-guide.html" target="_blank">Weblogic Server instance with a WebCenter Spaces domain installed</a>. </li> </ul> <h4><strong>Create a customization-enabled application</strong></h4> <p>Fire up JDeveloper and create a new WebCenter Application:</p> <p><a href="http://lh4.ggpht.com/_45lOvS5bTAk/S4XTbOpu4_I/AAAAAAAAAUI/sjZEpGY5tsM/s1600-h/WebCenterAppTemplate%5B1%5D.png"><img title="WebCenterAppTemplate" style="border-top-width: 0px; display: block; border-left-width: 0px; float: none; border-bottom-width: 0px; margin-left: auto; margin-right: auto; border-right-width: 0px" height="308" alt="WebCenterAppTemplate" src="http://lh5.ggpht.com/_45lOvS5bTAk/S4XTbTfW7UI/AAAAAAAAAUM/xKGi2cpsVoM/WebCenterAppTemplate_thumb.png?imgmax=800" width="419" border="0" /></a> </p> <p align="justify">Name it accordingly, and give it also a meaningful package name. Go through the rest of the Application wizard steps and finish it.</p> <p align="justify">For this customization we don’t really need a Customization Class. If you want to use a Customization Class I suggest reading the <a href="http://download.oracle.com/docs/cd/E15523_01/webcenter.1111/e10148/jpsdg_page_editor_mds.htm#JPSDG5236" target="_blank">How to Create a Custom SiteCC Tip Layer</a> section of the Developer’s Guide and also check out this <a href="http://www.oracle.com/technology/products/jdev/11/cuecards/adf_set_18/ccset18_ALL.html" target="_blank">cue card</a>.</p> <p align="justify">Let’s enable customization in our application. Go to Application Resources > Descriptors > ADF META-INF :</p> <p><a href="http://lh5.ggpht.com/_45lOvS5bTAk/S4XTcO8PDpI/AAAAAAAAAUQ/PS6eTfMsNRo/s1600-h/ContentMDSAppRes%5B1%5D.png"><img title="ContentMDSAppRes" style="border-top-width: 0px; display: block; border-left-width: 0px; float: none; border-bottom-width: 0px; margin-left: auto; margin-right: auto; border-right-width: 0px" height="239" alt="ContentMDSAppRes" src="http://lh4.ggpht.com/_45lOvS5bTAk/S4XTcsHYdAI/AAAAAAAAAUU/COKzXyaDnmY/ContentMDSAppRes_thumb.png?imgmax=800" width="352" border="0" /></a> </p> <p align="justify">Double click adf-config.xml to open it in overview mode. Now click on the [+] button and type in “SiteCC” (without quotes!). Select the class and click OK:</p> <p><a href="http://lh6.ggpht.com/_45lOvS5bTAk/S4XTc4GhBII/AAAAAAAAAUY/AKRj9sHTCSQ/s1600-h/SiteCC.png"><img title="SiteCC" style="border-top-width: 0px; display: block; border-left-width: 0px; float: none; border-bottom-width: 0px; margin-left: auto; margin-right: auto; border-right-width: 0px" height="185" alt="SiteCC" src="http://lh3.ggpht.com/_45lOvS5bTAk/S4XTdS8USjI/AAAAAAAAAUc/jDNjPGXBUBc/SiteCC_thumb.png?imgmax=800" width="431" border="0" /></a> </p> <p></p> <p></p> <p align="justify">We also need to enable seeded customizations. For this go to your ViewController project properties, select ADF View and select the Enable seeded customizations checkbox:</p> <p><a href="http://lh4.ggpht.com/_45lOvS5bTAk/S4XTeJmycJI/AAAAAAAAAUg/IqDebUXtdK4/s1600-h/VCSeedCust%5B1%5D.png"><img title="VCSeedCust" style="border-top-width: 0px; display: block; border-left-width: 0px; float: none; border-bottom-width: 0px; margin-left: auto; margin-right: auto; border-right-width: 0px" height="326" alt="VCSeedCust" src="http://lh5.ggpht.com/_45lOvS5bTAk/S4XTebTWOQI/AAAAAAAAAUk/IbaQHUzeNRw/VCSeedCust_thumb.png?imgmax=800" width="439" border="0" /></a> </p> <p><strong></strong></p> <p align="justify">Next, we register the reserved WebCenter layer on on <strong>JDEV_HOME\jdev\CustomizationLayerValues.xml</strong>. <a href="http://www.oracle.com/technology/products/jdev/11/cuecards111/adf_set_18/ccset18_tellme5_1.html" target="_blank">This is the file that where all layers are registered</a>. If you’re using a Customization Class then remember that the layer value in the class must match the value in this file. The WebCenter layer value is not surprisingly called “webcenter”:</p> <div id="codeSnippetWrapper" style="border-right: silver 1px solid; padding-right: 4px; border-top: silver 1px solid; padding-left: 4px; padding-bottom: 4px; margin: 20px 0px 10px; overflow: auto; border-left: silver 1px solid; width: 97.44%; cursor: text; direction: ltr; max-height: 200px; line-height: 12pt; padding-top: 4px; border-bottom: silver 1px solid; height: 210px; background- text-align: leftfont-family:'Courier New', courier, monospace;font-size:8pt;color:#f4f4f4;"> <div id="codeSnippet" style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; overflow: visible; width: 100%; color: black; direction: ltr; border-top-style: none; line-height: 12pt; padding-top: 0px; border-right-style: none; border-left-style: none; background- text-align: left; border-bottom-style: nonefont-family:'Courier New', courier, monospace;font-size:8pt;color:#f4f4f4;"> <pre style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; direction: ltr; border-top-style: none; line-height: 12pt; padding-top: 0px; border-right-style: none; border-left-style: none; background- text-align: left; border-bottom-style: nonefont-family:'Courier New', courier, monospace;font-size:8pt;color:white;"><span id="lnum1" style="color:#606060;"> 1:</span> <span style="color:#0000ff;"><</span><span style="color:#800000;">cust-layers</span> <span style="color:#ff0000;">xmlns</span><span style="color:#0000ff;">="http://xmlns.oracle.com/mds/dt"</span><span style="color:#0000ff;">></span></pre>
<br /><!--CRLF-->
<br />
<br /> <pre style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; direction: ltr; border-top-style: none; line-height: 12pt; padding-top: 0px; border-right-style: none; border-left-style: none; background- text-align: left; border-bottom-style: nonefont-family:'Courier New', courier, monospace;font-size:8pt;color:#f4f4f4;"><span id="lnum2" style="color:#606060;"> 2:</span> <span style="color:#0000ff;"><</span><span style="color:#800000;">cust-layer</span> <span style="color:#ff0000;">name</span><span style="color:#0000ff;">="site"</span> <span style="color:#ff0000;">id-prefix</span><span style="color:#0000ff;">="s"</span><span style="color:#0000ff;">></span></pre>
<br /><!--CRLF-->
<br />
<br /> <pre style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; direction: ltr; border-top-style: none; line-height: 12pt; padding-top: 0px; border-right-style: none; border-left-style: none; background- text-align: left; border-bottom-style: nonefont-family:'Courier New', courier, monospace;font-size:8pt;color:white;"><span id="lnum3" style="color:#606060;"> 3:</span> <span style="color:#008000;"><!-- Generated id-prefix would be "s1" and "s2" for values</span></pre>
<br /><!--CRLF-->
<br />
<br /> <pre style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; direction: ltr; border-top-style: none; line-height: 12pt; padding-top: 0px; border-right-style: none; border-left-style: none; background- text-align: left; border-bottom-style: nonefont-family:'Courier New', courier, monospace;font-size:8pt;color:#f4f4f4;"><span id="lnum4" style="color:#606060;"> 4:</span> <span style="color:#008000;"> "site1" and "site2".--></span></pre>
<br /><!--CRLF-->
<br />
<br /> <pre style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; direction: ltr; border-top-style: none; line-height: 12pt; padding-top: 0px; border-right-style: none; border-left-style: none; background- text-align: left; border-bottom-style: nonefont-family:'Courier New', courier, monospace;font-size:8pt;color:white;"><span id="lnum5" style="color:#606060;"> 5:</span> <span style="color:#0000ff;"><</span><span style="color:#800000;">cust-layer-value</span> <span style="color:#ff0000;">value</span><span style="color:#0000ff;">="site1"</span> <span style="color:#ff0000;">display-name</span><span style="color:#0000ff;">="Site One"</span> <span style="color:#ff0000;">id-prefix</span><span style="color:#0000ff;">="1"</span> <span style="color:#0000ff;">/></span></pre>
<br /><!--CRLF-->
<br />
<br /> <pre style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; direction: ltr; border-top-style: none; line-height: 12pt; padding-top: 0px; border-right-style: none; border-left-style: none; background- text-align: left; border-bottom-style: nonefont-family:'Courier New', courier, monospace;font-size:8pt;color:#f4f4f4;"><span id="lnum6" style="color:#606060;"> 6:</span> <span style="color:#0000ff;"><</span><span style="color:#800000;">cust-layer-value</span> <span style="color:#ff0000;">value</span><span style="color:#0000ff;">="site2"</span> <span style="color:#ff0000;">display-name</span><span style="color:#0000ff;">="Site Two"</span> <span style="color:#ff0000;">id-prefix</span><span style="color:#0000ff;">="2"</span> <span style="color:#0000ff;">/></span></pre>
<br /><!--CRLF-->
<br />
<br /> <pre style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; direction: ltr; border-top-style: none; line-height: 12pt; padding-top: 0px; border-right-style: none; border-left-style: none; background- text-align: left; border-bottom-style: nonefont-family:'Courier New', courier, monospace;font-size:8pt;color:white;"><span id="lnum7" style="color:#606060;"> 7:</span> <span style="color:#008000;"><!-- Generated id-prefix would be "s" for value "site"</span></pre>
<br /><!--CRLF-->
<br />
<br /> <pre style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; direction: ltr; border-top-style: none; line-height: 12pt; padding-top: 0px; border-right-style: none; border-left-style: none; background- text-align: left; border-bottom-style: nonefont-family:'Courier New', courier, monospace;font-size:8pt;color:#f4f4f4;"><span id="lnum8" style="color:#606060;"> 8:</span> <span style="color:#008000;"> since no prefix was specified on the value --></span></pre>
<br /><!--CRLF-->
<br />
<br /> <pre style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; direction: ltr; border-top-style: none; line-height: 12pt; padding-top: 0px; border-right-style: none; border-left-style: none; background- text-align: left; border-bottom-style: nonefont-family:'Courier New', courier, monospace;font-size:8pt;color:white;"><span id="lnum9" style="color:#606060;"> 9:</span> <span style="color:#008000;"><!-- ADF SiteCC always returns the value as "site" --></span></pre>
<br /><!--CRLF-->
<br />
<br /> <pre style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; direction: ltr; border-top-style: none; line-height: 12pt; padding-top: 0px; border-right-style: none; border-left-style: none; background- text-align: left; border-bottom-style: nonefont-family:'Courier New', courier, monospace;font-size:8pt;color:#f4f4f4;"><span id="lnum10" style="color:#606060;"> 10:</span> <span style="color:#0000ff;"><</span><span style="color:#800000;">cust-layer-value</span> <span style="color:#ff0000;">value</span><span style="color:#0000ff;">="site"</span> <span style="color:#ff0000;">display-name</span><span style="color:#0000ff;">="Site"</span><span style="color:#0000ff;">/></span></pre>
<br /><!--CRLF-->
<br />
<br /> <pre style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; direction: ltr; border-top-style: none; line-height: 12pt; padding-top: 0px; border-right-style: none; border-left-style: none; background- text-align: left; border-bottom-style: nonefont-family:'Courier New', courier, monospace;font-size:8pt;color:white;"><span id="lnum11" style="color:#606060;"> 11:</span> <span style="color:#0000ff;"><</span><span style="color:#800000;">cust-layer-value</span> <span style="color:#ff0000;">value</span><span style="color:#0000ff;">="webcenter"</span> <span style="color:#ff0000;">display-name</span><span style="color:#0000ff;">="WebCenter"</span><span style="color:#0000ff;">/></span></pre>
<br /><!--CRLF-->
<br />
<br /> <pre style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; direction: ltr; border-top-style: none; line-height: 12pt; padding-top: 0px; border-right-style: none; border-left-style: none; background- text-align: left; border-bottom-style: nonefont-family:'Courier New', courier, monospace;font-size:8pt;color:#f4f4f4;"><span id="lnum12" style="color:#606060;"> 12:</span> <span style="color:#0000ff;"></</span><span style="color:#800000;">cust-layer</span><span style="color:#0000ff;">></span></pre>
<br /><!--CRLF--></div>
<br /></div>
<br />
<br /><p>Save the file and close it.</p>
<br />
<br /><h4>Customizing an ADF Library</h4>
<br />
<br /><p align="justify">Now we need to start JDeveloper in customization mode. Go to Tools > Preferences > Roles and select <strong>Customization Developer</strong>. JDeveloper will restart automagically. Good time to go grab a coffee or a snack. ;-)</p>
<br />
<br /><p align="justify">After drinking your coffee and/or having your snack, check if the newly added customization layer has been added successfully. You should be able to see it from the Customization Context Panel. Expand the Value listbox and select the WebCenter option":</p>
<br />
<br /><p><a href="http://lh4.ggpht.com/_45lOvS5bTAk/S4XTetuUxNI/AAAAAAAAAUo/zEZoZXSkTdc/s1600-h/CustContext%5B1%5D.png"><img title="CustContext" style="border-top-width: 0px; display: block; border-left-width: 0px; float: none; border-bottom-width: 0px; margin-left: auto; margin-right: auto; border-right-width: 0px" height="313" alt="CustContext" src="http://lh4.ggpht.com/_45lOvS5bTAk/S4XTfDLCd0I/AAAAAAAAAUs/1VPcaAAbVfE/CustContext_thumb.png?imgmax=800" width="434" border="0" /></a> </p>
<br />
<br /><p align="justify">Go to the Navigator Display Options (yes, there’s a name for that icon) and select Show Libraries:</p>
<br />
<br /><p><a href="http://lh3.ggpht.com/_45lOvS5bTAk/S4XTfVrw8JI/AAAAAAAAAUw/9xsQURFwXHU/s1600-h/ShowLibraries%5B1%5D.png"><img title="ShowLibraries" style="border-top-width: 0px; display: block; border-left-width: 0px; float: none; border-bottom-width: 0px; margin-left: auto; margin-right: auto; border-right-width: 0px" height="194" alt="ShowLibraries" src="http://lh5.ggpht.com/_45lOvS5bTAk/S4XTf9UoajI/AAAAAAAAAU0/R2RIv0-59Vo/ShowLibraries_thumb%5B1%5D.png?imgmax=800" width="354" border="0" /></a> </p>
<br />
<br /><p align="justify">Here I also recommend setting your <strong>Package Level</strong> and <strong>Web Content Level</strong> to “Unlimited” so you don’t have to journey into the center of Earth to find what you’re looking for.</p>
<br />
<br /><p align="justify">Now you should see all the libraries that have been included by default to your ViewController project when it was created. </p>
<br />
<br /><h4>Hunting for that surreptitious JSPX or JSFF that we need to customize.</h4>
<br />
<br /><p align="justify">Just in case you don’t know the meaning of the word above, <a href="http://en.wiktionary.org/wiki/surreptitious" target="_blank">here it is</a>. Hey, I’m not a native English speaker and I like to learn new words!</p>
<br />
<br /><p align="justify">This is where things get really interesting. We now need to find the needle in the haystack. Currently there’s no documentation for the JSPXs/JSFFs inside WebCenter ADF Libraries, and I wouldn’t count for one coming out before the Universe collapses again into a singularity. Due to the sheer amount of files it would be a maintenance nightmare to keep them semantically and syntactically aligned with any external documentation – although I have some ideas myself on how you could do that using RDF (more on that later) . Anyway, that means that we will need to do some investigative work to find out where the file we need to customize is located</p>
<br />
<br /><p align="justify">Start by locating the ADF Library that most probably has the file. Go to your ViewController project properties > Libraries and Classpath > Add Library and locate the <strong>WebCenter Document Library Service View</strong> :</p>
<br />
<br /><p> <a href="http://lh5.ggpht.com/_45lOvS5bTAk/S4XTgVvKy7I/AAAAAAAAAU4/APufh3_GUJU/s1600-h/AddLibDocLibView%5B9%5D.png"><img title="AddLibDocLibView" style="border-top-width: 0px; display: block; border-left-width: 0px; float: none; border-bottom-width: 0px; margin-left: auto; margin-right: auto; border-right-width: 0px" height="385" alt="AddLibDocLibView" src="http://lh5.ggpht.com/_45lOvS5bTAk/S4XTg0owgtI/AAAAAAAAAU8/KbEmbrQsFC0/AddLibDocLibView_thumb%5B8%5D.png?imgmax=800" width="274" border="0" /></a> </p>
<br />
<br /><p align="justify">Go back to your ViewController project and locate the library - it was most probably added at the bottom. Now relax, take a deep breath an expand the library node. Look for a package named <strong>oracle.webcenter.doclib.view.jsf.fragments</strong> . Within it you’ll find the <strong>docPickerView.jsff</strong> file. That’s our needle!</p>
<br />
<br /><p><a href="http://lh4.ggpht.com/_45lOvS5bTAk/S4XThBz-KoI/AAAAAAAAAVA/ETdeWe-MeE4/s1600-h/docPickerView%5B1%5D.png"><img title="docPickerView" style="border-top-width: 0px; display: block; border-left-width: 0px; float: none; border-bottom-width: 0px; margin-left: auto; margin-right: auto; border-right-width: 0px" height="402" alt="docPickerView" src="http://lh3.ggpht.com/_45lOvS5bTAk/S4XThf5ABWI/AAAAAAAAAVE/OCGkAyCq4PU/docPickerView_thumb.png?imgmax=800" width="363" border="0" /></a> </p>
<br />
<br /><p>Now that we found the fragment let’s take a peek at its structure and pinpoint where we need to add our customization. By drilling down into the fragment structure we can see <strong><span style="font-family:Courier New;">af:panelStrechtLayout (center) > af:switcher > f:facet(tree) > af:tree (nodeStamp) > af:panelGroupLayout > af:outputText</span></strong> :</p>
<br />
<br /><p><a href="http://lh5.ggpht.com/_45lOvS5bTAk/S4XThwhw69I/AAAAAAAAAVI/5fBB92RP-E8/s1600-h/StructPanePickView%5B1%5D.png"><img title="StructPanePickView" style="border-top-width: 0px; display: block; border-left-width: 0px; float: none; border-bottom-width: 0px; margin-left: auto; margin-right: auto; border-right-width: 0px" height="432" alt="StructPanePickView" src="http://lh4.ggpht.com/_45lOvS5bTAk/S4XTibVtpiI/AAAAAAAAAVM/o4Bj4zZwqu8/StructPanePickView_thumb.png?imgmax=800" width="391" border="0" /></a> </p>
<br />
<br /><p align="justify">The output text value property, <strong><span style="font-family:Courier New;">#{item.name}</span></strong>, is the one that renders the filename. Now we need to add a new outputText that will show who last modified the file, but how do you know what properties you can use to populate the outputText value property? </p>
<br />
<br /><p align="justify">This is the part where things get a bit tricky. There’s no public documentation on what’s being exposed by the item object. After some investigative work I could find that it exposes very few properties like mIMEType, (file)name, lastModifiedBy, lastModified,createDate, and contentType. This is not documented because they are exposed by an internal class called <a name="file1"><strong>VCRMainViewItemBean</strong>. This class also has a boolean isFolder method that we’ll be using to render or not the new outputText we will add to the page. You can find other properties from the jsff page source itself, eg, <strong>#{item.icon}</strong> returns the icon image for a specific file type.</a></p>
<br />
<br /><p align="justify">As I said at the beginning of this post, we don’t have access to the propertyMap object that is exposed by default when you are working with the Content Datacontrol or with Content Presenter. If you want to know more about this just take a look at the chapter <a href="http://download.oracle.com/docs/cd/E15523_01/webcenter.1111/e10148/jpsdg_content.htm" target="_blank">Integrating Content of WebCenter Developer’s Guide</a> that explains all the properties that you can use when working with Content Producers in WebCenter, more specifically, <a href="http://download.oracle.com/docs/cd/E15523_01/webcenter.1111/e10148/jpsdg_content.htm#CHDDEIGB" target="_blank">this table</a> which lists Oracle UCM properties used by the content adapater. </p>
<br />
<br /><p align="justify">So let’s add a new outputText. <strong>First of all, when you’re on customization mode you’re not able to edit a JSPX/JSFF by editing its source</strong>; you have to use the <strong>Visual Editor</strong> and the <strong>Property Inspector</strong> for that. From the Component Palette, drag and drop a new outputText just below the existing one:</p>
<br />
<br /><p align="justify"><a href="http://lh3.ggpht.com/_45lOvS5bTAk/S4XTizs-V8I/AAAAAAAAAVQ/XDnx4oBKQHg/s1600-h/CustomOutputText%5B4%5D.png"><img title="CustomOutputText" style="border-top-width: 0px; display: block; border-left-width: 0px; float: none; border-bottom-width: 0px; margin-left: auto; margin-right: auto; border-right-width: 0px" height="430" alt="CustomOutputText" src="http://lh6.ggpht.com/_45lOvS5bTAk/S4XTjWxna3I/AAAAAAAAAVU/7-xhkHn_Z3g/CustomOutputText_thumb%5B2%5D.png?imgmax=800" width="465" border="0" /></a> </p>
<br />
<br /><p align="justify">Can you spot what’s strange in the picture above? The Value property is being represented as disabled, but fear not, if you click on the down arrow to the right and bring up the Expression Builder you will be able to change it – not the best usability example, I know. But also notice at the same time how JDev nicely indicates to which layer this customization is being applied. So bring up the Expression builder and enter the following expression:</p>
<br />
<br /><p align="justify">#{'('}#{item.lastModifiedBy}#{')'}</p>
<br />
<br /><p align="justify">Literal strings are not supported by MDS, so we need to surround them with EL or, better, use a Text Resource (resource bundle). For this example a Resource bundle is a bit overkill.</p>
<br />
<br /><p align="justify"><a href="http://lh5.ggpht.com/_45lOvS5bTAk/S4XTjnLxvWI/AAAAAAAAAVY/CGzpGIJrvow/s1600-h/ExpressionBuilder%5B6%5D.png"><img title="ExpressionBuilder" style="border-top-width: 0px; display: block; border-left-width: 0px; float: none; border-bottom-width: 0px; margin-left: auto; margin-right: auto; border-right-width: 0px" height="250" alt="ExpressionBuilder" src="http://lh3.ggpht.com/_45lOvS5bTAk/S4XTkPQ93KI/AAAAAAAAAVc/CpvzNFbW1VQ/ExpressionBuilder_thumb%5B3%5D.png?imgmax=800" width="457" border="0" /></a> </p>
<br />
<br /><p align="justify">Select the rendered property, bring up the Expression Editor and enter the following expression:</p>
<br />
<br /><p align="justify">#{!item.folder}</p>
<br />
<br /><p align="justify">This will guarantee that the outputText won’t be rendered if it is a folder. </p>
<br />
<br /><p align="justify">It is interesting to see here how the customization is stored by mds. Notice that it uses the same package structure as the basis for the customization, then is adds the mds namespace identifier (mdssys), the customization identifier (cust), the tip layer (site) and the layer value (webcenter).</p>
<br />
<br /><p align="justify"><a href="http://lh4.ggpht.com/_45lOvS5bTAk/S4XTkfE1EEI/AAAAAAAAAVg/p9Ci1fV7iWA/s1600-h/LibCustomDelta%5B1%5D.png"><img title="LibCustomDelta" style="border-top-width: 0px; display: block; border-left-width: 0px; float: none; border-bottom-width: 0px; margin-left: auto; margin-right: auto; border-right-width: 0px" height="405" alt="LibCustomDelta" src="http://lh5.ggpht.com/_45lOvS5bTAk/S4XTk9JYiqI/AAAAAAAAAVk/qgOZAFKL-fs/LibCustomDelta_thumb.png?imgmax=800" width="438" border="0" /></a></p>
<br />
<br /><p align="justify">Then you can see that the xml file that has only the things you customized (the “delta”):</p>
<br />
<br /><div id="codeSnippetWrapper" style="border-right: silver 1px solid; padding-right: 4px; border-top: silver 1px solid; padding-left: 4px; padding-bottom: 4px; margin: 20px 0px 10px; overflow: auto; border-left: silver 1px solid; width: 97.5%; cursor: text; direction: ltr; max-height: 200px; line-height: 12pt; padding-top: 4px; border-bottom: silver 1px solid; background- text-align: leftfont-family:'Courier New', courier, monospace;font-size:8pt;color:#f4f4f4;">
<br /> <div id="codeSnippet" style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; overflow: visible; width: 100%; color: black; direction: ltr; border-top-style: none; line-height: 12pt; padding-top: 0px; border-right-style: none; border-left-style: none; background- text-align: left; border-bottom-style: nonefont-family:'Courier New', courier, monospace;font-size:8pt;color:#f4f4f4;">
<br /> <pre style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; direction: ltr; border-top-style: none; line-height: 12pt; padding-top: 0px; border-right-style: none; border-left-style: none; background- text-align: left; border-bottom-style: nonefont-family:'Courier New', courier, monospace;font-size:8pt;color:white;"><span id="lnum1" style="color:#606060;"> 1:</span> <span style="color:#0000ff;"><</span><span style="color:#800000;">mds:customization</span> <span style="color:#ff0000;">version</span><span style="color:#0000ff;">="11.1.1.55.36"</span></pre>
<br /><!--CRLF-->
<br />
<br /> <pre style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; direction: ltr; border-top-style: none; line-height: 12pt; padding-top: 0px; border-right-style: none; border-left-style: none; background- text-align: left; border-bottom-style: nonefont-family:'Courier New', courier, monospace;font-size:8pt;color:#f4f4f4;"><span id="lnum2" style="color:#606060;"> 2:</span> <span style="color:#ff0000;">xmlns:mds</span><span style="color:#0000ff;">="http://xmlns.oracle.com/mds"</span><span style="color:#0000ff;">></span></pre>
<br /><!--CRLF-->
<br />
<br /> <pre style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; direction: ltr; border-top-style: none; line-height: 12pt; padding-top: 0px; border-right-style: none; border-left-style: none; background- text-align: left; border-bottom-style: nonefont-family:'Courier New', courier, monospace;font-size:8pt;color:white;"><span id="lnum3" style="color:#606060;"> 3:</span> <span style="color:#0000ff;"><</span><span style="color:#800000;">mds:insert</span> <span style="color:#ff0000;">parent</span><span style="color:#0000ff;">="dlPkVw"</span> <span style="color:#ff0000;">position</span><span style="color:#0000ff;">="last"</span></pre>
<br /><!--CRLF-->
<br />
<br /> <pre style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; direction: ltr; border-top-style: none; line-height: 12pt; padding-top: 0px; border-right-style: none; border-left-style: none; background- text-align: left; border-bottom-style: nonefont-family:'Courier New', courier, monospace;font-size:8pt;color:#f4f4f4;"><span id="lnum4" style="color:#606060;"> 4:</span> <span style="color:#ff0000;">xmlns:f</span><span style="color:#0000ff;">="http://java.sun.com/jsf/core"</span><span style="color:#0000ff;">></span></pre>
<br /><!--CRLF-->
<br />
<br /> <pre style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; direction: ltr; border-top-style: none; line-height: 12pt; padding-top: 0px; border-right-style: none; border-left-style: none; background- text-align: left; border-bottom-style: nonefont-family:'Courier New', courier, monospace;font-size:8pt;color:white;"><span id="lnum5" style="color:#606060;"> 5:</span> <span style="color:#0000ff;"><</span><span style="color:#800000;">f:facet</span> <span style="color:#ff0000;">xmlns:f</span><span style="color:#0000ff;">="http://java.sun.com/jsf/core"</span> <span style="color:#ff0000;">name</span><span style="color:#0000ff;">="bottom"</span><span style="color:#0000ff;">/></span></pre>
<br /><!--CRLF-->
<br />
<br /> <pre style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; direction: ltr; border-top-style: none; line-height: 12pt; padding-top: 0px; border-right-style: none; border-left-style: none; background- text-align: left; border-bottom-style: nonefont-family:'Courier New', courier, monospace;font-size:8pt;color:#f4f4f4;"><span id="lnum6" style="color:#606060;"> 6:</span> <span style="color:#0000ff;"></</span><span style="color:#800000;">mds:insert</span><span style="color:#0000ff;">></span></pre>
<br /><!--CRLF-->
<br />
<br /> <pre style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; direction: ltr; border-top-style: none; line-height: 12pt; padding-top: 0px; border-right-style: none; border-left-style: none; background- text-align: left; border-bottom-style: nonefont-family:'Courier New', courier, monospace;font-size:8pt;color:white;"><span id="lnum7" style="color:#606060;"> 7:</span> <span style="color:#0000ff;"><</span><span style="color:#800000;">mds:insert</span> <span style="color:#ff0000;">parent</span><span style="color:#0000ff;">="dldpvpgl6"</span> <span style="color:#ff0000;">position</span><span style="color:#0000ff;">="last"</span></pre>
<br /><!--CRLF-->
<br />
<br /> <pre style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; direction: ltr; border-top-style: none; line-height: 12pt; padding-top: 0px; border-right-style: none; border-left-style: none; background- text-align: left; border-bottom-style: nonefont-family:'Courier New', courier, monospace;font-size:8pt;color:#f4f4f4;"><span id="lnum8" style="color:#606060;"> 8:</span> <span style="color:#ff0000;">xmlns:af</span><span style="color:#0000ff;">="http://xmlns.oracle.com/adf/faces/rich"</span><span style="color:#0000ff;">></span></pre>
<br /><!--CRLF-->
<br />
<br /> <pre style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; direction: ltr; border-top-style: none; line-height: 12pt; padding-top: 0px; border-right-style: none; border-left-style: none; background- text-align: left; border-bottom-style: nonefont-family:'Courier New', courier, monospace;font-size:8pt;color:white;"><span id="lnum9" style="color:#606060;"> 9:</span> <span style="color:#0000ff;"><</span><span style="color:#800000;">af:outputText</span> <span style="color:#ff0000;">xmlns:af</span><span style="color:#0000ff;">="http://xmlns.oracle.com/adf/faces/rich"</span></pre>
<br /><!--CRLF-->
<br />
<br /> <pre style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; direction: ltr; border-top-style: none; line-height: 12pt; padding-top: 0px; border-right-style: none; border-left-style: none; background- text-align: left; border-bottom-style: nonefont-family:'Courier New', courier, monospace;font-size:8pt;color:#f4f4f4;"><span id="lnum10" style="color:#606060;"> 10:</span> <span style="color:#ff0000;">value</span><span style="color:#0000ff;">="#{'('}#{item.lastModifiedBy}#{')'}"</span> <span style="color:#ff0000;">id</span><span style="color:#0000ff;">="sot1"</span></pre>
<br /><!--CRLF-->
<br />
<br /> <pre style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; direction: ltr; border-top-style: none; line-height: 12pt; padding-top: 0px; border-right-style: none; border-left-style: none; background- text-align: left; border-bottom-style: nonefont-family:'Courier New', courier, monospace;font-size:8pt;color:white;"><span id="lnum11" style="color:#606060;"> 11:</span> <span style="color:#ff0000;">rendered</span><span style="color:#0000ff;">="#{!item.folder}"</span><span style="color:#0000ff;">/></span></pre>
<br /><!--CRLF-->
<br />
<br /> <pre style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; direction: ltr; border-top-style: none; line-height: 12pt; padding-top: 0px; border-right-style: none; border-left-style: none; background- text-align: left; border-bottom-style: nonefont-family:'Courier New', courier, monospace;font-size:8pt;color:#f4f4f4;"><span id="lnum12" style="color:#606060;"> 12:</span> <span style="color:#0000ff;"></</span><span style="color:#800000;">mds:insert</span><span style="color:#0000ff;">></span></pre>
<br /><!--CRLF-->
<br />
<br /> <pre style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; direction: ltr; border-top-style: none; line-height: 12pt; padding-top: 0px; border-right-style: none; border-left-style: none; background- text-align: left; border-bottom-style: nonefont-family:'Courier New', courier, monospace;font-size:8pt;color:white;"><span id="lnum13" style="color:#606060;"> 13:</span> <span style="color:#0000ff;"></</span><span style="color:#800000;">mds:customization</span><span style="color:#0000ff;">></span></pre>
<br /><!--CRLF--></div>
<br /></div>
<br />
<br /><h3> </h3>
<br />
<br /><h3>Deploying the customization to MDS</h3>
<br />
<br /><p align="justify">Now that the actual customization is done we need to package it in a Metadata Archive (MAR) for deployment. From the <strong>Application Menu</strong>, select <strong>Application Properties</strong>…</p>
<br />
<br /><p><strong><a href="http://lh4.ggpht.com/_45lOvS5bTAk/S4XTlZEZKyI/AAAAAAAAAVo/sHYvg6PgTWA/s1600-h/AppProp%5B1%5D.png"><img title="AppProp" style="border-top-width: 0px; display: block; border-left-width: 0px; float: none; border-bottom-width: 0px; margin-left: auto; margin-right: auto; border-right-width: 0px" height="340" alt="AppProp" src="http://lh6.ggpht.com/_45lOvS5bTAk/S4XTlpaGcEI/AAAAAAAAAVs/rKF3EXMoNKs/AppProp_thumb.png?imgmax=800" width="270" border="0" /></a> </strong></p>
<br />
<br /><p>… then select <strong>Deployment</strong>. Click on the <strong>[New…]</strong> button and select MAR File from the Archive Type listbox. Enter any meaningful name, eg, <strong>customFilePicker</strong>. Although it’s not required, I consider a good practice to uncheck all checkboxes in the Deployment panel to avoid any unwanted files in the archive:</p>
<br />
<br /><p><strong><a href="http://lh5.ggpht.com/_45lOvS5bTAk/S4XTmOTXa4I/AAAAAAAAAVw/0SMhFoUuflI/s1600-h/DepProf%5B1%5D.png"><img title="DepProf" style="border-top-width: 0px; display: block; border-left-width: 0px; float: none; border-bottom-width: 0px; margin-left: auto; margin-right: auto; border-right-width: 0px" height="318" alt="DepProf" src="http://lh3.ggpht.com/_45lOvS5bTAk/S4XTmhob2uI/AAAAAAAAAV0/MEz5zv_v8Z8/DepProf_thumb.png?imgmax=800" width="439" border="0" /></a> </strong></p>
<br />
<br /><p>From the <strong>Application Menu</strong>, select Deploy > customFilePicker:</p>
<br />
<br /><p><a href="http://lh5.ggpht.com/_45lOvS5bTAk/S4XTm86oq-I/AAAAAAAAAV4/ExvZrW-i-ZA/s1600-h/DeployCustom%5B1%5D.png"><img title="DeployCustom" style="border-top-width: 0px; display: block; border-left-width: 0px; float: none; border-bottom-width: 0px; margin-left: auto; margin-right: auto; border-right-width: 0px" height="156" alt="DeployCustom" src="http://lh3.ggpht.com/_45lOvS5bTAk/S4XTnVtoNzI/AAAAAAAAAV8/49Kr92FB_ko/DeployCustom_thumb.png?imgmax=800" width="448" border="0" /></a> </p>
<br />
<br /><p align="justify">Select the option to generate a jar file; currently you cannot deploy a MAR file from within JDev, so we need to use WSLT tool for that. If your WebCenter Spaces is running in a different machine than transfer the MAR file to it.</p>
<br />
<br /><p align="justify">On your WebCenter Spaces installation home go to <span style="font-family:Courier New;"><strong>WEBCENTER_ORACLE_HOME</strong>/common/bin</span>. In my case,it is <strong>/<span style="font-family:Courier New;">fmw/middleware/Oracle_WC1</span></strong><span style="font-family:Courier New;">/common/bin</span> . Now, run the wlst.sh or wlst.cmd script. Now you need to connect to the admin server by using the <a href="http://download.oracle.com/docs/cd/E15523_01/web.1111/e13813/reference.htm#i1005916" target="_blank">connect command</a>:</p>
<br />
<br /><pre class="csharpcode">wls:/offline> connect (<span class="str">'weblogic'</span>,<span class="str">'welcome1'</span>,<span class="str">'t3://ateam-hq67:7001'</span>)
<br />Connecting to t3:<span class="rem">//ateam-hq67:7001 with userid weblogic ...</span>
<br />Successfully connected to Admin Server <span class="str">'AdminServer'</span> that belongs to domain <span class="str">'wc_domain'</span>.
<br />
<br />Warning: An insecure protocol was used to connect to the
<br />server. To ensure on-the-wire security, the SSL port or
<br />Admin port should be used instead.
<br />
<br />wls:/wc_domain/serverConfig> </pre>
<br /><style type="text/css"><br /><br /><br /><br />.csharpcode, .csharpcode pre<br />{<br /> font-size: small;<br /> color: black;<br /> font-family: consolas, "Courier New", courier, monospace;<br /> background-color: #ffffff;<br /> /*white-space: pre;*/<br />}<br />.csharpcode pre { margin: 0em; }<br />.csharpcode .rem { color: #008000; }<br />.csharpcode .kwrd { color: #0000ff; }<br />.csharpcode .str { color: #006080; }<br />.csharpcode .op { color: #0000c0; }<br />.csharpcode .preproc { color: #cc6633; }<br />.csharpcode .asp { background-color: #ffff00; }<br />.csharpcode .html { color: #800000; }<br />.csharpcode .attr { color: #ff0000; }<br />.csharpcode .alt <br />{<br /> background-color: #f4f4f4;<br /> width: 100%;<br /> margin: 0em;<br />}<br />.csharpcode .lnum { color: #606060; }</style>
<br />
<br /><p>Where <strong>weblogic</strong> is the admin user, <strong>welcome1</strong> is the password and <strong>t3://ateam-hq67:7001</strong> is the admin URL.</p>
<br />
<br /><p align="justify">Before deploying our customization let’s create a new metadata label - MDS works much like a Version Control System. That way if we mess up the customization we can always revert back by using the <a href="http://download.oracle.com/docs/cd/E12839_01/web.1111/e13813/custom_mds.htm#CHDGHDCJ" target="_blank">promoteMetadataLabel command</a> and avoid headaches. You create a label with the <a href="http://download.oracle.com/docs/cd/E15523_01/web.1111/e13813/custom_mds.htm#WLSTC1668" target="_blank">createMetadataLabel command</a>:</p>
<br />
<br /><pre class="csharpcode">wls:/wc_domain/serverConfig> createMetadataLabel(<span class="str">'webcenter'</span>,<span class="str">'WLS_Spaces'</span>,<span class="str">'preCustomFilePicker'</span>);
<br />
<br />Executing operation: createMetadataLabel.
<br />
<br />Created metadata label <span class="str">"preCustomFilePicker"</span>.</pre>
<br />
<br /><p align="justify">Where <strong>webcenter</strong> is the application name, <strong>WLS_Spaces</strong> the server name, and <strong>preCustomFilePicker</strong> the metadata label.<style type="text/css"><br /><br /><br /><br />.csharpcode, .csharpcode pre<br />{<br /> font-size: small;<br /> color: black;<br /> font-family: consolas, "Courier New", courier, monospace;<br /> background-color: #ffffff;<br /> /*white-space: pre;*/<br />}<br />.csharpcode pre { margin: 0em; }<br />.csharpcode .rem { color: #008000; }<br />.csharpcode .kwrd { color: #0000ff; }<br />.csharpcode .str { color: #006080; }<br />.csharpcode .op { color: #0000c0; }<br />.csharpcode .preproc { color: #cc6633; }<br />.csharpcode .asp { background-color: #ffff00; }<br />.csharpcode .html { color: #800000; }<br />.csharpcode .attr { color: #ff0000; }<br />.csharpcode .alt <br />{<br /> background-color: #f4f4f4;<br /> width: 100%;<br /> margin: 0em;<br />}<br />.csharpcode .lnum { color: #606060; }</style></p>
<br />
<br /><p>And finally we import the MAR file with the <a href="http://download.oracle.com/docs/cd/E15523_01/web.1111/e13813/custom_mds.htm#WLSTC1658" target="_blank">importMetadata command</a>:</p>
<br />
<br /><div id="codeSnippetWrapper" style="border-right: silver 1px solid; padding-right: 4px; border-top: silver 1px solid; padding-left: 4px; padding-bottom: 4px; margin: 20px 0px 10px; overflow: auto; border-left: silver 1px solid; width: 97.5%; cursor: text; direction: ltr; max-height: 200px; line-height: 12pt; padding-top: 4px; border-bottom: silver 1px solid; background- text-align: leftfont-family:'Courier New', courier, monospace;font-size:8pt;color:#f4f4f4;">
<br /> <div id="codeSnippet" style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; overflow: visible; width: 100%; color: black; direction: ltr; border-top-style: none; line-height: 12pt; padding-top: 0px; border-right-style: none; border-left-style: none; background- text-align: left; border-bottom-style: nonefont-family:'Courier New', courier, monospace;font-size:8pt;color:#f4f4f4;">
<br /> <pre style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; direction: ltr; border-top-style: none; line-height: 12pt; padding-top: 0px; border-right-style: none; border-left-style: none; background- text-align: left; border-bottom-style: nonefont-family:'Courier New', courier, monospace;font-size:8pt;color:white;"><span id="lnum1" style="color:#606060;"> 1:</span> wls:/wc_domain/serverConfig> importMetadata(application=<span style="color:#006080;">'webcenter'</span>,server=<span style="color:#006080;">'WLS_Spaces'</span>,fromLocation=<span style="color:#006080;">'/tmp/customFilePicker.mar'</span>)</pre>
<br /><!--CRLF-->
<br />
<br /> <pre style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; direction: ltr; border-top-style: none; line-height: 12pt; padding-top: 0px; border-right-style: none; border-left-style: none; background- text-align: left; border-bottom-style: nonefont-family:'Courier New', courier, monospace;font-size:8pt;color:#f4f4f4;"><span id="lnum2" style="color:#606060;"> 2:</span> </pre>
<br /><!--CRLF-->
<br />
<br /> <pre style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; direction: ltr; border-top-style: none; line-height: 12pt; padding-top: 0px; border-right-style: none; border-left-style: none; background- text-align: left; border-bottom-style: nonefont-family:'Courier New', courier, monospace;font-size:8pt;color:white;"><span id="lnum3" style="color:#606060;"> 3:</span> Executing operation: importMetadata.</pre>
<br /><!--CRLF-->
<br />
<br /> <pre style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; direction: ltr; border-top-style: none; line-height: 12pt; padding-top: 0px; border-right-style: none; border-left-style: none; background- text-align: left; border-bottom-style: nonefont-family:'Courier New', courier, monospace;font-size:8pt;color:#f4f4f4;"><span id="lnum4" style="color:#606060;"> 4:</span> </pre>
<br /><!--CRLF-->
<br />
<br /> <pre style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; direction: ltr; border-top-style: none; line-height: 12pt; padding-top: 0px; border-right-style: none; border-left-style: none; background- text-align: left; border-bottom-style: nonefont-family:'Courier New', courier, monospace;font-size:8pt;color:white;"><span id="lnum5" style="color:#606060;"> 5:</span> Operation <span style="color:#006080;">"importMetadata"</span> completed. Summary of <span style="color:#006080;">"importMetadata"</span> operation is:</pre>
<br /><!--CRLF-->
<br />
<br /> <pre style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; direction: ltr; border-top-style: none; line-height: 12pt; padding-top: 0px; border-right-style: none; border-left-style: none; background- text-align: left; border-bottom-style: nonefont-family:'Courier New', courier, monospace;font-size:8pt;color:#f4f4f4;"><span id="lnum6" style="color:#606060;"> 6:</span> List of documents successfully transferred:</pre>
<br /><!--CRLF-->
<br />
<br /> <pre style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; direction: ltr; border-top-style: none; line-height: 12pt; padding-top: 0px; border-right-style: none; border-left-style: none; background- text-align: left; border-bottom-style: nonefont-family:'Courier New', courier, monospace;font-size:8pt;color:white;"><span id="lnum7" style="color:#606060;"> 7:</span> </pre>
<br /><!--CRLF-->
<br />
<br /> <pre style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; direction: ltr; border-top-style: none; line-height: 12pt; padding-top: 0px; border-right-style: none; border-left-style: none; background- text-align: left; border-bottom-style: nonefont-family:'Courier New', courier, monospace;font-size:8pt;color:#f4f4f4;"><span id="lnum8" style="color:#606060;"> 8:</span> /oracle/webcenter/doclib/view/jsf/fragments/mdssys/cust/site/webcenter/docPickerView.jsff.xml</pre>
<br /><!--CRLF-->
<br />
<br /> <pre style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; direction: ltr; border-top-style: none; line-height: 12pt; padding-top: 0px; border-right-style: none; border-left-style: none; background- text-align: left; border-bottom-style: nonefont-family:'Courier New', courier, monospace;font-size:8pt;color:white;"><span id="lnum9" style="color:#606060;"> 9:</span> </pre>
<br /><!--CRLF-->
<br />
<br /> <pre style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; direction: ltr; border-top-style: none; line-height: 12pt; padding-top: 0px; border-right-style: none; border-left-style: none; background- text-align: left; border-bottom-style: nonefont-family:'Courier New', courier, monospace;font-size:8pt;color:#f4f4f4;"><span id="lnum10" style="color:#606060;"> 10:</span> 1 documents successfully transferred. </pre>
<br /><!--CRLF--></div>
<br /></div>
<br />
<br /><p align="justify">When you enter the <strong>fromLocation</strong> attribute make sure to use the full file path – you cannot use relative paths.</p>
<br />
<br /><p align="justify">All these commands have <a href="http://download.oracle.com/docs/cd/E12524_01/webcenter.1013/e12434/jpsdg_deploy.htm#BGBIIFCC" target="_blank">ANT tasks counterparts</a> so you can script the whole process.</p>
<br />
<br /><p align="justify">The cool part here is that you don’t need to bounce the server to see your new customizations in action!</p>
<br />
<br /><h3><strong>Using the customized component!</strong></h3>
<br />You can test the customization by editing a page on WebCenter Spaces and adding a new Content Presenter document. Put the page in Edit Mode, then click on Add Content and from the Resource Catalog popup select Documents > Content Presenter. Remember that you will need an UCM instance connection configured for that:
<br />
<br />
<br /><p align="justify"><a href="http://lh6.ggpht.com/_45lOvS5bTAk/S4XTn4BlOCI/AAAAAAAAAWA/0toQI-aAeeg/s1600-h/ResourceCatalog%5B5%5D.png"><img title="ResourceCatalog" style="border-top-width: 0px; display: block; border-left-width: 0px; float: none; border-bottom-width: 0px; margin-left: auto; margin-right: auto; border-right-width: 0px" height="360" alt="ResourceCatalog" src="http://lh4.ggpht.com/_45lOvS5bTAk/S4XToNTWa5I/AAAAAAAAAWE/jhw6L7NAb7w/ResourceCatalog_thumb%5B3%5D.png?imgmax=800" width="472" border="0" /></a> </p>
<br />
<br /><p align="justify">From the Content Presenter region, click on the little wrench icon to set up the content to be shown. From the popup, click the Content tab and then the Browse button. The file picker popup will show up with the customization:</p>
<br />
<br /><p><a href="http://lh5.ggpht.com/_45lOvS5bTAk/S4XTolLp0FI/AAAAAAAAAWI/70lx99LTcjo/s1600-h/CustomFinal%5B6%5D.png"><img title="CustomFinal" style="border-top-width: 0px; display: block; border-left-width: 0px; float: none; border-bottom-width: 0px; margin-left: auto; margin-right: auto; border-right-width: 0px" height="368" alt="CustomFinal" src="http://lh4.ggpht.com/_45lOvS5bTAk/S4XTpJQyXpI/AAAAAAAAAWM/x4sAreI8Qfo/CustomFinal_thumb%5B4%5D.png?imgmax=800" width="481" border="0" /></a> </p>
<br />
<br /><p align="justify">Now our file picker is showing up who has last modified the files stored in UCM.</p>
<br />
<br /><p align="justify">What you should take from this post is not the exercise per se, but all the things involved when you’re customizing an application and how powerful it is. Hope that you enjoyed and can put it to good use!</p> Maiko Rochahttp://www.blogger.com/profile/17589428760474682504noreply@blogger.com2tag:blogger.com,1999:blog-6659301937075385457.post-38212643800406323612009-10-23T10:46:00.000-07:002009-10-23T10:51:48.559-07:00Where's the Javadoc for ADF 11g?If you're using JDev you can have access to the ADF API through different ways. My preferred one is by selecting the class in the source editor and pressing F1 for the full javadoc or Ctrl+D to have the mini-javadoc view (if you have the source code jars) popping up. Another way is to use the global search field on the top right of the IDE.<div><br /></div><div>Sometimes you also want to link the reference to the API from, for example, a blog post. In this case you can access the whole ADF 11g API reference from this link: <a href="http://download.oracle.com/docs/cd/E15051_01/apirefs.htm">http://download.oracle.com/docs/cd/E15051_01/apirefs.htm</a></div>Maiko Rochahttp://www.blogger.com/profile/17589428760474682504noreply@blogger.com1tag:blogger.com,1999:blog-6659301937075385457.post-70526479562746825462009-10-21T15:22:00.001-07:002009-10-21T16:41:44.819-07:00How do I know if I’m inside a Task Flow or not?<p>If for some esoteric reason you need to know if you're inside a Task Flow or not, here's the snippet for doing so from a backing bean <br /><code> <br />ViewPortContext ctx = ControllerContext.getInstance().getCurrentViewPort(); <br />TaskFlowId id = ctx.getTaskFlowContext().getTaskFlowId(); <br />if (id != null){ <br /> System.out.println("BOUNDED taskflow."); <br />} else { <br /> System.out.println("UN-BOUNDED taskflow."); <br />} </code></p> <p><code></code> <br /><code><a href="http://download.oracle.com/docs/cd/E12839_01/apirefs.1111/e10651/oracle/adf/controller/ControllerContext.html">ControllerContext</a></code> is also accessible through EL, so you can use the same logic in our JSF/ADF tags. </p>Maiko Rochahttp://www.blogger.com/profile/17589428760474682504noreply@blogger.com0tag:blogger.com,1999:blog-6659301937075385457.post-54321996682858574502009-10-21T11:26:00.000-07:002009-10-21T11:46:14.332-07:00OOW09 Unconference Slide Deck PostedYou can now <a href="http://tinyurl.com/adf-custom-layout-preso">check out the presentation</a> that <a href="http://georgemaggessy.blogspot.com/">George</a> and I delivered during Oracle OpenWorld 2009 Unconference session. It talks about some of ADF Faces key components, page layout and how we rebuild two well known websites using ADF Faces.<div><br /></div><div>We will revamping this presentation with more content and more demos for our technical session at <a href="http://www.devoxx.com/display/DV09/How+we+rebuild+Y+Mail+and+Facebook+using+JSF">Devoxx 2009</a>.</div>Maiko Rochahttp://www.blogger.com/profile/17589428760474682504noreply@blogger.com2tag:blogger.com,1999:blog-6659301937075385457.post-52755338433994340832009-10-21T10:53:00.001-07:002009-10-21T12:02:53.183-07:00Centered, Fixed Size Layout with ADF Faces<p>ADF Faces <a href="http://download.oracle.com/docs/cd/E12839_01/web.1111/b31973/af_orgpage.htm#CACCBCCI">layout components</a> are pretty powerful. They are able to <a href="http://download.oracle.com/docs/cd/E12839_01/web.1111/b31973/af_orgpage.htm#CDEECCJF">stretch themselves and their children components</a> to neatly accommodate UI components to fill the height and width of the browser content area, also called the <strong><a href="http://www.brainbell.com/tutorials/HTML_and_CSS/The_Browser_Viewport.htm">viewport</a></strong>. </p> <p>That’s all cool and dandy, but what if you <strong>don’t </strong>want things to stretch? More precisely, you want your UI to be of a fixed size? Something like this very blog, or the <a href="http://960.gs/">960 Grid System</a> where the contents are displayed inside a 960px container that is centralized in the browser’s viewport no matter what’s the browser window size or the display resolution?</p> <p>If you work with ADF Faces you’d think that this kind of layout is not possible just by looking at the <a href="http://jdevadf.oracle.com/adf-richclient-demo/faces/components/index.jspx">ADF Faces Component Demo</a> or <a href="http://download.oracle.com/docs/cd/E12839_01/webcenter.1111/e10147/Topic_4.1.htm">WebCenter Spaces Workspaces</a> (that are all ADF based), right? I mean, everything stretches and expands and accommodates inside the browser’s viewport, and if you resize the browser you can see the components adjusting themselves to the new viewport size. Moreover, everything seems to be left or start-aligned. So how can I achieve a centered, fixed size layout?</p> <p>Well, let’s start by writing down what I need:</p> <blockquote> <p>I need the background of my page to <strong>stretch</strong> to fill the whole viewport. Then I need to make my main area to be <strong>centered</strong>, but it also needs to <strong>scroll, </strong>so I can stack things <strong>vertically. </strong></p> </blockquote> <p>Cool. So this is my requirement. I guess that you already noticed some clues on how I’m building the UI. Let’s see how you can translate this to ADF Faces tags:</p> <code></code> <p><a href="http://lh6.ggpht.com/_45lOvS5bTAk/St9Kob6VH-I/AAAAAAAAAQ0/3vyOLC8AlFc/s1600-h/image20.png"><img title="image" style="border-width: 0px; display: inline;" alt="image" src="http://lh3.ggpht.com/_45lOvS5bTAk/St9KoqMBL0I/AAAAAAAAAQ4/re1Ukue4CkM/image_thumb14.png?imgmax=800" border="0" height="162" width="452" /></a> </p> <p>“Wait, that’s it?” Yup. Three tags (I know, it’s actually four, but stay with me). Let’s take a look at it again:</p> <ol> <li>The <strong><a href="http://download.oracle.com/docs/cd/E12839_01/web.1111/b31973/af_orgpage.htm#CDEJJGDF">panelStretchLayout</a></strong> is the base layout component. This will be true for 99.999% of your layouts. It makes sure that the browser’s viewport will be fully utilized. </li> <li>A nested <strong><a href="http://download.oracle.com/docs/cd/E12839_01/web.1111/b31973/af_orgpage.htm#CDECAJHG">panelGroupLayout</a></strong> with <strong>layout=”scroll”</strong> so the vertical scrollbar will be shown whenever the contents of the page overflow the browser’s viewport. In this case, it will show as the browser’s native scrollbar on the right side as it is being stretched by the parent panelStretchLayout. It also has <strong>halign=”center”</strong> so anything within it will be centralized. </li> <li>Another <strong>panelGroupLayout</strong> with <strong>layout=”vertical”</strong>. This is the fixed size container; notice that some <strong>inlineStyle</strong> properties are being set, lie, <strong>“width:960px”</strong>. This will guarantee that this container won’t exceed 960px. The other properties are for visualization purposes only. Of course, you shouldn’t be setting inlineStyle properties. Just create a CSS file with a custom class or, better, create a skin for your application, but this will work for the sample. </li> </ol> <p>This is all that’s needed. OK, now, notice that there’s one more nested <strong>panelgroupLayout</strong> with <strong>layout=”vertical”</strong> and inlineStyle=”height:1024.0px” . This is to simulate some overflow content so the scrollbar shows up in the browser:</p> <p><a href="http://lh4.ggpht.com/_45lOvS5bTAk/St9KpCp80cI/AAAAAAAAAQ8/67KbZJTX_8A/s1600-h/image30.png"><img title="image" style="border-width: 0px; display: inline;" alt="image" src="http://lh3.ggpht.com/_45lOvS5bTAk/St9KpZiKjgI/AAAAAAAAARA/olY100jZka0/image_thumb22.png?imgmax=800" border="0" height="310" width="441" /></a></p> <p>Here’s how the HTML for this structure was generated by ADF Faces. I recommend the Firebug Plugin if you want to get down to this level of detail:</p> <p><a href="http://lh3.ggpht.com/_45lOvS5bTAk/St9KptDphfI/AAAAAAAAARE/2qAmpH13TXU/s1600-h/image%5B4%5D.png"><img title="image" style="border-width: 0px; display: inline;" alt="image" src="http://lh4.ggpht.com/_45lOvS5bTAk/St9Kpy3FPsI/AAAAAAAAARI/0lpz0DwqC5Q/image_thumb%5B2%5D.png?imgmax=800" border="0" height="130" width="462" /></a> </p> <p>I’ve got to admit that it’s not visually compelling right now, so let’s jazz it up with some background and CSS to see how it looks:</p> <p><a href="http://lh6.ggpht.com/_45lOvS5bTAk/St9KqZ3NckI/AAAAAAAAARM/jsdwpNNTZpI/s1600-h/image28.png"><img title="image" style="border-width: 0px; display: inline;" alt="image" src="http://lh4.ggpht.com/_45lOvS5bTAk/St9Kqux2R3I/AAAAAAAAARQ/ADzcRCoAAyQ/image_thumb20.png?imgmax=800" border="0" height="296" width="441" /></a> </p> <p>Much better now. I’ve added a Header Area that actually stretches beyond the fixed size area that contains the Top Area and the Content Area.</p> <p>One thing that you need to be aware is that now you are on a fixed size “world”. Don’t expect things to stretch or adjust to each other within the fixed size container, but that’s ok, because you’ve chosen to work with a fixed size layout and you can arbitrarily set the components size. You should avoid using percentages too, because then it’s up to the browser to decide what 90% of “what” should be rendered. If you need to stretch horizontally than use the AFStretchWidth selector in the component’s styleClass.</p> <p>Last but not least, I’ve done some of the hard work for you and put everything on an ADF Faces template so you can study the sample or even reuse it. You can download the sample <a href="http://groups.google.com/group/adfgarage/web/CenteredContentLayout.zip">here</a>.</p> <p>If you have any suggestions on UI layouts that would be interested to see on ADF Faces feel free to post them in the comments area.</p>Maiko Rochahttp://www.blogger.com/profile/17589428760474682504noreply@blogger.com8tag:blogger.com,1999:blog-6659301937075385457.post-85113661029827557532009-10-20T15:56:00.001-07:002009-10-20T16:04:36.475-07:00FIRST!Hi all, I finally decide to blog. I've got to admit that I'm not too excited, maybe because I'm not quite sure what I will be posting, if posting at all.<div><br /></div><div>Anyway, I will try to give some insight on the work that I do with Oracle products, mainly ADF and WebCenter, but also on some more generic stuff like CSS, REST, JQuery, and Grails. I hope that it will be useful for you somehow. :-)</div><div><br /></div><div>That said though, keep in mind that this blog title is ADF Garage, which means that sometimes I will bend or break the rules of whatever I'm using. I will try to alert you whenever possible, but beware!</div>Maiko Rochahttp://www.blogger.com/profile/17589428760474682504noreply@blogger.com1