Python Flask webservice integration with Oracle JET (Visual Builder Cloud Services) - Part2

Oracle JET  Application 

Oracle Visual builder Cloud Services(VBCS)

Introduction

Oracle Jet, which is internally used by oracle in visual build builder cloud services, is a java script tool kit which internally use knockout, promise, jquery, require and node.js java script framework. 

In simple term oracle jet nothing but a collection of stable java script frameworks. Its also open for you to add more java script frameworks, based on your requirements.

You should atlest have basic knowledge of javascript and knockout to work in jet. Other can be learn when start working basis.

Creation of the JET application using navbar template 

 If you are new to oracle jet and working with it first time then first prerequisite is to install npm (node package manage) this comes with node.js. Hence downlowd node.js and which internally will install node package manager. 

Once installed use below command to check node package manager version 

>> npm -v 

     6.9.0 

Once npm is confirmed then install oracle jet 

>> npm install -g @oracle/ojet-cl

It will take a few minute and post that it will prompt that installation of the oracle jet is complete you can use following command to uderstand if oracle jet is successfully installed or not. 

>> ojet help 

>>

>>

Once oracle jet is installed we have all our basic setup completed to work and now can start creating skeleton for our project. 

 ojet create EmployeeManager --template=navbar 

It will take sometime to create the skeleton and adding related library. Once this process complete project is ready to work hurrary. Till now everything we have done is one time activity apart from peojct creation. 

Now project is complete you can either use notepad ++ to edit the project or can open this project netbeans ide, which is a good ide to work on java script and html. 

Move through the folder structure the EmployeeManager>>Source >> Src >>js is the folder we are intertested in. view is having all the html file which is been used/dependent on viewModel folder and files inside viewModel.

Creation of ViewModel  

This concept is borrowed from the knockout, where there is always a viewmodel for the view in html to provide dynamic content to html.  If you are following instructions, java script files under the viewModel folder are the nothing but the knockout models been generated by the module.

Now open the dashboard and  add/modify  the following code

define(['knockout', 'ojs/ojcollectiondataprovider', 'ojs/ojpagingdataproviderview', 'viewModels/helpers/converterHelper', 
        'ojs/ojmodel', 'ojs/ojtable', 'ojs/ojpagingcontrol'],
 function(ko, CollectionDataProvider, PagingDataProvider, converterHelperModule) {

Define decide which module this javascript page will be required and load these module, these module can be used in html.


Now add the following code to deshboard.js

                 var self = this;
                self.serviceURL = 'http://localhost:5002/employees'; //   Service url been exposed from Flask
                self.pagingDatasource = ko.observable();  Knockout observable datasource
                self.dataProvider = ko.observable(); Knockout observable array
             
             
       Code below is creating a model of the object this you can treat as a single database record, url here should be the base url which will be used to fetch/save or update the record.

                self.createEmployeeModel = function () {
                var EmployeeModel = oj.Model.extend({
                      urlRoot: self.serviceURL,
                      idAttribute: "EmployeeId"
                    });

                    return new EmployeeModel();
                  };

Once a record is done we can create, a full collection using the model we created.
                   
                self.createEmployeesCollection = function () {
             
                  var EmployeesCollection = oj.Collection.extend({
                  url: self.serviceURL,
                 // fetchSize: 10,
                  model: self.createEmployeeModel()
                });

                return new EmployeesCollection();
              };
           
           
             self.employeesList = self.createEmployeesCollection();
             self.dataProvider(new CollectionDataProvider(self.employeesList));

Creation of view 

       Once the above code is done then viewModel part of the MVVM model is done and now next step is to create view.


<oj-table aria-label="Employee Table" columns="[{"headerText": "Employee Id", "field": "EmployeeId", "headerClassName": "oj-sm-only-hide", "className": "oj-sm-only-hide", "resizable": "enabled"}, {"headerText": "First Name", "field": "FirstName", "headerClassName": "oj-sm-only-hide", "className": "oj-sm-only-hide", "resizable": "enabled"}, {"headerText": "Last Name", "field": "LastName", "headerClassName": "oj-sm-only-hide", "className": "oj-sm-only-hide", "resizable": "enabled"}, {"headerText": "Email", "field": "Email", "headerClassName": "oj-sm-only-hide", "className": "oj-sm-only-hide", "resizable": "enabled"}, {"headerText": "Phone", "field": "Phone", "headerClassName": "oj-sm-only-hide", "className": "oj-sm-only-hide", "resizable": "enabled"}, {"headerText": "Address", "field": "ADDRESS", "headerClassName": "oj-sm-only-hide", "className": "oj-sm-only-hide", "resizable": "enabled"} ]" data="[[dataProvider]]" dnd="{"reorder": {"columns": "enabled"}}" id="table" scroll-policy-options="{"fetchSize": 10}" scroll-policy="loadMoreOnScroll" selection-mode="{"row": "multiple", "column": "multiple"}" style="height: 200px; width: 100%;">

add the below code to dashboad.html and now demo is ready to be executed.

 Execution

  run the command

  >>ojet serve

It will compilte the application and then it will open the first page in the default browser.  Click on deshboard.

If this is not working will show how to debug a java script application in my next blog.

Assignment:- 

I have tried only a few fileds, add more fileds in the table and show more fileds in the table.