Alta UI in ADF 12c with combination of Tablet First template provides support for responsive UI. Often you would like to implement extra functionality for responsive layout, not available out of the box. I'm going to describe in this post, with very practical example, how this can be achieved. I will implement desktop and tablet view support with adjusted menu structure and header.
Tablet First template is shipped with ADF 12c and provides different facets (UI blocks) where developer could implement menu, content, header and footer. We could use CSS media query to dynamically react to the screen changes and adjust facets accordingly. In order to use CSS media query in the template, we need to have access to the Tablet First template code. This is easily achievable by creating custom UI template, based on out of the box Tablet First template. In the template creation wizard select Copy Existing Template option, this will copy template source code and you could adjust it:
This allows to save time and implement CSS media query in the template. If screen size is less than 950px, we are going to render narrow layout and vice versa:
Header area is going to be rendered for larger screens only, to save screen space on smaller ones. Wide style is assigned for the header block, this means with narrow CSS style it will stay hidden:
Wide CSS style is assigned to the core structure of the template - menu block, end and central block are displayed here:
Narrow CSS style is set to render UI structure suitable for tablet screen. Menu width is fixed to 30px, limiting size available for the menu:
Let's take a look at page based on the template. We are using different facets, but same regions are being reused in different UI blocks. Menu block for wide and narrow UI is using same region. This allows to reuse business logic, no matter on what screen UI is being rendered:
Same applies for central content block, same regions are being reused for wide and narrow UI.
ADF UI with narrow layout designed for tablet:
User clicks on menu icon and panel drawer loads menu list:
Wide layout renders menu on the left and it also displays header block:
Not only a list, but also editable form can be displayed pretty nicely with narrow layout:
Tablet First template is shipped with ADF 12c and provides different facets (UI blocks) where developer could implement menu, content, header and footer. We could use CSS media query to dynamically react to the screen changes and adjust facets accordingly. In order to use CSS media query in the template, we need to have access to the Tablet First template code. This is easily achievable by creating custom UI template, based on out of the box Tablet First template. In the template creation wizard select Copy Existing Template option, this will copy template source code and you could adjust it:
This allows to save time and implement CSS media query in the template. If screen size is less than 950px, we are going to render narrow layout and vice versa:
Header area is going to be rendered for larger screens only, to save screen space on smaller ones. Wide style is assigned for the header block, this means with narrow CSS style it will stay hidden:
Wide CSS style is assigned to the core structure of the template - menu block, end and central block are displayed here:
Narrow CSS style is set to render UI structure suitable for tablet screen. Menu width is fixed to 30px, limiting size available for the menu:
Let's take a look at page based on the template. We are using different facets, but same regions are being reused in different UI blocks. Menu block for wide and narrow UI is using same region. This allows to reuse business logic, no matter on what screen UI is being rendered:
Same applies for central content block, same regions are being reused for wide and narrow UI.
ADF UI with narrow layout designed for tablet:
User clicks on menu icon and panel drawer loads menu list:
Wide layout renders menu on the left and it also displays header block:
Not only a list, but also editable form can be displayed pretty nicely with narrow layout:
Download sample application - ADFAltaApp_v8.zip.
Andrejus, Can you please let me know the J Developer version & the jre that you used in this sample. I have minor major exception.
ReplyDeletejava.lang.UnsupportedClassVersionError: com/redsamurai/model/views/EmployeesViewImpl : Unsupported major.minor version 52.0
Mine is J developer 12.1.3
jre: 1.7.0_51
I'm using jdk1.7.0_55. You can rebuild application and it should work.
ReplyDeleteRegards,
Andrejus
Please can you share with me the HR Data Base Schema to run The application.
ReplyDeleteThats standard Oracle sample schema.
ReplyDeleteAndrejus