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: Read the complete article here.
For regular information become a member in the WebLogic Partner Community please visit: http://www.oracle.com/partners/goto/wls-emea ( OPN account required). If you need support with your account please contact the Oracle Partner Business Center.