(For more resources on Oracle, see here.)
The following diadram illustrates the roles of each layer.
Use AJAX to boost up the performance of your web pages
Avoid mixing of html tags with ADF Faces components
Avoid long Ids for User Interface components
It’s always recommended to use short Ids for your User Interface (UI) components. Your JSF page finally boils down to html contents, whose size decides the network bandwidth usage for your web application. If you use long Ids for UI (User Interface) component, that increases the size of the generated html content. This becomes even worse, if you have many UI elements with long Ids.
If there’s no Id is set for a UI component explicitly, ADF Faces runtime auto generates Ids for you. ADF Faces let you to control the auto generation of component ids by setting context parameter ‘oracle.adf.view.rich.SUPPRESS_IDS‘ in the web.xml file. The <context-param> entry in the web.xml file may look like as shown below.
<param-value>auto or explicit </param-value>
Possible values for oracle.adf.view.rich.SUPPRESS_IDS are listed below.
- auto: Components can suppress auto generated IDs, but explicitly set ID will be honored.
- explicit: This is the default value for oracle.adf.view.rich.SUPPRESS_IDS parameter. In this case both auto generated IDs and explicitly set IDs would get suppressed.
Avoid mixing JSF/ADF Faces and JavaServer Pages Standard Tag Library (JSTL) tags
Stick on JSF/ADF Faces components for building your UI as much as you can. JSF component may not work properly with some JSTL tags as they are not designed to co-exist. Relying on JSF/ADF Faces components may give you better extensibility and portability for your application as bonus.
Don’t generate client component unless it’s really needed
ADF Faces runtime generates the client components only when they are really required on the client. However you can override this behavior by setting the attribute clientComponent to true, as shown in the following code snippet.
<af:commandButton text="DoSomething" clientComponent="true">
<af:clientListener method="doSomething" type="action"/>
In the above diagram, you can see that no client side component is generated for the server component whose clientComponent attribute is set to false.
Prefer not to render the components over hiding components from DOM tree
If you need to hide UI components conditionally on a page, try achieving this with rendered property of the component instead of using visible property. Because the later creates the component instance and then hides the same from client side DOM tree, where as the first approach skips the component creation at the server side itself and client side DOM does not have this element added. Apparently setting rendered to false, reduces the client content size and gives better performance as bonus.