Browse Month by July 2016
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.