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

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.

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).