The following figure shows the overall architecture of the Kendo UI Builder components and their relationship for modernizing OpenEdge applications:
Figure 1. Kendo UI Builder components
Refer to the numbered call outs in the following description:
1. Use an appropriate project in Progress Developer Studio for OpenEdge to develop Data Objects from Business Entities that you create and package together as one or more Data Object Services for deployment to an OpenEdge Application Server. Use an ABL Web App project to build and deploy Data Object Services to an instance of the Progress Application Server for OpenEdge. Use a Data Object project to build and deploy Data Object Services to the classic OpenEdge AppServer.
2. The deployment of Data Object Services includes Data Service Catalogs. Each Data Object Service is defined by an associated Data Service Catalog. This Catalog is a JSON file that contains meta-data describing the schema and operations supported by each Data Object managed by the Data Object Service. The JavaScript Data Objects (JSDOs) that the Kendo UI Designer and its generated web apps create to access Data Object resources rely on the Catalog for each Data Object Service that provides these resources to manage access to the data across the network.
3. The Kendo UI Designer runs as an Electron application installed on your local system. Use the Designer to create an OpenEdge web app, for which you specify a name and folder location for the files. An OpenEdge web app in the Kendo UI Builder is built from a template that consists of one or modules with access to table resources provided by one or more Data Object Services. You create each module from one or more views that you specify using selected UI Templates that support a variety of Kendo UI layouts, such as a grid and form. You bind data to each view by associating one or more Data Object resource tables as data sources, depending on the view. You can define app function and presentation by setting properties on the app, each module, and its views, then preview the result in your default web browser with real data from the data sources that are bound to the views. At any point in your design, you can save the current state of the web app to JSON UI Meta-Data that, together with the selected UI Templates, define the UI and behavior of the app. Note that the UI meta-data is itself independent of the Kendo UI implementation, and is used to generate a Kendo UI-based web app based on the UI Templates that you select.
4. At any stage that you are ready to preview and test the app, you can build the app by invoking the Kendo UI Generator. This code generator takes the saved JSON UI Meta-Data and referenced UI Templates as input, and generates a deployable OpenEdge web app containing the functionality you have designed. In addition, the Generator builds your web app in the context of Bootstrap and AngularJS, which provides a responsive UI for your app. The generated HTML5/CSS and JavaScript files are then saved to the app location you have specified, which can be a Web UI Project of Progress Developer Studio for OpenEdge. Note that a Node.js-driven webpack-dev-server (running in the background) continuously and incrementally updates your previewed app as you save further changes to it in the Designer using the Kendo UI Generator or in customizable source code using your choice of editor.
5. By creating a Web UI Project in Developer Studio, you can save your generated Web App for Deployment either as a development build for round trip testing and debugging, using a development instance of PAS for OpenEdge, or as a release build for delivery on a production instance of PAS for OpenEdge. In addition, you can export the Web UI Project as a Web UI Application, which creates a WAR file for your web app that you can deploy to any compatible web server of your choice.
