So you have your ADF application ready, but it could use a little styling? Apart from using CSS and ADF skins on it, there are some things you can change in your very code.
Here are a few of your main weapons in the battle for a pretty user interface:
-
Spacer
The spacer occupies a fixed amount of space in a layout, specified by its width and height attributes. Its use is very simple:
<af:spacer id="s1" height="10px"/>
-
Separator
The separator creates a horizontal separator. By default it is a thin solid black line. But let’s make it more original:
<af:separator id="s2" inlineStyle="background-color:#f80; color:#000; height:3px;"/>
-
Column stretching
If you have some unused space next to a table, you can make it stretch some of its columns by using the property ColumnStretching. Its default value is “none”, but you could also set it to “last” (the last column), a particular column (by specifying “column:” followed by the ID of the column that you want to have stretched); or you can use the “multiple” option to set the widths of the columns to be percentages.
4. Width/height
You can change the appearance of your application a lot, simply by controlling the sizes of the included elements. Everything from text fields to tables can have its width and height set using the Properties manager in JDeveloper. Well, almost everything, like we will see in the next section.
Besides setting a fixed size to your element, you can make it inherit it from the parent element, or you can give it a min- or max-width/height. The purpose of max-width is to prevent the element from extending the boundary. Min-width is opposit to max-width. It is used to prevent the component from getting very small when scaling down.
-
Resizing of the af:inputListOfValues popup
ADF Faces provides the inputListOfValues component that allows the user to search for and select an item from a list of values. The list is displayed in a table which is a part of a popup dialog. Unfortunately, you cannot change the default width and height of the popup in the Properties manager, hence it very often ends up looking too long and narrow. In these cases, you can try to style it through css, or you can make your own, custom inputLOV. Check out Andrejus Baranovskis’ blog for tips on how to do it:
What are some other ways to make your application look good using ADF? Do you think that in today’s world design is everything?
Sources:
Oracle Documentation, docs.oracle.com
https://andrejusb.blogspot.com/2008/08/custom-lov-type-functionality-in.html
https://webdesignerwall.com/tutorials/5-useful-css-tricks-for-responsive-design/comment-page-1
