I will show in the post, how you can create single page applications with multiple modules in Oracle JET. As a starting point, you should use the Oracle JET QuickStart template, read about it here. This template comes with sample structure and you could follow it to split application functionality into different groups.
Download sample application, which is based on Oracle JET QuickStart template - JETCRUDApp_v10.zip (you must run ADF BC REST application in JDEV 12.2.1 and JET in NetBeans 8). QuickStart application is extended with new module, it contains CRUD implementation in JET (read more here).
I have slightly modified template and removed boxes for navigation and complimentary areas. It renders main content block stretched on the screen:
Under Employees tab, CRUD functionality to manage employees data is rendered. This includes CRUD functionality described in my previous posts about JET (see link above). Now it is part of real JET application:
Let's take a look into structure. QuickStart template comes with structure, where each module is separated into HTML/JavaScript files. There is a group available for employees CRUD - employees.html and employees.js:
Main page logic is implemented in index.html. This file includes page structure and references block with dynamic module (loaded through menu structure):
List of available modules is registered in main.js file router:
JET CRUD functionality use case HTML part is copied into employees.html file (this will be loaded through main.js router):
JavaScript part is copied into employees.js file:
JavaScript logic is changed to handle table row selection event through JavaScript listener method. Constructed employees view model is returned to be accessible from the router:
Download sample application, which is based on Oracle JET QuickStart template - JETCRUDApp_v10.zip (you must run ADF BC REST application in JDEV 12.2.1 and JET in NetBeans 8). QuickStart application is extended with new module, it contains CRUD implementation in JET (read more here).
I have slightly modified template and removed boxes for navigation and complimentary areas. It renders main content block stretched on the screen:
Under Employees tab, CRUD functionality to manage employees data is rendered. This includes CRUD functionality described in my previous posts about JET (see link above). Now it is part of real JET application:
Let's take a look into structure. QuickStart template comes with structure, where each module is separated into HTML/JavaScript files. There is a group available for employees CRUD - employees.html and employees.js:
Main page logic is implemented in index.html. This file includes page structure and references block with dynamic module (loaded through menu structure):
List of available modules is registered in main.js file router:
JET CRUD functionality use case HTML part is copied into employees.html file (this will be loaded through main.js router):
JavaScript part is copied into employees.js file:
JavaScript logic is changed to handle table row selection event through JavaScript listener method. Constructed employees view model is returned to be accessible from the router:
5 comments:
Thank you very much for the post and example application. I am facing issues whlile running jet application from netbeans IDE.
could you please give me some clue to resolve below errors.
Failed to load resource: net::ERR_EMPTY_RESPONSE (22:53:14:053 | error, network)
at http://localhost:8383/RSJETCRUDApp/css/libs/oj/v2.0.1/alta/oj-alta-min.css
Failed to load resource: net::ERR_EMPTY_RESPONSE (22:53:14:056 | error, network)
at http://localhost:8383/RSJETCRUDApp/css/override.css
Failed to load resource: net::ERR_EMPTY_RESPONSE (22:53:14:085 | error, network)
at http://localhost:8383/RSJETCRUDApp/css/images/favicon.ico
Failed to load resource: net::ERR_EMPTY_RESPONSE (22:53:15:211 | error, network)
at http://localhost:8383/RSJETCRUDApp/js/libs/oj/v2.0.1/debug/ojcore.js
Uncaught Error: Script error for: ojs/ojcore
http://requirejs.org/docs/errors.html#scripterror (22:53:15:215 | error, javascript)
at js/libs/require/require.js:8
Failed to load resource: net::ERR_EMPTY_RESPONSE (22:53:15:218 | error, network)
at http://localhost:8383/RSJETCRUDApp/js/libs/oj/v2.0.1/debug/ojrouter.js
Uncaught Error: Script error for: ojs/ojrouter
http://requirejs.org/docs/errors.html#scripterror (22:53:15:221 | error, javascript)
at js/libs/require/require.js:8
Failed to load resource: net::ERR_EMPTY_RESPONSE (22:53:15:223 | error, network)
at http://localhost:8383/RSJETCRUDApp/js/libs/oj/v2.0.1/debug/ojknockout.js
Uncaught Error: Script error for: ojs/ojknockout
http://requirejs.org/docs/errors.html#scripterror (22:53:15:225 | error, javascript)
at js/libs/require/require.js:8
Failed to load resource: net::ERR_EMPTY_RESPONSE (22:53:15:228 | error, network)
at http://localhost:8383/RSJETCRUDApp/js/libs/oj/v2.0.1/debug/ojoffcanvas.js
Uncaught Error: Script error for: ojs/ojoffcanvas
http://requirejs.org/docs/errors.html#scripterror (22:53:15:230 | error, javascript)
at js/libs/require/require.js:8
Failed to load resource: net::ERR_EMPTY_RESPONSE (22:53:15:233 | error, network)
at http://localhost:8383/RSJETCRUDApp/js/libs/oj/v2.0.1/debug/ojnavigationlist.js
Uncaught Error: Script error for: ojs/ojnavigationlist
http://requirejs.org/docs/errors.html#scripterror (22:53:15:237 | error, javascript)
at js/libs/require/require.js:8
Failed to load resource: net::ERR_EMPTY_RESPONSE (22:53:15:241 | error, network)
at http://localhost:8383/RSJETCRUDApp/js/libs/oj/v2.0.1/debug/ojmodule.js
Uncaught Error: Script error for: ojs/ojmodule
http://requirejs.org/docs/errors.html#scripterror (22:53:15:243 | error, javascript)
at js/libs/require/require.js:8
Failed to load resource: net::ERR_EMPTY_RESPONSE (22:53:15:252 | error, network)
at http://localhost:8383/RSJETCRUDApp/js/libs/oj/v2.0.1/debug/ojarraytabledatasource.js
Uncaught Error: Script error for: ojs/ojarraytabledatasource
http://requirejs.org/docs/errors.html#scripterror (22:53:15:253 | error, javascript)
at js/libs/require/require.js:8
Hi,
You need to copy JET runtime distribution into the sample app to run it.
Regards,
Andrejus
Hi Andrejus,
I downloaded your JETCRUDAPP_v2 and implemented using JET Quick Start Template. I have created employees.js and employees.html.
The Employee module is loaded successfully and the table fetches the data from ADF BC REST webServices.
I have implemented JavaScript Listener in employees.js as shown below:
self.currentRowListener = function(event, data) {
//on selection change update fields with the selected model
if (data['option'] === 'selection')
{
var selection = data['value'][0];
if (selection != null)
{
var rowKey = selection['startKey']['row'];
vm.modelToUpdatePromise = vm.collection.get(rowKey);
vm.modelToUpdatePromise.then(function (modelToUpdate) {
vm.modelToUpdate = modelToUpdate;
vm.updateFields(vm.modelToUpdate);
});
}
}});
self.handleBindingsApplied = function(info) {
// Implement if needed
$('#table').on('ojoptionchange', self.currentRowListener);
};
When row selected, the listener is fired, but it is not update the input fields.
Could please help me on this
Regards
Ashok
Hi,
Debug and check if modelToUpdate is not empty?
Regards,
Andrejus
Hi Andrejus,
Thanks for the prompt response and tips. I found the issue in debugger and resolved the issue. It is basically copy/paste problem. I just copied the code from your main.js to employees.js and forgot to replace vm. to self.
self.currentRowListener = function(event, data) {
//on selection change update fields with the selected model
if (data['option'] === 'selection')
{
var selection = data['value'][0];
if (selection != null)
{
var rowKey = selection['startKey']['row'];
self.modelToUpdatePromise = self.collection.get(rowKey);
self.modelToUpdatePromise.then(function (modelToUpdate) {
self.modelToUpdate = modelToUpdate;
self.updateFields(self.modelToUpdate);
});
}
}
}
Regards
Bhaskar K
Post a Comment