Header Ads Widget

Ticker

6/recent/ticker-posts

Método de fábrica de modelos comunes de Oracle JET para consumir servicios REST

 Anteriormente publiqué sobre  consumir servicios web en Oracle JET usando el método jQuery  y usando Oracle JET Common Model. He visto el método Oracle JET Common Model Factory en uno de los  blogs  y en el  curso MOOC,  así que intenté lo mismo, pero debido a algún cambio de versión o problema, no funcionaba como se esperaba, pero obtuve una solución en el  foro OTN JET  y compartí lo mismo aquí como referencia. .

Aquí estoy usando la misma aplicación de plantilla de cajón de navegación JET que se usa en mi primera publicación:  Uso de Oracle JET con JDeveloper.  y utilizando  el servicio web REST basado en ADF BC

Agregue un componente oj-table en la   página dashboard.html y defina el número requerido de columnas para mostrar los detalles de los departamentos.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
<div class="oj-hybrid-padding">
    <h1>Dashboard Content Area</h1>
    <div id="div1">
        <oj-table id="table" summary="Department List"
        aria-label="Departments Table"
        data='[[datasource]]'
                  columns='[{"headerText": "Department Id",
                  "field": "DepartmentId"},
                  {"headerText": "Department Name",
                  "field": "DepartmentName"},
                  {"headerText": "Location Id",
                  "field": "LocationId"},
                  {"headerText": "Manager Id",
                  "field": "ManagerId"}]'>
        </oj-table>
    </div>
</div>

Lo siguiente es crear un archivo Factory JS que contiene el código básico para llamar al servicio web y leer su respuesta (Oracle JET Common Model and Collection se usa en un archivo separado para una mejor comprensión del código)

Aquí va el código para  DeptFactory.js

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
define(['ojs/ojcore'], function (oj) {
    var DeptFactory = {
        // Single Department Model
        createDeptModel : function () {
            var dept = oj.Model.extend( {
                urlRoot : this.resourceUrl,
                idAttribute : "DepartmentId"
            });
            return new dept();
        },
        // Departments Collection
        createDepartmentsCollection : function () {
            var departments = oj.Collection.extend( {
                url : this.resourceUrl,
                model : this.createDeptModel(),
                comparator : "DepartmentId"
            });
            return new departments();
        }
    };
    return DeptFactory;
});

Y este Factory JS se usa en  dashboard.js  View Model para completar datos en la tabla JET

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
/**
 * @license
 * Copyright (c) 2014, 2019, Oracle and/or its affiliates.
 * The Universal Permissive License (UPL), Version 1.0
 */
/*
 * Your dashboard ViewModel code goes here
 */
define(['ojs/ojcore', 'knockout', 'jquery', 'DeptFactory', 'ojs/ojtable', 'ojs/ojcollectiontabledatasource'],
function (oj, ko, $, DeptFactory) {
    function DashboardViewModel() {
        var self = this;
        self.deptCollection = DeptFactory.createDepartmentsCollection();
        self.datasource = ko.observable()
        // Setting collection in row and column format to show in JET table
        self.datasource(new oj.CollectionTableDataSource(this.deptCollection));
    }
    return new DashboardViewModel;
});

Ahora ejecute la aplicación y verifique, los detalles del departamento se completan en la tabla del servicio web

Así es como podemos usar el método Oracle JET Common Model Factory para consumir servicios web REST.

Saludos feliz aprendizaje

Publicar un comentario

0 Comentarios