Tuesday, September 1, 2015

ADF 12c Dynamic Forms with ADF BC UI Categories

ADF 12c offers completely new way to implement UI forms. We can implement dynamic forms, based on static ADF BC components. Such approach could simplify form maintenance - when there will be changes in DB, developer would need to adjust only ADF BC EO/VO structure, without changing anything on UI. Bindings layers could determine data structure dynamically and dictate how to render UI blocks. ADF BC VO provides special metadata option to define how form UI should be rendered - UI Categories. Through categories we could group attributes and this would help to render dynamic UI with separate blocks and proper order.

Using UI Categories is straightforward, add category group and move attributes under the category. Label and tooltip can be defined, this will be a title for UI block:

ADF 12c is using general collection binding for dynamic UI, it doesn't depend on specific attribute binding:

Collection binding is generic, without a list of accessible attributes, it just points to the VO. This means we can change list of attributes registered in the VO at any time:

This is how looks dynamic form generated in ADF 12c. I have customised it a bit, but major part is generated automatically by JDeveloper 12c. There is global iterator over UI Categories, rendered UI blocks. Inner iterator renders UI Category attributes. Each attribute is rendered through ADF 12c dynamic component, this means there is no dependency related to attribute UI implementation (input text, LOV, choice list, etc.) - UI implementation is controlled from attribute UI hints in ADF BC:

It is easier to understand how dynamic form is organised from UI structure view:

This is the result - dynamic form is rendered with two blocks, based on defined UI Categories:

I have customised dynamic form rendering with metadata usage. Buttons are rendered only in the first block, identified by PersonalData:

Block identified by JobData is rendered with maximum 4 rows:

I hope this post will give you some new ideas about robust ADF UI implementation. Download sample application - ADFAltaApp_v7.zip.

Thursday, August 27, 2015

Red Samurai ADF Performance Audit Tool v 4.0 - Web Client Request Monitoring and Complete Query Analysis

I'm excited to announce, we have released a new version of our RSA audit tool. This is a major update after previous version released in February 2015 - Red Samurai ADF Performance Audit Tool v 3.4 - ADF Task Flow Statistics with Oracle DMS Servlet Integration.

It is already 3 years, since initial version - Red Samurai Performance Audit Tool - Runtime Diagnosis for ADF Applications. We are using it for many of our customers to monitor ADF performance in both test and production environments. Many new features were added during these years, more features to come.

RSA Audit v4.0 New Features

1. RSA Audit v4.0 dashboard is supporting ADF 12c and Alta UI look

2. Web Client Request Time monitoring. Supported with ADF 11g and 12c. Generic method tracks request time for all ADF UI components. Logged data can be analysed through ADF UI dashboard or directly in the DB. Request time represents complete time from user action in the browser, until request is completed. This includes real user experience - browser processing time, network time, server side time and ADF BC/DB processing times. Runs in VERBOSE logging mode

3. Detail information about ADF fragment, button or other ADF UI component involved into request is being logged together with request processing time and is accessible from audit dashboard. This helps to identify slow actions spanning from Web Client to DB

4. Information about each request is grouped, this allows to compare differences between multiple requests and identify bottlenecks in the application performance

5. Duplicate Queries. Allows to track all executed VO’s, very helpful to identify redundant VO’s executions. Groups VO executions per ECID, this helps to identify VO’s re-executed multiple times during the same request. Runs in MEDIUM logging mode

6. VO’s executed from the same ECID are automatically highlighted - this simplifies redundant queries analysis

7. Number of duplicate executions of VO’s per ECID is calculated and presented in the table and sunburst chart

8. We calculate top VO’s per AM. This helps to set priorities for SQL tuning and understand heavy used VO’s

9. Sunburst chart displays visual representation of duplicate and top VO’s per AM

Tuesday, August 18, 2015

Smart Combo Box LOV with Filter

Combo box LOV with filtering is simple, but effective feature not used often. You should rethink LOV design and apply combo box LOV with filtering where possible. Advantage of such LOV implementation is pretty clear - fast list items access, based on filter criteria. This will reduce number of times required to open LOV popup and improve performance of UI.

LOV VO should implement View Criteria, returning top items to be included into choice list. My example retrieves all jobs with minimum salary greater or equal than 10000. Users will see list items based on this criteria first:

I would recommend to use List UI Hints section of the LOV VO to define LOV UI definition. This will save time when assigning LOV for the attributes, do it once and reuse. I have specified Combo box LOV with filtering based on View Criteria - to include jobs with minimum salary greater than 10000 into initial choice list:

Time is saved when assigning LOV for the attribute - UI Hints are automatically set, based on LOV UI Hints definition:

This is how it looks on UI. Top records are displayed in the choice list, based on applied filter criteria.  All list items can be accessed through More... option:

This is how LOV popup looks by default in ADF 12c. Height is stretched automatically to occupy all possible display height, width is not stretched. Such layout is not good, users don't like it:

LOV popup can be made stretchable with little help of ADF UI CSS. We should use -tr-stretch-search-dialog CSS property to enable LOV popup stretching in ADF 12c (CSS sample is provided with example):

Another important thing to remember about LOV's in ADF 12c - List Range Size property. By default it is being set to -1. This is OK for simple choice lists, where you would like to show all data at once. But not suitable for LOV or combo with LOV, where we don't want to fetch all LOV items at first load:

I would set it to 10, this will populate only visible set of LOV records:

Take a look, how LOV popup window will look after improvements applied - it is stretchable by the user and only initial set of list item records is fetched:

Make sure to use combo LOV with initial filter criteria, to optimise LOV behaviour. Download sample application - SmartComboLOV.zip.

Thursday, August 6, 2015

Tabs Layout Support in Alta UI Tablet First Template

Tablet First Template in ADF 12c is ideal for both tablet and desktop. Combined with Alta UI layout, it offers light and responsive UI experience to the end users. I'm going to describe in this post, how to use ADF Faces Tabs with Alta UI in Table First template. I will show ADF regions are friendly with Web like UI design, without internal scrollbars in the page.

Page can be created referencing Tablet First template with JDeveloper wizard, same as we would use it to create page based on UI Shell template:

Table First template provides multiple facets, Central facet is supposed to contain main content. I'm going to include two ADF Faces UI tab components into central facet. Both tabs will render ADF regions:

Unfortunately it doesn't work properly. Tabs are rendered in the centre of the page:

Luckily there is a fix. We should apply special CSS style class, provided with Oracle WorkBetter Alta UI application - ContentContainerWorkaround. This class must be set for ADF Faces UI panel tabbed component:

After CSS style class fix is applied, tabs are rendered correctly:

I have implemented second tab - Employees Table to test how large ADF UI table renders in Tablet First Template. Table is set with page scroll policy:

ADF region renders table without internal scrollbar, it looks Web style alike:

There are more rows, than can fit into screen. User can scroll down entire page to see the remaining rows. This is especially good for tablet screens, ADF provides really good UI experience:

Download sample application - ADFAltaApp_v2.zip.

Friday, July 31, 2015

Oracle Mobile Cloud Service First Hands-On Experience

Thanks to SOA Community and Jurgen Kress, I had a chance to play with Oracle MCS (Mobile Cloud Service). This new Oracle product is promoted with full force by Oracle PM team, there is dedicated Youtube channel with videos to watch and learn - Oracle Mobile Platform. Mobile Cloud Service offers mobile enterprise repository to organize and support your mobile development. Mobile backend services, security, connectors, storage and etc. can be defined and managed in MCS. Web Services published in MCS can be monitored to track performance and errors. All this should simplify mobile solutions implementation.

This was my first encounter with MCS and I would like to describe the test I did. MCS UI is implemented with Oracle internal JS framework following Alta UI standard. There are options to monitor and administer MCS instance. I'm more interested in development options:

I will not go through all available options, but only focus on Mobile Backend. Basically we can define a group, where we could include various reusable business logic artefacts (API's). Mainly this will be different Web Service calls. The same Web Service calls can be reused by mobile application developer.

In Mobile Backend section we can edit existing groups or create a new one:

You should think about Mobile Backend as about a group of reusable code artefacts (API's). There is an option to create new API or reuse existing one. I decided to reuse existing API for Incidents registration:

This API implements REST Web Service call to register new incident, also it allows to query information about previously reported incidents. This can be tested directly in MCS environment, we could define sample payload data and simulate Web Service call to register new incident:

Web Service call is successful, we can observe this from the log - new incident is registered and ID is assigned. Same Web Service will be reused from mobile application. With MCS we could monitor Web Service usage, number of invocations, errors, etc. - this makes it easier to manage entire infrastructure for mobile solutions:

To make sure new incident was successfully registered, I could run another REST call for the same Web Service - to get incident information about ID:

Result shows incident data, this means incident was located successfully:

Incidents registration service is registered in API's group, we could edit and test this Web Service online in MCS:

Red Samurai mobile backend service is live - invocation statistics and processing time metrics are aggregated by MCS:

Thursday, July 30, 2015

Using Shared AM to Cache and Display Table Data

This post is based on Steve Muench sample Nr. 156. In my personal opinion, ADF samples implemented by Steve Muench still remain one of the best source of examples and solutions for various ADF use cases. Sample Nr. 156 describes how to use Shared AM to display cached data in UI table. Typically Shared AM's are used to implement cached LOV's (session or application scope). But it could go beyond LOV, based on the use case we could display cached data in the table or form. I have tested this approach with 12c and it works fine.

Download sample application - ADFBCSharedSessionLOVApp.zip. AM is defined with application scope cache level - this means cached data will be available for multiple users:

In order to display cached data on UI and pass it through ADF bindings layer, we need to use Shared AM configuration in bindings:

You should create new Data Control reference entry manually in DataBindings.cpx file. JDeveloper doesn't provide an option to select Shared AM configuration. Simply change configuration property to Shared (HrModuleShared as per my example):

Make sure to use correct Data Control entry for iterator in the Page Definition. Cached table iterator binding should point to shared Data Control configuration:

This is how it looks like on UI - readonly table data is fetched once and cached in application scope cache. Other users will be reusing cached data, without re-fetching it from DB:

Jobs VO is set with AutoRefresh = true property. This turns on DB change notification listener mechanism and keeps VO data in synch, when changes happen in DB. This helps to auto refresh cached VO (read more about it Auto Refresh for ADF BC Cached LOV):

Here is the test. Let's change Job Title attribute value in DB:

Click on any row from Jobs table, or use any buttons (make a new request). Cached VO will be re-executed and new data will be fetched from DB, including latest changes:

You should see in the log, DB change notification was received and VO was re-executed, VO data was re-fetched: