View Post

ADF: Responsive UIs using af:matchMediaBehavior

This is not a new component as it was released with version 12.2.1 back in November but it deserves a mention as it allows us to easily create responsive user interfaces. Although we were able to define media queries in our css and skin files, this component allows us to change component properties according to the screen size.

This component has 3 properties to look at:

  • propertyName: Name of the property we want to change
  • matchedPropertyValue: New value of the property
  • mediaQuery: Here we can set the condition by defining a CSS media query. You can learn more about it here: CSS Media Queries
In this example I am going to use a simple form based on Employees view object from HR Schema.
We are going to change the number of rows of the panelFormLayout to 7 when the screen with is less than 900px and we will change it to 15 if the with is less than 750px.
As you can see by default the form is displayed like this:
If we make the screen smaller we can see that the layout is changing (you can see the with of the screen at the top right corner of the images)

View Post

ADF: using popupFetchListener to execute a method before the popup opens

When developing ADF applications, a common way to create or update a record is doing it in a popup. There are many ways to do it that I have seen in some of my last ADF projects, for example:

  • Executing createInsert operation in the button’s action listener and then opening the popup programmatically 
  • Using an action listener to create the record and using showPopupBehavior with triggerType set to click (In this case, if the button is disabled on some condition, the actionListener will be executed anyway)

In this post I am going to show you another way, using popupFetchListener.

In this example we are going to drag and drop Departments view object as a table (we don’t really need it but we can see the new created record), and 2 buttons, one for creating records and other for editing them.

In each button we are going to add a showPopupBehavior component  with triggerType property set to action and popupId proerty set to the id of our popup.


Once we have the buttons, we create a popup and drag and drop departments view object as a form.
After that we have to create a popupFetchListener in the properties panel.

 This will create a method in our bean where we have to check the button we have clicked in order the call CreateInsert opeartion only when we click on Create button.

This is how the page definition file looks like. The tree binding, 4 fields of the form and the create insert operation that we call in the popupFetchListener.

The result of this implementation.

You can find the code of this post in Github.

View Post

ADF: tagCloud component overview

In ADF 12.2.1.1, released a couple of weeks ago, we had many new features as you can see in my previous post ADF 12.2.1.1 has been released: Bug fixes and lots of new features.

One of them is the DVT component Tag Cloud (af:tagCloud).

In this example I am going to show a quick overview of the component. I am going to use Jobs and Employees tables of HR schema.

In order to create the component we just have to drag and drop the desired viewobject into our page and select ‘Tag Cloud’.

In the wizard we have to provide at least 2 fields: ‘Text Value’ that will be de displayed value in the tag cloud and ‘Relative Size’ that will determine the size of each item.
We can also create Grouping rules to make each group to have a different color or to highlight the items of the group when we hover them, etc.

If we run the application, by default we will see something like this (rectangular layout).

Cloud layout is also available.
We can also set a selection event in the tag cloud.
We need to set selectionListener, selectedRowKeys and selectionMode properties.
Using the tagCloud in a Master-Detail:

In tagCloudItem we can set an actionListener where, for example, we can show information about the selected value.
View Post

ADF 12.2.1.1 has been released: Bug fixes and lots of new features

Oracle has released a new version 12.2.1.1, not just and ADF version, it is a new release for all Oracle Fusion Middleware products.

Although this could be seen as a minor release, it comes with lots of new features in ADF Business Components, mainly in REST support, and Data Visualization Tools among others, as well as a lot of bug fixes.

There are many new enhancements to Gauge components, we can now set a title, border and also set the indicator wider that the plot area.

There are some new components, the picto chart.

And the tag cloud. This is a component I have been expecting long time ago as we were able to use it as you can check in this link (Marrying the Worlds of ADF and HTML 5) but it was not available out of the box.

In ADF Faces there are two more cool enhancements as we can set an af:table to cache fetched rows so there is no need to re-fetch when the user scrolls back, and af:inputDate opens directly on the client instead of going back to the server.
There are more changes and improvements in ADF BC as REST Services, Groovy support and desktop integration.
You can check the complete list of new features and bug fixed in this link: Oracle JDeveloper and Oracle ADF 12c (12.2.1.1.0): New Features