Friday May 16, 2014

Book Review - Oracle ADF Enterprise Application Development Made Simple (Second Edition)

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

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

If you want to get a video summary of the type of topics Sten covers in this books you can watch this seminar he recorded for one of our virtual developer days

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.

To get the book or read a sample chapter click here

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 ADF Architecture Square on OTN.

If you haven't visited that site or subscribed to the ADF Architecture YouTube channel - it's time you'll do this to. 

Friday Apr 11, 2014

Dynamic ADF Forms with the new Dynamic Component (and synch with DB)

I wrote a couple of blogs in the past that talked about creating dynamic UIs based on a model layer that changes (example1 example2). Well in 12c there is a new ADF Faces component af:dynamicComponent 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.

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.

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 "Synchronize with DB" and added the field to the VO - that's it no more need to go to every page and add the new field.

Check it out:

Tuesday Nov 26, 2013

Book Review - Developing Web Application with Oracle ADF Essentials

I got my hands on a copy of the new book "Developing Web Application with Oracle ADF Essentials" by Sten Vesterli published by Packt Publishing, so I wanted to post a quick review.

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 - Oracle ADF Essentials. To increase the "Free" 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.

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.

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.

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

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.

Sten also goes beyond the basic intro level to cover some of the topics he also covered in his other book about enterprise ADF Development. He includes chapters about debugging, deployment and library usage and also addresses team development - which is a nice touch.

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

After you read this book, you'll probably want to dig deeper with some of the more in-depth books about ADF to complete the picture.

Friday Nov 15, 2013

Deploying the Oracle ADF Summit Application to the Oracle Java Cloud

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.

Deployment to the cloud is quite straightforward, and you can do it directly from inside JDeveloper.

Here is a quick video showing you how to first create your database objects and then deploy your application to the cloud.

One small point, in the demo you don't see it but I also used the option to import the data into the tables.

To do that scroll the cloud cart to the right and check the check box for data.

Thursday Oct 31, 2013

Responsive Design for your ADF Faces Web Applications

Note - an update to the technique shown here for those who are using 12.1.3 is documented in this blog entry

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.

Steven Davelaar wrote a comprehensive article 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.

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.

(By the way this example was developed for one of the seminars in the upcoming Oracle ADF OTN Virtual Developer Day).

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:

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.

The media query has this format:

@media screen and (max-width:700px) {
            .narrow {
                display: inline;
            .wide {
                display: none;
            .adjustFont {
                font-size: small;
            .icon-home {
                font-size: 24px;

This changes the properties of the same styleClasses that are defined in my application's skin.

Here is a quick demo video that shows you the full application and explains how it works.

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)

So For those looking to replicate this, here are the basic files:


<?xml version='1.0' encoding='UTF-8'?>
<af:pageTemplateDef xmlns:af="" var="attrs" definition="private"
            <afc:description>A template that will work on phones and desktop</afc:description>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <af:resource type="css">

.wide {
    display: inline;

.narrow {
    display: none;

.adjustFont {
    font-size: large;
.icon-home {
        font-family: 'UIShellUGH';
    -webkit-font-smoothing: antialiased;
        font-size: 36px;
        color: #ffa000;
@media screen and (max-width:700px) {
            .narrow {
                display: inline;
            .wide {
                display: none;
            .adjustFont {
                font-size: small;
            .icon-home {
                font-size: 24px;

@font-face {
            font-family: 'UIShellUGH';
            src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRk9UVE8AA..removed code here...AzV6b1g==)format('truetype');
            font-weight: normal;
            font-style: normal;

    <af:panelGroupLayout id="pt_pgl4" layout="vertical" styleClass="sizeStyle">
        <af:panelGridLayout id="pt_pgl1">
            <af:gridRow marginTop="5px" height="40px" id="pt_gr1">
                <af:gridCell marginStart="5px" width="100%" marginEnd="5px" id="pt_gc1">
                    <af:panelGroupLayout id="pt_pgl3" halign="center" layout="horizontal">
                        <af:outputText value="h" id="ot2" styleClass="icon-home"/>
                        <af:outputText value="HR System" id="ot3" styleClass="adjustFont"/>
            <af:gridRow marginTop="5px" height="auto" id="pt_gr2">
                <af:gridCell marginStart="5px" width="100%" marginEnd="5px" id="pt_gc2" halign="stretch">
                    <af:panelGroupLayout id="pt_pgl2" layout="scroll">
                        <af:facetRef facetName="main"/>
            <af:gridRow marginTop="5px" height="20px" marginBottom="5px" id="pt_gr3">
                <af:gridCell marginStart="5px" width="100%" marginEnd="5px" id="pt_gc3">
                    <af:panelGroupLayout id="pt_pgl5" layout="vertical" halign="center">
                        <af:separator id="pt_s1"/>
                        <af:outputText value="Copyright Oracle Corp. 2013" id="pt_ot1" styleClass="adjustFont"/>

Example from the page:

                        <af:gridRow id="gr3">
                            <af:gridCell id="gc7" columnSpan="2">
                                <af:panelGroupLayout id="pgl8" styleClass="narrow">
                                    <af:link text="Menu" id="l1">
                                        <af:showPopupBehavior triggerType="action" popupId="p1" align="afterEnd"/>
                                <af:panelGroupLayout id="pgl7" styleClass="wide">
                                    <af:navigationPane id="np1" hint="buttons">
                                        <af:commandNavigationItem text="Departments" id="cni1"/>
                                        <af:commandNavigationItem text="Employees" id="cni2"/>
                                        <af:commandNavigationItem text="Salaries" id="cni3"/>
                                        <af:commandNavigationItem text="Jobs" id="cni4"/>
                                        <af:commandNavigationItem text="Services" id="cni5"/>
                                        <af:commandNavigationItem text="Support" id="cni6"/>
                                        <af:commandNavigationItem text="Help" id="cni7"/>

I placed a workspace with this sample here. Run the sample.jsf page in the viewController project.

Tuesday Oct 01, 2013

Navigating between pages in ADF Mobile with Swipe gestures

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.

You can do this by using the amx:actionListener component and having it bind to a method in your backing bean.

The basic ingredients:

In an AMX page add an actionListner to a component for example:

         <amx:listItem id="li1">
            <amx:outputText value="#{}" id="ot3"/>
            <amx:actionListener id="al1" type="swipeLeft" binding="#{}"/>

The binding edit function in the property inspector can help you create the above managed bean (ma).

In the managed bean you can code this:

    public void navigateMethod(ActionEvent actionEvent) {
        AdfmfContainerUtilities.invokeContainerJavaScriptFunction(AdfmfJavaUtilities.getFeatureName(), "", new Object[] { "go" });

In your taskflow for the feature have a navigation rule like this:

      <control-flow-case id="__3">

Now with a swipe to the right on the list item you'll navigate to the camera page.

Monday Jul 22, 2013

Tablet support in ADF Faces with 12c

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 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:

Wednesday Jul 17, 2013

12c New ADF Faces Components - Springboard, Drawer and Timeline

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 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 text="Cities Graphs" icon="/springimg/dashboard48_ena.png"
                                                       id="sdi3" stretchChildren="first" flex="0">
                                        <af:region value="#{bindings.Charts1.regionModel}" id="r3"/>
                                    <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 text="Timeline" icon="/springimg/deployments48_ena.png" id="sdi5"
                                                       stretchChildren="first" flex="0">
                                        <af:region value="#{bindings.TimeLine1.regionModel}" id="r5"/>
                                    <af:showDetailItem text="Support" icon="/springimg/team48_ena.png" id="sdi6"
                                                       badge="2" stretchChildren="first" flex="0"/>

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">
      <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 text="showDetailItem 3" id="sdi3" icon="/springimg/network48_ena.png" disclosed="false">
      <af:showDetailItem text="showDetailItem 5" id="sdi5"/>


  <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:image id="ot3" source="#{evt.Picture}" inlineStyle="height:100px; width:150px;"/>
    <dvt:timeAxis id="ta1" scale="weeks"/>
    <dvt:timelineOverview id="ov1">
      <dvt:timeAxis id="ta2" scale="quarters"/>

Here is a past entry about using the Sunburst component that you see in the demo.

Friday Jun 28, 2013

Declarative View Objects (VOs) for better ADF performance

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.

Friday May 17, 2013

Simpler Partial Page Refresh (PPR) with Dependent Fields

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);}
return Salary

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

Tuesday May 14, 2013

ADF Mobile Logging on Android

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 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:

 More tips on debugging and logging in this blog entry by Joe

Friday May 10, 2013

Simpler Development with the new List ADF Faces component in

A new component that showed up in the JDeveloper 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 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.

Thursday May 09, 2013

Improved Dial Gauge in Oracle ADF Mobile

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.

Friday May 03, 2013

Star Rating in ADF Mobile Applications

The new Oracle JDeveloper 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"/>

Monday Apr 01, 2013

Working with the Sunburst ADF Component

JDeveloper 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"
                        inlineStyle="height:620.0px;" legendSource="ag1"
            <af:switcher facetName="#{}" 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"
                    <f:attribute name="color1" value="11AA55"/>
                    <f:attribute name="color2" value="44BB77"/>
                    <f:attribute name="color3" value="77DD99"/>
              <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"
                    <f:attribute name="color1" value="11AA55"/>
                    <f:attribute name="color2" value="44BB77"/>
                    <f:attribute name="color3" value="77DD99"/>
              <f:facet name="RegionSales12">
                <dvt:sunburstNode value="#{row.Total}" label="#{row.Name1}"
                                  id="sn2" drilling="insertAndReplace"/>


I'm a Director of Product Management for the Oracle Mobile and Development Tools.
Follow me:

« March 2015