Oracle ADF Skinning | ADF UI

Thursday, 24 March 2016

To support ADF applications for mobiles and tablets it's a big challenge on Oracle ADF 11g where as in Oracle ADF 12c versions we can easily develop responsive screens based on requirement.

Using responsive and adaptive design we can support ADF applications in tablets as well as in mobiles.

Using CSS3 media queries we can achieve responsive and adaptive design.

Responsive design works on a single fluid website that can look good on any device. Using media queries we can fix the layout based on device resolution.

Adaptive Web Design is different from Responsive Design in that there isn’t one layout that always changes. Instead, there are several distinct layouts for multiple screen sizes, and the layout used depends on the screen size used.

1. Use panelGroupLayout layout elements: Set panelgroupLayout element as vertical then will rendered like html div element.
2. Fluid Grids:Use percentage(%) sizes instead of pixels and points e.t.c
3.Write Media queries in external css file because it won't support in skin definition i.e registered skin file.
4.Don't use stretch layouts like PanelGridLayout.
5. For input components add simple property as true then it will render like span element otherwise it will render like table.
6.Avoid using PanelBorderLayout, PanelGroupLayOut(as horizontal) because they will render like table element.
7. Add specified meta tag property in the page template or in respective pages.

Wireframe Designs as per Resolutions:
We need to get clarity about how the screen looks in specific resolutions.1.Desktop

2.Tablet

3.Mobile

If we observe above designs then components alignments and font sizes are varying.In this case media query plays major role to achieve the requirement.

Below are the steps to implement responsive design in ADF 11g application .

Wednesday, 8 April 2015

These days for developing an ADF applications, UI designers developing the wireframes using custom fonts instead of system fonts for better readability and look and feel. If you want to implement in an adf applications,We need to embed all fonts in to an application.The below are the steps to implement custom fonts in to an ADF applications,1. Copy custom fonts in to one location.For avoiding cross browser compatibility font issues, We need to download specific browser based support fonts.Different browsers support a slightly different set of font format.These are the extensions to support different browsers.

Web Open Font Format(.woff)-Modern browsers

Embedded Open Type(.eot)-Internet explorer

Truetype fonts(.ttf)-Safari,Android,IOS

Svg(.svg)-Legacy IOS

2. Using @font-face CSS at-rule allows to specify custom fonts in to an application.These are the rules to load custom fonts in to font.css.

3. Load this css file in to the application.If you are using pagetemplate then add below tag to your pagetemplate. There is no need to add every time in each page.

<af:resource type="css" source="/css/fonts.css"/>

4.Use font-family name what we have defined in font.css file like below.