Thursday Oct 31, 2013

Responsive Design for your ADF Faces Web Applications

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:

pageTemplate:

<?xml version='1.0' encoding='UTF-8'?>
<af:pageTemplateDef xmlns:af="http://xmlns.oracle.com/adf/faces/rich" var="attrs" definition="private"
                    xmlns:afc="http://xmlns.oracle.com/adf/faces/rich/component">
    <af:xmlContent>
        <afc:component>
            <afc:description>A template that will work on phones and desktop</afc:description>
            <afc:display-name>ResponsiveTemplate</afc:display-name>
            <afc:facet>
                <afc:facet-name>main</afc:facet-name>
            </afc:facet>
        </afc:component>
    </af:xmlContent>
    <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:resource>
    <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:panelGroupLayout>
                </af:gridCell>
            </af:gridRow>
            <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:panelGroupLayout>
                </af:gridCell>
            </af:gridRow>
            <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"/>
                    </af:panelGroupLayout>
                </af:gridCell>
            </af:gridRow>
        </af:panelGridLayout>
    </af:panelGroupLayout>
</af:pageTemplateDef>

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:link>
                                </af:panelGroupLayout>
                                <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"/>
                                    </af:navigationPane>
                                </af:panelGroupLayout>
                            </af:gridCell>
                        </af:gridRow>

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="#{row.name}" id="ot3"/>
            <amx:actionListener id="al1" type="swipeLeft" binding="#{viewScope.ma.navigateMethod}"/>
          </amx:listItem>

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(), "adf.mf.api.amx.doNavigation", new Object[] { "go" });
    }

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

      <control-flow-case id="__3">
        <from-outcome>go</from-outcome>
        <to-activity-id>camera</to-activity-id>
      </control-flow-case>

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


Friday May 10, 2013

Simpler Development with the new List ADF Faces component in 11.1.1.7

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.

Thursday Dec 22, 2011

Styling Specific ADF Components with CSS and Skin

So you need one instance of a component in your ADF application to have a different color. Your first instinct would be to just go to the style area in the property inspector and change it. Well, you might want to rethink this, a better way would be to define your style in a central location for easier future maintenance, and an even better way might be to use an ADF Skin for this. This way you have one location for your global skinning and specific styles.

Here is a demo of how to go about doing this.

Also in this demo a quick explanation of the difference between InlineStyle, ContentStyle and StyleClass.

Thursday Feb 25, 2010

How Do I Start Learning Oracle ADF and JDeveloper 11g

Last week I finally added google tracking on a per entry to my blog, and turns out that one of the most popular entries I did is "How do I Start Learning JDeveloper and ADF" - the only problem is that was created back in the 10.1.3 days.
So here is an update with links to 11g material. (Last Updated, Mar 2012 - new links to tutorials and ADF Insiders and more books).

First step -
Learn the Java language (at least the syntax) - while you can do a lot in JDeveloper without coding any Java lines - at one point or another you will need to code - so start by picking up your favorite "Java for dummies in 7 days with no previous knowledge" type of book at the library or at the store and learn the basics of the language. Don't have money to spend on an actual book? try these two resources:
Thinking in Java - a good free online book
Sun's online tutorials

While you are learning the basics of the language - you should use JDeveloper as your coding/running/debugging environment it can also help you with code template code complete and syntax error highlighting. To understand how to do this use the Introduction to the IDE Tutorial.

ok, so you got the basics of the language down and you know how to do a loop and define new variables. Next, you probably want to start learning ADF as a way to simplify your overall development.

I would suggest that you start with the Reviewer's Guide.

Start by reading the data sheets to understand what the framework does, and watch a demo to understand what we are aiming to do with ADF

Next start with this tutorial - which will take you about 2-3 hours to complete - and will give you an impression of the development process. If you actually read the explanation in it and not just follow the step-by-step instructions you will also understand what you are doing and not just how you are doing things.
You can deepen your knowledge with two other tutorials:
An ADF Faces focused tutorial, and one about ADF TaskFlows.
There are many other tutorials that you can follow here.

In parallel you can use the set of ADF Insider recorded seminars to learn about the various layers and features of Oracle ADF. You don't have to run through each one of the Insiders, but I would recommend that at a very minimum you'll watch the Overview, ADF BC, ADF Faces, Binding and TaskFlows - these will give you a good introduction to the technologies you are likely to use. As times go by you can come back and watch more seminars on other areas that you encounter at your work.

Here it is important to note that some people prefer to go to instructor lead type training. We have those as well.
This page has the Java/ADF course list: http://www.oracle.com/technetwork/developer-tools/jdev/training11g-090355.html

You'll see a basic Java course to help you learn the language, and another course which is called "Oracle Fusion Middleware 11g: Build Applications with ADF I" - this is the ADF basics course.

 Now comes what I regard as the "must do step" whether you took the course or chose the self learning trail - read through the Fusion Developer Guide (11.1.2 version). After you played a bit with JDeveloper and ADF, this book will give you the inside scoop on what ADF does and how it does it.

It's a big book but it is worth reading it before you start doing any serious development - having the knowledge before you start to code will save you a lot of hours later on.
Note that there are additional developer guides (11.1.2 versions) that focus on the ADF Faces, Mobile and Desktop parts.

Another option for good books that will teach you ADF are:

Quick Start Guide to Oracle Fusion Development and the
Oracle JDeveloper 11g Handbook.

If you are about to start a bigger project with Oracle ADF - you might want to also read the "Oracle ADF Enterprise Application Development-Made Simple" which covers some more architectural and team setting concepts.

Once you are done with these books, you might want to go to the next level of knowledge which is covered in Oracle Press's "Oracle Fusion Developer Guide" book, and another good book is "Oracle JDeveloper 11gR2 Cookbook" with some useful how-to's.

At this stage you should have quite a good foundation that will let you start developing your application. Once you do serious development you are sure to run into questions that weren't answered in your previous reading, this is where the JDeveloper and ADF discussion forum comes into the picture as the source for the community knowledge.

Note that you can also tap into the community knowledge by searching through the internet. A lot of JDeveloper and ADF developers maintain blogs with tips - we try to collect those entries in this searchable ADF/JDeveloper blog repository.

Some of those experts also created the Oracle ADF Enterprise Methodology Group - which you should join - for some advanced discussion of concepts and best practices.

Add to these the annual Oracle Develop conference which runs as part of Oracle Open World, and the other technical conferences such as ODTUG and IOUG and you have your learning experience complete.

Now it is time for you to start sharing the knowledge you have gathered and help the newbies - start a blog, do a presentation in a conference, post answers on the OTN forum, or just add entries to the Oracle Wiki and help build the JDeveloper community.

Wednesday Jan 28, 2009

When-Validate-Item trigger in ADF with PPR

Here's a common thing that many Forms developers who move to ADF run into - you have a field that is a code and you want to display the translation of the code in the field next to it when the code is entered. In forms you use the when-validate-item trigger to do this usually.

Well in ADF one way to do it is to define a view object that is based on the Entity object of both the core and code tables. For example a VO that is based on Employees as the updateable EO and on Departments as a reference EO that is used to translate the deptId in the Employee table.
Once you did this - you want to add the ability in your JSF ADF page to populate the description field with the department name once someone fills out the departmentId.

Here is a quick demo of how you would do this - it's a very basic partial page rendering technique:

[update 2013 - there is an even simpler way to do PPR see here.]

If you are reading this blog there is a good chance that you might be interested to learn about the LOV feature of ADF - might make for a better UI. See these entries: cascading LOVs,LOVs for parameters, and part two of the above solution where you can type the description and get the code.

Thursday Aug 14, 2008

Can ADF be used with Oracle E-Business Suite / Siebel/ Peoplesoft

Update May-2011 - a little more up-to-date info on using ADF with EBS here.

Whenever I finish showing an ADF 11g demo to people who are working on enterprise applications like Oracle E-Business Suite or Peoplesoft or Siebel - the first question I get is "can we use ADF with our existing application".
Basically they would like to build new UIs on top of their existing systems - and leverage the cool new Ajax based functionality in ADF Faces.

The short answer is YES.

There are two ways of doing this.
One is just build an ADF application directly accessing the database underlying your application.
All you need is the DB connection info and an understanding of the underlying tables.

However one thing to note here is that Oracle EBS and other applications usually use roles when they are accessing the DB from UIs - and using the above approach you are not using the roles/security that are set in the applications.
(update 2010 - you can now use the EBS Datasource to do this - here is a bit more info on the JAAS for EBS solution)

So the more "correct" way of accessing these enterprise systems would be to use SOA - or basically access the applications through the official interfaces they expose. These would basically be web services that allow you to interact with the system using correct roles and security.

A very basic way of doing this from ADF is to use the Web Service Data Control - or just create a java class that access the Web Service and then expose it as a data control.
You can also of course bring in the full Oracle SOA Suite with its set of adapters into the picture.

Some other questions you might have are:
Is this recommended by Apps?
Yes it is one of the top ways they tell you to prepare for Fusion apps. See the "Highlight" section of this page.

Do you have samples/demos?
A newer sample using PSFT that also show mobile UIhere
Here's one for PeopleSoft.
Here's a how-to for Siebel.

Do you have customers doing this?
The answer is yes - we have several customers doing it (for example see Viewsonic story) and we also have Oracle products doing this (Siebel Self Service 8.1). Also see this document for more examples.

Where do I get more info?
Choose the link that match your application:
EBS - http://www.oracle.com/technetwork/middleware/index-098944.html

PSFT - http://www.oracle.com/technetwork/middleware/index-101014.html

Siebel - http://www.oracle.com/technetwork/middleware/index-095206.html

JD Edwards - http://www.oracle.com/technetwork/middleware/index-088030.html

Monday Jan 14, 2008

How Do I Start Learning JDeveloper and ADF?

** Update Feb - 2010 - there is an updated entry for this topic which covers 11g material instead of 10.1.3

Every now and then we get a question on the OTN forum that basically says: "I want to start learning development with JDeveloper (and ADF) where do I start?"



So I figured I'll write down my canned answer here and in the future I can just point people to this entry.



First step -
Learn the Java language (at least the syntax) - while it might seem that you can do a lot in JDeveloper without coding any Java line - at one point or another you will need to code - so start by picking up your favorite "Java for dummies in 7 days with no previous knowledge" type of book and learn the basics of the language.
Don't have money to spend on an actual book try these two resources:

Thinking in Java - a good free online book

Sun's online tutorials



While you are learning the basics of the language - you can use JDeveloper as your coding/running/debugging environment.
To understand how to do this use the Introduction to the IDE Tutorial



ok, so you got the basics of the language down and you know how to do a loop and define new variables. Next, you probably want to start learning ADF as a way to simplify your overall development.
Start with the ADF Learning Page.


If you are just beginning with Java and/or coming from a Forms/Powerbuilder/VB type of development background. you should probably choose the left column to follow (this uses ADF Business Components - and will give you the most out of the box, no coding experience).

Start with the tutorial - which will take you about a day to complete - and will give you an impression of the development process and if you actually read the explanation in it and not just follow the step-by-step instructions you will also understand what you are doing and not just how you are doing things.

Here it is important to note that some people prefer to go to instructor lead type training. We have those as well.
This page has the Java/ADF course list: http://www.oracle.com/technology/products/jdev/collateral/training10g.html

You'll see there a basic Java course to help you learn the language, and another course which is called "OracleAS 10g R3: Oracle ADF for Forms/4GL Developers" - and is the ADF basics course.
Taking these two courses will get you approximately to the same place as the previous steps I detailed - although you'll probably have better understanding of ADF at this stage from the instructor lead training.


I should point here to two additional resources you might want to reference at this stage:
one is the "Oracle JDeveloper for Forms & PL/SQL Developers : A Guide to J2EE Web Development" book that you can buy on Amazon. As you'll see there it gets great reviews.

The other is the page we put in place for people coming from a Forms background trying to explain a lot of the JDev slang in Forms terms.
See: http://www.oracle.com/technology/products/jdev/collateral/4gl/formsdesignerj2ee.html


Now comes what I regard as the "must do step" - read through the ADF Developer Guide. After you played a bit with JDeveloper and ADF, this book will give you the inside scoop on what ADF does and how it does it.

It's a big book but it is worth reading it before you start doing any serious development - having the knowledge before you start to code will save you a lot of hours later on.

At this stage you should have quite a good foundation that will let you start developing your application. Once you do serious development you are sure to run into questions that weren't answered in your previous reading, this is where the OTN discussion forum alnog with all the blogs out there come into the picture as the source for the community knowledge.

Add to these the annual Oracle Develop conference which runs as part of Oracle Open World, and the other technical conferences such as ODTUG and IOUG and you have your learning experience complete.



Now it is time for you to start sharing the knowledge you have gathered and help the newbies - start a blog, do a presentation in a conference, post answers on the OTN forum, or just add entries to the Oracle Wiki and help build the JDeveloper community.

Monday Dec 03, 2007

Regular Expression Validation in JSF

When most people look at the list of components in ADF Faces they mostly focus on the visual components - and that's understandable, but if you look closer you'll find that there are also non-visual components included such as several validators.

Here is an example of one useful validator - the regular expression validator.

Let's suppose that you want your JSF field to allow only Numeric values - all you need to do is add to it the ADF Faces provided regular expression validator and then provide the right regex format.
For Example:


<af:inputText label="Label 1" autoSubmit="true">

 <af:validateRegExp pattern="[0-9]{1,10}"

                               noMatchMessageDetail="Only Numbers Please"/>

</af:inputText>

<af:commandButton text="commandButton 1"/>


Now run your page and try entering characters to the field and leaving it.
You'll immediately get an error message with the text you provided (implemented using Javascript).

 

Just one more thing that ADF Faces give you to make life easier...

About

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

Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today