E
egarcia
Guest
Version 4.4.1 of the JSDO is now available as an NPM package: @progress/jsdo The NPM package for the JSDO contains the following library files: progress.all.js progress.jsdo.js Minified versions and corresponding map files are also included in the package. The file progress.all.js includes support for Kendo UI DataSource. The file progress.jsdo.js can be used if support for Kendo UI is not required. You can use the library files by just placing them in a folder in your web application and referring to them from your HTML file. Example: Webpack provides another way to access the JSDO library. With this approach, you do not need to copy the library files to another location. You would import the NPM package into your application using the require() function in your JavaScript. Webpack would process the require() function and generate a bundle file for your app. In the HTML file, you would point to the bundle file. The webpack-dev-server provides a convenient way of working with the NPM package in your development environment. The server can watch for changes to source code and refresh the web application. The NPM package can be updated by just running npm update. This article provides an introduction to using the NPM package for the JSDO with the webpack-dev-server. The sample files used in this article can be downloaded from the Documents area and installed using the following commands: unzip webapp cd webapp npm install node node_modules\webpack-dev-server\bin\webpack-dev-server.js The zip file includes a package.json file with the dependencies. The npm install command will download dependencies, including webpack and webpack-dev-server. This operation may take a while. You can access the example014.html file from http://localhost:8080. Steps The following sections show how to configure the NPM package for the JSDO with webpack-dev-server from scratch: Creating a New Project Folder To work with npm and webpack, create a new folder: mkdir webapp cd webapp npm init -f The npm init command with the -f options creates a package.json file with default values. If you are sharing this app, you may want to update the various fields including description, author and license. Installing the JSDO NPM package To install the JSDO NPM package run the following npm command: npm install @progress/jsdo Installing webpack-dev-server The webpack-dev-server can be installed local to the project: npm install webpack-dev-server webpack --dev-save You can install webpack and webpack-dev-server globally using "npm install -g". The "--dev-save" option is used to specify that that there is a dependency to webpack during development. Installing Webpack loaders npm install babel-loader babel-core babel-preset-es2015 html-loader raw-loader --save-dev HTML file configuration Customers JavaScript Code /*global alert, $, progress, require */ require("@progress/jsdo"); $(function () { 'use strict'; var serviceURI = "Progress Application Server for OpenEdge"; var catalogURI = "http://oemobiledemo.progress.com/OEMobileDemoServices/static/CustomerService.json"; function createGrid() { console.log("DEBUG: createGrid(): [TEST] "); $('#grid').kendoGrid({ dataSource: { serverFiltering: true, serverSorting: true, serverPaging: true, type: "jsdo", transport: { jsdo: "Customer", countFnName: "count" }, error: function (e) { var messages = ""; if (e.errorThrown) { messages += e.errorThrown.message + "\n"; } e.sender.transport.jsdo.getErrors().forEach(function (err) { messages += err.error + "\n"; }); alert("Error: \n" + messages); } }, selectable: "multiple row", navigatable: true, filterable: true, height: 400, groupable: true, reorderable: true, resizable: true, sortable: true, pageable: { refresh: true, pageSizes: true, pageSize: 10, buttonCount: 5 }, editable: 'inline', toolbar: ['create'], columns: [ { field: 'CustNum', title: 'Cust Num', width: 100 }, {field: 'Name'}, {field: 'State'}, {field: 'Country'}, {command: ['edit', 'destroy'], title: ' ', width: '250px'} ] }); } try { // Create a new session object progress.data.getSession({ serviceURI: serviceURI, catalogURI: catalogURI, authenticationModel: "anonymous" }).then(function (/* jsdosession, result, info */) { createGrid(); }, function (/* jsdosession, result, info */) { alert("Error while creating session."); }); } catch (e) { alert("Error instantiating objects: " + e); } }); Webpack Configuration File To work with webpack, you would need a configuration file called webpack.config.js. This file contains the information on the bundle to build for the app and also loaders to preprocess files. module.exports = { entry: './example014.js', output: { filename: 'bundle.js' }, module: { loaders: [ { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader', query: { presets: ['es2015'] } } ] }, devServer: { port: 8080, contentBase: '.', watchContentBase: true } }; Running the webpack-dev-server You can run the webpack-dev-server using the following command: node node_modules\webpack-dev-server\bin\webpack-dev-server.js The webpack-dev-server is available at http://localhost:8080/ based on the configuration. ===
Continue reading...
Continue reading...