Developing Custom Components with Oracle Mobile Application Framework

Introduction Oracle’s Mobile Application Framework (MAF) is a great tool for web developers to enter the mobile application development space in an easy and seamless manner. MAF’s full support for JavaScript and CSS to create application behavior and styling, means developers can carry over the same skills of web development into the world of mobile […]

Pixel Perfect UIs with Oracle MAF : CSS and JavaScript debugging on Android

Introduction Oracle Mobile Application Framework, MAF, uses a unique paradigm of hybrid application development on mobile platforms. This brings fine grained control over the look & feel and the behavior of the app to the mobile app development world, helping web developers make a seamless transition to the world of mobile application development without sacrificing […]

Adventures in WebCenter Skinning : af:table with Custom Pagination

Since the requirement on how to effectively skin a custom WebCenter Portal application frequently becomes a major topic in many of my customer egagements, I have decided to posts a series of blogs that will provide some insight on skinning some of the out-of-the-box (OOTB) ADF components.  The first component skinning example that I will cover is the ADF table. 

Most of the time when I see a custom skin implementation for a table, the code for the table is actually made up of a main header, proceeded by an iteration-type component – af:forEach or af:iterator – then proceeded by the row(s).  The actual row would be constructed as a container, which can hold other containers, that holds the record items.  This approach does make skinning the table much simpler, but there can be more components needed to construct the table itself.  Moreover, some of the OOTB af:table behavior, for example: column sorting, and filtering to name a few, will have to implemented as custom code.

The image below is how the sample table looks without any custom skining:

 

The image below is example of the same af:table with a custom skin.  Beyond the obvious look-n-feel (LnF) difference of a non-skinned table, there is also the addition of a custom pagination feature.  While the (default) scroll-bar behavior maybe acceptable for a web-based application, it is not a desirable feature for a typical web-site portal design.  In addition, in my experiences with customers on the WebCenter platform, the custom pagination behavior is one of the most requested requirements. 

Modern looking Search Input field ADF style

In my work with creating complex UIs in ADF, I often get requests to create a “modern” version of a search input form.  For example, the following image gives an example of the desired LnF (look-n-feel):

Notice that the text “Search” is automatically inserted in the input area, and that the (button) magnifying glass icon, which is responsible for invoking the search, is also within the input area.  When focus is given within the input area, the default “Search” string is removed, to allow for user entry:

 In addition, user entered characters that go beyond the visible input area do not enter into the button area:

No doubt that there are plenty of examples out on the web that will provide this functionality and behavior.  However, in the (OOTB) ADF world there is not an implicit (or documented) way to achieve this.  In this blog post, I will detail how I was able to create the example displayed above.

 

ADF version of “Modern” dialog windows

It is no surprise with the popularity of the i-devices (iphone, ipad), that many of the iOS UI based LnF (look and feel) would start to inspire web designers to incorporate the same LnF into their web sites.  Take for example, a normal dialog popup.  In the iOS world, the LnF becomes a bit more elegant by add just a simple element as a “floating” close button:

In this blog post, I will describe how this can be accomplished using OOTB ADF components and CSS3 style elements.