WCP/ADF to OJET: ADF Model to OJET Common Model

This is a post of the series Oracle WebCenter Portal to Oracle JET. In this case I will make another comparison between Oracle ADF Model and Oracle JET Common Model API.

WCP to OJET

How is the Oracle ADF Model

It is not bad to remember that Oracle ADF is based on Java Server Faces 2.2 (Jakarta EE / Java EE). Oracle ADF adds to plain Java Server Faces the following features
  • A Rich set of UI components -> ADF Faces
  • A Model layer to abstract the interaction bewteen the Pages (UI) and the Model. -> ADF Model
  • An implementation of JPA known as Business Components for consuming data from a Database -> ADF Business Components
In Java Server Faces, the Model is implemented by Managed Beans as shown in the following Figure.

JSF Model - Managed Beans

In Oracle ADF, also can be used the ADF Model layer based on the withdrawn JSR-227. This layer is also known as the Binding Layer.

The ADF Controller links a Page (ADF Faces) to a PageDefinition (ADF Model) where Bindings - Iterators - Data Controls are defined for accessing to the data in a common way.


ADF Model

The Model in Oracle JET

Oracle JET uses a Data-Binding between the View and the Model (ViewModel) by using Knockout JS library. The concept is very similar to the ADF Model Page-PageDefinition.

OJET Model

In addition, Oracle JET provides a Common Model API (https://docs.oracle.com/en/middleware/developer-tools/jet/6.2/develop/using-common-model-and-collection-api.html)

The Oracle JET Common Model API offers abstraction for accessing to the data exposed in REST Services similar as Iterators and Data Controls in Oracle ADF.
  • oj.Model defines a type of data
  • oj.Collection allow to iterate and interact with the data defined in the oj.Model
 So the oj.Collection is very similar to CollectionModel in Oracle ADF.

Best Practices for ViewModel - OJET Model

Remark some best practices you can find from other authors of Oracle JET developers / authors such as Geertjan and other contributors.
  • Endpoints Management: Separate the endpoints in a separate JSON file and change the URLs in the after_build.js hook script when building the JET application for different environments.





  • Use Classes / Factories separate to the ViewModel files: Decouple the APIs from the ViewModel to promote re-usability.



  • Since Oracle JET 6.0.0+ use oj.xxxDataProvider classes instead of oj.xxxDataSource as the Common Model API is improving to make less effort to integrate Data Services into the Model API.

Comments

  1. Bronco Austin5 February 2021 at 11:39


    Iam so thrilled because of finding your alluring website here.Actually i was searching for Oracle BPM.Your blog is so astounding and informative too..Iam very happy to find such a creative blog. Iam also find another one by mistake while am searching the same topicOracle SQL.Thank you soo much..

    ReplyDelete
  2. Unknown31 March 2021 at 21:49

    I feel really happy to have seen your webpage and look forward to so many more entertaining times reading here. Same as your blog i found another one Oracle BPM .Actually I was looking for the same information on internet for Oracle BPM and came across your blog. I am impressed by the information that you have on this blog. Thanks once more for all the details.

    ReplyDelete

Post a Comment

Popular posts from this blog

OJET: Inter-Module communication in TypeScript Template

Image
In this post I bring another example on how to Communicate Modules using the Oracle JET - TypeScript Template based on the Oracle JET Cookbook: InterModule Communication From now and so on will create multiple examples using TypeScript for those who are not familiar with it and wants to turn the Cookbook examples into TypeScript :). The example ( ojet-typescript-list-detail ) can be found as usual in my GitHub repository: https://github.com/DanielMerchan/ojet-examples This example is a bit different compared to the Cookbook example where the modules are not running at the same time within a Module. This example is built as described in the following images: Customers module acts as the Wrapper Module. It coordinates when to load the list and detail modules. Customers module makes use also of signals npm module for communication between Customers-List, Customers-Detail. Explanation of the Example customers.js is the coordinator responsible module for: initiali
Read more

OJET: Build and Deploy in an Application Server

Image
There are some other sources where an Oracle JET Application is packaged and deployed as a WAR in Oracle WebLogic Application Server (Arda Eralp) https://blogs.oracle.com/ardaeralp/deploy-oracle-jet-application-to-weblogic-server (Andrejus Baranovski's) http://andrejusb.blogspot.com/2016/07/serving-oracle-jet-application-from.html They may look bit old or maybe because they call directly grunt tasks by using the grunt-cli . In this post I will update a bit these posts in Oracle JET 6.1.0 and the usage of ojet build (instead of calling the grunt tasks) for also building the corresponding WAR file. The example can be found in my GIT repository: https://github.com/DanielMerchan/ojet-examples Let's start... Install grunt-war module in your Oracle JET Application. npm install grunt-war --save-dev Create a war.js (or call it whatever you want) in /scripts/grunt/config folder under your souce files. This is a sample code inside of it, check https://www.npmjs.com/packag
Read more

OJET: Select All options using only Checkboxset

Image
This is an example on how to select all other options by using another oj-checkboxset. GitHub: ojet-checkbockset-select-all The idea is to keep track of the selection and make use of the on-value-changed as described in the following code. self.colorOptions = ko.observableArray([ { id: "blueopt", value: "blue", color: "Blue" }, { id: "greenopt", value: "green", color: "Green" }, { id: "redopt", value: "red", color: "Red" }, { id: "limeopt", value: "lime", color: "Lime" }, { id: "aquaopt", value: "aqua", color: "Aqua" }, ]); self.selectAll = ko.observableArray([]); self.currentColor = ko.observableArray(["red"]); self.selectAllOptionChanged = (event) => { const newSelection = event.detail.value; if (newSelection.indexOf('all')
Read more