Saturday, December 10, 2016

Early ADF Model Update with Process Updates Method

This use case specifically useful for ADF UI value change listener. If there is business logic to be invoked when field value is changed, we can can call ADF BC custom method from assigned value change listener. However new value is not yet propagated down to ADF BC model - we would need to pass it as parameter to custom method. What if want to have new value to be available in ADF BC model without passing new value from value change listener as parameter? This is possible if we call processUpdates method in value change listener, before calling custom ADF BC method.

In my example -, I have created sample method testCall in VO Row implementation class. This method is accessing salary attribute value from current row. I'm going to call this method through bindings from value change listener and lets see what it will print out:

Let's use value change listener with custom method call without calling processUpdates initially:

Change salary attribute value to call value change listener:

Custom ADF BC method is invoked from value change listener and it prints value before change:

How to get new value in ADF BC custom method, without passing it as parameter from value change listener? Call processUpdates on UI component, before calling custom method in value change listener:

Change value once again:

This time new value is visible in ADF BC custom method instantly, when value change listener is invoked:

Thursday, December 8, 2016

Video - Live Webinar - Master Class - ADF Bindings Explained

Posting 2 hours long video recording for yesterday webinar - Master Class - ADF Bindings Explained. Thanks to everyone for attending. It was large crowd, nearly 100 attendees live. I enjoyed answering to all of your questions, hopefully this will be useful in your daily work.

Webinar topics:

1. ADF Bindings overview. Why ADF Bindings are required and how they are useful
2. Drill down into ADF Bindings. Explanation how binding object is executed from UI fragment down to Page Definition
3. ADF Binding types explanation. Information about different bindings generated, when using JDeveloper wizards. What happens with ADF Bindings, when using LOV, table, ADF Query, Task Flow wizards.
4. Declarative ADF binding access with expressions
5. Programmatic ADF binding access from managed beans
6. ADF binding sharing and access from ADF Task Flows. How to create binding layer for Task Flow method call or router activities.
7. Best practices for ADF Bindings
8. Your questions

Download webinar ADF 12c app from GitHub - ADFAltaApp

Monday, December 5, 2016

Simple CRUD Implementation with Oracle JET - Part III

This is third and last part in JET CRUD series. I already had a post about JET CRUD few months ago - Very Practical CRUD with JET and ADF BC - POST and DELETE Methods. But current approach is more simple and better structured. I will go through CREATE, UPDATE and DELETE operations.

You can download or view source code (JET app and ADF BC REST app) directly in GitHub  repository - jetcrud.


We need to initalize new model when creating new row, this is done in addCustomer.js - empty model is initialized. Model is initialized from common module definition - customController (read more about it in my previous post - Better Oracle JET Code Structuring with Your Own Modules - Part II):

Important trick which will save lines of code - you can reference model attributes directly, no need to list all of them in advance. Data bind form component to JET model variable:

Each input could point to the attribute, this is UI will get/set value to View Model:

New model must be posted through JET model API create operation. Here we can convert model to JSON and use it as parameter for create:

This is how it looks on UI - form with new customer data. Press Save button:

Behind the scenes REST POST method will be executed and data will be posted to the backend, where it will be processed and inserted into DB:

New row is saved and visible in the results table:


Edit form implementation is very similar to create, actually it can be even combined into one. The only difference is how you initialize current row for editing (check - Oracle JET CRUD - Search and Edit Form - Part I). And how you save the changes - must use different method from Oracle JET model API - save. The rest is very similar to create operation handling:

Edit form UI - it renders different set of fields:

Behind the scenes it executes REST PATCH method, which will update only changed attributes:


This is the simplest operation from all three. You should get instance of row to delete. This can be done through JavaScript promise, JET would not return actual model instantly. It return promise and you get model asynchronously. Call JET model API destroy operation to remove row entry:

Row is selected and removed:

Behind the scenes it calls REST DELETE method and removes row from backend:

Read previous posts:

1. Oracle JET CRUD - Search and Edit Form - Part I
2. Better Oracle JET Code Structuring with Your Own Modules - Part II

Sunday, December 4, 2016

Oracle Developer Cloud Service and ADF Build/Deployment Automation Summary

We are moving our internal development to Oracle Cloud production instance. This weekend I was going through build automation and deployment process with Oracle Developer Cloud Service. I would like to share few hints with you.

There are excellent video tutorials recorded by Shay Schmeltzer, I would not repeat here all the steps, will post only key steps in the process and few extra tips. Watch Shay's videos to get understanding how it works and how to configure Developer Cloud Service (UI was changed since then, but still all config steps are valid):

1. Using Oracle Developer Cloud Service for Git and code review with JDeveloper Applications

2. Oracle ADF Build Automation on the Oracle Developer Cloud Service

Download ADF example configured with Ant scripts for build automation on Dev CS - ADFAltaApp.

JDeveloper/ADF version. When I run OJDeploy build in Dev CS (Developer Cloud Service), I can see in the log it prints version This means currently Dev CS supports ADF up to

Locally I prefer working on, since JDeveloper is more stable in When I was trying to build code commited from 12.2.12, Dev CS complained it can't open project file. I have solved it by changing to in *.jws and *.jpr files (luckily my local JDeveloper doesn't complain about it and continues to work with the application). With such changes, Dev CS is able to recognize project files and runs build process. Change in the project file:

Development process is centralized around pushing your local changes to Dev CS Git repository branch (this can be done directly from JDeveloper):

In this example, I commit my local changes into fixbugs branch, later changes can be merged into master branch through Dev CS UI:

Build. To merge changes in Dev CS into master branch, we need to register merge request. In the wizard you can specify Git repository name, target branch and review branch (the one from where we are going to get changes and apply to master branch):

You can specify approvers and later when changes are approved, they are merged to master branch.

Next step is build automation (this can invoked on demand or automatically). You can associate build process to Git branch and review past build results:

If you are building with Ant, make sure to add and build.xml files into ADF application (described in Shay's video). Here is example of file I'm using in the sample app for ADF

Example of build.xml file to run build automation in Dev CS for ADF

At first build process was always returning success, even I there were compilation issues left in the code on purpose. In order to force build process to return failure when it should, you need to check "Archive the artifacts" option in Post Build section of build job configuration. This will force build process to produce EAR and if this fails (because of compilation issues), it marks build process failure:

Deploy. Dev CS knows how to deploy EAR into Java Cloud Service. This can be done on demand or automatically, when build is successfully completed. Configuration is simple and straightforward, you need to provide connection details to Java Cloud Service and it works - you can deploy or redeploy:

Application is successfully deployed to Java Cloud Service and visible in EM:

Besides all this, Dev CS offers Wiki's, issue tracking and bunch of other useful features for day to day work in development. So far no complaints, good job Oracle.

Thursday, December 1, 2016

Better Oracle JET Code Structuring with Your Own Modules - Part II

You can end up into long lines of JavaScript code when implementing more complex use cases in JET. This will complicate maintenance and make code hardly readable. To prevent this - plan code structure carefully and use your own modules. Structure code into different modules - to reuse common code across multiple use cases.

Check my JET/ADF BC sample available on GitHub - jetcrud. This sample implements one common module - Customer Controller. Module is responsible to define ADF BC REST service connection. It contains REST service URL, JET model definition with ID attribute and JET collection created based on JET model and assigned with fetch size. This allows not to repeat same definitions again and again in each of JET modules implementing use cases (edit, add, etc.):

Such module is created as any other JET module with define header. We can use it in any other JET module, by specifying module name in define block. For example customers.js module imports Customer Controller through define block:

Within customer.js module we access function from Customer Controller to obtain collection.

Same Customer Controller module is reused inside another module editCustomer.js. Here we are accessing function from Customer Controller to obtain model:

Such approach allows to simplify JavaScript code and render different UIs based on one module. Readonly table is based on customerController.js:

Edit form is based on same customerController.js:

Read previous post - Oracle JET CRUD - Search and Edit Form - Part I.

Monday, November 28, 2016

Red Samurai - Oracle Cloud Customer (DBaaS, JCS, DevCS)

We understand importance of Cloud services and decided to move out internal development infrastructure (ADF and JET) into Oracle Cloud. From today we are Oracle Cloud customers and users for the following services:

1. Oracle Database Cloud Service

2. Oracle Java Cloud Service

3. Oracle Developer Cloud Service

Exciting times ahead. Expect more interesting topics about Oracle Cloud and ADF/JET.

Saturday, November 26, 2016

ADF New Feature - Masonry Layout Custom Size Dashboard

ADF and respectively comes with improvement for Masonry Layout component. Now we can define custom sizes for tiles - 9.4.1 How to Use a masonryLayout Component. This helps to define larger tiles and organize dashboard layout in more accurate way.

I have uploaded working demo app on GitHub, you can download it directly from repository or browse through the code - ADFAltaApp. I will be using this app for ADF Bindings webinar - Live Webinar - Master Class - ADF Bindings Explained.

To access Masonry Layout dashboard with custom tile sizes, go to Employees section and open Profile tab. You should see such dashboard layout (one tile 2x4, one tile 4x2 and two tiles 2x2). All four tiles are defined with custom size:

Masonry Layout is responsive out of the box. On narrow screen tiles will be re-arranged automatically:

Custom tiles for Masonry Layout are defined through CSS. You should create custom style class and set it for Masonry Layout component. I have define custom style class - RedSamuraiDashboard:

Each tile group with custom size must be defined in CSS separately. Width and hight should be proportional. If you define 250px for size 2, this means size for 4 must be 500px:

Masonry Layout tiles are assigned with style class which defines size:

You could have ADF region inside tile, it renders perfectly well: