Browse Category by ADF 12.2.1
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)

ADF 12.2.1: Publish and secure ADF Business Components as REST services

In ADF 12.2.1, released just before OOW, many new features were introduced, and one of them is to expose ADF Business Components as REST Web Services. You can check other ADF 12.2.1 features in my ADF 12.2.1 release post.
In this post I am going to publish and secure ADF BC as REST services.

The first thing we have to do is to configure a release version for REST. You can do this in adf.config.xml file.

In previous versions we could expose BC as SOAP web services in Application Module Web Services tab, and now we can choose also REST.
We can select the view instances and set a resource name.

A xml file will be automatically created where for example we can set the attributes we want to expose and also if we want to expose any custom methods that we have created in the view implementation classes.

A new project will be also created in our application RESTWebService. This is the project we have to deploy. Simply click on the project and click on run.

If we test the service with any client tool, for example, Postman, we can see that the service returns Departments data.

The next thing we are going to do is to secure the services. We have to configure ADF Security.

In the configuration wizard RESTWebService project must be selected.

After finishing the wizard we have to secure the resource by adding some roles or users.

The last step is to configure the rest URL pattern in web.xml file, under security tab.

Now we are ready to test. If we don’t set any authorization in the rest call we can see that a “401 – Unauthorized” is returned.

But if we configure HTTP basic authentication, Departments data is returned.

ADF 12.2.1: Using the Theme Editor

A couple of weeks ago Oracle released ADF 12.2.1 with many cool features and one of them is the Theme Editor. With this new tool you can change the look and feel of you application by selecting the desired style of the components and see the changes automatically right in the browser. This tool can help developers who are not experts in CSS to build applications with a great look and feel.

We have to make a couple of things in order to use the theme editor.
First we have to create a new application based on an existing EAR file.

The EAR file we are going to use is located inside our 12.2.1 Middleware Home, in my installation this path is:

After that we just have to click on Finish to create the skin editor application.
To start the Theme Editor we have to run that application by runing index.html file.

Once the application is runing we will see this:

We are going to create a new skin so we have to click on ‘Create Theme’ button. A popup will appear where we have to put the name of the theme and also select the skin we want to use. We can choose Skyros or Alta as our base skin.

Click on ‘Save and Close’ and we will have our theme created. By clicking on the right button we can for example edit, delete, duplicate or export our theme. We will come back later to export the theme but at the moment we are going to edit it.
Once you click on edit, we can see some tabs in the top of the page where wecan change property values of some components, and in the bottom of the page we have a real time preview of our skin.
A quick example of what can we do is change our buttons style.

When we have finished our skin work we have to click ok ‘Save and Close’ in the top right of the page.
Now we can use this skin in our application by exporting the theme.
After exporting the skin we can use it by importing the jar file we have just generated in our application.
We also have to select this skin as default skin by selecting it as ‘Default Skin Family’ in ‘ADF View’ menu in project proeprties.

Now if we run the application we can see that the skin that we applied in the theme editor applies to our application.
If we don’t get the look and feel that we expected using the Theme Editor we can also extend the skin we have just created and add our custom CSS rules to skin our application.
You can get more information about the Theme Editor and about using skins in an ADF Library JAR file in these links:

It has been a long wait, but ADF 12.2.1 has been released

One year and a half after the last Oracle ADF 12c version (12.1.3), last Friday Oracle released Oracle ADF 12.2.1. This release is part of a major Oracle Fusion Middleware release, including WebLogic Server 12c, SOA 12c and WebCenter 12c.
If you want to use MAF you will still have to use JDeveloper 12.1.3.

As we were so much time without a new release, Oracle ADF 12.2.1 brings us lots of new features and also a lot of bugs fixed. These are some of them:

  • Java SE 8

JDeveloper 12.2.1 runs on JDK8 and provides development support for JDK8.

  • JCS and DCS integration

We are now able to integrate JDeveloper with Java Cloud Service and Developer Cloud Service.

  • Alta Skin

Alta UI is not a new feature, but this is the new default skin in every ADF application instead of Skyros. There is also a new Oracle Alta UI website where you can find some advices and a demo.

  • Theme Editor

We also have a new feature that will help developers who don’t have a lot of knowledge in CSS to build and edit a skin.

  • Masonry Layout

Masonry Layout help us to build responsive pages that will automatically adjust its children to fit the available space. There is also a new three columns responsive template.

  • DVT components iimprovements

Some components that were already available have been improved such as Funnels and Pie Charts. Polar coordinate system is also now supported by some types such as bar, line, bubble, etc.

We have also a new component ‘NBox’ that is usually used to compare data across two dimensions, for example to compare employees performance.

If you want to know more about the new version, the full list of improvements or know all the bugs that has been fixed click on this link.