Header Ads Widget

Ticker

6/recent/ticker-posts

Complete la tabla Oracle JET sobre Oracle ADF BC mediante el servicio web REST

 Anteriormente, publiqué sobre la  creación de un servicio web REST desde el módulo de aplicación ADF  y, en esta publicación, usaré el mismo servicio REST para completar datos en una tabla JET. Aquí completaremos la tabla JET sobre Oracle ADF BC (Componentes comerciales).

Aquí estoy tomando la misma aplicación de muestra que discutí en mi primera publicación  Comenzando con Oracle JET y JDeveloper

La URL del servicio web basado en ADF BC es  http://127.0.0.1:7101/RestWebServApp-RESTWebService-context-root/rest/Jdev12.2.1/Department  y devuelve una lista de departamentos en formato JSON anidado

Tabla de Oracle JET

Veamos la parte de implementación

Añadir un componente DO-mesa en el  dashboard.html  página y definir el número requerido de columnas, este servicio web devuelve una lista de los departamentos por lo que he tomado 4 columnas para el  Departamento  Id, Nombre de departamento, Id Manager y la ubicación de identificación

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<div class="oj-hybrid-padding">
  <h1>Dashboard Content Area</h1>
<div id="div1">
         
          <oj-table id='table' aria-label='Departments Table'
                                        data='[[datasource]]'
                                        selection-mode='{"row": "multiple", "column": "multiple"}'
                                        dnd='{"reorder": {"columns": "enabled"}}'
                                        scroll-policy='loadMoreOnScroll'
                                        scroll-policy-options='{"fetchSize": 10}'
                                        columns='[{"headerText": "Department Id",
                                                   "field": "dept_id",
                                                   "resizable": "enabled"},
                                                    
                                                  {"headerText": "Department Name",
                                                   "field": "dept_name",
                                                   "resizable": "enabled"},
                                                   
                                                   {"headerText": "Manager Id",
                                                   "field": "mgr_id",
                                                   "resizable": "enabled"},
                                                    
                                                  {"headerText": "Location Id",
                                                   "field": "loc_id",
                                                   "resizable": "enabled"}
                                                   ]'
                                        style='width: 100%; height: 400px;'>
        </oj-table>
         
</div>
</div>

Ahora vea el código de  dashboard.js,  lea los comentarios para comprender el código javascript, aquí el   método getJSON () de jQuery se usa para llamar al servicio web REST ya que jQuery es parte de las bibliotecas de Oracle JET.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
/*
 * Your dashboard ViewModel code goes here
 */
define(['ojs/ojcore', 'knockout', 'jquery', 'ojs/ojinputtext', 'ojs/ojtable', 'ojs/ojarraytabledatasource'],
function (oj, ko, $) {
    function DashboardViewModel() {
        var self = this;
        //Define a Knockout observable array and name it tabData
        self.tabData = ko.observableArray();
         
        //Use jQuery method to call REST Web Service
        then(function (departments) {
        //JSON response is nested that's why 'items' is used to access records
            $.each(departments.items, function () {
                //Push data in Observable array
                self.tabData.push( {
                    dept_id : this.DepartmentId,
                    dept_name : this.DepartmentName,
                    mgr_id : this.ManagerId,
                    loc_id : this.LocationId
                });
            });
        });
         
        //Pass observable array in utility class to show data in table
        self.datasource = new oj.ArrayTableDataSource(self.tabData,
        {
            idAttribute : 'dept_id'
        });
        .
        .
        .

tabData  es una matriz observable knockout que está definida para contener el valor devuelto y puede ver que
self.tabData.push  se usa para insertar datos de servicios web en esta matriz y, por último,  se usa una clase de utilidad JET
ArrayTableDataSource para convertir esta matriz observable en tabular formato de datos.

Ahora ejecute la aplicación y podrá ver que una tabla JET está poblada con datos de Departamentos

Tabla de Oracle JET

Salud 

 Feliz aprendizaje

Publicar un comentario

0 Comentarios