Thursday, April 13, 2017

Production Mobile App with Oracle JET Hybrid in 2 Hours

Do you want to know a secret, how to build mobile application just in 2 hours? Use Oracle JET Hybrid. Beauty of Oracle JET Hybrid - you can reuse the same source code (HTML and JS) from regular JET application. JET UI is responsive out of the box and this allows to render JET screens from the Web on mobile device without changes.

We were using our JET 3.0.0 production app - Red Samurai and Oracle PaaS JCS Success - JET/ADF BC REST Cloud Production Application and created mobile app version. This process took around 2 hours.

Below I will list steps required to create JET Hybrid mobile app out of existing JET app.

1. Execute sudo npm -g install cordova to add Cordova to JET tooling

2. Execute sudo yo oraclejet:hybrid --platforms=android to create new JET Hybrid application. Windows and iOS are supported as well

3. Copy HTML and JS files from src folder of JET app into src folder of JET Hybrid app. Structure of JET Hybrid app with HTML and JS files:


4. Execute sudo grunt build --platform=android to compile JET Hybrid app

5. Execute sudo grunt serve --platform=android --destination=device to deploy JET Hybrid app to mobile device. If you are deploying to Android, you need to have Android tools installed on your machine

Dashboard screen on mobile device, built with JET data visualization components:


Customer setup screen contains JET search list and various input components with validation:


JET dialog looks good in mobile too, with input number fields:


JET input date component on mobile screen:


JET table with pagination is rendered very well and is easily usable on the small screen:


I should say - we are very happy with JET Hybrid functionality. It allows to reuse JET application code and build mobile app very fast.

Wednesday, April 12, 2017

Oracle JET 2.2.0 Application Migration to JET 3.0.0 Experience

I was migrating our production JET app from 2.2.0 to 3.0.0. End-to-end migration process took probably around 1-2 hours - with testing. I think this is quick. JET migration is not hard if you follow developer guide instructions - B Oracle JET v2.x.x to v3.0.0 Tooling Migration.

Migration from 2.2.0 must be done in two steps:

1. Migration to 2.3.0 from 2.2.0

2. Migration to 3.0.0 from 2.3.0

Step 1: Migration to 2.3.0 from 2.2.0

- Execute sudo npm install generator-oraclejet@2.3.0 -g to update Oracle JET to 2.3.0

- Execute sudo yo oraclejet ChBJellyHouseInvoicingJET230 to generate brand new JET 2.3.0 application

- Copy html/js files from existing application src folder into new one

- Update JET version number in index.html:


- Update JET version number and add additional library references (as per JET Developer Guide) in main.js:


- Update same set of libraries and versions in main-release-paths.json:


- Execute sudo grunt build:release to verify in migrated app build process succeeds:


- Execute sudo grunt serve:release to run application:


Step 2: Migration to 3.0.0 from 2.3.0

- Execute sudo npm install generator-oraclejet@3.0.0 -g to update Oracle JET to 3.3.0


- Execute sudo npm uninstall grunt-oraclejet oraclejet-tooling

- Execute sudo npm uninstall grunt-bowercopy --save-dev

- Execute sudo npm install grunt-oraclejet@3.0.0 oraclejet-tooling@3.0.0 --save-dev

- Execute sudo npm install oraclejet@3.0.0 --save

- Execute sudo npm uninstall bower -g to remove Bower, it is not needed anymore from JET 3.0.0

- Remove the following file from your system: scripts/grunt/config/bowercopy.js

- If you have no third-party dependencies remaining in your bower.json file, remove it

- Update JET version number in index.html:


- Update JET version number and add additional library references (as per JET Developer Guide) in main.js:


- Update same set of libraries and versions in main-release-paths.json:


- Execute sudo grunt build:release, most likely you will face error. Same was documented by someone on OTN Forum - v3.0.0 - Error with Grunt build and serve tasks with initConfig() in Gruntfile.js:


- To fix this error, add oraclejet-build.js and oraclejet-serve.js into scripts/grunt/config (you can copy these files from newly generated JET 3.0.0 app):

Monday, April 10, 2017

ADF Multi Task Flow Binding and Tab Order

I had a post while ago about ADF multi task flow binding and loading dynamic regions - Building Custom UI Shell with ADF 11g R2. In that sample, new region was opened in the first tab position. Meaning tab order was from right to left. It is more natural to have left to right tab opening order. This can be done too, check updated sample app - we need to control disclosed property and add new region to the end of array.

Sample app - MultiTaskFlowApp_TabOrder.zip. Sample app contains four regions that can be opened dynamically. Let's say user opens region Locations:


With improved tab order, next region will be opened in the tab on the right (before it was on the left, in the first position):


Tab closing works in the way. Let's say user wants to close second tab:


When tab with Departments is closed, next tab on the right is opened - Employees tab:


Key thing in implementation for this requirement - disclosed property in dynamic tab:


It calls bean method, where it evaluates current tab to be disclosed. If given tab is matching the value - it will be disclosed. Disclosed property for all other tabs will be reset:


Each time when new tab is loaded, it is loaded to the end of the array. New tab is set to be disclosed:


When user selects tab - currently disclosed tab property is updated too, to make sure info about new disclosed tab is stored:


One more case - tab closure. When tab is closed - next tab is selected, unless current tab was the last one:


When tab is selected programmatically, we update information about current selected tab too:

Friday, April 7, 2017

Workaround for ADF BC View Object Attribute Order Problem in JDeveloper 12c

I'm sure probably every ADF developer sooner or later faced this issue. When you create VO based on EO, JDEV gives you alphabetically ordered list of attributes. As a result - order of attributes in EO and VO becomes different. While this doesn't influence runtime functionality, it becomes quite annoying for application maintenance. Hard to match attributes between VO and EO, developer need to search through the list to locate attribute he is looking for. But there is a workaround, I will describe it here.

Let's see what the problem first. Assume we have Employees EO, attributes are generated in the same order as DB table columns:


Now if you are using VO creation wizard, list of attributes will be displayed in alphabetic order. This is frustrating:


Without any other choice, developer would select EO attributes and select them in such order as it is listed:


But wait, there is a workaround. Don't select all attributes, instead select only EO item itself. Then use Add button to add entire list of EO attributes:


This time attributes will be added in original order, as the order is set in EO.


Enjoy this small, but useful hint.

Sunday, April 2, 2017

Slides from Oracle PaaS Forum 2017 - Oracle JET and ADF BC REST Production Experience with Oracle Java Cloud

My colleague Florin Marcus (twitter: @FlorinMarcus) was attending and presenting at Oracle PaaS 2017 forum in Split, Crotia last week. He was explaining our production experience with Oracle Java Cloud Service and running Oracle JET/ADF BC REST system on Cloud instance.

Slides are uploaded on slide share, you can go through and read about real production app built with JET and ADF BC REST running on Oracle Java Cloud. If you are interested in more details - let me know, I could show a demo:



Exciting news from Oracle PaaS Forum 2017 - Red Samurai won award for Outstanding Java Cloud Service Contribution 2017:


This award was received for implementing Oracle JET/ADF BC REST app and running it on Oracle Java Cloud in production. Read more about it - Red Samurai and Oracle PaaS JCS Success - JET/ADF BC REST Cloud Production Application.