WIXLIB

Using Telerik Kendo UIwith WebSpeedMike Fechner, Director, Consultingwerk Ltd.mike.fechner@consultingwerk.de

http://www.consultingwerk.de/2

Consultingwerk Ltd. Independent IT consulting organization Focusing on OpenEdge and related technology Located in Cologne, Germany Customers in Europe, North America, Australiaand South Africa Vendor of tools and consulting programs 25 years of Progress experience (V5 OE11) Specialized in GUI for .NET, OO, SoftwareArchitecture, Application Integrationhttp://www.consultingwerk.de/3

Progress WebSpeed When was the last time, Progress addedfunctionality to WebSpeed? Version 8? Version 9? Certainly nothing new to WebSpeed inOpenEdge? WebSpeed is dead! WRONG ANSWER!Kendo UI with WebSpeed4

Progress WebSpeed Some OpenEdge 11 releases added little things Support for detecting JSON Input (WEBCONTEXT:IS-JSON) Support for LONGCHAR InputKendo UI with WebSpeed5

Progress WebSpeed OpenEdge 11.5.1 (released May 2015) allows todeploy WebSpeed messenger on PASOE(Tomcat) OpenEdge 11.6 will implement ability to executeWebSpeed in PASOE Agent https://community.progress.com/community groups/openedge general/f/26/t/17250.aspxKendo UI with WebSpeed6

Agenda Introduction into Kendo UIBasic usage – Kendo UI in SpeedScriptExtending mapped web objectsAuto-complete TextBoxUsing Kendo UI Grid with WebSpeedAsynchronous Data AccessImplementing custom request handlersGenerating JSON definition from ABLUsing Telerik Chart ControlsKendo UI with WebSpeed7

JQuery and HTML5 based Widgets for browserbased and mobile applications 70 Widgets Integrates with AngularJS (MVVM Framework)and Bootstrap (responsive UI) Optimized for Performance and Resource Usage Themable and Localizable Server Side Wrappers for ASP.NET, JSP, PHPKendo UI with WebSpeed8

Telerik Online Demos http://demos.telerik.com/kendo-ui/ Access to Documentation (API reference) fromdemosKendo UI with WebSpeed9

JavaScript? Kendo UI can be used without deep JavaScriptknowledge – as long as you are not starting towrite single-page-applications Lots of documentation and great forums Widgets are initialized using standard codepattern (JQuery widget constructor) Widgets are customized using JSONrepresentation of properties Data can be provided using properties (arrays) Data can be accessed by calling into web serverKendo UI with WebSpeed10

Kendo UI Core – open source Subset of Controls released as open source 40 Controls http://www.telerik.com/kendo-ui/open-sourcecore Apache 2.0 license No supportKendo UI with WebSpeed11

Controls not included in open source BarCodeChartsEditorGaugesGridMapKendo UI with WebSpeed QRCodeSchedulerStockChartTreeviewUpload12

Agenda Introduction into Kendo UIBasic usage – Kendo UI in SpeedScriptExtending mapped web objectsAuto-complete TextBoxUsing Kendo UI Grid with WebSpeedAsynchronous Data AccessImplementing custom request handlersGenerating JSON definition from ABLUsing Telerik Chart ControlsKendo UI with WebSpeed13

Basic usage Kendo UI is integrated into HTML page byadding two JavaScript Libraries– JQuery– Kendo UI script src "/static/js/jquery.min.js" /script script src "/static/js/kendo.all.min.js" /script Path must be adjusted to match real location offile JavaScript code typically minimized to reduceloading time (and protect IP of Telerik)Kendo UI with WebSpeed14

Creating Kendo UI Widgets Standard HTML Elements placed on page JQuery is used to manipulate the page DOM JavaScript code block used to add Kendo UIWidget behavior to HTML Element (widgetconstructor) Widget behavior controlled by properties orevent handlers (function callbacks) passed towidget constructor Widget typically rendered in place of HTMLElementKendo UI with WebSpeed15

Sample adding Date Picker to Textbox HTML page defines standard INPUT tags fortext boxes ( document).readyfunctionadds Kendo UIWidget behaviourKendo UI with WebSpeed16

Providing values from SpeedScript Statement Escape Expression EscapeKendo UI with WebSpeed17

Agenda Introduction into Kendo UIBasic usage – Kendo UI in SpeedScriptExtending mapped web objectsAuto-complete TextBoxUsing Kendo UI Grid with WebSpeedAsynchronous Data AccessImplementing custom request handlersGenerating JSON definition from ABLUsing Telerik Chart ControlsKendo UI with WebSpeed18

Mapped web objects Mapped web objects is one of thedevelopment models provided with WebSpeed Comprehensive separation of html layout andany ABL code Allows change of html layout without recompile Maps textbox, checkbox, radio-set, optionset,editor to ABL widgets in text default frame of theweb object ABL program interacts with these widgets forinput and outputKendo UI with WebSpeed19

Mapped web objects Static html page: Offset file: ABL web w Offset file automatically generated wheneverchange in .html file is detected ABL web object maintained in AppBuilder,section editor ABL web object contains frame for fields in htmlfileKendo UI with WebSpeed20

Mapped web objectsINPUTKendo UI with WebSpeedOUTPUT21

Extending mapped web objects tagmap.dat file in %DLC% or working directorymay define additional html elements to map allows to define specific input/output handlers,e.g. for date fields or combo box Kendo UI requires meta tag for JavaScriptwidget constructorKendo UI with WebSpeed22

tagmap.datKendo UI with WebSpeed23

Kendo UI with WebSpeed24

Kendo UI with WebSpeed25

Agenda Introduction into Kendo UIBasic usage – Kendo UI in SpeedScriptExtending mapped web objectsAuto-complete TextBoxUsing Kendo UI Grid with WebSpeedAsynchronous Data AccessImplementing custom request handlersGenerating JSON definition from ABLUsing Telerik Chart ControlsKendo UI with WebSpeed26

Auto-complete TextBox TextBox with integrated search Search on local data (JavaScript Array) orremote data (http requests) Single selection or multi selectionKendo UI with WebSpeed27

Auto-complete TextBoxKendo UI with WebSpeed28

Use JSON Parser to build dataSource arrayKendo UI with WebSpeed29

Data Picker using remote Data Source Remote Data Source allows Kendo UIWidgets to do a separate http requestto get data Supports remote filtering, sorting,paging, (later in this talk)Kendo UI with WebSpeed30

Kendo UI with WebSpeed31

Simple Remote Data SoruceKendo UI with WebSpeed32

Simple Remote Data SoruceKendo UI with WebSpeed33

Agenda Introduction into Kendo UIBasic usage – Kendo UI in SpeedScriptExtending mapped web objectsAuto-complete TextBoxUsing Kendo UI Grid with WebSpeedAsynchronous Data AccessImplementing custom request handlersGenerating JSON definition from ABLUsing Telerik Chart ControlsKendo UI with WebSpeed34

Kendo UI Grid with WebSpeed Kendo UI Grid can use existing HTML tableincluding existing tr , th , td to generategrid from it endo UI with WebSpeed35

Kendo UI with WebSpeed36

Agenda Introduction into Kendo UIBasic usage – Kendo UI in SpeedScriptExtending mapped web objectsAuto-complete TextBoxUsing Kendo UI Grid with WebSpeedAsynchronous Data AccessImplementing custom request handlersGenerating JSON definition from ABLUsing Telerik Chart ControlsKendo UI with WebSpeed37

Kendo UI async Data Access Allows to read data in separate http request Possibly from a different server, using differentcaching settings Supports for server side filtering, sorting, pagingwithout need to reload page Starting point for single-page-application (SPA)Kendo UI with WebSpeed38

Kendo UI and JSDO JSDO:– Open-Source JavaScript Library from PSC– Mimics ProDatasets in JavaScript https://github.com/CloudDataObject/JSDO Initially designed for AppServer and REST Adapter Open for other data provider – including WebSpeed It’s just using a http protocolKendo UI with WebSpeed39

Demo Kendo UI GridJSDO / REST Adapter / AppServerServer side filtering, sorting paging200,000 customer records Chrome Developer Tools dataSource definition (Kendo UI, JSDO dialect) JSON Filter PatternKendo UI with WebSpeed40

Kendo UI with WebSpeed41

Request URL for a single data inessEntity/count?filter {"ablFilter":"(Country BEGINS 'de' and NameBEGINS 'con')","orderBy":"State DESC","skip":0,"top":10}& ts 143393199227099112-23Kendo UI produces ABL Query String That‘s the beauty of well integrated Progress productsKendo UI with WebSpeed42(Telerik and OpenEdge)

Async Data Access for WebSpeed WebSpeed app could be combined withAppServer/REST Adapter Possible to implement JSDO protocol usingWebSpeed– Requires JSON Catalog generation Meta schema of ProDataset response– Requires GET Alternative: simple JSON Data Source, doesalso support server side filtering, sorting, pagingKendo UI with WebSpeed43

Kendo UI with WebSpeed44

Simple JSON Data SourceKendo UI with WebSpeed45

Request URL to read data Sort[0] CustNum ASC Filter[0] Name startswith U Filter[1] City contains IER http://localhost/cgibin/cgiip.exe/WService mo/Web/CustomerDataSource?take 20&skip 0&page 1&pageSize 20&sort[0][field] CustNum&sort[0][dir] asc&filter[filters][0][field] Name&filter[filters][0][operator] startswith&filter[filters][0][value] u&filter[filters][1][field] City&filter[filters][1][operator] contains&filter[filters][1][value] ier&filter[logic] andKendo UI with WebSpeed46

Implementing Backend for Data Source Typically based on cgi-wrapper – as it doesoutput JSON, not HTML May return TEMP-TABLE or ProDataset inJSON Or use JSON Object Model Parser to returncustom JSON Details follow in next chapterKendo UI with WebSpeed47

Updating with WebSpeed Kendo UI supports updating of data Uses REST verbs PUT, POST, DELETE Will post JSON Document to WebSpeed ServerKendo UI with WebSpeed48

WEB-CONTEXT JSON Support In theory, WebSpeed can be used as backend toJSDO (incl. server side paging, filtering, sorting) WEB-CONTEXT:IS-JSON attribute Returns TRUE when content-typeapplication/json or text/json was posted to server WEB-CONTEXT:FORM-LONG-INPUT returnsJSON String Use Progress.JsonObject.ObjectModelParser orProDataset:READ-XML for input processingKendo UI with WebSpeed49

Agenda Introduction into Kendo UIBasic usage – Kendo UI in SpeedScriptExtending mapped web objectsAuto-complete TextBoxUsing Kendo UI Grid with WebSpeedAsynchronous Data AccessImplementing custom request handlersGenerating JSON definition from ABLUsing Telerik Chart ControlsKendo UI with WebSpeed50

Implementing custom request handlers web/objects/web-disp.p handles every requestto WebSpeed Agent startup procedure Available in source code Can be customized Parses URL and determines the web object torun to serve the requestKendo UI with WebSpeed51

Customizing web-disp.p Standard web-disp.p does only supportprocedural web objects We need class based web objects Class based cgi-wrapper– Generating html pages– Handling JSON Data requests Adds more structure to code than just a bunch ofcgi-wrappers calling into class filesKendo UI with WebSpeed52

Kendo UI with WebSpeed53

Kendo UI with WebSpeed54

Request URL for data http://localhost/cgibin/cgiip.exe/WService mo/Web/CustomerDataSource WebSpeed Messenger URL JsonData keyword to redirect request toJSON data-handler.w ABL Class Name (Data Source), turn / intoperiodKendo UI with WebSpeed55

Kendo UI with WebSpeed56

Query Manipulation Review CustomerDataSource.cls in PDSOEKendo UI with WebSpeed57

Agenda Introduction into Kendo UIBasic usage – Kendo UI in SpeedScriptExtending mapped web objectsAuto-complete TextBoxUsing Kendo UI Grid with WebSpeedAsynchronous Data AccessImplementing custom request handlersGenerating JSON definition from ABLUsing Telerik Chart ControlsKendo UI with WebSpeed58

Generating JSON Definition from ABL Kendo Widget Properties: JSON Objects We can use ABL Object Model Parser togenerate those object definition – instead ofmanually coding them in a designer If your ABL framework support JSONSerializable objects and lists that’s even amuch simpler taskKendo UI with WebSpeed59

Kendo UI with WebSpeed60

Kendo UI with WebSpeed61

Kendo UI with WebSpeed62

Code Review CustomerOverview.cls WebSpeed – OO enabled Web widgets that hide Kendo UI from developerKendo UI with WebSpeed63