Oracle Cloud and Fusion Middleware, Oracle JET, Jakarta EE and all other Open Source Blog!

Hello Oracle JET lovers, In this post I will bring a small example on how to handle two common errors when Routing in Oracle JET. Routing to a State Id which has not been registered as part of the Router configuration Routing to an existing State Id, however when calculating the corresponding View and View Model they are missplaced, no-exist or whatever cause it makes the module to do not load properly The example is based on the scaffold Oracle JET Application navdrawer (without TypeScript). GitHub: ojet-page-not-found-handling Taking a look into the code provided by navdrawer , navigation is implemented as following: The index.html uses oj-navigation-list where selection is bind to router.stateId which will immediately trigger the Router to route to the new stateId The appController.js (View Model for the index.html) configure the possible Router States // Router setup self.router = oj.Router.rootInstance; self.router.configure({ 'dashboar...

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')...

Recently I have been asked of one of my team colleagues about how we can generate some Oracle JET components once the View Model has been loaded. GitHub: ojet-add-jet-comp-programmatically Researching a bit in Knockout / JET and how the Binding Context works I found the following approach. In the transitionCompleted lifecycle method, the DOM has already been generated, so we can use JavaScript API to get the DOM component what will we use to add Oracle JET Components. By using insertAdjacentHTML method, we will add our Oracle JET Components. In addition, you can already bind the methods / attributes to Knockout Obvervables if required. self.transitionCompleted = function () { // Implement if needed const fakeDiv = document.getElementById('fake'); fakeDiv.insertAdjacentHTML('beforeend',' '); fakeDiv.insertAdjacentHTML('beforeend',' Desktop Laptop Tablet ' ) ko.cleanNode(fakeDiv); ko.ap...

Hi, After a long time waiting for it, the Oracle Fusion Middleware 12.2.1.4 has been finally released. Oracle Fusion Middleware 12.2.1.4 Official Documentation In this post, I will focus on my personal view over the Oracle Fusion Middleware products which I most commonly use over the last 8 years which are the SOA Suite (including BPM and OSB), WebCenter Suite (Portal, Content, Sites), Oracle ADF and Oracle WebLogic Application Server mainly. Certification Matrix As every release, I make a round around the Certification Matrix of every Oracle Fusion Middleware Release to check if the Java JDK accepted has been increased or not. Oracle Certification Matrix for Oracle Fusion Middleware 12.2.1.4 Java However, I found that we are still in the J2SE / J2EE 8 and the maximum certified JDK is Oracle JDK 1.8.0_211+ which means any 1.8.0_xxx if you are using Oracle JDK as the JDK vendor. Database The biggest new is the certification with 18.3+ and 19.3+ of the On-Premise vers...

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...

Oracle JET supports officially TypeScript for your application development. OJET CLI does NOT include templates which uses by default TypeScript. However, in the Oracle website they provide an starting point template in case you want to use TypeScript. JET TypeScript Starter Template - Web NavBar In my GitHub you can find the app fixed: ( ojet-typescript-template ) https://github.com/DanielMerchan/ojet-examples The application has a minor bug in its Router configuration which makes the following strange behaviour: If you copy any module URL such as http://localhost:8000/? root=incidents in your browsers it always load the default module which is the dashboard Why? How to fix it? In the TypeScript template there is a duplication of the Router configuration. You can find a self.router.configure in: root.ts which acts as the "main.js" of the Oralce JET Out-of-the-box basic templates created with OJET CLI appController.ts which is the appController.js of t...

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 Mo...

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...

This is a cheat sheet of how to migrate Oracle WebCenter Portal artifacts to Oracle JET. WCP to OJET WCP -> OJET Cheat sheet  WCP + ADF Oracle JET Oracle WebCenter Portal OJET Application Oracle WebCenter Portal Navigation OJET Router / Routing ADF Skin OJET Theme ADF Declarative Component / Taglib OJET Web Component ADF Faces Rich UI Component OJET UI Component ADF Bounded Task Flow (Region) / Portlet OJET Module ADF Model OJET Common Model ADF Logger JS “Third Party Library” NPM Module for Logging ADF Security Custom Security Java Resource Bundle (ojL10n) JS Resource Bundle Java Proxy Client + POJO JS Factory / JS Class OJDeploy Grunt (or Webpack) Maven Npm (Node JS Package Manager)