Sunday, September 17, 2017

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.

Monday, September 11, 2017

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)

Thursday, September 7, 2017

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.

Sunday, September 3, 2017

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):

Wednesday, August 30, 2017

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.

Wednesday, August 16, 2017

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:

Saturday, August 12, 2017

My Blog Samples Download Repository (For Samples Before 2014 January)

I have been asked, where to download my blog sample applications, posted before 2014 January. If you try to download such sample - you will get error about sample not found. Thats because Google discontinued their support for Google Code repository.

However, you can still download all my samples posted before 2014 January from Google Code archive. Go to archive URL - Google Code Archive for jdevsamples and you can browse all old samples there by date:


All new samples (after 2014 January) are hosted from Google Drive or from GitHub and are accessible directly from blog by URL.

Saturday, July 29, 2017

Oracle JET Busy Context API to Control Asynchronous REST Calls

I have received feedback from users working with JET UI - sometimes it is not obvious that action button was pressed, users tend to press same button again very fast, which leads to parallel REST calls executing at the same time. In JET - REST call is executed asynchronously, this makes user to believe action was done instantly when button was pressed. However, REST call still may run in the background - while user will be trying to call same service again. While in most of the cases such behaviour is fine, still there are use cases when we want to block action button, until REST response is not received (while response is executed, button will be disabled - this will give visual feedback to the user about action still executing). JET provides Busy Context API to handle asynchronous REST calls in synchronous way.

I will describe how to apply Busy Context API in your JET application. Take a look into my sample app (JET + ADF BC REST) available on GitHub - JETCRUD.

When you run sample app, go to Customers tab and navigate to edit screen. There you will find Save button, which is enabled:


Save button calls saveCustomer() JS function. JET Busy Context is established in this method, before making REST call. Busy Context is attached to Save button. If there are no busy states in the context, function isReady() returns true and we can register busy context. After busy context is registered - REST call can be made. If saveCustomer() JS function will be called again, before REST call is executed - isReady() will return false and no REST call will be made. When busy state is created, we update observable variable - which helps to change disabled property for the button:


Data in one of the fields is changed and user pressed Save button to execute REST call - button becomes disabled:


Button stays disabled until REST call response is received. Of course when REST service is fast you even will not notice that. But if REST service call takes a second or so - you will see disabled button, when action is busy. After REST response is received and if there are no errors - success callback is executed. We call resolve() function there and this removes busy state:


We need to use promise call for whenReady() function to read changed value from isReady() function. This step updates button visual state back to enabled:


Save button becomes enabled:


Observable variable is set for UI button disabled property. This is how visual state is controlled from JS:


Don't forget to add resolve() to error callback too, otherwise button will stay disabled - if REST call fails:

Saturday, July 22, 2017

ADF Goes Client Side - UI Performance Boost with JavaScript

If you would like to boost ADF UI performance, you should look into client side validation and formatting options possible to be done in ADF UI. Today I will describe how you can implement client side converter, to format number value on client side, without making request to the server. Same approach could be used to implement client side validators. You can raise error message and it will be assigned to UI field in the same way, just like any standard ADF error message. While this approach is documented long ago in Oracle ADF developer guide - How To Create Client Side Converter, it is not well known and not often used.

Client side converter is attached to ADF UI field through JSF tag, it points to custom converter ID (make sure autoSubmit=false is set, we don't want request to the server on value change):


Custom converter is defined in Faces Configuration file, it points to custom converter class:


Converter class is responsible to load JavaScript file, where number formatting logic is implemented. Also we have an option to pass initialization parameters:


Example of client side converter logic (to format numbers) code in JS:


Formatting happens on the client, no request to the server is done. User enters value and navigates out of the field - value is formatted:


If fractional part is incorrect, error raised from converter is displayed same as any other error in ADF - attached to the field:


If value is invalid - error is displayed too, this simple validation error comes from JS converter. Request is processed on the client, no call to the server:


Server side formatter in ADF BC is still required. When data is fetched from DB, ADF BC server side formatter is applied to transform data to correct format (this happens when data is fetched and doesn't affect end user performance):


Custom number formatter implemented in ADF BC (read more about it: Generic BigDecimal Formatter in ADF 12.2.1.1):


Download sample application - ADFFormattingApp.zip.