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
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 $.getJSON("http://127.0.0.1:7101/RestWebServApp-RESTWebService-context-root/rest/Jdev12.2.1/Department"). 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' }); . . . |
Ahora ejecute la aplicación y podrá ver que una tabla JET está poblada con datos de Departamentos
Salud
Feliz aprendizaje
0 Comentarios
Dejanos tu comentario para seguir mejorando!