Shay Shmeltzer's WeblogTips and information about Oracle JDeveloper and Oracle ADFhttps://blogs.oracle.com/shay/feed/entries/atom2015-08-01T05:54:11+00:00Apache Rollerhttps://blogs.oracle.com/shay/entry/hotdeployment_in_jdeveloper_12c_donHot Deployment in JDeveloper 12c - Don't Stop/Start Your AppShay Shmeltzer-Oracle 2015-07-10T21:45:50+00:002015-07-10T21:45:50+00:00<p>Old habits are hard to get rid off, and I still see long time users of JDeveloper (and also many new users) who are stopping/starting their application on the embedded WebLogic each time that they make a change or addition to their code.</p>
<p>Well you should stop it! (I mean stop stopping the application).</p>
<p>For a while now, JDeveloper has support for hot deployment that means that when you do most of the changes to your code you just need to do <strong>save-all</strong> followed by a <strong>rebuild</strong> of your viewController project - and that's it.</p>
<p>You can then go to your browser and reload your page - and the changes will be reflected there. &nbsp;This will not only save you the time it takes to undeploy and redeploy your app, it will also reduce the amount of memory you use since frequent redeployment of the app on the embedded WebLogic leads to bigger memory consumption.</p>
<p>In the demo below I use JDeveloper 12.1.3 to show you that I can just do the save-&gt;rebuild and pick up:</p>
<p> </p>
<ul>
<li>Changes in the JSF file</li>
<li>Changes to the JSF configuration file adfc-config.xml</li>
<li>New classes that are added to both the model and viewController projects</li>
<li>Changed to the ADF configuration files (pagedefs, data binding, data controls)</li>
</ul>
<div>
<p>
<iframe width="600" height="460" src="https://www.youtube.com/embed/EMAgTGMpvUo" frameborder="0"></iframe>
</p>
<p>So for most cases, you should be covered with this hot-deployment capability.</p>
<p>There are some cases that will require a redeploy of the application (for example if you add a new skin css file, or if you change some runtime configuration of your app in web.xml) but for most cases you don't need to continue with the stop/start habit.</p>
<p> </p>
</div>
<p> </p>https://blogs.oracle.com/shay/entry/leveraging_the_oracle_developer_cloudLeveraging Oracle Developer Cloud Service in SQL and PL/SQL Projects - lifecycle and team collaborationShay Shmeltzer-Oracle 2015-05-26T17:37:14+00:002015-05-26T17:37:14+00:00<p>Usually my demos are targeted at Java developers, but I realize that a lot of developers out there are not using Java, for example in the Oracle install base there is a huge section of PLSQL developers. This however doesn't change their requirements from a development platform. They can still benefit from version management and code review functionality. They still need to track bugs/issues and requirements from their users, and they still need to collaborate in a team environment.&nbsp;</p>
<p>So I decided to try out and see what would be the development lifecycle experience for a PL/SQL developer if they'll leverage the services provided by the Oracle Developer Cloud Service - here is a demo that shows a potential experience.&nbsp;</p>
<p>What you'll see in the demo:</p>
<p> </p>
<ul>
<li>Using JDeveloper to create DB Diagrams, Tables and PL/SQL code</li>
<li>Version manage PL/SQL and SQL with Git</li>
<li>Defining a cloud project and adding users</li>
<li>Check code in, and branch PL/SQL functions</li>
<li>Tracking tasks for developers</li>
<li>Code review by team members</li>
<li>Build automation (with Ant) - and almost a deploy to the DB</li>
</ul>
<p> </p>
<p>
<iframe width="600" height="470" src="https://www.youtube.com/embed/dX123vGUIRA" frameborder="0"></iframe>
</p>
<p>As you can see it is quite a nice complete solution that is very quick to setup and use.</p>
<p>It seems that the concepts of continuous integration in the world of PL/SQL development are not yet a common thing. In the demo I use the Ant SQL command to show how you could run a SQL script you created to create the objects directly in the database - which is probably the equivalent of doing a deployment in the world of Java. However if you prefer you can use Ant for example to copy files, zip them, or do many other tasks such as run automated testing frameworks.</p>
<p>The Ant task I used is this:</p>
<pre>&nbsp; &lt;path id="antclasspath"&gt;
&nbsp; &nbsp; &lt;fileset dir="."&gt;
&nbsp; &nbsp; &nbsp; &lt;include name="ojdbc7.jar"/&gt;
&nbsp; &nbsp; &lt;/fileset&gt;
&nbsp; &lt;/path&gt;
&nbsp; &nbsp;&lt;target name="deploy"&gt;
&nbsp; &nbsp; &lt;sql driver="oracle.jdbc.OracleDriver" userid="hr2" password="hr"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;url="jdbc:oracle:thin:@//server:1521/sid" src="./script1.sql"
<span class="Apple-tab-span" style="white-space:pre"> </span>classpathref="antclasspath"/&gt;
&nbsp; &lt;/target&gt;&nbsp;
<p>I had both the ojdbc7.jar file and the script file at the root of the project for convenience.&nbsp;</p></pre>
<p>While my demo uses JDeveloper - you should be able to achieve similar functionality with any tool that supports Git. In fact if you rather not use a tool you can simply use command lines to check your files directly into the cloud.</p>
<p> </p>
<p> </p>https://blogs.oracle.com/shay/entry/working_with_font_awesome_andLeveraging Icon Fonts (Font Awesome) in Oracle ADF - 500 New Icons for your appShay Shmeltzer-Oracle 2015-05-07T21:51:04+00:002015-05-08T18:11:07+00:00<p>Icon fonts are a growing trend among web developers, they make it quite simple to add icons to your web site and resize them for better responsive design.</p>
<p>Font Awesome is a popular open source icon font - providing over 500 icons that you can add to your application. I got several questions over the past couple of weeks about using these icons in ADF applications, so here is a short video showing you how to set this up with ADF 12.1.3 and using skins. (Quick note - before 12.1.3 you couldn't include these type of font in the skin css file - and you would have needed to directly refer to the CSS file from each page in your app - one more reason to upgrade your application to 12.1.3).</p>
<p> </p>
<p><img src="https://blogs.oracle.com/shay/resource/images/fontawesomeADF.png" /> </p>
<p>The basic steps:</p>
<p> </p>
<ul>
<li>Create a new skin for your ADF application (if you don't know how to do this, see <a href="https://blogs.oracle.com/shay/entry/adf_faces_skin_editor_how">this blog entry</a>).</li>
<li>Download font awesome and copy the font-awesome-4.3.0 directory into your new skin directory</li>
<li>Copy the @font-face entry from the font-awesome.min.css file into your new skin.css file</li>
<li>Update the path in the various URI entries so it reflects the new relative location of the font files</li>
<li>Create class entries in your skin CSS for the icons you want to use - remember to add a <strong>font-family: FontAwesome; </strong>to make sure they use the new font.</li>
<li>Assign the classes to the styleclass property of your ADF Faces components.</li>
</ul>
<p> </p>
<p>Here is a demo showing how it is set up and how it works:</p>
<p>
<iframe width="640" height="480" src="https://www.youtube.com/embed/Hk5giHC1hJM" frameborder="0"></iframe>
</p>
<p>The skin1.css in the video is this:</p>
<p> </p>
<p>@charset &quot;UTF-8&quot;;</p>
<p>/**ADFFaces_Skin_File / DO NOT REMOVE**/</p>
<p>@namespace af &quot;http://xmlns.oracle.com/adf/faces/rich&quot;;</p>
<p>@namespace dvt &quot;http://xmlns.oracle.com/dss/adf/faces&quot;;</p>
<p>@font-face {</p>
<p>&nbsp; &nbsp; font-family: 'FontAwesome';</p>
<p>&nbsp; &nbsp; src: url('font-awesome-4.3.0/fonts/fontawesome-webfont.eot?v=4.3.0');</p>
<p>&nbsp; &nbsp; src: url('font-awesome-4.3.0/fonts/fontawesome-webfont.eot?#iefix&amp;v=4.3.0')format('embedded-opentype'), url('font-awesome-4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0')format('woff2'), url('font-awesome-4.3.0/fonts/fontawesome-webfont.woff?v=4.3.0')format('woff'), url('font-awesome-4.3.0/fonts/fontawesome-webfont.ttf?v=4.3.0')format('truetype'), url('font-awesome-4.3.0/fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular')format('svg');</p>
<p>&nbsp; &nbsp; font-weight: normal;</p>
<p>&nbsp; &nbsp; font-style: normal;</p>
<p>}</p>
<p>.heart:before {</p>
<p>&nbsp; &nbsp; content: &quot;\f004&quot;;</p>
<p>&nbsp; &nbsp; font-family: FontAwesome;</p>
<p>}</p>
<p>.mail:before {</p>
<p>&nbsp; &nbsp; content: &quot;\f003&quot;;</p>
<p>&nbsp; &nbsp; font-family: FontAwesome;</p>
<p>}&nbsp;</p>
<p>If you want to see how this could help with responsive design try this in your CSS as an example. Then resize the width of the browser window to see how the icons will change their size dynamically:</p>
<p>.heart:before {</p>
<p>&nbsp; &nbsp; content: &quot;\f004&quot;;</p>
<p>&nbsp; &nbsp; font-family: FontAwesome;</p>
<p>&nbsp; &nbsp; font-size: x-large;</p>
<p>}</p>
<p>.mail:before {</p>
<p>&nbsp; &nbsp; content: &quot;\f003&quot;;</p>
<p>&nbsp; &nbsp; font-family: FontAwesome;</p>
<p>&nbsp; &nbsp; font-size: x-large;</p>
<p>}</p>
<p>@media screen and (max-width:950px) {</p>
<p>&nbsp; &nbsp; .heart:before {</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; content: &quot;\f004&quot;;</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; font-family: FontAwesome;</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; font-size: small;</p>
<p>&nbsp; &nbsp; }</p>
<p>&nbsp; &nbsp; .mail:before {</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; content: &quot;\f003&quot;;</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; font-family: FontAwesome;</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; font-size: small;</p>
<p>&nbsp; &nbsp; }</p>
<p> </p>https://blogs.oracle.com/shay/entry/oracle_developer_cloud_service_automatingOracle Developer Cloud Service - Automating Builds for Oracle ADF ApplicationsShay Shmeltzer-Oracle 2015-04-28T17:49:17+00:002015-04-28T17:49:17+00:00<p>Following up on the previous blog that showed how to <a href="https://blogs.oracle.com/shay/entry/using_the_oracle_developer_cloud">get your ADF application into the Developer Cloud Service git repository</a>, this entry will show you the next step in the lifecycle - executing builds.</p>
<p>The Oracle Developer Cloud Service (DevCS) supports build automation with both Maven and Ant scripts - and in this demo I'm showing you how to use the Ant option. One of the unique aspects of DevCS for customers who are &nbsp;using Oracle ADF and JDeveloper is that the cloud comes pre-configured with the ADF libraries needed to compile your code, and also with support for OJDeploy so you can leverage deployment profiles that you defined for your application.</p>
<p>In fact DevCS comes with support for two ADF versions - 11.1.1.7.1 and 12.1.3 (as of the time of this blog).</p>
<p>In the video below you'll see</p>
<p>
<ul>
<li>How to add a build file for your ADF application</li>
<li>How to &nbsp;configure the build file to work in the cloud environment</li>
<li>How to define a build job and execute it</li>
<li>How to look at the log files for the build job</li>
<li>How to automate the build execution to happen when changes are committed to the git repository</li>
</ul>
</p>
<p>
<iframe width="640" height="480" src="https://www.youtube.com/embed/X6JyPyDcWxI" frameborder="0"></iframe>
</p>
<p> </p>
<p>The build in the example above just does the packaging, but in more realistic scenarios you can use similar build processes to create ADF libraries from projects, automate testing, modify configuration and more.</p>
<p>There are a couple of files that are used in the demo that you might want to use in your implementation:</p>
<p>The build.xml file:&nbsp;</p>
<p> <!-- HTML generated using hilite.me --></p>
<div style="background-color: #ffffff; overflow: auto; width: auto; border-style: solid; border-color: gray; border-width: 0.1em 0.1em 0.1em 0.8em; padding: 0.2em 0.6em;">
<pre style="margin: 0px; line-height: 125%;"> <span style="font-weight: bold">&lt;property</span> environment=<span style="font-style: italic">"env"</span> <span style="font-weight: bold">/&gt;</span>
<span style="font-weight: bold">&lt;property</span> file=<span style="font-style: italic">"build.properties"</span><span style="font-weight: bold">/&gt;</span>
<span style="font-weight: bold">&lt;target</span> name=<span style="font-style: italic">"deploy"</span> description=<span style="font-style: italic">"Deploy JDeveloper profiles"</span><span style="font-weight: bold">&gt;</span>
<span style="font-weight: bold">&lt;taskdef</span> name=<span style="font-style: italic">"ojdeploy"</span>
classname=<span style="font-style: italic">"oracle.jdeveloper.deploy.ant.OJDeployAntTask"</span>
uri=<span style="font-style: italic">"oraclelib:OJDeployAntTask"</span>
classpath=<span style="font-style: italic">"${oracle.jdeveloper.ant.library}"</span><span style="font-weight: bold">/&gt;</span>
<span style="font-weight: bold">&lt;ora:ojdeploy</span> xmlns:ora=<span style="font-style: italic">"oraclelib:OJDeployAntTask"</span>
executable=<span style="font-style: italic">"${oracle.jdeveloper.ojdeploy.path}"</span>
ora:buildscript=<span style="font-style: italic">"${oracle.jdeveloper.deploy.dir}/ojdeploy-build.xml"</span>
ora:statuslog=<span style="font-style: italic">"${oracle.jdeveloper.deploy.dir}/ojdeploy-statuslog.xml"</span><span style="font-weight: bold">&gt;</span>
<span style="font-weight: bold">&lt;ora:deploy&gt;</span>
<span style="font-weight: bold">&lt;ora:parameter</span> name=<span style="font-style: italic">"workspace"</span>
value=<span style="font-style: italic">"${oracle.jdeveloper.workspace.path}"</span><span style="font-weight: bold">/&gt;</span>
<span style="font-weight: bold">&lt;ora:parameter</span> name=<span style="font-style: italic">"profile"</span>
value=<span style="font-style: italic">"${oracle.jdeveloper.deploy.profile.name}"</span><span style="font-weight: bold">/&gt;</span>
<span style="font-weight: bold">&lt;ora:parameter</span> name=<span style="font-style: italic">"nocompile"</span> value=<span style="font-style: italic">"false"</span><span style="font-weight: bold">/&gt;</span>
<span style="font-weight: bold">&lt;ora:parameter</span> name=<span style="font-style: italic">"outputfile"</span>
value=<span style="font-style: italic">"${oracle.jdeveloper.deploy.outputfile}"</span><span style="font-weight: bold">/&gt;</span>
<span style="font-weight: bold">&lt;/ora:deploy&gt;</span>
<span style="font-weight: bold">&lt;/ora:ojdeploy&gt;</span>
<span style="font-weight: bold">&lt;/target&gt;</span>
</pre>
</div>
<p> </p>
<p>The build.properties file I used can be found <a href="https://blogs.oracle.com/shay/resource/build.properties">here</a>.</p>
<p> </p>
<p> </p>
<p>The mask for the build automatic execution is <strong>*/1 * * * *</strong> </p>
<p>
Note that in the properties file there are references to environment variables that you will need to change if you are looking to deploy an 11.1.1.* app - specifically the options for 12 and 11 are:</p>WLS_HOME_12C3=/opt/Oracle/Middleware12c3/wlserver<br />WLS_HOME_11G=/opt/Oracle/Middleware/wlserver_10.3<br />
MIDDLEWARE_HOME_12C3=/opt/Oracle/Middleware12c3<br />
MIDDLEWARE_HOME_11G=/opt/Oracle/Middleware<br />ORACLE_HOME_12C3=/opt/Oracle/Middleware12c3/jdeveloper<br />
ORACLE_HOME_11G=/opt/Oracle/Middleware/jdeveloperhttps://blogs.oracle.com/shay/entry/using_the_oracle_developer_cloudUsing the Oracle Developer Cloud Service for Git version management for JDeveloper/ADF appsShay Shmeltzer-Oracle 2015-04-23T16:35:19+00:002015-04-23T16:35:19+00:00<p>The <a href="http://cloud.oracle.com/developer_service">Oracle Developer Cloud Service</a> (DevCS for short) provides a complete cloud-hosted development platform for your team. This makes it very easy to start adopting development best practices for your team, and adopt a more agile development approach.</p>
<p>If you haven't tried it yet, you should! </p>
<p>It's simple to get a free trial instance - just sign up for a trial of the <a href="https://cloud.oracle.com/java">Java cloud service</a>&nbsp;(which, by the way, will take you through anOracle ADF based registration wizard) and an instance of the Developer cloud service will be provisioned for you as part of the trial. No need for any additional machines or installations on your side.</p>
<p>I'm going to write a couple of blogs about the various features that DevCS provides such as build and continuous integration, but let's start with the very basic feature we all should be using - source code management.</p>
<p>Every project needs to do version management - even if you are a single developer - and with DevCS there is no server and network setup required. Create a new DevCS project and 10 seconds later you have your git server accessible from any computer that has internet access.</p>
<p>The demo below is using JDeveloper 12.1.3 and the sample summit ADF application that you can get from OTN.&nbsp;</p>
<p>In the demo I start from scratch and demo how to</p>
<p> </p>
<ul>
<li>create a new DevCS project</li>
<li>check code into the git repository</li>
<li>branch my code to work on fixes</li>
<li>submit the changes back</li>
<li>how to do code review by team members</li>
<li>merge fixes to the master branch</li>
</ul>
<p>&nbsp;</p>
<p>
<iframe width="640" height="480" src="https://www.youtube.com/embed/Cqq-7jydtUc" frameborder="0"></iframe>
</p>
<p>Go ahead try it out with your project and your team.</p>
<p>If you are new to git (which has quickly became the new standard for source management) - check out the Oracle A-Team blog entry that explains a good <a href="http://www.ateam-oracle.com/developercloudserviceworkflow/">workflow for team work with git</a> that you can adopt.&nbsp;</p>
<p>Have any further questions about using the Developer Cloud Service? Ask them on the <a href="https://community.oracle.com/community/cloud_computing/platform-as-a-service-paas/oracle-developer-cloud-service">DevCS community page</a>.&nbsp;</p>https://blogs.oracle.com/shay/entry/dynamically_refresh_a_part_ofDynamically refresh a part of a page (PPR) in Oracle MAFShay Shmeltzer-Oracle 2015-04-22T16:23:24+00:002015-04-22T16:46:19+00:00<p>A common question for developers who are just starting with Oracle MAF, especially if they have a background in Oracle ADF, is how do you do a partial page refresh in Oracle MAF.</p>
<p>Partial Page Refresh basically means that I want to change something in my UI based on another event in the UI - for example hide or show a section of the page. (In ADF there is a partialTrigger property for components which is not there in MAF).</p>
<p>In MAF the UI behaves differently - it is not based on JSF after all - the UI directly reflects changes in managed beans as long as it knows about changes there. How does it know about changes? For this you need to enable firing change event notifications. This is actually quite easy to do - just turn on the checkbox in JDeveloper's accessors generation and it will do the job for you.</p>
<p>Here is a quick demo showing you how to achieve &nbsp;this:</p>
<p>
<iframe width="640" height="480" src="https://www.youtube.com/embed/X0UyMQ0QDgM" frameborder="0"></iframe>
</p>
<p>Here is the code used. </p>
<p>in AMX page:</p>
<p>&nbsp; &nbsp; &nbsp;&lt;amx:tableLayout id=&quot;tl1&quot;&gt;</p>
<p>&nbsp; &nbsp; &nbsp; &lt;amx:rowLayout id=&quot;rl1&quot;&gt;</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; &lt;amx:cellFormat id=&quot;cf2&quot;&gt;</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;amx:listView var=&quot;row&quot; showMoreStrategy=&quot;autoScroll&quot; bufferStrategy=&quot;viewport&quot; id=&quot;lv1&quot;&gt;</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;amx:listItem id=&quot;li1&quot;&gt;</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;amx:outputText value=&quot;ListItem Text&quot; id=&quot;ot2&quot;/&gt;</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;amx:setPropertyListener id=&quot;spl1&quot; from=&quot;#{'true'}&quot; to=&quot;#{viewScope.backingPPR.showIt}&quot;</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;type=&quot;swipeRight&quot;/&gt;</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;amx:setPropertyListener id=&quot;spl2&quot; from=&quot;#{'false'}&quot; to=&quot;#{viewScope.backingPPR.showIt}&quot;</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;type=&quot;swipeLeft&quot;/&gt;</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/amx:listItem&gt;</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/amx:listView&gt;</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; &lt;/amx:cellFormat&gt;</p>
<p>&nbsp; &nbsp; &nbsp; &lt;/amx:rowLayout&gt;</p>
<p>&nbsp; &nbsp; &nbsp; &lt;amx:rowLayout id=&quot;rl2&quot; rendered=&quot;#{viewScope.backingPPR.showIt}&quot;&gt;</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; &lt;amx:cellFormat id=&quot;cf1&quot;&gt;</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;amx:commandButton text=&quot;commandButton1&quot; id=&quot;cb3&quot;/&gt;</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; &lt;/amx:cellFormat&gt;</p>
<p>&nbsp; &nbsp; &nbsp; &lt;/amx:rowLayout&gt;</p>
<p>&nbsp; &nbsp; &lt;/amx:tableLayout&gt;</p>
<div><br /></div>
<p>in managed bean:</p>
<p>&nbsp; &nbsp; &nbsp;boolean showIt = false;</p>
<p><br /></p>
<p>&nbsp; &nbsp; public void setShowIt(boolean showIt) {</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; boolean oldShowIt = this.showIt;</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; this.showIt = showIt;</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; propertyChangeSupport.firePropertyChange(&quot;showIt&quot;, oldShowIt, showIt);</p>
<p>&nbsp; &nbsp; }</p>
<p><br /></p>
<p>&nbsp; &nbsp; public boolean isShowIt() {</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; return showIt;</p>
<p>&nbsp; &nbsp; }</p>
<p><br /></p>
<p>&nbsp; &nbsp; public void addPropertyChangeListener(PropertyChangeListener l) {</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; propertyChangeSupport.addPropertyChangeListener(l);</p>
<p>&nbsp; &nbsp; }</p>
<p><br /></p>
<p>&nbsp; &nbsp; public void removePropertyChangeListener(PropertyChangeListener l) {</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; propertyChangeSupport.removePropertyChangeListener(l);</p>
<p>&nbsp; &nbsp; }</p>
<div><br /></div>https://blogs.oracle.com/shay/entry/implementing_the_tree_navigation_oracleImplementing the Tree Navigation Oracle Alta UI Design PatternShay Shmeltzer-Oracle 2015-03-13T21:10:47+00:002015-03-13T21:10:47+00:00<p>The Oracle Alta UI design patterns offer many new approaches for navigation in your application as you can see in the<a href="http://www.oracle.com/webfolder/ux/middleware/alta/patterns/PrimaryNavigation.html"> navigation patterns section</a>. One of those is the Tree Navigation pattern - which is an updated approach to the way that many applications display menus today.</p>
<p>While the &quot;old&quot; way of building these menus was using the tree component, the new design uses an interface that works better on mobile devices and is easier on the eyes. It uses animation to do in-place replacement of one level in the menu with the next one.&nbsp;</p>
<table>
<tbody>
<tr>
<td><b>old</b></td>
<td><b>new</b></td>
</tr>
<tr>
<td><img src="https://blogs.oracle.com/shay/resource/images/TreeNavigation.png" width="200" /></td>
<td><img src="http://www.oracle.com/webfolder/ux/middleware/alta/patterns/images/PrimaryNavigationTabletFriendlyTreeBehavior.png" width="560" alt="img" /> </td>
</tr>
</tbody>
</table>
<p>You could also use this approach to represent other types of hierarchical/master-detail relationships.&nbsp;</p>
<p>In the demo below I show you how to quickly implement such navigation pattern with ADF Faces and a combination of af:listView components along with the af:deck component.</p>
<p>
<iframe width="640" height="480" src="https://www.youtube.com/embed/7g8TLHXM8RE" frameborder="0"></iframe>
</p>
<p>There are a bunch of further things you might want to do in your actual application beyond what the demo does.</p>
<p>One is to show on the right side of the page the information on the object you select on the left side. Using a deck component there you can also switch that section to show either Dept or Emp data in the same area. You'll already have the actionListener in place to do the switch of display, and ADF already has the right record selected - so just dropping the same data control on the right as a form will be enough.</p>
<p>Another nice enhancement would be to condition the showing of the right caret to be based on whether there are actually details. This should be easy to achieve with a calculated attribute using groovy - <a href="https://blogs.oracle.com/adf/entry/using_groovy_aggregate_functions_in">as shown here</a>.&nbsp;</p>
<p>In the demo I also show how to invoke the&nbsp;<span style="color: #555555; font-family: Arial, Verdana, sans-serif; font-size: 12px; line-height: 18px;">makeCurrent</span>&nbsp;row selection functionality from a managed bean, this allows me to do two operations when a menu option is selected. The code I use ,which is based on code I found on <a href="http://www.awasthiashish.com/2013/01/invoke-adf-table-selection-listener.html">Ashish's blog</a>, is:</p>
<pre><font face="arial, helvetica, sans-serif" size="2">public void deptSelect(SelectionEvent selectionEvent) {
</font><font face="arial, helvetica, sans-serif" size="2">&nbsp; &nbsp; &nbsp; &nbsp; ELContext elcontext = FacesContext.getCurrentInstance().getELContext();
</font><font face="arial, helvetica, sans-serif" size="2">&nbsp; &nbsp; &nbsp; &nbsp; MethodExpression methodExpression =
</font><font face="arial, helvetica, sans-serif" size="2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; FacesContext.getCurrentInstance().getApplication().getExpressionFactory().createMethodExpression(elcontext,
</font><font face="arial, helvetica, sans-serif" size="2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "#{bindings.DepartmentsView1.treeModel.makeCurrent}",
</font><font face="arial, helvetica, sans-serif" size="2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Object.class, new Class[] {
</font><font face="arial, helvetica, sans-serif" size="2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;SelectionEvent.class });
</font><font face="arial, helvetica, sans-serif" size="2">&nbsp; &nbsp; &nbsp; &nbsp; methodExpression.invoke(elcontext, new Object[] { selectionEvent });
</font><font face="arial, helvetica, sans-serif" size="2">&nbsp; &nbsp; &nbsp; &nbsp; deck.setDisplayedChild("pgl2");
</font><font face="arial, helvetica, sans-serif" size="2">&nbsp; &nbsp; &nbsp; &nbsp; AdfFacesContext.getCurrentInstance().addPartialTarget(deck);
</font><font face="arial, helvetica, sans-serif" size="2">&nbsp; &nbsp; }&nbsp;</font></pre>
<p>I also use styleClass=&quot;AFAppNavbarButton&quot; for the &quot;back&quot; button to make it look a bit better.&nbsp;</p>
<p>The full source of the JSF page is:</p>
<pre><font face="arial, helvetica, sans-serif" size="2">&lt;?xml version='1.0' encoding='UTF-8'?&gt;
</font><font face="arial, helvetica, sans-serif" size="2">&lt;!DOCTYPE html&gt;
</font><font face="arial, helvetica, sans-serif" size="2">&lt;f:view xmlns:f="http://java.sun.com/jsf/core" xmlns:af="http://xmlns.oracle.com/adf/faces/rich"&gt;
</font><font face="arial, helvetica, sans-serif" size="2">&nbsp; &nbsp; &lt;af:document title="untitled3.jsf" id="d1"&gt;
</font><font face="arial, helvetica, sans-serif" size="2">&nbsp; &nbsp; &nbsp; &nbsp; &lt;af:messages id="m1"/&gt;
</font><font face="arial, helvetica, sans-serif" size="2">&nbsp; &nbsp; &nbsp; &nbsp; &lt;af:form id="f1"&gt;
</font><font face="arial, helvetica, sans-serif" size="2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;af:pageTemplate viewId="/oracle/templates/tabletFirstTemplate.jspx" id="pt1"&gt;
</font><font face="arial, helvetica, sans-serif" size="2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;f:facet name="header"/&gt;
</font><font face="arial, helvetica, sans-serif" size="2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;f:facet name="status"/&gt;
</font><font face="arial, helvetica, sans-serif" size="2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;f:facet name="appNav"/&gt;
</font><font face="arial, helvetica, sans-serif" size="2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;f:facet name="globalLinks"/&gt;
</font><font face="arial, helvetica, sans-serif" size="2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;f:facet name="footer"/&gt;
</font><font face="arial, helvetica, sans-serif" size="2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;f:facet name="center"/&gt;
</font><font face="arial, helvetica, sans-serif" size="2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;f:facet name="start"&gt;
</font><font face="arial, helvetica, sans-serif" size="2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;af:deck id="d2" binding="#{mb3.deck}" displayedChild="pgl1"&gt;
</font><font face="arial, helvetica, sans-serif" size="2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;af:panelGroupLayout id="pgl1"&gt;
</font><font face="arial, helvetica, sans-serif" size="2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;af:listView value="#{bindings.DepartmentsView1.collectionModel}" var="item"
</font><font face="arial, helvetica, sans-serif" size="2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;emptyText="#{bindings.DepartmentsView1.viewable ? 'No data to display.' : 'Access Denied.'}"
</font><font face="arial, helvetica, sans-serif" size="2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;fetchSize="#{bindings.DepartmentsView1.rangeSize}" id="lv1" selection="single"
</font><font face="arial, helvetica, sans-serif" size="2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;selectionListener="#{mb3.deptSelect}"&gt;
</font><font face="arial, helvetica, sans-serif" size="2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;af:listItem id="li1"&gt;
</font><font face="arial, helvetica, sans-serif" size="2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;af:panelGridLayout id="pgl3"&gt;
</font><font face="arial, helvetica, sans-serif" size="2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;af:gridRow marginTop="5px" height="auto" marginBottom="5px" id="gr1"&gt;
</font><font face="arial, helvetica, sans-serif" size="2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;af:gridCell marginStart="5px" width="80%" id="gc1"&gt;
</font><font face="arial, helvetica, sans-serif" size="2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;af:outputFormatted value="#{item.bindings.DepartmentName.inputValue}"
</font><font face="arial, helvetica, sans-serif" size="2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id="of1"/&gt;
</font><font face="arial, helvetica, sans-serif" size="2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/af:gridCell&gt;
</font><font face="arial, helvetica, sans-serif" size="2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;af:gridCell marginStart="5px" width="20%" marginEnd="5px" id="gc2"&gt;
</font><font face="arial, helvetica, sans-serif" size="2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;af:image source="func_caretright_16_ena.png" id="i1"/&gt;
</font><font face="arial, helvetica, sans-serif" size="2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/af:gridCell&gt;
</font><font face="arial, helvetica, sans-serif" size="2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/af:gridRow&gt;
</font><font face="arial, helvetica, sans-serif" size="2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/af:panelGridLayout&gt;
</font><font face="arial, helvetica, sans-serif" size="2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/af:listItem&gt;
</font><font face="arial, helvetica, sans-serif" size="2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/af:listView&gt;
</font><font face="arial, helvetica, sans-serif" size="2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/af:panelGroupLayout&gt;
</font><font face="arial, helvetica, sans-serif" size="2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;af:panelGroupLayout id="pgl2"&gt;
</font><font face="arial, helvetica, sans-serif" size="2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;af:button text="#{bindings.DepartmentName.inputValue}" id="b1"
</font><font face="arial, helvetica, sans-serif" size="2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;actionListener="#{mb3.backToDept}" styleClass="AFAppNavbarButton"
</font><font face="arial, helvetica, sans-serif" size="2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;icon="/func_caretleft_16_ena.png"/&gt;
</font><font face="arial, helvetica, sans-serif" size="2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;af:listView value="#{bindings.EmployeesView4.collectionModel}" var="item"
</font><font face="arial, helvetica, sans-serif" size="2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;emptyText="#{bindings.EmployeesView4.viewable ? 'No data to display.' : 'Access Denied.'}"
</font><font face="arial, helvetica, sans-serif" size="2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;fetchSize="#{bindings.EmployeesView4.rangeSize}" id="lv2"&gt;
</font><font face="arial, helvetica, sans-serif" size="2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;af:listItem id="li2"&gt;
</font><font face="arial, helvetica, sans-serif" size="2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;af:panelGridLayout id="pgl4"&gt;
</font><font face="arial, helvetica, sans-serif" size="2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;af:gridRow marginTop="5px" height="auto" marginBottom="5px" id="gr2"&gt;
</font><font face="arial, helvetica, sans-serif" size="2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;af:gridCell marginStart="5px" width="80%" id="gc3"&gt;
</font><font face="arial, helvetica, sans-serif" size="2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;af:outputFormatted value="#{item.bindings.LastName.inputValue}"
</font><font face="arial, helvetica, sans-serif" size="2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id="of2"/&gt;
</font><font face="arial, helvetica, sans-serif" size="2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/af:gridCell&gt;
</font><font face="arial, helvetica, sans-serif" size="2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;af:gridCell marginStart="5px" width="20%" marginEnd="5px" id="gc4"&gt;
</font><font face="arial, helvetica, sans-serif" size="2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;af:image source="func_caretright_16_ena.png" id="i2"/&gt;
</font><font face="arial, helvetica, sans-serif" size="2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/af:gridCell&gt;
</font><font face="arial, helvetica, sans-serif" size="2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/af:gridRow&gt;
</font><font face="arial, helvetica, sans-serif" size="2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/af:panelGridLayout&gt;
</font><font face="arial, helvetica, sans-serif" size="2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/af:listItem&gt;
</font><font face="arial, helvetica, sans-serif" size="2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/af:listView&gt;
</font><font face="arial, helvetica, sans-serif" size="2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/af:panelGroupLayout&gt;
</font><font face="arial, helvetica, sans-serif" size="2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;af:transition triggerType="forwardNavigate" transition="slideLeft"/&gt;
</font><font face="arial, helvetica, sans-serif" size="2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;af:transition triggerType="backNavigate" transition="slideRight"/&gt;
</font><font face="arial, helvetica, sans-serif" size="2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/af:deck&gt;
</font><font face="arial, helvetica, sans-serif" size="2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/f:facet&gt;
</font><font face="arial, helvetica, sans-serif" size="2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;f:facet name="end"/&gt;
</font><font face="arial, helvetica, sans-serif" size="2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;f:attribute name="endWidth" value="0px"/&gt;
</font><font face="arial, helvetica, sans-serif" size="2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;f:attribute name="startWidth" value="200px"/&gt;
</font><font face="arial, helvetica, sans-serif" size="2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/af:pageTemplate&gt;
</font><font face="arial, helvetica, sans-serif" size="2">&nbsp; &nbsp; &nbsp; &nbsp; &lt;/af:form&gt;
</font><font face="arial, helvetica, sans-serif" size="2">&nbsp; &nbsp; &lt;/af:document&gt;
</font><font face="arial, helvetica, sans-serif" size="2">&lt;/f:view&gt;&nbsp;</font></pre>
<p> </p>
<p> </p>https://blogs.oracle.com/shay/entry/javaone_talkDeveloping On-Device Java Mobile Apps for iOS...and Android TooShay Shmeltzer-Oracle 2015-02-04T21:25:27+00:002015-02-04T21:25:27+00:00<p>At the last JavaOne conference I presented a session titled &quot;<span style="font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; white-space: nowrap;">Developing On-Device Java Mobile Apps for iOS...and Android Too&quot;</span></p>
<p>The recording of this session just became available, and I wanted to share it with you.</p>
<p>This session should be a good introduction to how Oracle enables Java developers to take their skills to the mobile world.</p>
<p>The first 28 minutes provide the overview, but if you are not into slides fast forward to minute 29 and start watching the extensive demo of developing an iOS application with Java and Eclipse.&nbsp;</p>
<p>
<iframe type="text/html" width="580" height="410" mozallowfullscreen="true" allowfullscreen="true" webkitallowfullscreen="true" src="https://www.parleys.com/share.html#play/543bef0be4b0033aa57ba604" frameborder="0">&amp;amp;amp;lt;br /&amp;amp;amp;gt;</iframe>
</p>
<p><br /></p>
<p> </p>https://blogs.oracle.com/shay/entry/getting_started_with_ios_developmentGetting started with iOS development using Eclipse and JavaShay Shmeltzer-Oracle 2015-01-30T22:05:50+00:002015-01-30T22:05:50+00:00<p>Want to use Eclipse to build an on-device mobile application that runs on iOS devices (iPhones and iPads)?</p>
<p>No problem - here is a step by step demo on how to do this:</p>
<p>
<iframe width="640" height="480" src="https://www.youtube.com/embed/koDp-bTdVTk" frameborder="0"></iframe>
</p>
<p>Oh, and by the way the same app will function also on Android without any changes to the code :-) &nbsp;</p>
<p>This is an extract from an online seminar that I recorded for one of <a href="https://community.oracle.com/community/technology_network_community/virtualtechsummitresources">Oracle's Virtual Technology Summits</a> - and I figured people who didn't sign up for that event might still benefit from having access to the demo part of the video.</p>
<p> </p>
<p>In the demo I show how to build an on-device app that access local data as well as remote data through web services, and how easy it is to integrate device features too.</p>
<p>If you want to try this on your own, get a copy of the <a href="http://www.oracle.com/technetwork/developer-tools/eclipse/downloads/index.html">Oracle Enterprise Pack for Eclipse</a>, and follow the setup steps in the <a href="http://www.oracle.com/technetwork/developer-tools/maf/learnmore/index.html">tutorial here</a>.</p>
<p>And then just follow the video steps.</p>
<p>The location of the web service I accessed is at:&nbsp;<a href="http://wsf.cdyne.com/WeatherWS/Weather.asmx?WSDL">http://wsf.cdyne.com/WeatherWS/Weather.asmx?WSDL</a></p>
<p>And the Java classes I use to simulate local data are &nbsp;<a href="https://community.oracle.com/docs/DOC-892218">here</a>.</p>
<p><br /></p>
<p><br /></p>
<p> </p>https://blogs.oracle.com/shay/entry/dynamcially_add_components_to_anDynamcially add components to an Oracle MAF AMX page & show and hide components Shay Shmeltzer-Oracle 2014-12-31T20:18:43+00:002015-01-02T22:33:23+00:00<p>A question I saw a couple of times about Oracle MAF AMX pages is &quot;how can I add a component to the page at runtime?&quot;.
</p>
<p>
In this blog entry I'm going to show you a little trick that will allow you to dynamically &quot;add&quot; components to an AMX page at runtime, even though right now there is no API that allows you to add a component to an AMX page by coding.
</p>
<p>
Let's suppose you want to add a bunch of buttons to a page at runtime. All you'll need to have is an array that contain entries for every button you want to add to the page.</p>
<p>
We are going to use the amx:iterator component that is bounded to the above array and simply goes over the records and renders a component for each one.
</p>
<p>
Going one step beyond that, I'm going to show how to control which components from that array actually shows up, based on another value in the array.
</p>
<p>
So this is another thing you get to see in this example and this is how to dynamically show or hide a component in an AMX page with conditional EL. Usually you'll use this EL in the rendered property of a component, but in the iterator situation we need to use another approach using the inlineStyle that you change dynamically.</p>
<p>You can further refine this approach to control which type of component you render - see for example <a href="https://blogs.oracle.com/shay/entry/creating_dynamic_adf_input_forms">this demo</a> I did for regular ADF Faces apps and apply a similar approach.&nbsp;</p>
<p>By the way - this demo is done with Eclipse using OEPE - but if you are using JDeveloper it should be just as easy :-)&nbsp;</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/jXMx0rT96so?list=UU1CuuEupvAodXXN0Xh_Tnsg" frameborder="0">
&amp;amp;lt;p&amp;amp;gt; &amp;amp;lt;/p&amp;amp;gt;
</iframe>
<p>Here is the relevant code from the AMX page:</p>
<p><span class="Apple-tab-span" style="white-space: pre;"> </span>&lt;amx:iterator value=&quot;#{bindings.emps1.collectionModel}&quot; var=&quot;row&quot; id=&quot;i2&quot;&gt;</p>
<p><span class="Apple-tab-span" style="white-space: pre;"> </span>&lt;amx:commandButton id=&quot;c1&quot; text=&quot;#{row.name}&quot; <b>inlineStyle=&quot;#{row.salary &gt;4000 ? 'display: none;' : 'display: inline;'}</b>&quot;&gt;</p>
<p><span class="Apple-tab-span" style="white-space: pre;"> </span>&lt;amx:setPropertyListener id=&quot;s1&quot; from=&quot;#{row.name}&quot; to=&quot;#{viewScope.title}&quot;/&gt;</p>
<p><span class="Apple-tab-span" style="white-space: pre;"> </span>&lt;/amx:commandButton&gt;</p>
<p><span class="Apple-tab-span" style="white-space: pre;"> </span>&lt;/amx:iterator&gt;&nbsp;</p>
<p> </p>https://blogs.oracle.com/shay/entry/modifying_the_oracle_alta_skinModifying the Oracle Alta SkinShay Shmeltzer-Oracle 2014-11-19T20:38:07+00:002014-11-19T20:38:07+00:00<p>In the previous blog entries I showed you how to <a href="https://blogs.oracle.com/shay/entry/a_guide_to_developing_your">create an ADF project that uses the new Alta UI</a> and then showed you an example of implementing one of the design patterns for a <a href="https://blogs.oracle.com/shay/entry/card_flip_effect_with_oracle">flip card</a>. In this blog/video I'm going to show you how you can further fine tune the look and feel of your Alta application by modifying and extending your skin with CSS.</p>
<p>At the end of the day, this is going to be done in a similar way to how you skinned previous ADF applications. (If you have never done this before, you might want to watch the videos in these <a href="https://blogs.oracle.com/shay/entry/adf_faces_skin_editor_how">two</a> blog <a href="https://blogs.oracle.com/shay/entry/styling_specific_adf_components_with">entries</a>).</p>
<p>But since the skinning design time is not completely there for Alta in JDeveloper 12.1.3 there are a couple of tricks. Specifically when you create the new skin, you'll need to change the <strong>trinidad-skins.xml</strong> file to indicate it is extending the alta-v1 and not skyros-v1 &nbsp;- <strong>&lt;extends&gt;alta-v1.desktop&lt;/extends&gt;</strong></p>
<p>Then the rest of your tasks would be basically the same (although you won't see the overview tab in your skin editor).</p>
<p>So here we go:</p>
<p>
<iframe width="480" height="360" src="https://www.youtube.com/embed/KwB878KfItw" frameborder="0"></iframe>
</p>https://blogs.oracle.com/shay/entry/card_flip_effect_with_oracleCard Flip Effect with Oracle Alta UIShay Shmeltzer-Oracle 2014-11-14T23:00:30+00:002014-11-14T23:00:30+00:00<p>The Oracle Alta UI focuses on reducing clatter in the user interface. So one of the first thing you'll try and do when creating an Alta UI is decide which information is not that important and can be removed from the page.</p>
<p>But what happens if you still have semi-important information that the user would like to see, but you don't want it to overcrowd the initial page UI? You can put it on the other side of the page - or in the Alta UI approach - create a flip card.</p>
<p>Think of a flip card as an area that switches the shown content to reveal more information - and with ADF's support for animation you can make a flip effect.</p>
<p>In the demo below I show you how to create this flip card effect using the new <strong>af:deck</strong> and <strong>af:transition</strong> components in ADF Faces.&nbsp;</p>
<p>
<iframe width="560" height="315" src="http://www.youtube.com/embed/O5NfhTY-qQY" frameborder="0"></iframe>
</p>
<p>A few other minor things you can see here:</p>
<p> </p>
<ul>
<li>Use conditional ELs and viewScope variables - specifically the code I use is&nbsp;</li>
</ul><strong><span class="Apple-tab-span" style="white-space: pre;"> </span>#{viewScope.box eq 'box2' ? 'box2' : 'box1'}&nbsp;</strong><br />
<ul>
<li>Add additional field to a collection after you initially drag and dropped it onto a page - using the binding tab</li>
<li>Setting up partialSubmit and PartialTriggers for updates to the page without full refresh&nbsp;</li>
</ul>
<p> </p>https://blogs.oracle.com/shay/entry/a_guide_to_developing_yourDeveloping Your First Oracle Alta UI page with Oracle ADF FacesShay Shmeltzer-Oracle 2014-10-27T17:20:58+00:002014-10-27T17:20:58+00:00<p>At Oracle OpenWorld this year Oracle announced the new Oracle Alta UI - a set of UI guidelines that will help you create better looking and functioning applications. We use these guidelines to build all our modern cloud based applications and products - and you can use it too today if you are on JDeveloper 12.1.3.&nbsp;</p>
<p>The Alta UI site is at <a href="http://bit.ly/oraclealta">http://bit.ly/oraclealta</a> </p>
<p>Take a look for example at one page from the master details pattern page:</p>
<p><img src="http://www.oracle.com/webfolder/ux/middleware/alta/patterns/images/MasterDetail.png" alt="altapage" width="500" height="400" /> </p>
<p>You might be wondering how do I go about starting to create such an Alta page layout?</p>
<p>Below is a quick video that shows you how to build such a page from scratch.</p>
<p> </p>
<p>
<iframe width="580" height="450" src="https://www.youtube.com/embed/oUNdxY7L-3w" frameborder="0"></iframe>
</p>
<p><br /></p>
<p>A few things you'll see during the demo:</p>
<p> </p>
<ul>
<li>Basic work with the panelGridLayout - for easier page structure</li>
<li>Working with the new tablet first page template&nbsp;</li>
<li>Enabling selection on a listView component</li>
<li>Working with the circular status meter</li>
<li>The new <b>AFAppNavbarButton</b> style class</li>
<li>&nbsp;Hot-swap usage to reduce page re-runs</li>
</ul>
<div>
<p>One point to raise about this video is that it focuses more on getting the layout and look rather then the Alta way of designing an application flow and content. In a more complete Alta mind-set you'll also figure out things like fields that probably don't need to be shown (such as the employee_id), you'll think more about &quot;why is the user on this page and what will he want to do here?&quot; which might mean you'll add things like a way to see all the employees in a department in a hierarchy viewer rather than a form that scroll a record at a time. &nbsp;There are more things you can do to this page to get even better functionality, but on those in future blog entries...&nbsp;</p>
</div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>https://blogs.oracle.com/shay/entry/an_oow_summary_from_theAn OOW Summary from the ADF and MAF perspectiveShay Shmeltzer-Oracle 2014-10-03T18:39:39+00:002014-10-03T18:39:39+00:00<p>Another Oracle OpenWorld is behind us, and it was certainly a busy one for us. In case you didn't have a chance to attend, or follow the twitter frenzy during the week, here are the key take aways that you should be aware of if you are developing with either Oracle ADF or Oracle MAF.</p>
<p><strong>&nbsp;Oracle Alta UI</strong></p>
<p>We released our design patterns for building modern applications for multiple channels. This include a new skin and many samples that show you how to create the type of UIs that we are now using for our modern cloud based interfaces.</p>
<p>All the resources are at <a href="http://bit.ly/oraclealta">http://bit.ly/oraclealta</a> </p>
<p>The nice thing is that you can start using it today in both Oracle ADF Faces and Oracle MAF - just switch the skin to get the basic color scheme. <a href="http://www.oracle.com/webfolder/ux/middleware/alta/new-dev-w-alta-skin.html">Instructions here</a>.</p>
<p>Note however that Alta is much more than just a color change, if you really want an Alta type UI you need to start designing your UI differently - take a look at some of the <a href="http://www.oracle.com/webfolder/ux/middleware/alta/gallery/homePages/browser.html">screen samples</a>&nbsp;or our <a href="http://jdevadf.oracle.com/workbetter/faces/index.jsf">demo application</a> for ideas.</p>
<p><strong>Cloud Based Development</strong></p>
<p>A few weeks before OOW we released our <a href="https://cloud.oracle.com/developer">Developer Cloud Service</a> in production, and our booth and sessions showing this were quite popular. For those who are not familiar, the Developer Cloud Service, gives you a hosted environment for managing your code life cycle (git version management, Hudson continuos integration, and easy cloud deployment), and it also gives you a way to track your requirements, and manage team work.</p>
<p>While this would be relevant to any Java developing team, for ADF developers there are specific templates in place to make things even easier. </p>
<p>You can get to experience this in a trial mode by getting a trial <a href="https://cloud.oracle.com/java">Java service account here</a>.</p>
<p>Another developer oriented cloud service that got a lot of focus this year was on the upcoming <a href="https://cloud.oracle.com/mobile">Oracle Mobile Cloud Service</a> - which includes everything your team will need in order to build mobile backends (APIs, Connectors, Notification, Storage and more). We ran multiple hands-on labs and sessions covering this, and it was featured in many keynotes too.</p>
<p>&nbsp;In the Application development tools general session we also announced that in the future we'll provide a capability called Oracle Mobile Application Accelerator (which we call Oracle MAX for short) which will allow power users to build on device mobile applications easily through a web interface. The applications will leverage MAF as the framework, and as a MAF developer you'll be able to provide additional templates, components and functionality for those.</p>
<p><img src="https://pbs.twimg.com/media/ByzKNUBIYAAPgBF.jpg:large" width="500" height="400" /> </p>
<p>Another capability we showed in the same session was a cloud based development environment that we are planning to add to both the Developer Cloud Service and the Mobile Cloud Service - for developers to be able to code in the cloud with the usual functions that you would expect from a modern code editor.</p>
<p><img src="https://pbs.twimg.com/media/ByzPZlHIcAIv5d5.jpg:large" alt="dcs" width="500" height="400" /> </p>
<p><strong>The Developer Community is Alive and Kicking</strong></p>
<p>The ADF and MAF sessions were quite full this year, and additional community activities were successful as well. Starting with a set of ADF/MAF session by users on the Sunday courtesy of ODTUG and the ADF EMG. In one of the sessions there members of the community announced a new <a href="http://www.olrichs.nl/2014/09/adf-emg-xml-data-control-version-100.html">ADF data control for XML</a>. Check out the work they did!</p>
<p>ODTUG also hosted a nice meet up for ADF/MAF developers, and announced their upcoming <a href="http://www.odtug.com/mobileday">mobile conference</a> in December. They also have their upcoming KScope15 summer conference that is <a href="http://kscope15.com">looking for your abstract right now</a>!</p>
<p><strong>Coding Competition</strong></p>
<p>Want to earn some money on the side? Check out the <a href="http://bit.ly/MAFChallenge">Oracle MAF Developer Challenge</a> - build a mobile app and you can earn prizes that range from $6,000 to $1,000.</p>
<p><strong>Sessions</strong></p>
<p>With so many events taking place it sometime hard to hit all the sessions that you are interested in. And while the best experience is to be in the room, you might get some mileage from just looking at the slides. You can find the slides for many sessions in the <a href="https://oracleus.activeevents.com/2014/connect/search.ww">session catalog here</a>. And a list of the <a href="https://oracleus.activeevents.com/2014/connect/focusOnDoc.do?focusID=17595">ADF/MAF sessions here</a>.</p>
<p>See you next year.&nbsp;</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>https://blogs.oracle.com/shay/entry/required_field_validation_in_oracleRequired Field Validation in Oracle MAFShay Shmeltzer-Oracle 2014-08-08T22:38:01+00:002014-08-08T22:38:01+00:00<p>A short entry to explain how to do field validation in Oracle MAF. As an example let's suppose you want a field to have a value before someone clicks to do an operation.</p>
<p>To do that you can set the field's attribute for required and &quot;show required&quot; like this:</p>
<p> <em>&nbsp; &lt;amx:inputText label=&quot;label1&quot; id=&quot;it1&quot; <strong>required=&quot;true&quot; showRequired=&quot;true&quot;</strong>/&gt;</em></p>
<p>&nbsp;Now if you run your page, leave the field empty and click a button that navigates to another page, you'll notice that there was no indication of an error. This is because you didn't tell the AMX page to actually do a validation.&nbsp;</p>
<p>&nbsp;To add validation you use an amx:validationGroup tag that will surround the fields you want to validate.</p>
<p>For example:</p>
<p><em>&nbsp; &nbsp; &nbsp;&lt;amx:validationGroup id=&quot;<strong>vg1</strong>&quot;&gt;</em></p>
<p><em>&nbsp; &nbsp; &lt;amx:inputText label=&quot;label1&quot; id=&quot;it1&quot; required=&quot;true&quot; showRequired=&quot;true&quot;/&gt;</em></p>
<p><em>&nbsp; &nbsp; &lt;/amx:validationGroup&gt;</em></p>
<p>Then you can add a amx:validateOperation tag to the button that does navigation and tell it to validate the group you defined before (vg1 in our example).</p>
<p><em>&nbsp; &nbsp; &nbsp; &nbsp;&lt;amx:commandButton id=&quot;cb2&quot; text=&quot;go&quot; action=&quot;gothere&quot;&gt;</em></p>
<p><em>&nbsp; &nbsp; &nbsp; &nbsp; &lt;amx:validationBehavior id=&quot;vb1&quot; group=&quot;<strong>vg1</strong>&quot;/&gt;</em></p>
<p><em>&nbsp; &nbsp; &nbsp; &lt;/amx:commandButton&gt;</em></p>
<p>Now when you run the page and try to navigate you'll get your validation error.</p>
<p><img src="https://blogs.oracle.com/shay/resource/images/validationMAF.png" height="350" width="190" /> </p>
<p> </p>
<p> </p>https://blogs.oracle.com/shay/entry/accessing_remote_databases_from_oracleAccessing remote databases from Oracle MAF with the TopLink/EclipseLink REST CRUD ServicesShay Shmeltzer-Oracle 2014-08-04T21:17:31+00:002014-08-05T15:48:35+00:00<p>In the last post I showed you how simple it is to <a href="https://blogs.oracle.com/shay/entry/rest_enable_your_database_with">expose CRUD REST operations on your database with TopLink/EclipseLink</a>.</p>
<p>The next logical step is to then consume those with Oracle MAF to build a mobile application.</p>
<p>This is quite simple with the REST data control. All you need to do is just map the right URLs and create the operation.</p>
<p>Here is a quick demo:</p>
<p> <iframe width="640" height="480" src="https://www.youtube.com/embed/XJ_L8gkd3Wg" frameborder="0" allowfullscreen></iframe></p>
<p> </p>
<p>One trick I show in the demo is how to delay the call to a REST service until the user actually provides a value to a parameter. A common issue people have when they have the parameter form and the results on the same page. The solution is easy using the refresh condition of the executables of the page and using the &quot;ne null&quot; check on the parameter value.&nbsp;</p>https://blogs.oracle.com/shay/entry/rest_enable_your_database_withREST enable your Database for CRUD with TopLink/EclipseLink and JDeveloperShay Shmeltzer-Oracle 2014-08-01T23:10:06+00:002014-08-06T22:58:23+00:00<p>It seems that REST interfaces are all the rage now for accessing your backend data, this is especially true in the world of mobile development. In this blog I'm going to show you how easy it is to provide a complete REST interface for your database by leveraging TopLink/EclipseLink and JDeveloper.</p>
<p>This relies on a capability that is available in TopLink 12c where every JPA entity that you have created can be RESTified with a simple servlet that TopLink provides.</p>
<p>All you need to do is locate the file <strong>toplink-dataservices-web.jar</strong> on your machine (this is included in the JDeveloper install so you can just search that directory) and then package your project as a WAR.</p>
<p>At that point you'll be able to get a complete CRUD set of operation for this entity.</p>
<p>In the video below I'm to retrieving departments by their id using a URL like this:</p>
<p><a href="http://127.0.0.1:7101/TLServices-Project1-context-root/persistence/v1.0/out/entity/Departments/30">http://127.0.0.1:7101/<strong>TLServices-Project1-context-root</strong>/persistence/v1.0/<strong>out</strong>/entity/<strong>Departments</strong>/30</a></p>
<p>(out - name of my persistence unit. Departments - name of my entity)&nbsp;</p>
<p>A complete list of all the <a href="http://docs.oracle.com/middleware/1213/toplink/solutions/restful_jpa.htm#CHDEGJIG">REST URL syntax</a> is here part of the TopLink documentation on this feature.:</p>
<p>http://docs.oracle.com/middleware/1213/toplink/solutions/restful_jpa.htm#CHDEGJIG</p>
<p>Check out how easy the process is in this video (using MySQL database):</p>
<p>
<iframe width="480" height="360" src="https://www.youtube.com/embed/K_3Zx73NobY" frameborder="0"></iframe>
</p>
<p>Here are some additional URL samples for getting other types of queries:</p>
<p>Get all the Employees - &nbsp;<a href="http://127.0.0.1:7101/TLServices/persistence/v1.0/out/query/Employees.findAll">http://127.0.0.1:7101/TLServices/persistence/v1.0/out/query/Employees.findAll</a></p>
<p>Get all the Employees in department 50 -&nbsp;<a href="http://127.0.0.1:7101/TLServices/persistence/v1.0/out/entity/Departments/50/employeesList">http://127.0.0.1:7101/TLServices/persistence/v1.0/out/entity/Departments/50/employeesList</a></p>
<p>Executing a specific named query (@NamedQuery(name = &quot;Employees.findByName&quot;, query = &quot;select o from Employees o where o.first_name like :name order by o.last_name&quot;)) &nbsp;-<a href="http://127.0.0.1:7101/TLServices/persistence/v1.0/out/query/Employees.findByName;name=John">http://127.0.0.1:7101/TLServices/persistence/v1.0/out/query/Employees.findByName;name=John</a></p>https://blogs.oracle.com/shay/entry/adf_faces_responsive_design_12ADF Faces Responsive Design - 12.1.3 UpdateShay Shmeltzer-Oracle 2014-07-09T16:40:04+00:002014-07-09T16:40:04+00:00<p>I while back I blogged about a technique for doing <a href="https://blogs.oracle.com/shay/entry/responsive_design_for_your_adf">responsive design with JDeveloper 12.1.2</a>&nbsp;using media queries and css, but it is time for a small update for those who are using 12.1.3 - since there are some new capabilities that you can leverage. &nbsp;(I would still recommend watching the other video as it shows some other things you can do with the same technique like changing the size of icons/fonts).</p>
<p>The major change in 12.1.3 is that you can now include your media query and style classes inside the skin definition. When you combine this with page templates you get very clean pages that don't need to include code for responsiveness.</p>
<p>See the demo below for how it works.</p>
<p>
<iframe width="530" height="380" src="https://www.youtube.com/embed/Kvtjx5caZ_o" frameborder="0"></iframe>
</p>
<p> </p>
<p>One note - in the houses demo I actually used a region that is replicated on the left side and in the panel drawer. This way you only need to code that part once.</p>
<p>Here is the code for the skin's css file:</p>
<p> </p>
<p>.wide {</p>
<p>&nbsp; &nbsp; display: inline;</p>
<p>}</p>
<p><br /></p>
<p>.narrow {</p>
<p>&nbsp; &nbsp; display: none;</p>
<p>}</p>
<p>@media screen and (max-width:950px) {</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .narrow {</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: inline;</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .wide {</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: none;</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; }</p>
<p> </p>
<p>And here is the code for the page template:</p>
<p>&nbsp;&lt;?xml version='1.0' encoding='UTF-8'?&gt;</p>
<p>&lt;af:pageTemplateDef xmlns:af=&quot;http://xmlns.oracle.com/adf/faces/rich&quot; var=&quot;attrs&quot; definition=&quot;private&quot;</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; xmlns:afc=&quot;http://xmlns.oracle.com/adf/faces/rich/component&quot;&gt;</p>
<p>&nbsp; &nbsp; &lt;af:xmlContent&gt;</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; &lt;afc:component&gt;</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;afc:description/&gt;</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;afc:display-name&gt;collapseTemplate&lt;/afc:display-name&gt;</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;afc:facet&gt;</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;afc:facet-name&gt;right&lt;/afc:facet-name&gt;</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/afc:facet&gt;</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;afc:facet&gt;</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;afc:facet-name&gt;drawer&lt;/afc:facet-name&gt;</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/afc:facet&gt;</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;afc:facet&gt;</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;afc:facet-name&gt;center&lt;/afc:facet-name&gt;</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/afc:facet&gt;</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; &lt;/afc:component&gt;</p>
<p>&nbsp; &nbsp; &lt;/af:xmlContent&gt;</p>
<p>&nbsp; &nbsp; &lt;af:panelGridLayout id=&quot;pt_pgl1&quot;&gt;</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; &lt;af:gridRow marginTop=&quot;5px&quot; height=&quot;auto&quot; marginBottom=&quot;5px&quot; id=&quot;pt_gr1&quot;&gt;</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;af:gridCell marginStart=&quot;5px&quot; width=&quot;20%&quot; id=&quot;pt_gc1&quot; &gt;</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;af:panelGroupLayout layout=&quot;vertical&quot; styleClass=&quot;wide&quot;&gt;</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;af:facetRef facetName=&quot;right&quot;/&gt;</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/af:panelGroupLayout&gt;</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/af:gridCell&gt;</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;af:gridCell marginStart=&quot;5px&quot; marginEnd=&quot;5px&quot; width=&quot;80%&quot; id=&quot;pt_gc2&quot;&gt;</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;af:facetRef facetName=&quot;center&quot;/&gt;</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/af:gridCell&gt;</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;af:gridCell &nbsp;halign=&quot;stretch&quot; width=&quot;auto&quot; id=&quot;pt_gc3&quot; &gt;</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;af:panelGroupLayout layout=&quot;vertical&quot; styleClass=&quot;narrow&quot;&gt;</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;af:panelDrawer &nbsp;id=&quot;pt_pd1&quot; height=&quot;500px&quot;&gt;</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;af:showDetailItem id=&quot;dr1&quot; shortDesc=&quot;Drawer 1&quot;&gt;</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;af:facetRef facetName=&quot;drawer&quot;/&gt;</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/af:showDetailItem&gt;</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/af:panelDrawer&gt;</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/af:panelGroupLayout&gt;</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/af:gridCell&gt;</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; &lt;/af:gridRow&gt;</p>
<p>&nbsp; &nbsp; &lt;/af:panelGridLayout&gt;</p>
<p>&lt;/af:pageTemplateDef&gt;</p>
<div>As before you should also be setting the web.xml contextual parameter&nbsp;<strong style="color: #555555; font-family: Arial, Verdana, sans-serif; font-size: 12px; line-height: 18px;">org.apache.myfaces.trinidad.DISABLE_CONTENT_COMPRESSION &nbsp;= &nbsp;true</strong></div>
<p> </p>
<p> </p>https://blogs.oracle.com/shay/entry/adf_faces_12_1_3ADF Faces 12.1.3 Features Demo - PartialShay Shmeltzer-Oracle 2014-06-26T18:35:58+00:002014-06-26T18:35:58+00:00<p>The new Oracle ADF and JDeveloper 12.1.3 is out and it comes with a bunch of new features, especially in the UI layer - ADF Faces. </p>
<p>You can read the new <a href="http://www.oracle.com/technetwork/developer-tools/jdev/documentation/1213nf-2222743.html">features document on OTN,</a> and you should also look into the <a href="http://jdevadf.oracle.com/adf-richclient-demo/faces/feature/dataVisualization/gallery.jspx">new components demo</a> for some inspiration.</p>
<p>For a quick overview of some of the new UI capabilities check out this quick video that shows some of the key new features.</p>
<p>
<iframe width="480" height="360" src="https://www.youtube.com/embed/VbjNbo2e4I8" frameborder="0">&lt;span id=&quot;XinhaEditingPostion&quot;&gt;&lt;/span&gt;</iframe>
</p>
<p> </p>https://blogs.oracle.com/shay/entry/resolving_problems_with_the_embeddedResolving Problems with the Embedded WebLogic in JDeveloper on MacShay Shmeltzer-Oracle 2014-06-20T16:03:39+00:002014-06-20T16:03:39+00:00<p>Just a quick entry about something that I ran into in the past with JDeveloper 11.1.2.4, and that some of you who are using Mac might run into.</p>
<p>When you try and run your web application and the embedded WebLogic tries to start you might run into an error like:</p>
<pre wrap="true">Unrecognized option: -jrockit
Error: Could not create the Java Virtual Machine.
Error: A fatal exception has occurred. Program will exit.&nbsp;</pre>
<p>This is most likely due to the fact that JDeveloper is trying to use the wrong JVM to run your WebLogic.</p>
<p>To solve this - go into the&nbsp;<span style="font-family: Menlo; font-size: 11px;">system11.1.2.4.39.64.36.1/DefaultDomain/bin directory</span>&nbsp;and locate the setDefaultDomain.sh file.</p>
<p>Edit this file and add the following lines:</p>
<p style="margin: 0px; font-size: 11px; font-family: Menlo;">JAVA_VENDOR=&quot;Sun&quot;</p>
<p style="margin: 0px; font-size: 11px; font-family: Menlo;">export JAVA_VENDOR&nbsp;</p>
<p>By doing this you'll instruct WebLogic to start with a regular JVM and not the JRockit variant which isn't on your mac.&nbsp;</p>https://blogs.oracle.com/shay/entry/book_review_oracle_adf_enterpriseBook Review - Oracle ADF Enterprise Application Development Made Simple (Second Edition)Shay Shmeltzer-Oracle 2014-05-16T21:35:50+00:002014-05-16T21:35:50+00:00<p>I got a copy of the new edition of Sten Vesterli's book about enterprise development with ADF, so I wanted to give a quick review update. I reviewed the first edition three years ago - and you can read that review <a href="https://blogs.oracle.com/shay/entry/new_book_oracle_adf_enterprise">here</a>.</p>
<p>The second edition is not drastically different from the first one, and it shouldn't be. Most of the best practices that Sten pointed out in his original book still apply today. What might have changed a bit over the years are some of the tools used by enterprises to manage their application - and this is what some of &nbsp;the updates are about - for example in addition to covering Subversion there is a Git section now. In addition Sten incorporate a few more architectural and conceptual bits and pieces that he collected over the past three years working with various customers.&nbsp;</p>
<p>If you want to get a video summary of the type of topics Sten covers in this books you can watch <a href="https://www.youtube.com/watch?v=luh457H_v0M&amp;list=PLEn4egIzXHXXEOz1yOY1nqtgcPxpfAQSG&amp;index=2">this seminar</a> he recorded for one of our <a href="https://blogs.oracle.com/jdeveloperpm/entry/oracle_adf_virtual_developer_day">virtual developer days</a>.&nbsp;</p>
<p>This is definitely a book that should be part of the reading material for groups about to embark on Oracle ADF development project - it will save them from some common mistakes and will put them on the right track to a well structured project and team.</p>
<p>It is worthwhile mentioning also that over the past year we at Oracle have been quite actively increasing the amount of material we are producing around those aspects and we centralize them in our <a href="http://www.oracle.com/technetwork/developer-tools/adf/learnmore/adfarchitect-1639592.html">ADF Architecture Square on OTN</a>.</p>
<p>If you haven't visited that site or subscribed to the <a href="http://www.oracle.com/technetwork/developer-tools/adf/learnmore/adfarchitect-1639592.html#tv">ADF Architecture YouTube channel</a> - it's time you'll do this to.&nbsp;</p>https://blogs.oracle.com/shay/entry/book_review_oracle_adf_enterprise1Book Review - Oracle ADF Enterprise Application Development Made Simple (Second Edition)Shay Shmeltzer-Oracle 2014-05-16T21:35:50+00:002014-05-16T21:38:06+00:00<p>I got a copy of the new edition of Sten Vesterli's book about enterprise development with ADF, so I wanted to give a quick review update. I reviewed the first edition three years ago - and you can read that review <a href="https://blogs.oracle.com/shay/entry/new_book_oracle_adf_enterprise">here</a>.</p>
<p>The second edition is not drastically different from the first one, and it shouldn't be. Most of the best practices that Sten pointed out in his original book still apply today. What might have changed a bit over the years are some of the tools used by enterprises to manage their application - and this is what some of &nbsp;the updates are about - for example in addition to covering Subversion there is a Git section now. In addition Sten incorporate a few more architectural and conceptual bits and pieces that he collected over the past three years working with various customers.&nbsp;</p>
<p>If you want to get a video summary of the type of topics Sten covers in this books you can watch <a href="https://www.youtube.com/watch?v=luh457H_v0M&amp;list=PLEn4egIzXHXXEOz1yOY1nqtgcPxpfAQSG&amp;index=2">this seminar</a> he recorded for one of our <a href="https://blogs.oracle.com/jdeveloperpm/entry/oracle_adf_virtual_developer_day">virtual developer days</a>.&nbsp;</p>
<p>This is definitely a book that should be part of the reading material for groups about to embark on Oracle ADF development project - it will save them from some common mistakes and will put them on the right track to a well structured project and team.</p>
<p>To get the book or read a sample chapter <a href="http://www.packtpub.com/oracle-adf-enterprise-application-development-2e/book">click here</a>.&nbsp;</p>
<p>It is worthwhile mentioning also that over the past year we at Oracle have been quite actively increasing the amount of material we are producing around those aspects and we centralize them in our <a href="http://www.oracle.com/technetwork/developer-tools/adf/learnmore/adfarchitect-1639592.html">ADF Architecture Square on OTN</a>.</p>
<p>If you haven't visited that site or subscribed to the <a href="http://www.oracle.com/technetwork/developer-tools/adf/learnmore/adfarchitect-1639592.html#tv">ADF Architecture YouTube channel</a> - it's time you'll do this to.&nbsp;</p>https://blogs.oracle.com/shay/entry/dynamic_adf_forms_with_theDynamic ADF Forms with the new Dynamic Component (and synch with DB)Shay Shmeltzer-Oracle 2014-04-11T23:22:19+00:002014-04-11T23:22:19+00:00<p>I wrote a couple of blogs in the past that talked about creating dynamic UIs based on a model layer that changes (<a href="https://blogs.oracle.com/shay/entry/creating_dynamic_adf_input_forms">example1</a><a href="https://blogs.oracle.com/shay/entry/adf_faces_dynamic_tags_-_for_a"> example2</a>). Well in 12c there is a new ADF Faces component&nbsp;<a href="http://jdevadf.oracle.com/adf-richclient-demo/faces/feature/dynamicFaces/dynFormFlatten.jspx">af:dynamicComponent</a> that makes dynamic forms even more powerful. This component can be displayed as various UI components at runtime. This allows us to create Forms and tables with full functionality in a dynamic way.</p>
<p>In fact, we use this when you create either a form or a table component in your JSF page dragging over a data control. We now allow you to not specify each field in your UI but just say that you want to show all the fields in the data control.</p>
<p>In the demo below I show you how this is done, and then review how your UI automatically updates when you add fields in your model layer. For example if your DB changed and you used the &quot;Synchronize with DB&quot; and added the field to the VO - that's it no more need to go to every page and add the new field.</p>
<p>Check it out:</p>
<p>
<iframe width="580" height="440" src="https://www.youtube.com/embed/EUCQI6Aa1Yw" frameborder="0">&lt;span id=&quot;XinhaEditingPostion&quot;&gt;&lt;/span&gt;</iframe>
</p>https://blogs.oracle.com/shay/entry/book_review_developing_web_applicationBook Review - Developing Web Application with Oracle ADF EssentialsShay Shmeltzer-Oracle 2013-11-26T21:44:24+00:002013-11-26T21:44:24+00:00<p>I got my hands on a copy of the new book &quot;<a href="http://www.packtpub.com/developing-web-applications-with-oracle-adf-essentials/book">Developing Web Application with Oracle ADF Essentials</a>&quot; by <a href="http://www.vesterli.com/">Sten Vesterli</a> published by Packt Publishing, so I wanted to post a quick review.</p>
<p>There are already multiple books about Oracle ADF out there, but the unique angle for this book is that it focuses on the free version of Oracle ADF - <a href="http://www.oracle.com/technetwork/developer-tools/adf/overview/adfessentials-1719844.html">Oracle ADF Essentials</a>. To increase the &quot;Free&quot; angle it also uses the free MySQL database throughout the book which is a nice touch that differs from the regular approach of using an Oracle database.</p>
<p>The book is around 250 pages long and as such it is not aiming for a very deep technical dive, but rather gives a very good overview of the various layers of ADF Essentials to someone who is new to the world of ADF. It covers the Fusion stack including ADF BC, ADF Faces, ADF Controller and ADF Binding. Going beyond the wizards it also covers the basics of adding code in managed beans and the business components layer.<br /></p>
<p>The book starts with setting up your environment including JDev+MySQL and GlassFish, and then uses this environment to build a simple application that you enhance and add features to while going through the various chapters of the book.<br /></p>
<p>Considering the target audience for ADF Essentials (Java purists), it might have been interesting to include in the book a chapter that describe integration with EJBs and POJOs as a source of data for ADF applications. I guess this is something for the next edition...</p>
<p>The book does address establishing a security layer for your ADF Essentials application - something that you get in regular ADF but you need to manually implement in the Essentials packaging. <br /></p>
<p>Sten also goes beyond the basic intro level to cover some of the topics he also covered in his <a href="http://www.packtpub.com/oracle-adf-enterprise-application-development/book#in_detail">other book about enterprise ADF Development</a>. He includes chapters about debugging, deployment and library usage and also addresses team development - which is a nice touch.</p>
<p>Overall the book can provide a great introduction to ADF for a developer who is completely new to the framework. The fact that is uses a completely free stack should make it even more attractive. For developers who are looking to leverage the free version of ADF this is right now the only book out there to cover that part of the framework (Glassfish configuration etc).</p>
<p>After you read this book, you'll probably want to dig deeper with some of the <a href="http://www.oracle.com/technetwork/developer-tools/jdev/training11g-090355.html">more in-depth books about ADF</a> to complete the picture.</p>
<p><br /></p>
<p><br /></p>https://blogs.oracle.com/shay/entry/deploying_the_oracle_adf_summitDeploying the Oracle ADF Summit Application to the Oracle Java CloudShay Shmeltzer-Oracle 2013-11-15T18:17:53+00:002013-11-15T18:17:53+00:00<p>With the new Oracle Cloud offering you no longer need to install and manage the runtime platform for ADF applications. You can use a hosted instance of Oracle WebLogic and the Oracle Database to host your application.</p>
<p>Deployment to the cloud is quite straightforward, and you can do it directly from inside JDeveloper.</p>
<p>Here is a quick video showing you how to first create your database objects and then deploy your application to the cloud.</p>
<p> <iframe width="480" height="360" src="https://www.youtube.com/embed/2GT34_I_AYU" frameborder="0" allowfullscreen></iframe></p>
<p>One small point, in the demo you don't see it but I also used the option to import the data into the tables.</p>
<p>To do that scroll the cloud cart to the right and check the check box for data.</p>
<p> </p>
<p><br /></p>
<p><br /></p>https://blogs.oracle.com/shay/entry/responsive_design_for_your_adfResponsive Design for your ADF Faces Web ApplicationsShay Shmeltzer-Oracle 2013-10-31T16:40:23+00:002014-07-09T22:52:47+00:00<p>Note - an update to the technique shown here for those who are using 12.1.3 is <a href="https://blogs.oracle.com/shay/entry/adf_faces_responsive_design_12">documented in this blog entry</a>.&nbsp;</p>
<p>Responsive web applications are a common pattern for designing web pages that adjust their UI based on the device that access them. With the increase in the number of ADF applications that are being accessed from mobile phones and tablet we are getting more and more questions around this topic.</p>
<p><a href="http://www.ateam-oracle.com/going-mobile-with-adf-running-adf-faces-on-mobile-phones-and-tablets/">Steven Davelaar wrote a comprehensive article</a> covering key concepts in this area that you can find here. The article focuses on what I would refer to as server adaptive application, where the server adapts the UI it generates based on the device that is accessing the server.<br /></p>
<p>However there is one more technique that is not covered in that article and can be used with Oracle ADF - it is CSS manipulation on the client that can achieve responsive design. I'll cover this technique in this blog entry. The main advantage of this technique is that the UI manipulation does not require the server to send over a new UI when a change is needed. This for example allows your page to change immediately when you change the orientation of your device.</p>
<p>(By the way this example was developed for one of the seminars in the upcoming <a href="https://oracle.6connex.com/portal/ADF2013/login?langR=en_US&amp;mcc=socialofficial">Oracle ADF OTN Virtual Developer Day</a>).<br /></p>
<p>In the demo that you'll see below you'll see a single page that changes the way it is displayed based on the orientation of the device. Here is the page with the tablet in landscape and portrait:</p>
<p> </p>
<table>
<tbody>
<tr>
<td valign="top"><img width="390" src="https://blogs.oracle.com/shay/resource/images/responsive.png" /> </td>
<td><img width="250" src="https://blogs.oracle.com/shay/resource/images/responsive3.png" /> </td>
</tr>
</tbody>
</table>
<p> </p>
<p> </p><br />
<p> <br /></p>
<p> </p>
<p>To achieve this I'm using a CSS media query in my page template that changes the display property of a couple of style classes that are used in my page.</p>
<p>The media query has this format:</p>
<p>@media screen and (max-width:700px) {<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; .narrow {<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; display: inline;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; .wide {<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; display: none;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; .adjustFont {<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-size: small;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; .icon-home {<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-size: 24px;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }</p>
<p>This changes the properties of the same styleClasses that are defined in my application's skin.<br /></p>
<p><a href="http://www.youtube.com/watch?v=qG0st6nsQlM">Here </a>is a quick demo video that shows you the full application and explains how it works.</p>
<p>
<iframe width="580" height="440" frameborder="0" src="https://www.youtube.com/embed/qG0st6nsQlM"></iframe>
</p>
<p>Update - since running this demo I found out that in 12.1.2 you get better results if everything relating to the style is defined just in your template and not spread in your skin file too (as shown in the video) <br /></p>
<p>So For those looking to replicate this, here are the basic files:</p><b>pageTemplate</b>:
<p>&lt;?xml version='1.0' encoding='UTF-8'?&gt;<br />&lt;af:pageTemplateDef xmlns:af=&quot;http://xmlns.oracle.com/adf/faces/rich&quot; var=&quot;attrs&quot; definition=&quot;private&quot;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; xmlns:afc=&quot;http://xmlns.oracle.com/adf/faces/rich/component&quot;&gt;<br />&nbsp;&nbsp;&nbsp; &lt;af:xmlContent&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;afc:component&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;afc:description&gt;A template that will work on phones and desktop&lt;/afc:description&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;afc:display-name&gt;ResponsiveTemplate&lt;/afc:display-name&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;afc:facet&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;afc:facet-name&gt;main&lt;/afc:facet-name&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/afc:facet&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/afc:component&gt;<br />&nbsp;&nbsp;&nbsp; &lt;/af:xmlContent&gt;<br />&nbsp;&nbsp;&nbsp; &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;/&gt;<br />&nbsp;&nbsp;&nbsp; &lt;af:resource type=&quot;css&quot;&gt;</p>
<p><br />.wide {<br />&nbsp;&nbsp;&nbsp; display: inline;<br />}<br /><br />.narrow {<br />&nbsp;&nbsp;&nbsp; display: none;<br />}<br /><br />.adjustFont {<br />&nbsp;&nbsp;&nbsp; font-size: large;<br />}<br />.icon-home {<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-family: 'UIShellUGH';<br />&nbsp;&nbsp;&nbsp; -webkit-font-smoothing: antialiased;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-size: 36px;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; color: #ffa000;<br />}<br />@media screen and (max-width:700px) {<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; .narrow {<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; display: inline;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; .wide {<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; display: none;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; .adjustFont {<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-size: small;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; .icon-home {<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-size: 24px;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }<br /><br />@font-face {<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-family: 'UIShellUGH';<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRk9UVE8AA..removed code here...AzV6b1g==)format('truetype');<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-weight: normal;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-style: normal;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }<br /><br />&nbsp;&nbsp;&nbsp; &lt;/af:resource&gt;<br />&nbsp;&nbsp;&nbsp; &lt;af:panelGroupLayout id=&quot;pt_pgl4&quot; layout=&quot;vertical&quot; styleClass=&quot;sizeStyle&quot;&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;af:panelGridLayout id=&quot;pt_pgl1&quot;&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;af:gridRow marginTop=&quot;5px&quot; height=&quot;40px&quot; id=&quot;pt_gr1&quot;&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;af:gridCell marginStart=&quot;5px&quot; width=&quot;100%&quot; marginEnd=&quot;5px&quot; id=&quot;pt_gc1&quot;&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;af:panelGroupLayout id=&quot;pt_pgl3&quot; halign=&quot;center&quot; layout=&quot;horizontal&quot;&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;af:outputText value=&quot;h&quot; id=&quot;ot2&quot; styleClass=&quot;icon-home&quot;/&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;af:outputText value=&quot;HR System&quot; id=&quot;ot3&quot; styleClass=&quot;adjustFont&quot;/&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/af:panelGroupLayout&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/af:gridCell&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/af:gridRow&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;af:gridRow marginTop=&quot;5px&quot; height=&quot;auto&quot; id=&quot;pt_gr2&quot;&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;af:gridCell marginStart=&quot;5px&quot; width=&quot;100%&quot; marginEnd=&quot;5px&quot; id=&quot;pt_gc2&quot; halign=&quot;stretch&quot;&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;af:panelGroupLayout id=&quot;pt_pgl2&quot; layout=&quot;scroll&quot;&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;af:facetRef facetName=&quot;main&quot;/&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/af:panelGroupLayout&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/af:gridCell&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/af:gridRow&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;af:gridRow marginTop=&quot;5px&quot; height=&quot;20px&quot; marginBottom=&quot;5px&quot; id=&quot;pt_gr3&quot;&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;af:gridCell marginStart=&quot;5px&quot; width=&quot;100%&quot; marginEnd=&quot;5px&quot; id=&quot;pt_gc3&quot;&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;af:panelGroupLayout id=&quot;pt_pgl5&quot; layout=&quot;vertical&quot; halign=&quot;center&quot;&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;af:separator id=&quot;pt_s1&quot;/&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;af:outputText value=&quot;Copyright Oracle Corp. 2013&quot; id=&quot;pt_ot1&quot; styleClass=&quot;adjustFont&quot;/&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/af:panelGroupLayout&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/af:gridCell&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/af:gridRow&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/af:panelGridLayout&gt;<br />&nbsp;&nbsp;&nbsp; &lt;/af:panelGroupLayout&gt;<br />&lt;/af:pageTemplateDef&gt;<br /></p>
<p><b>Example from the page</b>:</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;af:gridRow id=&quot;gr3&quot;&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;af:gridCell id=&quot;gc7&quot; columnSpan=&quot;2&quot;&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;af:panelGroupLayout id=&quot;pgl8&quot; styleClass=&quot;narrow&quot;&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;af:link text=&quot;Menu&quot; id=&quot;l1&quot;&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;af:showPopupBehavior triggerType=&quot;action&quot; popupId=&quot;p1&quot; align=&quot;afterEnd&quot;/&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/af:link&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/af:panelGroupLayout&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;af:panelGroupLayout id=&quot;pgl7&quot; styleClass=&quot;wide&quot;&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;af:navigationPane id=&quot;np1&quot; hint=&quot;buttons&quot;&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;af:commandNavigationItem text=&quot;Departments&quot; id=&quot;cni1&quot;/&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;af:commandNavigationItem text=&quot;Employees&quot; id=&quot;cni2&quot;/&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;af:commandNavigationItem text=&quot;Salaries&quot; id=&quot;cni3&quot;/&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;af:commandNavigationItem text=&quot;Jobs&quot; id=&quot;cni4&quot;/&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;af:commandNavigationItem text=&quot;Services&quot; id=&quot;cni5&quot;/&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;af:commandNavigationItem text=&quot;Support&quot; id=&quot;cni6&quot;/&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;af:commandNavigationItem text=&quot;Help&quot; id=&quot;cni7&quot;/&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/af:navigationPane&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/af:panelGroupLayout&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/af:gridCell&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/af:gridRow&gt;<br /></p>
<p>I placed a workspace with this sample <a href="https://blogs.oracle.com/shay/resource/ADFResponsive2.zip">here</a>. Run the sample.jsf page in the viewController project.</p>https://blogs.oracle.com/shay/entry/navigating_between_pages_in_adfNavigating between pages in ADF Mobile with Swipe gesturesShay Shmeltzer-Oracle 2013-10-01T16:53:03+00:002013-10-01T16:55:10+00:00<p>Mobile users are getting used to specific touch gestures, such as swipe, in their applications. And sometimes you might want to incorporate those gestures as a means for navigating between pages in your ADF Mobile application. </p>
<p>You can do this by using the amx:actionListener component and having it bind to a method in your backing bean.</p>
<p>The basic ingredients:</p>
<p>In an AMX page add an actionListner to a component for example:</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;amx:listItem id=&quot;li1&quot;&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;amx:outputText value=&quot;#{row.name}&quot; id=&quot;ot3&quot;/&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;amx:actionListener id=&quot;al1&quot; type=&quot;<b>swipeLeft</b>&quot; binding=&quot;<b>#{viewScope.ma.navigateMethod}</b>&quot;/&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/amx:listItem&gt;</p>
<p>The binding edit function in the property inspector can help you create the above managed bean (ma).</p>
<p>In the managed bean you can code this:</p>
<p>&nbsp;&nbsp;&nbsp; public void <b>navigateMethod</b>(ActionEvent actionEvent) {<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; AdfmfContainerUtilities.invokeContainerJavaScriptFunction(AdfmfJavaUtilities.getFeatureName(), &quot;adf.mf.api.amx.doNavigation&quot;, new Object[] { &quot;<b>go</b>&quot; });<br />&nbsp;&nbsp;&nbsp; } </p>
<p>In your taskflow for the feature have a navigation rule like this:</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;control-flow-case id=&quot;__3&quot;&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;from-outcome&gt;<b>go</b>&lt;/from-outcome&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;to-activity-id&gt;camera&lt;/to-activity-id&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/control-flow-case&gt;<br /></p>
<p>Now with a swipe to the right on the list item you'll navigate to the camera page.<br /></p>
<p><br /></p>https://blogs.oracle.com/shay/entry/tablet_support_in_adf_facesTablet support in ADF Faces with 12cShay Shmeltzer-Oracle 2013-07-23T00:00:40+00:002013-10-24T17:14:48+00:00<p>I <a href="https://blogs.oracle.com/shay/entry/adaptive_layout_for_adf_faces">blogged before</a> about the support for tablet and touch device rendering with ADF Faces. Release 12c brings together features that were introduced in previous patches (such as 11.1.1.7) into a single line of code and even adds more features in this area.</p>
<p> To show you what ADF Faces does automatically for you, I re-recorded the interaction with the <a href="https://blogs.oracle.com/shay/entry/12c_new_adf_faces_components">houses demo that I showed here</a>, but this time on an iPad.</p>
<p>Things to note:</p>
<ul>
<li>Switching from stretch to flow layout (eliminates scroll bars and allow swipe scroll)</li>
<li>Table pagination instead of scroll bars</li>
<li>HTML5 rendering for data visualization components instead of Flash <br /></li>
<li>Drag and drop and tap and hold support on device</li>
<li>Swipe support on objects such as cards in a hierarchy viewer</li>
<li>Maximize area support</li>
<li>New tablet style UI components (Springboard and list view for example)</li>
</ul>
<p>&nbsp;It's a single application that runs on both the regular and mobile browser.</p>
<p>The only thing I needed to do is use an EL for two properties (maximize and dimensionsFrom) on the top containers in the page that will switch the whole page to do flow layout on touch devices. You would usually use this in your page template for the application.<br /></p>
<p>The code I use is:</p>
<p>&nbsp;&nbsp;&nbsp; &lt;af:document title=&quot;index.jsf&quot; id=&quot;d1&quot;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; maximize=&quot;#{adfFacesContext.agent.capabilities['touchScreen'] eq 'none' ? true : false}&quot;&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;af:form id=&quot;f1&quot;&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;af:panelStretchLayout id=&quot;psl1&quot;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dimensionsFrom=&quot;#{adfFacesContext.agent.capabilities['touchScreen'] eq 'none'&nbsp; ?'parent' : 'children'&nbsp; }&quot;&gt;<br /> <br /></p>
<p>Here's the video:</p>
<p>
<iframe width="580" height="440" frameborder="0" src="https://www.youtube.com/embed/2lnO--nsESQ">&amp;lt;span id=&amp;quot;XinhaEditingPostion&amp;quot;&amp;gt;&amp;lt;/span&amp;gt;</iframe>
</p>
<p><br /></p>https://blogs.oracle.com/shay/entry/12c_new_adf_faces_components12c New ADF Faces Components - Springboard, Drawer and TimelineShay Shmeltzer-Oracle 2013-07-18T00:28:11+00:002013-07-25T03:26:50+00:00<p>The new JDeveloper 12c comes with some pretty cool ADF Faces components that can make your applications (or demos) look even better.</p>
<p>For the session I did at the Kscope13 conference I built a small application that showed off some of these components, and now the JDeveloper 12c is available for all to see, I thought I'll share a short video of the application.</p>
<p> It highlights the runtime behavior of the new components and shows you the basic code structure for each.</p>
<p>Check it out:</p>
<p>
<iframe width="580" height="420" frameborder="0" src="https://www.youtube.com/embed/cW-oUdGPe14"></iframe>
</p>
<p> </p>
<p>Here is the code that is uses in the pages:</p>
<p>Springboard (inside the center of a panelStretchLayout):</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;af:panelSpringboard id=&quot;ps1&quot; displayMode=&quot;grid&quot; childCreation=&quot;lazyUncached&quot;&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;af:showDetailItem text=&quot;Search&quot; icon=&quot;/springimg/home48_ena.png&quot; id=&quot;sdi1&quot;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; stretchChildren=&quot;first&quot; flex=&quot;0&quot;&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;af:region value=&quot;#{bindings.kscope1.regionModel}&quot; id=&quot;r4&quot;/&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/af:showDetailItem&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;af:showDetailItem text=&quot;Quick View&quot; icon=&quot;/springimg/tasks48_ena.png&quot; id=&quot;sdi2&quot;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; stretchChildren=&quot;first&quot; flex=&quot;0&quot;&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;af:region value=&quot;#{bindings.HV_Browsing1.regionModel}&quot; id=&quot;r1&quot;/&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/af:showDetailItem&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;af:showDetailItem text=&quot;Cities Graphs&quot; icon=&quot;/springimg/dashboard48_ena.png&quot;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; id=&quot;sdi3&quot; stretchChildren=&quot;first&quot; flex=&quot;0&quot;&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;af:region value=&quot;#{bindings.Charts1.regionModel}&quot; id=&quot;r3&quot;/&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/af:showDetailItem&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;af:showDetailItem text=&quot;House Data&quot; icon=&quot;/springimg/source48_ena.png&quot; id=&quot;sdi4&quot;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; stretchChildren=&quot;first&quot; flex=&quot;0&quot;&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;af:region value=&quot;#{bindings.hotList1.regionModel}&quot; id=&quot;r6&quot;/&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/af:showDetailItem&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;af:showDetailItem text=&quot;Timeline&quot; icon=&quot;/springimg/deployments48_ena.png&quot; id=&quot;sdi5&quot;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; stretchChildren=&quot;first&quot; flex=&quot;0&quot;&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;af:region value=&quot;#{bindings.TimeLine1.regionModel}&quot; id=&quot;r5&quot;/&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/af:showDetailItem&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;af:showDetailItem text=&quot;Support&quot; icon=&quot;/springimg/team48_ena.png&quot; id=&quot;sdi6&quot;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; badge=&quot;2&quot; stretchChildren=&quot;first&quot; flex=&quot;0&quot;/&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/af:panelSpringboard&gt;</p>
<p> </p>
<p>Code for the panelDrawer:</p>
<p> &nbsp;&nbsp;&nbsp; &lt;af:panelDrawer id=&quot;pd1&quot; position=&quot;end&quot;&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;af:showDetailItem text=&quot;showDetailItem 1&quot; id=&quot;sdi1&quot; icon=&quot;/springimg/home48_ena.png&quot; disclosed=&quot;true&quot; flex=&quot;0&quot;&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;dvt:pieGraph id=&quot;graph1&quot; value=&quot;#{bindings.CityStats1.graphModel}&quot; subType=&quot;PIE&quot; shortDesc=&quot;a&quot;&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/dvt:pieGraph&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/af:showDetailItem&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;af:showDetailItem text=&quot;City&quot; id=&quot;sdi2&quot; icon=&quot;/springimg/dashboard48_ena.png&quot;&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;dvt:horizontalBarGraph id=&quot;graph2&quot; value=&quot;#{bindings.CityStats11.graphModel}&quot;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; subType=&quot;BAR_HORIZ_CLUST_SPLIT2Y&quot; shortDesc=&quot;a&quot;&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/af:showDetailItem&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;af:showDetailItem text=&quot;showDetailItem 3&quot; id=&quot;sdi3&quot; icon=&quot;/springimg/network48_ena.png&quot; disclosed=&quot;false&quot;&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/af:showDetailItem&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;af:showDetailItem text=&quot;showDetailItem 5&quot; id=&quot;sdi5&quot;/&gt;<br />&nbsp;&nbsp;&nbsp; &lt;/af:panelDrawer&gt;<br /></p>
<p>&nbsp;TimeLine:</p>
<p>&nbsp; &lt;dvt:timeline id=&quot;tl1&quot; startTime=&quot;2012-06-01&quot; endTime=&quot;2013-01-13&quot;&gt;<br />&nbsp;&nbsp;&nbsp; &lt;dvt:timelineSeries id=&quot;ts1&quot; var=&quot;evt&quot; value=&quot;#{bindings.HousesView1.collectionModel}&quot;&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;dvt:timelineItem value=&quot;#{evt.FirstOffered}&quot; id=&quot;ti1&quot; group=&quot;#{evt.City}&quot;&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;af:panelGroupLayout id=&quot;pg1&quot; layout=&quot;horizontal&quot;&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;af:panelGroupLayout id=&quot;pg2&quot; layout=&quot;vertical&quot;&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;af:outputText id=&quot;ot1&quot; value=&quot;#{evt.Street}&quot; noWrap=&quot;true&quot;/&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;af:outputText id=&quot;ot2&quot; value=&quot;#{evt.Price}&quot; noWrap=&quot;true&quot;&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;af:convertNumber groupingUsed=&quot;false&quot; pattern=&quot;#{bindings.HousesView1.hints.Price.format}&quot;/&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/af:outputText&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;af:image id=&quot;ot3&quot; source=&quot;#{evt.Picture}&quot; inlineStyle=&quot;height:100px; width:150px;&quot;/&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/af:panelGroupLayout&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/af:panelGroupLayout&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/dvt:timelineItem&gt;<br />&nbsp;&nbsp;&nbsp; &lt;/dvt:timelineSeries&gt;<br />&nbsp;&nbsp;&nbsp; &lt;dvt:timeAxis id=&quot;ta1&quot; scale=&quot;weeks&quot;/&gt;<br />&nbsp;&nbsp;&nbsp; &lt;dvt:timelineOverview id=&quot;ov1&quot;&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;dvt:timeAxis id=&quot;ta2&quot; scale=&quot;quarters&quot;/&gt;<br />&nbsp;&nbsp;&nbsp; &lt;/dvt:timelineOverview&gt;<br />&nbsp; &lt;/dvt:timeline&gt; <br /></p>
<p>Here is a past entry about <a href="https://blogs.oracle.com/shay/entry/working_with_the_sunburst_adf">using the Sunburst component</a> that you see in the demo.<br /></p>
<p><br /></p>https://blogs.oracle.com/shay/entry/declarative_view_objects_vos_forDeclarative View Objects (VOs) for better ADF performanceShay Shmeltzer-Oracle 2013-06-28T20:31:12+00:002013-10-01T23:30:09+00:00<p>Just got back from ODTUG's kscope13 conference which had a lot of good deep ADF content. In one of my session I ran out of time to do one of my demos, so I wanted to share it here instead.</p>
<p>This is a demo of how Declarative View Objects can increase your application's performance. </p>
<p>For those who are not familiar with declarative VOs, those are VOs that don't actually specify a hard coded query. Instead ADF creates their query at runtime, and it does it based on the data that is requested in your UI layer. This can be a huge saver of both DB resources and network resources. <a href="http://docs.oracle.com/cd/E37975_01/web.111240/e16182/bcquerying.htm#CHDGBHAI">More in the documentation</a>.<br /></p>
<p>Here is a quick example that shows you how using such a VO can automatically switch to a simpler SQL instead of a complex join when needed. (note while I demo with 11.1.2.* the feature is there in 11.1.1.* versions also).<br /></p>
<p>The demo also shows you how you can monitor the SQL that ADF BC issues to the database using the WebLogic logging feature in JDeveloper.</p>
<p>
<iframe width="580" height="440" frameborder="0" allowfullscreen="true" src="https://www.youtube.com/embed/8E-ITwT0LOs"></iframe>
</p>
<p>As a side note, I would have loved to see more ADF developers attending Kscope. This demo was part of the &quot;ADF intro&quot; track at Kscope, In the advanced ADF track you would have been treated to a full tuning session about ADF with lots of other tips. Consider attending <a href="http://kscope14.com/">Kscope next year</a> - it is going to be in Seattle this time.<br /></p>