Tuesday, October 11, 2016

OTN Appreciation Day: #ThanksOTN Twitter feed with Oracle MCS and Oracle JET

As we can implement our Custom APIs using node.js, we can almost use any of the available node modules like for example Oracle MCS: Creating PDF files in Custom APIs.
In a project we are developing we have the requirement to display a twitter timeline of a hashtag.

Today is the OTN Appreciation Day and in this post we are going to make a #ThanksOTN twitter feed using Oracle MCS and Oracle JET.

First of all we are going to start with the API design. We are going to create an API called TwitterAPI and a GET method inside feed endpoint.

The next step is to implement the API. To get the twitter feed we are going to use node-twitter module.  To install the module we have to execute npm install twitter  in the folder where our package.json file is.

After that we need to include the module as a dependency.

Moving to the javascript part, this is the implementation.

To get the consumer_key, consumer_secret, access_token_key and access_token_secret we need to create a twitter application. We are just returning the json that the module returns but we could implement something that caches the json and we just call the module every certain amount of time.

To finish the MCS part we have to upload the implementation zip file to MCS.

Moving to JET side, first we need to manually install the MCS library that can be find in your MCS instance.

Then the JET implementation looks like this:

 If we run the application we can see #ThanksOTN feed!

Thursday, August 25, 2016

ADF: Update model in value change listener

There are some cases when we need to get a value associated to the new value that we have selected in a selectOneChoice, or that we have typed in an inputText.
In this cases we will not be able to get that value, as the only thing we can do is to get the new value from the ValueChangeListener object.

In this example we are going to use HR schema and we will have Employees view object. In DepartmentId field we are going to create a List of Values to show the DepartmentName value in the selectOneChoice.

We are also going to add DepartmentName field from Departments view into Employees view.

If we have to drag and drop the Employees view from the data control palette into our page and create a form.

In DepartmentId field component, we have to set autoSubmit to true and create a valueChangeListener.

If we print the values in the method. To get the value from the attribute bindings I am using resolveExpression method that can be found in JSFUtils class.

We can see that the model value will be always the previously selected value.

To display the new value associated to the selected one, we need to force the update model calling procesUpdates method.

If we run again the application we can see that the selected value is displayed.

Saturday, August 20, 2016

Rio2016 Medal Standings (Part1): Using MCS internal Database

In this 3-part post series I will show how to build an Oracle MAX Application that will display the medal standing in Rio 2016.

This is what we are going to do in order to achieve our goal.

First we are going to use Oracle MCS internal database to store the urls of the flags that we will display in the application and we will also create a custom API to retrieve the records from the database.

The second step is to design and implement the API that we will consume from the MAX application.
We will get the rankings using rio2016 node module that can be found in github.

Rio2016 Medal Standings (Part2): Designing and implementing rankings custom API (Coming soon)

And the last step we have to do is to build Oracle MAX application 

Rio2016 Medal Standings (Part3): Building MAX application (Coming soon)

Let's start! The node module that we are going to use to retrieve the standings doesn't give us the flags url so we need to get them.

At this moment we can display either static or remote images in Oracle MAX, but the source of the image has to be its absolute url, we cannot display images from MCS Storage. This would be a great feature to have.

I stored in a server lots of flags, but we need to know what url corresponds to each country and we will use MCS Database to do it.

First we are going to create a custom api 'RankingCountries'.

In security tab we have to disable 'Login Required' so we don't have to deal with users at this point.

In endpoints tab we have to create 3 of them.
  • /load (POST method): we will use this to load the data intro the database.
  • /countries: Returns all the countries.
  • /countries/{id}: Returns one country.

Now we have finished the design. It's time to start the implementation.
In implementation tab we have to download the JavaScript Scaffold.

This is the first implementation we have to make, the one to load the data.
As you can see we are storing the data that we will provide in the body of the POST call into 'Country' table, where the primary key of the table is 'code'.

The this Platform API will create the table if it doesn't exists.

This is the json we have to provide. The code is the value that we will get from the node module that returns the standings.

The second implementation is the one that returns one country.
We need to provide 2 parameters in this method of the Databse Platform API. The first one is the name of the table, and the second one is the value or values of the primary key.

We will return a json like this: {"ESP": "http://mydomain/Spain.png"}
If we don't find the flag in the database we are going to return the Unknown flag.

The last implementation will return all the countries with the same format as the previous one
 {"ESP": "http://mydomain/Spain.png", "GER", "http://mydomain/Germany.png"}

We will only use /countries endpoint but wanted to show more than one operation that can be done with Database Platform API. You can check more operations like delete or merge in this link: Accessing the Database Access API from Custom Code

We have finished the implementation. In implementation tab we have to upload the .zip file into MCS.

Now it is time to test everything.
After executing the load operation we ar ready to test the two GET operations.

The first one, providing an id that does not exists, returns unknown flag values.

And if we run Countries GET operation we get all the values form the database.

Monday, August 1, 2016

OOW 2016 Session: "Going Mobile with a Hybrid Cloud and On-Premises Architecture"

I am glad to write this post because I have been selected to present a session in Oracle OpenWorld 2016 along with Javier Barrio, avanttic Sales Director.

The name of the session is "Going Mobile with a Hybrid Cloud and On-Premises Architecture" and we will present the customer success of the Oracle Mobile Cloud Service project that avanttic finished some months ago.

You can see the abstract here or in this link: http://bit.ly/2a3xn0D

If you want to learn more about the project you can check the following links:

And of course don't miss the chance to assist to our session in September.

Wednesday, July 20, 2016

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

Monday, July 11, 2016

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.

Sunday, July 3, 2016

ADF: tagCloud component overview

In ADF, released a couple of weeks ago, we had many new features as you can see in my previous post ADF 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).