Browse Month by October 2015

ADF: Styling components by its id

If we want to change the style of a component we usually use skinning and its selectors or we use the styleClass property of the components and creating a class in the css file.

Although it is not a usual way to apply styles to a component I am going to show you how to style any component using its id.
If we have a button for example in a page and it is not surrounded by any naming container, for example a panelCollection or a region we can use its id to style the component
Look at button “b1” and its style.

As soon as that component in surrounded by any naming container the id generated in html will change, and for example it will be “pc1:b2” if we have it in a panelCollection, or “r1:0:b1” if we have it in a region.

You can check the code generated by inspecting the page once you run it.

If we try to use the new id “pc1:b2” you will see that button’s style has not changed.

In CSS we have some special characters like these ones.

$, %, &, !, “, #, ‘, (, ), *, :, ;,<, =, >, +, ,, -, ., /, ?, @, [, , ], ^, `, {, |, }, ~
The way to fix it is to scape the special characters. To do this we have to look at the unicode table and look for the character 
In this example the unicode value for ‘:’ is ‘3a’.
Once we have the unicode value for our character we have to replace ‘:’ by ‘3a ‘.

Don’t forget to add a space after the unicode value.

Now if we run the application we can see that the button’s style has changed.

Oracle JavaScript Extension Toolkit (Oracle JET)

Last Friday was a day with lots of Oracle products releases (Check Oracle ADF 12.2.1 release notes) and Oracle also released one of the most expected products Oracle JavaScript Extension Toolkit, also known as Oracle JET, the new JavaScript Framework.

Oracle JET is targeted at intermediate to advanced JavaScript developers working on client-side applications. It’s a collection of open source JavaScript libraries along with a set of Oracle contributed JavaScript libraries that make it as simple and efficient as possible to build applications that consume and interact with Oracle products and services, especially Oracle Cloud services.

Oracle JET is a framework to develop applications based on some Open Source libraries:

  • JQuery

JQuery is a JavaScript library that help us to simplify the way to interact with HTML files, manipulate DOM tree and handle events.

  • JQuery UI

JQuery UI is a components library build on top of JQuery that offer us different widgets and allow us to interact easily with them (resize, drag and drop, etc). We can also add those components transitions and effects.

  • Knockout

Knockout is a library that allow us to create responsive interfaces with a clean underlying data model having a Model-View-ViewModel (MVVM) architecture design pattern.

  • RequireJS

RequireJS is more than a library to resolve dependencies  It also provides an asynchronous file and module loader.

  • Hammer
Hammer is an open-source library that can recognize gestures made by touch, mouse and pointer events.

Oracle JET supports MVVM arquitecture pattern (Model-View-ViewModel). In this architecture the Model represents the application data, the View is the presentation of the data and the ViewModel exposes the data from the model to the View.

 

Oracle JET Common Model and Collection API implements Model layer. This API has the following JavaScripts objtects:

  • oj.Model: Represents one single record from a data service such as a RESTful service.
  • oj.Collection: It is a list of oj.Model objects.
  • oj.Events: Provides methods to handle events.
  • oj.KnockoutUtils: Provides methods for mapping the attributes from oj.Model and oj.Collection object to Knockout observable objects for use with components view models
Oracle JET provides a collection of components wrapped as JQuery UI Widgets to implement View layer. These components range from a basic button or input to advanced visualization components like charts.  

The last layer, ViewModel is implemented by Knockout.js, and offers us two-way data binding between View and Model layers.

Oracle JET also has a lot of more features like these:

  • A validation framework that offers components level validation and data conversion
  • A cache at the Model layer for performance optimization of the pagination.
  • Connection to data sources through web services such as REST services or WebSockets.
  • Integrated authorization through OAuth 2.0 for data models retrieved from REST services.

Oracle has also provided us some resources so we can start building an application and learning Oracle JET.

  • Oracle JET application demo

  • Cookbook

In the cookbook we can see all Oracle JET components and also the HTML and JavaScript code needed to make it work,

 
You can also edit HTML and JavaScript code in the cookbook and see the changes at the moment.

If you are interested in the framework and want to learn more you should visit these links:

Oracle JET Website
Oracle JET Developers Guide
Oracle JET Youtube channel

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.

ADF: Dynamic entity object attribute labels from database

In JDeveloper & ADF forums there were a question about how to set dynamic values to entity object attribute labels. Using this post of Amis I am going to show you the way we can achieve this.

By default entity objects attributes labels are set, as you can see, for example, in Departments table in HR schema.

The first step is to create in our database the structure and packages we are going to use to create and store the labels.

The table we have to create is “RESOURCE_BUNDLE” and is has 3 fields:

We will also add labels values for each field and locale.

We need a PL/SQL package to retrieve the labels of the selected locale.

Now that we have finished to create out database needs, we have to create a method in Application Moduel Implementation class that will call the package we have previously created.

The next step is to create the Resource Bundles in our application. We are going to use Amis’ DBResourceBundle class as a start point because this class will call application module’s method to get the labels from the database.

In getResourceBundle method we have to configure amDef and config variables so we can use createRootApplicationModule method and get our Application Module.

Now that we have created our base ResourceBundle, we have to create the resoruce bundles of out applications and make them extend out DBResourceBundle class. We are going to have English, Spanish and French locales.


In all the clases we are going to override getLocaleCode method where we are going to return the locale code.


The next step is to register our bundle in Model project. We have to open model project properties and select ‘Resource Bundle’ in the menu.

We have to select ‘One Bundle per Project’, fill in the bundle path without the extension and select Resource Bundle Type as ‘List Resource Bundle’.

If we have more than one bundle we can add them in ‘Bundle Search’ tab.

The last step is to edit attribute labels in the entity object.
Para terminar hay que modificar las etiquetas de cada uno de los atributos.
We are going to create a label so out entity object is modified with the required tags we are going to use.

If we look at the entity source code, we can see that a couple of things has been added.

The first one is the Resource Bundle we are going to use.
And the second one is the id of the label in the ResourceBundle.

We will have to add Properties tag to every attribute and edit ResId property with the key registered in the database.


Now we are done and we have to test what we have implemented using ADF Model Tester, where we can change the locale if we activate it in JDeveloper properties.


When we run the Application Module we can see that by default English labels.

The change the locale now we have ‘Locale’ option in the menu.


If we change the locale to Spanish and close the view, when we open it again we can see that labels are now in Spanish.