It's great to finally have the Oracle ADF Mobile solution out there.

If you are not familiar with ADF Mobile - it basically lets you build applications that run on iOS and Android devices using the concepts you already know - components based UI constructions (same idea as JSF), taskflows, data controls, Java and of course JDeveloper.

I created one demo that shows how to build an on-device application that gets data from local Java files (that run on the device - yes we do Java on iOS too) - you can see it here.

However, one thing many of you might be wondering is how can you get data from your database into these mobile applications.

Well if you already built your data access with Oracle ADF Business Components then here is a two step video demo that shows you what to do.

The steps are:

1. Expose ADF Business Components as Services

2. Create an ADF Mobile application that consumes the above services with the Web service data control

Simple right?

That's the whole point of ADF Mobile - making on device application development as simple as possible.

Try it out on your device.

In my previous blog entry I went over the basics of exposing ADF Business Components through service interfaces, and developing a simple ADF Mobile application that access and fetches data from those services.

In this entry we'll dive a bit deeper  and address an update scenario through these web service interfaces.

You can see the full demo video at the end of the post.

In the first steps I show how to add an explicit method execution to fetch a specific record we want to update on the second page of a flow.

For an update you'll be invoking a service method and passing the record you want to update as a parameter. As in many other Web services scenarios, we need to provide a complete object of specific type to the method. The ADF Web service data control helps you here by offering an object of this type that you can drag and drop into your page.

The next step is to make sure to fill that object with the values you want to update. In the demo we do this through  coding in a backing bean that shows how to use the AdfmfJavaUtilities utility. The code gets the value from one field, gets a pointer to the parallel update field, and then copy from one to the other.

At the end of the bean we manually execute the call to the update method on the Web service.

Here is the demo:

Here is the code used in the backing bean in the demo above.

package a.mobile;

import oracle.adfmf.amx.event.ActionEvent;
import javax.el.MethodExpression;
import javax.el.ValueExpression;

import oracle.adfmf.amx.event.ActionEvent;
import oracle.adfmf.framework.api.AdfmfJavaUtilities;
import oracle.adfmf.framework.model.AdfELContext;
public class backing {
    public backing() {
    }

    public void copyAndUpdate(ActionEvent actionEvent) {
        // Add event code here...
        AdfELContext adfELContext = AdfmfJavaUtilities.getAdfELContext();
        ValueExpression ve = AdfmfJavaUtilities.getValueExpression("#{bindings.DepartmentName.inputValue}", String.class);
        ValueExpression ve3 =
            AdfmfJavaUtilities.getValueExpression("#{bindings.DepartmentName1.inputValue}", String.class);
        ve3.setValue(adfELContext, ve.getValue(adfELContext));
        ve = AdfmfJavaUtilities.getValueExpression("#{bindings.DepartmentId.inputValue}", int.class);
        ve3 = AdfmfJavaUtilities.getValueExpression("#{bindings.DepartmentId1.inputValue}", int.class);
        ve3.setValue(adfELContext, ve.getValue(adfELContext));
        ve = AdfmfJavaUtilities.getValueExpression("#{bindings.ManagerId.inputValue}", int.class);
        ve3 = AdfmfJavaUtilities.getValueExpression("#{bindings.ManagerId1.inputValue}", int.class);
        ve3.setValue(adfELContext, ve.getValue(adfELContext));
        ve = AdfmfJavaUtilities.getValueExpression("#{bindings.LocationId.inputValue}", int.class);
        ve3 = AdfmfJavaUtilities.getValueExpression("#{bindings.LocationId1.inputValue}", int.class);
        ve3.setValue(adfELContext, ve.getValue(adfELContext));
        MethodExpression me = AdfmfJavaUtilities.getMethodExpression("#{bindings.updateDepartmentsView1.execute}", Object.class, new Class[] {});
        me.invoke(adfELContext, new Object[] {});
        }
    }

As you might have noticed from my latest ADF Mobile entries, I'm doing most of my ADF Mobile development on a windows machine and testing on an Android device. Unfortunately the Android/windows experience is not as fast as the iOS/Mac one.

However, there is one thing I learned today that can make this a bit less painful in terms of the speed to deploy and test your application - and this is to use the "Release" mode when deploying your application instead of the "Debug" mode.

To do this you'll first need to define a keystore, but as Joe from our Mobile team showed me today, this is quite easy.

Here are the steps:

Open a command line in your JDK bin directory (I just used the JDK that comes with the JDeveloper install).

Issue the following command:

keytool –genkey –v –keystore <Keystore Name>.keystore –alias <Alias Name> -keyalg RSA –keysize 2048 –validity 10000

Both keystore name and alias names are strings that you decide on.

The keytool utility will then prompt you with various questions that you'll need to answer.

Once this is done, the next step is to configure your JDeveloper preferences->ADF Mobile to add this keystore there under the release tab:

 Then for your application specific deployment profile - switch the build mode from debug to release.

The end result is a much smaller mobile application (for example from 60 to 21mb) and a much faster deployment cycle (for me it is about twice as fast as before).

Many of the SOAP based web services out there have parameters of specific object types - so not just simple String/int inputs. The ADF Web service data control makes it quite simple to interact with them. And this applies also in the case of ADF Mobile.

Since there were several thread on OTN asking about this - I thought I'll do a quick demo to refresh people memory about how you pass these "complex" parameters to your Web service methods. By the way - this video is also relevant if you are not doing mobile development, you'll basically use the exact same process for building "regular web" ADF applications that access these types of Web services.

One more thing you might want to do after you create the page is look at the binding tab to see the method call in there, and notice the parameters for it in the structure property. Go and look at their NDValue property to get the complete picture.

Most of the enterprise Web services you'll access are going to be secured - meaning they'll require you to pass a user/password in order to get to their data. 

If you never created a secured Web service, it's simple in JDeveloper! For the below video I just right clicked on a Java class that I exposed as a Web service, and chose  "Web Service Properties" and then checked the "oracle/wss_username_token_service_policy" box from the list of options (that's the option supported by ADF Mobile right now):

In the demo below we are going to use a "remote" login server that does the authentication of the user/pass.

ok - so now you have a secured ADF application - deploy it on a server and get the URL for that application. 

From this point on you'll see the process in the video which deals with the configuration of your ADF Mobile app.

First you'll need to enable security for your ADF mobile application, so it will prompt users to provide a user/pass combination.

You'll also need to configure security on specific features. And you can have them use remote login pointing to your regular secured ADF application.

Next define your Web service data control. Right click on the web service data control to "define Web Service Security".

You'll also need to define the adfCredentialStoreKey property for the Web Service data control in the connections.xml file.

This should be it. Here is the flow:

If you haven't already - you can read more about this in the Mobile developer guide, and Andrejus has a sample for you.

The Carousel component is one of the slickier ways of showing collections of data, and on a mobile device it works really great with the finger swipe gesture.

Using the Carousel component in ADF Mobile is similar to using it in regular web ADF applications, with one major change - right now you can't drag a collection from the data control palette and drop it as a carousel.

So here is a quick work around for that, and details about setting up carousels in your application.

First thing you'll need is a data control that returns an array of records. In my demo I'm using the Emps collection that you can get from following this tutorial.

Then you drag the emps and drop it in your amx page as an ADF mobile iterator.

We are doing this as a short cut to getting the right binding needed for a carousel in our page. If you look now in your page's binding you'll see something like this:

You can now remark the whole iterator code in your page's source.

Next let's add the carousel

From the component palette drag the carousel (from the data view category) to the page. Next drag a carousel item and drop it in the nodestamp facet of the carousel.

Now we'll hook up the carousel to the binding we got from the iterator - this is quite simple just copy the var and value attributes from the iterator tag to the carousel tag: var="row" value="#{bindings.emps.collectionModel}"

Next drop a panelForm, or another layout panel in to the carousel item.

Into that panelForm you can now drop items and bind their value property to row.attributeNames - basically copying the way it is in the fields in the iterator for example: value="#{row.hireDate}". By the way you can also copy other attributes like the label.

And that's it.

Your code should end up looking something like this:

    <amx:carousel id="c1" var="row" value="#{bindings.emps.collectionModel}">
      <amx:facet name="nodeStamp">
        <amx:carouselItem id="ci1">
          <amx:panelFormLayout id="pfl1">
            <amx:inputText label="#{bindings.emps.hints.salary.label}" value="#{row.salary}" id="it1"/>
            <amx:inputText label="#{bindings.emps.hints.name.label}" value="#{row.name}" id="it2"/>
          </amx:panelFormLayout>
        </amx:carouselItem>
      </amx:facet>
    </amx:carousel>

And when you run your application it will look like this:

The web service data control in Oracle ADF gives you a simplified approach to consuming services in ADF applications, and now with ADF Mobile the usage of this service seems to be growing.

A frequent question we get is what happens if the service that I'm consuming changes - how do I update my data control?

Well, first we should mention that if you do a good design of your application before you actually code - then things like Web service method signature shouldn't change. The signature is the contract between the publisher and the consumer, and contracts shouldn't be broken.

But in reality things do change during development stages, so here is how you can update both method signatures and service location with the Web service data control:

After watching this video you might be tempted to not copy the WSDLs to your project - which lets you use the right click update on a data control. However there is a reason why the copy is on by default, it reduces network traffic when you are actually running your application since ADF doesn't need to go to the server to find out the service structure. So for runtime performance, you probably should keep the WSDL local.

 I encourage you to further look into both the connections.xml file where your service location is saved, and the datacontrols.dcx file where its definition is kept to get an even deeper understanding of how ADF works underneath the declarative layers.

A new addition to the growing collection of Oracle ADF related books is the new  Oracle ADF Real World Developer's Guide by Jobinesh Purushothaman published by Packt Publishing. I got a copy of the ebook version for review, and here is the summary:

If you are familiar with Jobinesh's blog posts, you probably already know what to expect in his book - a deep level of understanding of the internal workings of the Oracle ADF framework.

This is what sets this book apart from the other ADF books out there. It might not be the best book to choose in your "getting started with Oracle ADF" stages, but once you know the basics of Oracle ADF application development, you should get this book to understand what is happening below the covers. What does the framework do when you finish a wizard or perform a drag and drop in your IDE.

A big section of the book is dedicated to a deep dive into the inner workings of Oracle ADF Business Components including the various stages of DB interaction, interaction between the EO,VO etc, and the various methods exposed for you to modify the way the framework works.

A similar depth you can find in the chapters about ADF Binding and the ADF Controller. You can expect to learn about the various life cycle stages, and parameters that control the behavior of the framework for those layers too.

A special chapter is dedicated to best practices and performance tips. It provides many tips about various parameters and things you should be aware of to achieve maximum performance for your ADF application.

Overall I think that this book should be part of the bookshelf of serious ADF developers - those who want to know ADF's in and outs.

Not that you'll ever need this, after all your code is perfect. But I did run into a situation where I wanted to figure out what exactly is wrong with my ADF Mobile code. The way to do debugging is documented in the ADF Mobile Developer Guide, but here is a version of those instructions with nice pictures (which might make it easier for you to find files etc).

1. First locate the cvm.properties file (In the Application Resources accordion). In this file you'll want to change the value of java.debug.enabled to be true. Also note in this file the value set for java.debug.port,  by default this is 8000 and we are going to keep that default value in our example.

2. Next have a look at your application level deployment profile, or even better create a new deployment profile and call it debugDeploy. The key thing here is to make sure your build mode is in Debug mode and not Release mode (remember the previous post where we told you that Release mode creates a smaller/faster deployment, but right now we do need the bigger package to be able to debug).

3. Next deploy your application with your new debugDeploy profile. We'll assume deployment directly to the device.

4. Now from the command line locate the directory where your Android's SDK adb.exe utility is and issue the following command to let the device (-d) know that we are going to use port forwarding for debug:

adb -d forward tcp:8000 tcp:8000

5. Now on your device start your application. You'll notice that it seems to be stuck, well this is because it is waiting for the debugger to connect to it. So what are you waiting for?

6. In JDeveloper, stand on your viewController project and right click to choose debug. If you changed the port number you'll need to update that info in the dialog that pops up - but if you kept it at the default 8000 we should be ok.

The debugger will now try and connect to your running application, and will stop at the breakpoint you set.

Happy debugging.

By the way if you want to debug on the emulator of Android the only difference will be in step 4 where instead of -d you'll use a -e .

With the new Oracle Cloud environment you no longer have to maintain a WebLogic server or a database server of your own, you can instead use instances hosted in the Oracle Cloud.

One nice feature of the Oracle Cloud is the support for deployment of Oracle ADF applications. In this entry I'll walk you through the basic steps you'll need to follow to get things working.

The first step is to get an Oracle Java Cloud Instance available for you - you can get a trial version here - this will also include an instance of an Oracle database onto which you can deploy your database objects.

Once your request gets approved you'll get an email with the cloud connection information for your instance. Guard this email - it has all the basic connection information and you'll be referring to it on a frequent basis.

Now you are ready to deploy your application.

The first step is to create a user in the database that will have your data (tables, procedures etc). To do this, go into the Oracle instance you got - this will be an APEX interface. In there go and create a new user - remember that user name. In the video below the user is called Summit.

Next you'll want to create/populate the tables of data. This can be done from inside JDeveloper. Open the database navigator, and you'll notice a new type of connection there - the cloud connection. Create a new connection mapping to the user you just defined (Summit). Now to create the tables and data we are going to use the Cloud Cart functionality in JDeveloper.

Open the Cloud Cart (from the JDeveloper View->Database->... Menu option). And simply drag into it any DB object that you require directly from your "regular" DB connection. Once you dropped all the tables, you should probably also click the data check box if you want the data to be transferred too (this is missing in the video so here is a picture).

When you are ready to do the import click the cloud button on the cart and this will create a new batch job that will upload to the database. You can track this deployment job directly from inside JDeveloper as well.

Once the tables are in place you are ready to move to the next step - the ADF application deployment.

One thing you'll need to change is the definition of the database that you are connecting to. Since you can't actually define data sources on the hosted WLS, you'll want to use the one which is already defined - it is called "database".

Go into your Application Module configuration and update the connection to use a JDBC DataSource called database.

Now you are ready to deploy your application - from the application menu choose deploy -> to application server.

You can define a new application server connection of type "Oracle Cloud" and this will allow you to directly deploy your application onto the server.

Once deployment is done - you are ready to access your cloud based application.

Check out this video for a demo of the above steps. 

If you are running into issues while deploying you'll be able to get more information in two places:

First you'll get a log from your deployment job - this can be directly opened in JDeveloper by clicking the link in the log window:

For more details - you can look into the server's log from the Java service console - click the "View log messages".

Need more information on deploying Oracle ADF on the Oracle Cloud - see additional blog entries:

Andreas Koop - Deploying ADF Applications into the Oracle Cloud Using JDeveloper

Andrejus Baranovskis - My ADF Sample Apps Live in Oracle Java Cloud

With so many developers out there working with Oracle JDeveloper and Oracle ADF there is a lot of excellent technical content published about JDeveloper and ADF in blogs and other places on the net. But how do you find the information that is relevant for you? How do you track down the entry that will solve your specific ADF question?

Well we at the JDeveloper product management team have been hard at work over the past years tracking and tagging every blog entry that we found.  This resulted in a repository that had close to 4,000 how-to's about Oracle ADF - all indexed and searchable with keywords.

However the site that hosted this repository (connotea) is closing, so we took the repository and moved it to a new location. In the process we cleaned it up, removed some non-working URLs, and fixed others, and did some cleaning on tagging as well.

The new repository is now live here : https://pinboard.in/u:OracleADF/

Note that you can sign up for the rss feed of this site to get notified when new blogs are being posted. Or if you prefer you can just track the same feed through our twitter account at http://twitter.com/JDeveloper

In parallel I created a small extension that will allow you to also search the repository and show the results for a keyword directly inside JDeveloper.

You can download this extension through help check for update. Or directly here.

If you want to improve this extension or learn how to build your own extension - you can get the workspace/project source code here.

Here is a small video showing how to use this extension.

JDeveloper 11.1.1.7 just hit the streets and among the new features it contains are several new data visualization ADF Faces components including timeline, treemap, and sunburst.

I got to play with the sunburst component a while back while building some internal demos - so I thought I'll provide a quick overview of some of the things you can do with it, and how to work with it at design time.

The sunburst component is used to visually show numerical data along one or two axises relating to something. One axis of data will show as the size of slices and the other data will show as a color. You can think about it as a two axis pie chart. The sunburst also allow for drilling into detail levels.

In the below example I'm showing just one set of data that has to do with the total orders broken in several levels - region->country->customer.

So here is the demo:

For those interested in the actual JSF code it is below:

          <dvt:sunburst id="s1" value="#{bindings.RegionSales1.treeModel}"
                        var="row" animationOnDataChange="alphaFade"
                        animationOnDisplay="fan" displayLevelsChildren="0"
                        styleClass="AFStretchWidth"
                        inlineStyle="height:620.0px;" legendSource="ag1"
                        colorLabel="Sales">
            <af:switcher facetName="#{row.hierTypeBinding.name}" id="s2">
              <f:facet name="RegionSales10">
                <dvt:sunburstNode value="#{row.Total}" label="#{row.Name}"
                                  id="sn3" drilling="insert">
                  <dvt:attributeGroups id="ag1" value="#{row.Total}"
                                       label="#{row.Total}" type="color"
                                       attributeType="continuous" minValue="0"
                                       maxValue="3000000" minLabel="0"
                                       maxLabel="3M">
                    <f:attribute name="color1" value="11AA55"/>
                    <f:attribute name="color2" value="44BB77"/>
                    <f:attribute name="color3" value="77DD99"/>
                  </dvt:attributeGroups>
                </dvt:sunburstNode>
              </f:facet>
              <f:facet name="RegionSales11">
                <dvt:sunburstNode value="#{row.Total}" label="#{row.Country}"
                                  id="sn1" drilling="insert">
                  <dvt:attributeGroups id="ag2" value="#{row.Total}"
                                       label="#{row.Total}" type="color"
                                       attributeType="continuous" minValue="0"
                                       maxValue="2800000" minLabel="0"
                                       maxLabel="2.8M">
                    <f:attribute name="color1" value="11AA55"/>
                    <f:attribute name="color2" value="44BB77"/>
                    <f:attribute name="color3" value="77DD99"/>
                  </dvt:attributeGroups>
                </dvt:sunburstNode>
              </f:facet>
              <f:facet name="RegionSales12">
                <dvt:sunburstNode value="#{row.Total}" label="#{row.Name1}"
                                  id="sn2" drilling="insertAndReplace"/>
              </f:facet>
            </af:switcher>
          </dvt:sunburst>

The new Oracle JDeveloper 11.1.2.4 just went out with a bunch of new features for ADF Mobile developers. Read more about it here - or watch this video.

One small feature that somehow got left out from the above two links is that there is a new UI component offered in ADF Mobile now - Star Rating.

The official tag name is dvtm:ratingGauge - and you can find it in the DVT Mobile AMX component palette under the Gauge section.

You can configure how many stars you want to show for your rating in the data section of the property inspector, and you can even specify to advance in half steps.

The component supports multiple shapes that you can choose from - star, diamond, circle, rectangle

You can also specify a different shape to be displayed for the unselected spots.

The code for the above 3 components is:
      <dvtm:ratingGauge id="ratingGauge1" value="2.5" maxValue="3" shape="circle"/>
      <dvtm:ratingGauge id="ratingGauge2" unselectedShape="dot" inputIncrement="half"/>
      <dvtm:ratingGauge id="ratingGauge3" shape="diamond"/>

The dial gauge is a very visual way to show data in an application - and it has been there in Oracle ADF Mobile since 11.1.2. However in that release you could only use a range of 0-100 - well now you can do better with the new ADF Mobile version.

But there is one little trick to how this works compared to the way it works in the regular web ADF Faces gauge component, and if you don't notice it you might think you are still stuck in the 0-100 days - The trick is the new background property.

If you are working in the property inspector you can right-click in the property to see explanation and the available values.

Or if you work in the code editor just use the code insight to choose the value you want.

For defining your own range you'll want to use the costum options.

Then you can get something that looks like these:

Also note that you can control the indicator type with the indicator property.

<dvtm:dialGauge background="circleAntiqueCustom" indicator="needleLight" value="7000" minValue="4000" maxValue="9000"/>

Happy visualization.

A new component that showed up in the JDeveloper 11.1.1.7 release is the af:listView component. This component will become more and more popular as more people target tablet devices with ADF Faces UI. The component allows you to create a scrollable list from a collection of data, and it also does fetching with ranges so you don't get too much network traffic. If you ever used a contacts list on a smart phone you'll recognize the list view source of inspiration - check out the runtime demo of the component here.

The component was actually backported into 11.1.1.7 from the 12c version - and while in the 12c version of JDeveloper there is better design time support for adding and binding a listview to a page, in the current release the work will mostly be manual.

However, for the lazy developer there are some shortcuts you can take to create the list component faster.

Here is a short video that shows you how to leverage an existing table component on your page to make the creation of the list component easier and with more functionality.

I posted before on how to do code level debugging in your ADF Mobile application, but sometimes debugging is an overhead and you would rather just put out some log messages that will allow you to track what's going on where.

ADF Mobile has built in support for a logging framework and it is documented in this chapter in the ADF Mobile Developer Guide.

You can use a line of code like this in your code:

Logger.getLogger(Utility.APP_LOGNAME).logp(Level.INFO, this.getClass().getName(), "Shay","We invoked the button");

Then don't forget to set the right level of logging (and possibly the log message format) in the logging.properties file under your META-INF directory.

The logging chapter in the doc, doesn't mention where to actually see the messages being logged.

One utility that you can use to see your log messages comes with the Android SDK - look into the tools directory there and you'll find the ddms.bat file - run it and you'll be able to see the log messages from your application.

On the side of that utility you can also define filters to just show you the messages you are interested in.

Here is a quick demo showing how this all works together:

By the way - a comment I got pointed out that ddms is old school and you should be using the new monitor.bat at the same locaiton. This will basically work just the same and will look like this:

This entry might seem a bit trivial, but from experience I know that sometime new features that are added to the product are not detected by developers who just continue working in the "traditional way". Well here is a quick update on such a feature - PPR:

Way back in 2009 I did a blog entry that showed how to implement partial page rendering (PPR) in ADF by setting the partialTrigger attribute of a field to depend on another.

Somewhere along the way* ADF got more advanced, and today there's a simpler way to do this without the need to define the partialTrigger property for your calculated field. Instead you just define dependency between fields in the model layer (ADF BC) and your View layer automatically handles the update to the screen. This is driven by the default use of the "ppr" mode for the ChangeEventPolicy of iterators in your page's binding layer.

Here is a quick demo that shows you how to define a calculated field that depends on the values of two other fields, and have it automatically display the value when the other fields are set.

For the record here is the bit of groovy code used in the calculated field:

if (CommissionPct != null)
{return Salary * (1+CommissionPct);}
else
return Salary

* - I'm not exactly sure in which version of JDeveloper this became the default behavior, but I just looked in 11.1.1.7 and the default changeEventPolicy is not PPR for a page - but it seems like you can change it to ppr to get it working.

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.

This is a demo of how Declarative View Objects can increase your application's performance.

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. More in the documentation.

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).

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.

As a side note, I would have loved to see more ADF developers attending Kscope. This demo was part of the "ADF intro" 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 Kscope next year - it is going to be in Seattle this time.

The new JDeveloper 12c comes with some pretty cool ADF Faces components that can make your applications (or demos) look even better.

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.

It highlights the runtime behavior of the new components and shows you the basic code structure for each.

Check it out:

Here is the code that is uses in the pages:

Springboard (inside the center of a panelStretchLayout):

                                <af:panelSpringboard id="ps1" displayMode="grid" childCreation="lazyUncached">
                                    <af:showDetailItem text="Search" icon="/springimg/home48_ena.png" id="sdi1"
                                                       stretchChildren="first" flex="0">
                                        <af:region value="#{bindings.kscope1.regionModel}" id="r4"/>
                                    </af:showDetailItem>
                                    <af:showDetailItem text="Quick View" icon="/springimg/tasks48_ena.png" id="sdi2"
                                                       stretchChildren="first" flex="0">
                                        <af:region value="#{bindings.HV_Browsing1.regionModel}" id="r1"/>
                                    </af:showDetailItem>
                                    <af:showDetailItem text="Cities Graphs" icon="/springimg/dashboard48_ena.png"
                                                       id="sdi3" stretchChildren="first" flex="0">
                                        <af:region value="#{bindings.Charts1.regionModel}" id="r3"/>
                                    </af:showDetailItem>
                                    <af:showDetailItem text="House Data" icon="/springimg/source48_ena.png" id="sdi4"
                                                       stretchChildren="first" flex="0">
                                        <af:region value="#{bindings.hotList1.regionModel}" id="r6"/>
                                    </af:showDetailItem>
                                    <af:showDetailItem text="Timeline" icon="/springimg/deployments48_ena.png" id="sdi5"
                                                       stretchChildren="first" flex="0">
                                        <af:region value="#{bindings.TimeLine1.regionModel}" id="r5"/>
                                    </af:showDetailItem>
                                    <af:showDetailItem text="Support" icon="/springimg/team48_ena.png" id="sdi6"
                                                       badge="2" stretchChildren="first" flex="0"/>
                                </af:panelSpringboard>

Code for the panelDrawer:

    <af:panelDrawer id="pd1" position="end">
      <af:showDetailItem text="showDetailItem 1" id="sdi1" icon="/springimg/home48_ena.png" disclosed="true" flex="0">
        <dvt:pieGraph id="graph1" value="#{bindings.CityStats1.graphModel}" subType="PIE" shortDesc="a">
        </dvt:pieGraph>
      </af:showDetailItem>
      <af:showDetailItem text="City" id="sdi2" icon="/springimg/dashboard48_ena.png">
        <dvt:horizontalBarGraph id="graph2" value="#{bindings.CityStats11.graphModel}"
                                subType="BAR_HORIZ_CLUST_SPLIT2Y" shortDesc="a">
      </af:showDetailItem>
      <af:showDetailItem text="showDetailItem 3" id="sdi3" icon="/springimg/network48_ena.png" disclosed="false">
      </af:showDetailItem>
      <af:showDetailItem text="showDetailItem 5" id="sdi5"/>
    </af:panelDrawer>

 TimeLine:

  <dvt:timeline id="tl1" startTime="2012-06-01" endTime="2013-01-13">
    <dvt:timelineSeries id="ts1" var="evt" value="#{bindings.HousesView1.collectionModel}">
      <dvt:timelineItem value="#{evt.FirstOffered}" id="ti1" group="#{evt.City}">
        <af:panelGroupLayout id="pg1" layout="horizontal">
          <af:panelGroupLayout id="pg2" layout="vertical">
            <af:outputText id="ot1" value="#{evt.Street}" noWrap="true"/>
            <af:outputText id="ot2" value="#{evt.Price}" noWrap="true">
              <af:convertNumber groupingUsed="false" pattern="#{bindings.HousesView1.hints.Price.format}"/>
            </af:outputText>
            <af:image id="ot3" source="#{evt.Picture}" inlineStyle="height:100px; width:150px;"/>
          </af:panelGroupLayout>
        </af:panelGroupLayout>
      </dvt:timelineItem>
    </dvt:timelineSeries>
    <dvt:timeAxis id="ta1" scale="weeks"/>
    <dvt:timelineOverview id="ov1">
      <dvt:timeAxis id="ta2" scale="quarters"/>
    </dvt:timelineOverview>
  </dvt:timeline>

I blogged before 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.

To show you what ADF Faces does automatically for you, I re-recorded the interaction with the houses demo that I showed here, but this time on an iPad.

Things to note:

• Switching from stretch to flow layout (eliminates scroll bars and allow swipe scroll)
• Table pagination instead of scroll bars
• HTML5 rendering for data visualization components instead of Flash
  
• Drag and drop and tap and hold support on device
• Swipe support on objects such as cards in a hierarchy viewer
• Maximize area support
• New tablet style UI components (Springboard and list view for example)

 It's a single application that runs on both the regular and mobile browser.

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.

The code I use is:

    <af:document title="index.jsf" id="d1"
                 maximize="#{adfFacesContext.agent.capabilities['touchScreen'] eq 'none' ? true : false}">
        <af:form id="f1">
            <af:panelStretchLayout id="psl1"
                                   dimensionsFrom="#{adfFacesContext.agent.capabilities['touchScreen'] eq 'none'  ?'parent' : 'children'  }">

Here's the video: