WCP/ADF to OJET: ADF MVC vs OJET MVVM

This is a post of the series Oracle WebCenter Portal to Oracle JET. In this case I will make another comparison between Oracle ADF and Oracle JET Architectures.
Maybe this should be the second and not the third post, anyway here it is.

WCP to OJET

Oracle ADF is based on MVC (Model-View-Controller)

Oracle ADF is a Java EE framework based on JSF 2.2 (Java Server Faces) which implements the pattern Model-View-Controller, but extending the classic Model of plain Java Server Faces based on Managed Beans.



Oracle ADF introduces the ADF Model layer (also known as the Binding Layer), which was intended to be standarized (JSR-227) to be the way for data binding and access from the view to the sources of data, however it never was approved.
The ADF Model abstracts the access to the business services independently of the data source (SOAP, REST, JPA)

Knockout (library used by Oracle JET) is based on (Model-View-ViewModel)

Oracle JET is a Toolkit which uses Knockout JS library for implementing Data Binding between the Views and the Model which is based in the pattern Model-View-ViewModel.
The View is an HTML file which is related to a ViewModel JavaScript file which binds the UI
information and update the Model underneath if required.


Similarities ADF - JET

  • The ADF Model implements a Data Binding concept very similar to Oracle JET - Knockout Data Binding.
    • In Oracle ADF there is a relationship Page/Fragment with the PageDefinition XML file.
    • In Oracle JET you have the View in HTML related to its ViewModel in JavaScript.
  • The ADF Model uses internally its Collection APIs which abstracts the components to work with the data obtained from the Data Sources. In Oracle JET it also uses its own JET Common Model API.

Comments

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