Takeaways from OOW'17

Let's summarise important points from OOW'17 conference. This year conference was a breakthrough for Oracle JET - most of Oracle Cloud UI's were implemented with Oracle JET. Oracle ADF is used for Oracle SaaS (Fusion Middleware) back office applications, same as before. There is often misunderstanding in JET vs. ADF comparison. Keep in mind - JET is only UI layer and it can be compared with ADF Faces only. While ADF is much more than UI - ADF BC Model, ADF Task Flows and ADF Bindings.

1. Use JET for front-end apps, with relatively simple complexity but strong requirement for performance and scalability. Back-end can be implemented with ADF BC REST. Typically it would take longer to implement JET UI comparing to ADF Faces (no drag and drop support, unless using Visual Cloud Builder Service for JET)

2. Use ADF Faces for complex and large back-office applications. Some degree of mix between ADF Faces and JET is possible. Back-end should be done in ADF BC

ADF is stable technology and Oracle is focusing to advertise new things on OOW. Recommended focus for ADF developers was around JCS, DevCS, JET and VBCS:

There was one session about how to move existing ADF app into the cloud with JCS. And session about ADF BC REST, no new features - mainly showing customer system implementation with current features.

JET open source contribution was announced, along with new JET offline support - persistence toolkit (will be available through NPM in next couple of weeks):

Oracle explained why handling offline use case in JET is important:

Persistence toolkit will run on JET hybrid, web and desktop apps (yes you can run JET as desktop app, with 3-rd party Electron plugin):

Here you can read more detail info about persistent toolkit design principles:

JET supports Fetch API (used by persistence toolkit):

Architecture explanation for JET persistence toolkit:

Another hot topic related to JET - Web components. Slots are supported, this allows to build advanced Web components with dedicated facets (ADF Faces terminology):

OOW'17 was packed with chatbot demos. Unfortunately there is no trial access for chatbot cloud yet. There was good session about chatbots from Lyudmil Pelov - he explained how Oracle chatbot service and language processing works:

I was impressed with Oracle Visual Cloud Builder Service progress this year. I really liked this service and I think it will become JET IDE development tool. Is not focused for business users only, but is targeted for JET developers too. It comes with embedded DB or you can call external services too. Next versions will allow direct JET code development, combined with drag and drop:

Develop JET in VBCS using drag and drop where possible and code additional logic in JS/HTML:

VBCS is not targeted for business users anymore, they target it for coders (us) too - thats news I like:

RDK UI is available now for ADF, JET and MAF. ADF RDK was updated to newer version. ADF and JET RDK UI look is identical.

New ADF RDK UI:

JET RDK UI:

Machine Learning was another big thing on OOW and JavaOne. Nice to hear things I was studying in university about neural networks are becoming hype now:

JVM garbage collection tuning. Is better to have objects to be dead young. This means in ADF is better to use Backing Bean Scope where possible, because short scope bean is destroyed after request and this allows VM to clean memory:

ADF BC REST Service from ADF Library JAR

I had assignment to enable ADF BC REST for existing ADF application, which was developed with multiple ADF libraries. ADF BC REST was supposed to be enabled for one of the ADF libraries and then accessed through Master application. All ADF BC REST samples usually show how to enable REST inside Master application itself. I was curious if it will work to enable ADF BC REST and package it into ADF library, which is consumed from Master application. It worked and I would like to share sample app.

Sample app is based on two JDEV projects - library and master applications. Library application contains ADF BC REST implementation for Employees VO:

ADF Library is generated out of ViewController project, ADF BC REST is packaged through dependency:

Model (enabled with ADF BC support) project in Master application imports ADF library:

Run Master application by running REST project. There is improvement in JDEV 12.2.1.3 comparing to 12.2.1.2 - re-deployment works even if dependent ADF library was changed (this is very useful fix - saves a lot of time during development):

REST response is received:

Download sample application - adfbcrest.zip.

Oracle JET List Implementation based on WorkBetter Alta UI

During weekend I was playing with JET WorkBetter sample app. I thought it would be nice to extract People list UI into my own app - so that it will be easy to reuse this UI pattern in our own JET applications. I succeeded to achieve my goal and would like to share WorkBetter Alta UI list sample with you.

This is how my own JET list UI looks like, based on sample app:

Header block is implemented in separate div, this contains title and toolbar for buttons. List content is rendered out of template located in its own div:

Template renders JET list component. List in turn is based based on item template:

Item template defines list row content and structure - through set of JET and custom CSS styles. Data attributes are referenced directly from template structure:

For this sample I'm using basic set of mock data defined in JS module, but obviously it can fetch data from REST service too:

Set of custom styles (created based on WorkBetter example) is located in override.css file within JET application structure:

Sample JET list application can be downloaded from GitHub - jetlistapp.

To build this application, I was using JET CLI commands. Especially useful I found options to strip application leaving only sources and then to restore JET environment - this helps to share code.

Here is the sequence of commands how I was using JET CLI:

ojet create jetlistapp --template=navdrawer (creates JET application)

ojet serve (runs JET application)

ojet strip (removes all files except your sources)

ojet restore (brings back JET environment, after application was stripped)

ojet serve (you can run application again, after it was restored)

Oracle JET Simple Table with Fake JSON Server

What if you want to build JET UI, but there is no back-end REST service ready yet. You could use static JSON data inside JET app and load it from the JSON file. This works, but data retrieval logic will need to be changed after REST service will be ready. This is not productive. Ideally you would like to have fake REST service to simulate REST calls from JET UI, until real REST back-end is ready.

This can be achieved with JSON Server. It provides full fake REST API to be used by front-end client. It is extremely easy to setup JSON Server with NPM. Run npm install to setup JSON Server:

npm install -g json-server

Create simple JSON file with data structure - this will be served from JSON Server:

Run JSON Server with this command, pointing to JSON file:

json-server --watch db.json

You should see REST endpoint URL displayed in the log. Use this URL in JET application to define collection:

JET CollectionTableDataSource can be created on top of collection backed by REST:

JET UI table component renders data directly from CollectionTableDataSource:

Table UI is rendered based on REST call:

To verify REST call, go to developer console and check network request. You should see request executed against fake JSON Server:

Response is visible too:

Download JET sample application with JSON file for JSON Server from my GitHub repository - jetsimplecrud.

ADF 12c Table CRUD Fix for Auto Focus

I had a post about how to improve user data entry for ADF table with auto focus for new row - Improving ADF UI Table CRUD Functionality with Auto Focus. If you follow comments thread for that post - you will see described approach doesn't work exactly as it should in ADF 12c (focus is set for new row but later is lost after tab navigation - it should move focus to another column). Thanks to the community we have simple fix for this issue, read OTN Forum thread - Set Focus on CreateINsert row in ADF Table. I hope Oracle will fix this functionality in the next ADF versions (currently they say it is expected behaviour, and I don't agree with this). But for now - fix does the job.

 Sample app was updated to 12.2.1.3 and it contains fixes described on OTN Forum - ADFTableFocusApp_v2.zip. Focus is set for first column of new row to avoid extra mouse click:

After tab is pressed - focus moves to the next column:

Fix simulates row selection through ADF JS API. After focus was set for the first column in current row - we execute row selection based on active row key. This allows ADF Faces to move focus to the next column on tab, because it knows currently selected row on client side:

Make sure to set active row key in the bean method, same place where focus ID is calculated (otherwise there will be JS error):

ADF Client Side Validation with JavaScript

In my previous post I explained how to use JS client side formatter for ADF Faces input components - ADF Goes Client Side - UI Performance Boost with JavaScript. The same principle can be applied for client side validation. Most likely you are not going to implement complex validation rules on the client side, but for simple checks - it will be perfect. There will be no roundtrip to the server and this will allow to improve user experience.

Client side validation check runs instantly when value is changed and there is no need to set Auto Submit = true to send value to the server. This rule checks value to be in certain range, similar simple checks can be implemented on client side (I'm sure you will find similar rules in your project):

If value is in range, client side formatter is applied as expected:

Custom JSF converter is registered in faces-config.xml and can be added to the input field either manually or dropped through the wizard:

Converter is based on ID, which is defined in faces-config.xml:

Definition in faces-config.xml:

Customer converter class defines range values, these properties will be consumed in JS logic:

Range check is done in JS. If validation fails, we display JSF error message. All happens on client side, without request to the server:

Download sample application with client side validation logic - ADFFormattingApp_v2.zip.

Oracle Java Cloud Service - Scaling and Cluster Setup for ADF

Last couple of weeks I was busy preparing to my OOW'17 session about estimating Java Cloud Service performance for ADF application. I was running stress tests against various JCS instance configurations to be able to create performance estimation methodology. I will describe this methodology on OOW, but here today will list key steps required to scale up JCS instance.

Let's assume you are running single cloud node with 1 CPU and 7.5 GB RAM. This node contains WLS admin and managed server:

To scale up cloud node, simply invoke Scale Up command from the menu. Select new compute shape and confirm scale up operation:

Scale up completed:

Now go to WebLogic console and update Managed Server startup parameters, to adjust heap size to higher value:

Managed server memory can be increased up to certain amount. If more resources will be needed, at some point you will need to create multiple managed servers and connect them into cluster. This would require to define Load Balancer instance (to have single entry point to the cluster):

Cluster node must run in dedicated cloud node. If cluster is based on two managed servers, there must be two cloud nodes:

Managed servers from cloud nodes can be connected into single cluster, this can be done in WebLogic console:

Once cluster is defined, deployment becomes easy - you can deploy ADF application into cluster and it will be propagated to all nodes:

Traffic director running in load balancer instance will be automatically configured to route traffic to cluster nodes: