OJet

Components

• <oj-button  id="" on-oj-action="">
  
•  <oj-table id="" data="" columns="" selection-mode="" on-selected-changed=""
• <oj-paging-control
  
• <oj-dialog id="" dialog-title="">
  
• <div slot="body">
• <div slot="footer">
•  <oj-messages id="" messages="" display="" position=
• <oj-input-text id="" value="" label-hint="" label-edge=""
• <oj-input-password 
  
• <oj-bind-text value=""
• <oj-combobox-one
• <oj-checkboxset
  
• Button Icon
• <oj-avatar id="" role="" size="" src=""
• Redwood theme
• chroming = "solid/callToAction/borderless"
• Layout
• class="justify-content-center"
• Controls
• <oj-bind-if test=""
  

Java Script

• 
  

js scripts

• this.selectedChangedListner = (event) -> {
     const row = event.detail.value.row;
     if (row.values().size > 0{
       row.values().forEach(function (key) {
          console.log("selected key : "+key);
          var selectedRow = self.serviceArray().find(s -> s.serviceName===key);
  }
  };
  

RequireJS

• https://www.youtube.com/watch?v=j588XXF4f2Y&list=PLYxzS__5yYQmDD-0A0Jvy27lUnrGIsq9o

• It is JavaScript File & Module loader. It is optimized for in-browser use, 
• It packages all of its java scripts into one java script file and makes it easier to manage how java script files are loading.

How to Use it:

1. Download require.js from Requirejs.org
2. Add following tag to your html file which puts requirejs/require global object
   <script data-main="config" src="require-2.1.js"></script>
3. Program configuration file using requirejs/require global object
   require.config({
      baseURL: 'js';
      paths: {
              angular: 'angular-min.js'
             }
   });
4. Define a module(AMD) - Its a way to make custom js to work with requirejs
   define('<dependencies>',<callback function>){
     return <function> OR <Object>
   });

KnockoutJS

• Design Patterns used in KnockoutJS(Timetested solutions for recurring problems)
• MVVM
• Observer
• Javascript closure and the module design pattern
  

• It is a data-binding library that helps create responsive and interactive web applications.(Angular is a full framework)
• It works with underlying data model(java script)  
• through 2 way data binding
• links datamodel to UI
• Knockout core concepts
• Declarative bindings
• Dependency tracking
• Templating

• ListView
• Array
•  ArrayDataProvider - Array of Objects
• <oj-list-view id="listview" aria-label="list using array"
                  data="[[dataProvider]]"
                  selection-mode="single">
• Collections 
• ojs/ojlistview
• ojs/ojcollectiontabledatasource
•  
•  <oj-list-view id="listview" aria-label="list using collection" style="width:100%;height:95vh;min-height:300px;overflow-x:hidden"
                 data="[[dataSource]]"
                 selection-mode="single"
                 scroll-policy="loadMoreOnScroll" scroll-policy-options.fetch-size="15">

OJET(Oracle JavaScript Extension Tool Kit)

• It is a collection of stable and popular open source libraries
• Install Netbeans 8.2 & NodeJS LTS(we use only npm utility)
• Uses RequireJS, Knockout, CORDOVA, Jquery & Jquery UI, Ojet components

Setup

• npm config rm proxy
• npm config  set strict-ssl false
• npm config  set registry "http://registry.npmjs.org/
• npm config  set proxy "http://www-proxy-idc.in.oracle.com:80"
• npm config  set https-proxy "http://www-proxy-idc.in.oracle.com:80"

Installing and creating your first Oracle JET app is as simple as 1-2-3

1. npm install -g @oracle/ojet-cli
2. ojet --version
3. ojet create <app name> --template=navdrawer||navbar||basic||blank
4. cd <app name>
5. ojet serve (this will build & run the project)
6. ojet build --release (to minify js & html)
7.  ojet serve --release
8. zip the web folder and place on web server

routing, module, model


Binding Context Variable

• The $root context always refers to the top-level ViewModel, regardless of loops or other changes in scope. This allow us to access top-level methods for manipulating the ViewModel.
• The $data binding context refers to the ViewModel object in the current context. It is much more like the this keyword in a JavaScript object.
• Inside of a foreach loop, the $index property contains the current item’s index in the array. Unlike the other binding context properties, $index is an observable and is updated automatically whenever you add or delete an item from the associated observable array.
• The $parent property context refers to the parent ViewModel object. Typically, you will require this prroperty when you will work with nested loops and with in the nested loop, you need to access properties of the outer loop.
• $parentContext - This refers to the binding context object at the parent level. This is different from $parent, which refers to the data (not binding context) at the parent level.
  
  For example, if you need to access the index value of the outer foreach item with in inner foreach context you could use the $parentContext as shown below:
• $parents - This is an array that represent all of the parent view models. This is useful when you need to access the parents with in inner most loops that may nested upto n-level.
  
  $parents[0] is the view model from the parent context (i.e., it’s the same as $parent)
  $parents[1] is the view model from the grandparent context
  $parents[2] is the view model from the great-grandparent context
•