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:
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.
Hi,
ReplyDeleteDo i need 12.2.1 or can this be implemented in 12.1.3?
This can be done in 12.2.1
ReplyDeleteRegards,
Andrejus