using telerik kendo ui with webspeed - pug...
TRANSCRIPT
![Page 2: Using Telerik Kendo UI with WebSpeed - PUG Challengepugchallenge.com/downloads2015/269_2015_Kendo_UI_with_WebSp… · Introduction into Kendo UI Basic usage – Kendo UI in SpeedScript](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01c3f07e708231d400ede5/html5/thumbnails/2.jpg)
http://www.consultingwerk.de/ 2
![Page 3: Using Telerik Kendo UI with WebSpeed - PUG Challengepugchallenge.com/downloads2015/269_2015_Kendo_UI_with_WebSp… · Introduction into Kendo UI Basic usage – Kendo UI in SpeedScript](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01c3f07e708231d400ede5/html5/thumbnails/3.jpg)
Consultingwerk Ltd.
Independent IT consulting organization Focusing on OpenEdge and related technology Located in Cologne, Germany Customers in Europe, North America, Australia
and South Africa Vendor of tools and consulting programs 25 years of Progress experience (V5 … OE11) Specialized in GUI for .NET, OO, Software
Architecture, Application Integrationhttp://www.consultingwerk.de/ 3
![Page 4: Using Telerik Kendo UI with WebSpeed - PUG Challengepugchallenge.com/downloads2015/269_2015_Kendo_UI_with_WebSp… · Introduction into Kendo UI Basic usage – Kendo UI in SpeedScript](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01c3f07e708231d400ede5/html5/thumbnails/4.jpg)
Progress WebSpeed
When was the last time, Progress added functionality to WebSpeed?
Version 8? Version 9? Certainly nothing new to WebSpeed in
OpenEdge? WebSpeed is dead!
WRONG ANSWER!Kendo UI with WebSpeed 4
![Page 5: Using Telerik Kendo UI with WebSpeed - PUG Challengepugchallenge.com/downloads2015/269_2015_Kendo_UI_with_WebSp… · Introduction into Kendo UI Basic usage – Kendo UI in SpeedScript](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01c3f07e708231d400ede5/html5/thumbnails/5.jpg)
Progress WebSpeed
Some OpenEdge 11 releases added little things
Support for detecting JSON Input (WEB-CONTEXT:IS-JSON)
Support for LONGCHAR Input
Kendo UI with WebSpeed 5
![Page 6: Using Telerik Kendo UI with WebSpeed - PUG Challengepugchallenge.com/downloads2015/269_2015_Kendo_UI_with_WebSp… · Introduction into Kendo UI Basic usage – Kendo UI in SpeedScript](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01c3f07e708231d400ede5/html5/thumbnails/6.jpg)
Progress WebSpeed
OpenEdge 11.5.1 (released May 2015) allows to deploy WebSpeed messenger on PASOE (Tomcat)
OpenEdge 11.6 will implement ability to execute WebSpeed in PASOE Agent
https://community.progress.com/community_groups/openedge_general/f/26/t/17250.aspx
Kendo UI with WebSpeed 6
![Page 7: Using Telerik Kendo UI with WebSpeed - PUG Challengepugchallenge.com/downloads2015/269_2015_Kendo_UI_with_WebSp… · Introduction into Kendo UI Basic usage – Kendo UI in SpeedScript](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01c3f07e708231d400ede5/html5/thumbnails/7.jpg)
Agenda
Introduction into Kendo UI Basic usage – Kendo UI in SpeedScript Extending mapped web objects Auto-complete TextBox Using Kendo UI Grid with WebSpeed Asynchronous Data Access Implementing custom request handlers Generating JSON definition from ABL Using Telerik Chart ControlsKendo UI with WebSpeed 7
![Page 8: Using Telerik Kendo UI with WebSpeed - PUG Challengepugchallenge.com/downloads2015/269_2015_Kendo_UI_with_WebSp… · Introduction into Kendo UI Basic usage – Kendo UI in SpeedScript](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01c3f07e708231d400ede5/html5/thumbnails/8.jpg)
JQuery and HTML5 based Widgets for browser based 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, PHP
Kendo UI with WebSpeed 8
![Page 9: Using Telerik Kendo UI with WebSpeed - PUG Challengepugchallenge.com/downloads2015/269_2015_Kendo_UI_with_WebSp… · Introduction into Kendo UI Basic usage – Kendo UI in SpeedScript](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01c3f07e708231d400ede5/html5/thumbnails/9.jpg)
Telerik Online Demos
http://demos.telerik.com/kendo-ui/
Access to Documentation (API reference) from demos
Kendo UI with WebSpeed 9
![Page 10: Using Telerik Kendo UI with WebSpeed - PUG Challengepugchallenge.com/downloads2015/269_2015_Kendo_UI_with_WebSp… · Introduction into Kendo UI Basic usage – Kendo UI in SpeedScript](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01c3f07e708231d400ede5/html5/thumbnails/10.jpg)
JavaScript?
Kendo UI can be used without deep JavaScript knowledge – as long as you are not starting to write single-page-applications
Lots of documentation and great forums Widgets are initialized using standard code
pattern (JQuery widget constructor) Widgets are customized using JSON
representation of properties Data can be provided using properties (arrays) Data can be accessed by calling into web serverKendo UI with WebSpeed 10
![Page 11: Using Telerik Kendo UI with WebSpeed - PUG Challengepugchallenge.com/downloads2015/269_2015_Kendo_UI_with_WebSp… · Introduction into Kendo UI Basic usage – Kendo UI in SpeedScript](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01c3f07e708231d400ede5/html5/thumbnails/11.jpg)
Kendo UI Core – open source
Subset of Controls released as open source 40+ Controls http://www.telerik.com/kendo-ui/open-source-
core Apache 2.0 license No support
Kendo UI with WebSpeed 11
![Page 12: Using Telerik Kendo UI with WebSpeed - PUG Challengepugchallenge.com/downloads2015/269_2015_Kendo_UI_with_WebSp… · Introduction into Kendo UI Basic usage – Kendo UI in SpeedScript](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01c3f07e708231d400ede5/html5/thumbnails/12.jpg)
Controls not included in open source
• BarCode• Charts• Editor• Gauges• Grid• Map
• QRCode• Scheduler• StockChart• Treeview• Upload
Kendo UI with WebSpeed 12
![Page 13: Using Telerik Kendo UI with WebSpeed - PUG Challengepugchallenge.com/downloads2015/269_2015_Kendo_UI_with_WebSp… · Introduction into Kendo UI Basic usage – Kendo UI in SpeedScript](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01c3f07e708231d400ede5/html5/thumbnails/13.jpg)
Agenda
Introduction into Kendo UI Basic usage – Kendo UI in SpeedScript Extending mapped web objects Auto-complete TextBox Using Kendo UI Grid with WebSpeed Asynchronous Data Access Implementing custom request handlers Generating JSON definition from ABL Using Telerik Chart ControlsKendo UI with WebSpeed 13
![Page 14: Using Telerik Kendo UI with WebSpeed - PUG Challengepugchallenge.com/downloads2015/269_2015_Kendo_UI_with_WebSp… · Introduction into Kendo UI Basic usage – Kendo UI in SpeedScript](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01c3f07e708231d400ede5/html5/thumbnails/14.jpg)
Basic usage
Kendo UI is integrated into HTML page by adding two JavaScript Libraries– JQuery– Kendo UI
Path must be adjusted to match real location of file
JavaScript code typically minimized to reduce loading time (and protect IP of Telerik)
Kendo UI with WebSpeed 14
<script src="/static/js/jquery.min.js"></script><script src="/static/js/kendo.all.min.js"></script>
![Page 15: Using Telerik Kendo UI with WebSpeed - PUG Challengepugchallenge.com/downloads2015/269_2015_Kendo_UI_with_WebSp… · Introduction into Kendo UI Basic usage – Kendo UI in SpeedScript](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01c3f07e708231d400ede5/html5/thumbnails/15.jpg)
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 UI
Widget behavior to HTML Element (widget constructor)
Widget behavior controlled by properties or event handlers (function callbacks) passed to widget constructor
Widget typically rendered in place of HTML Element
Kendo UI with WebSpeed 15
![Page 16: Using Telerik Kendo UI with WebSpeed - PUG Challengepugchallenge.com/downloads2015/269_2015_Kendo_UI_with_WebSp… · Introduction into Kendo UI Basic usage – Kendo UI in SpeedScript](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01c3f07e708231d400ede5/html5/thumbnails/16.jpg)
Sample adding Date Picker to Textbox
HTML page defines standard INPUT tags for text boxes
($document).ready functionadds Kendo UI Widget behaviour
Kendo UI with WebSpeed 16
![Page 17: Using Telerik Kendo UI with WebSpeed - PUG Challengepugchallenge.com/downloads2015/269_2015_Kendo_UI_with_WebSp… · Introduction into Kendo UI Basic usage – Kendo UI in SpeedScript](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01c3f07e708231d400ede5/html5/thumbnails/17.jpg)
Providing values from SpeedScript
Statement Escape
Expression Escape
Kendo UI with WebSpeed 17
![Page 18: Using Telerik Kendo UI with WebSpeed - PUG Challengepugchallenge.com/downloads2015/269_2015_Kendo_UI_with_WebSp… · Introduction into Kendo UI Basic usage – Kendo UI in SpeedScript](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01c3f07e708231d400ede5/html5/thumbnails/18.jpg)
Agenda
Introduction into Kendo UI Basic usage – Kendo UI in SpeedScript Extending mapped web objects Auto-complete TextBox Using Kendo UI Grid with WebSpeed Asynchronous Data Access Implementing custom request handlers Generating JSON definition from ABL Using Telerik Chart ControlsKendo UI with WebSpeed 18
![Page 19: Using Telerik Kendo UI with WebSpeed - PUG Challengepugchallenge.com/downloads2015/269_2015_Kendo_UI_with_WebSp… · Introduction into Kendo UI Basic usage – Kendo UI in SpeedScript](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01c3f07e708231d400ede5/html5/thumbnails/19.jpg)
Mapped web objects
Mapped web objects is one of the development models provided with WebSpeed
Comprehensive separation of html layout and any ABL code
Allows change of html layout without recompile Maps textbox, checkbox, radio-set, optionset,
editor to ABL widgets in text default frame of the web object
ABL program interacts with these widgets for input and output
Kendo UI with WebSpeed 19
![Page 20: Using Telerik Kendo UI with WebSpeed - PUG Challengepugchallenge.com/downloads2015/269_2015_Kendo_UI_with_WebSp… · Introduction into Kendo UI Basic usage – Kendo UI in SpeedScript](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01c3f07e708231d400ede5/html5/thumbnails/20.jpg)
Mapped web objects
Static html page: OrderStatus.html Offset file: OrderStatus.off ABL web object: OrderStatus.w
Offset file automatically generated whenever change in .html file is detected
ABL web object maintained in AppBuilder, section editor
ABL web object contains frame for fields in html file
Kendo UI with WebSpeed 20
![Page 21: Using Telerik Kendo UI with WebSpeed - PUG Challengepugchallenge.com/downloads2015/269_2015_Kendo_UI_with_WebSp… · Introduction into Kendo UI Basic usage – Kendo UI in SpeedScript](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01c3f07e708231d400ede5/html5/thumbnails/21.jpg)
Mapped web objects
Kendo UI with WebSpeed 21
INPUT OUTPUT
![Page 22: Using Telerik Kendo UI with WebSpeed - PUG Challengepugchallenge.com/downloads2015/269_2015_Kendo_UI_with_WebSp… · Introduction into Kendo UI Basic usage – Kendo UI in SpeedScript](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01c3f07e708231d400ede5/html5/thumbnails/22.jpg)
Extending mapped web objects
tagmap.dat file in %DLC% or working directory may 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 JavaScript widget constructor
Kendo UI with WebSpeed 22
![Page 23: Using Telerik Kendo UI with WebSpeed - PUG Challengepugchallenge.com/downloads2015/269_2015_Kendo_UI_with_WebSp… · Introduction into Kendo UI Basic usage – Kendo UI in SpeedScript](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01c3f07e708231d400ede5/html5/thumbnails/23.jpg)
tagmap.dat
Kendo UI with WebSpeed 23
![Page 24: Using Telerik Kendo UI with WebSpeed - PUG Challengepugchallenge.com/downloads2015/269_2015_Kendo_UI_with_WebSp… · Introduction into Kendo UI Basic usage – Kendo UI in SpeedScript](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01c3f07e708231d400ede5/html5/thumbnails/24.jpg)
Kendo UI with WebSpeed 24
![Page 25: Using Telerik Kendo UI with WebSpeed - PUG Challengepugchallenge.com/downloads2015/269_2015_Kendo_UI_with_WebSp… · Introduction into Kendo UI Basic usage – Kendo UI in SpeedScript](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01c3f07e708231d400ede5/html5/thumbnails/25.jpg)
Kendo UI with WebSpeed 25
![Page 26: Using Telerik Kendo UI with WebSpeed - PUG Challengepugchallenge.com/downloads2015/269_2015_Kendo_UI_with_WebSp… · Introduction into Kendo UI Basic usage – Kendo UI in SpeedScript](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01c3f07e708231d400ede5/html5/thumbnails/26.jpg)
Agenda
Introduction into Kendo UI Basic usage – Kendo UI in SpeedScript Extending mapped web objects Auto-complete TextBox Using Kendo UI Grid with WebSpeed Asynchronous Data Access Implementing custom request handlers Generating JSON definition from ABL Using Telerik Chart ControlsKendo UI with WebSpeed 26
![Page 27: Using Telerik Kendo UI with WebSpeed - PUG Challengepugchallenge.com/downloads2015/269_2015_Kendo_UI_with_WebSp… · Introduction into Kendo UI Basic usage – Kendo UI in SpeedScript](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01c3f07e708231d400ede5/html5/thumbnails/27.jpg)
Auto-complete TextBox
TextBox with integrated search Search on local data (JavaScript Array) or
remote data (http requests) Single selection or multi selection
Kendo UI with WebSpeed 27
![Page 28: Using Telerik Kendo UI with WebSpeed - PUG Challengepugchallenge.com/downloads2015/269_2015_Kendo_UI_with_WebSp… · Introduction into Kendo UI Basic usage – Kendo UI in SpeedScript](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01c3f07e708231d400ede5/html5/thumbnails/28.jpg)
Auto-complete TextBox
Kendo UI with WebSpeed 28
![Page 29: Using Telerik Kendo UI with WebSpeed - PUG Challengepugchallenge.com/downloads2015/269_2015_Kendo_UI_with_WebSp… · Introduction into Kendo UI Basic usage – Kendo UI in SpeedScript](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01c3f07e708231d400ede5/html5/thumbnails/29.jpg)
Use JSON Parser to build dataSource array
Kendo UI with WebSpeed 29
![Page 30: Using Telerik Kendo UI with WebSpeed - PUG Challengepugchallenge.com/downloads2015/269_2015_Kendo_UI_with_WebSp… · Introduction into Kendo UI Basic usage – Kendo UI in SpeedScript](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01c3f07e708231d400ede5/html5/thumbnails/30.jpg)
Data Picker using remote Data Source
Remote Data Source allows Kendo UI Widgets to do a separate http request to get data Supports remote filtering, sorting,
paging, … (later in this talk)
Kendo UI with WebSpeed 30
![Page 31: Using Telerik Kendo UI with WebSpeed - PUG Challengepugchallenge.com/downloads2015/269_2015_Kendo_UI_with_WebSp… · Introduction into Kendo UI Basic usage – Kendo UI in SpeedScript](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01c3f07e708231d400ede5/html5/thumbnails/31.jpg)
Kendo UI with WebSpeed 31
![Page 32: Using Telerik Kendo UI with WebSpeed - PUG Challengepugchallenge.com/downloads2015/269_2015_Kendo_UI_with_WebSp… · Introduction into Kendo UI Basic usage – Kendo UI in SpeedScript](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01c3f07e708231d400ede5/html5/thumbnails/32.jpg)
Simple Remote Data Soruce
Kendo UI with WebSpeed 32
![Page 33: Using Telerik Kendo UI with WebSpeed - PUG Challengepugchallenge.com/downloads2015/269_2015_Kendo_UI_with_WebSp… · Introduction into Kendo UI Basic usage – Kendo UI in SpeedScript](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01c3f07e708231d400ede5/html5/thumbnails/33.jpg)
Simple Remote Data Soruce
Kendo UI with WebSpeed 33
![Page 34: Using Telerik Kendo UI with WebSpeed - PUG Challengepugchallenge.com/downloads2015/269_2015_Kendo_UI_with_WebSp… · Introduction into Kendo UI Basic usage – Kendo UI in SpeedScript](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01c3f07e708231d400ede5/html5/thumbnails/34.jpg)
Agenda
Introduction into Kendo UI Basic usage – Kendo UI in SpeedScript Extending mapped web objects Auto-complete TextBox Using Kendo UI Grid with WebSpeed Asynchronous Data Access Implementing custom request handlers Generating JSON definition from ABL Using Telerik Chart ControlsKendo UI with WebSpeed 34
![Page 35: Using Telerik Kendo UI with WebSpeed - PUG Challengepugchallenge.com/downloads2015/269_2015_Kendo_UI_with_WebSp… · Introduction into Kendo UI Basic usage – Kendo UI in SpeedScript](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01c3f07e708231d400ede5/html5/thumbnails/35.jpg)
Kendo UI Grid with WebSpeed
Kendo UI Grid can use existing HTML tableincluding existing <tr>, <th>, <td> to generategrid from it
http://demos.telerik.com/kendo-ui/grid/from-table
Kendo UI with WebSpeed 35
![Page 36: Using Telerik Kendo UI with WebSpeed - PUG Challengepugchallenge.com/downloads2015/269_2015_Kendo_UI_with_WebSp… · Introduction into Kendo UI Basic usage – Kendo UI in SpeedScript](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01c3f07e708231d400ede5/html5/thumbnails/36.jpg)
Kendo UI with WebSpeed 36
![Page 37: Using Telerik Kendo UI with WebSpeed - PUG Challengepugchallenge.com/downloads2015/269_2015_Kendo_UI_with_WebSp… · Introduction into Kendo UI Basic usage – Kendo UI in SpeedScript](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01c3f07e708231d400ede5/html5/thumbnails/37.jpg)
Agenda
Introduction into Kendo UI Basic usage – Kendo UI in SpeedScript Extending mapped web objects Auto-complete TextBox Using Kendo UI Grid with WebSpeed Asynchronous Data Access Implementing custom request handlers Generating JSON definition from ABL Using Telerik Chart ControlsKendo UI with WebSpeed 37
![Page 38: Using Telerik Kendo UI with WebSpeed - PUG Challengepugchallenge.com/downloads2015/269_2015_Kendo_UI_with_WebSp… · Introduction into Kendo UI Basic usage – Kendo UI in SpeedScript](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01c3f07e708231d400ede5/html5/thumbnails/38.jpg)
Kendo UI async Data Access
Allows to read data in separate http request Possibly from a different server, using different
caching settings Supports for server side filtering, sorting, paging
without need to reload page Starting point for single-page-application (SPA)
Kendo UI with WebSpeed 38
![Page 39: Using Telerik Kendo UI with WebSpeed - PUG Challengepugchallenge.com/downloads2015/269_2015_Kendo_UI_with_WebSp… · Introduction into Kendo UI Basic usage – Kendo UI in SpeedScript](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01c3f07e708231d400ede5/html5/thumbnails/39.jpg)
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 WebSpeed 39
![Page 40: Using Telerik Kendo UI with WebSpeed - PUG Challengepugchallenge.com/downloads2015/269_2015_Kendo_UI_with_WebSp… · Introduction into Kendo UI Basic usage – Kendo UI in SpeedScript](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01c3f07e708231d400ede5/html5/thumbnails/40.jpg)
Demo
Kendo UI Grid JSDO / REST Adapter / AppServer Server side filtering, sorting paging 200,000 customer records
Chrome Developer Tools dataSource definition (Kendo UI, JSDO dialect) JSON Filter Pattern
Kendo UI with WebSpeed 40
![Page 41: Using Telerik Kendo UI with WebSpeed - PUG Challengepugchallenge.com/downloads2015/269_2015_Kendo_UI_with_WebSp… · Introduction into Kendo UI Basic usage – Kendo UI in SpeedScript](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01c3f07e708231d400ede5/html5/thumbnails/41.jpg)
Kendo UI with WebSpeed 41
![Page 42: Using Telerik Kendo UI with WebSpeed - PUG Challengepugchallenge.com/downloads2015/269_2015_Kendo_UI_with_WebSp… · Introduction into Kendo UI Basic usage – Kendo UI in SpeedScript](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01c3f07e708231d400ede5/html5/thumbnails/42.jpg)
Request URL for a single data page
Kendo UI with WebSpeed 42
http://localhost:8980/SmartJsdoBackendService/rest/SmartJsdoBackendService/Resource/Consultingwerk.SmartComponentsDemo.OERA.Sports2000.CustomerBusinessEntity/count?filter={"ablFilter":"(Country BEGINS 'de' and Name BEGINS 'con')","orderBy":"State DESC","skip":0,"top":10}&_ts=143393199-227099112-23
Kendo UI produces ABL Query String That‘s the beauty of well integrated Progress products
(Telerik and OpenEdge)
![Page 43: Using Telerik Kendo UI with WebSpeed - PUG Challengepugchallenge.com/downloads2015/269_2015_Kendo_UI_with_WebSp… · Introduction into Kendo UI Basic usage – Kendo UI in SpeedScript](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01c3f07e708231d400ede5/html5/thumbnails/43.jpg)
Async Data Access for WebSpeed
WebSpeed app could be combined with AppServer/REST Adapter
Possible to implement JSDO protocol using WebSpeed– Requires JSON Catalog generation
• Meta schema of ProDataset response– Requires GET
Alternative: simple JSON Data Source, does also support server side filtering, sorting, paging
Kendo UI with WebSpeed 43
![Page 44: Using Telerik Kendo UI with WebSpeed - PUG Challengepugchallenge.com/downloads2015/269_2015_Kendo_UI_with_WebSp… · Introduction into Kendo UI Basic usage – Kendo UI in SpeedScript](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01c3f07e708231d400ede5/html5/thumbnails/44.jpg)
Kendo UI with WebSpeed 44
![Page 45: Using Telerik Kendo UI with WebSpeed - PUG Challengepugchallenge.com/downloads2015/269_2015_Kendo_UI_with_WebSp… · Introduction into Kendo UI Basic usage – Kendo UI in SpeedScript](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01c3f07e708231d400ede5/html5/thumbnails/45.jpg)
Simple JSON Data Source
Kendo UI with WebSpeed 45
![Page 46: Using Telerik Kendo UI with WebSpeed - PUG Challengepugchallenge.com/downloads2015/269_2015_Kendo_UI_with_WebSp… · Introduction into Kendo UI Basic usage – Kendo UI in SpeedScript](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01c3f07e708231d400ede5/html5/thumbnails/46.jpg)
Request URL to read data
Sort[0]=CustNum ASC Filter[0]=Name startswith U Filter[1]=City contains IER
http://localhost/cgi-bin/cgiip.exe/WService=SmartWeb/JsonData/Consultingwerk/SmartComponentsDemo/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]=and
Kendo UI with WebSpeed 46
![Page 47: Using Telerik Kendo UI with WebSpeed - PUG Challengepugchallenge.com/downloads2015/269_2015_Kendo_UI_with_WebSp… · Introduction into Kendo UI Basic usage – Kendo UI in SpeedScript](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01c3f07e708231d400ede5/html5/thumbnails/47.jpg)
Implementing Backend for Data Source
Typically based on cgi-wrapper – as it does output JSON, not HTML
May return TEMP-TABLE or ProDataset in JSON
Or use JSON Object Model Parser to return custom JSON
Details follow in next chapter
Kendo UI with WebSpeed 47
![Page 48: Using Telerik Kendo UI with WebSpeed - PUG Challengepugchallenge.com/downloads2015/269_2015_Kendo_UI_with_WebSp… · Introduction into Kendo UI Basic usage – Kendo UI in SpeedScript](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01c3f07e708231d400ede5/html5/thumbnails/48.jpg)
Updating with WebSpeed
Kendo UI supports updating of data Uses REST verbs PUT, POST, DELETE Will post JSON Document to WebSpeed Server
Kendo UI with WebSpeed 48
![Page 49: Using Telerik Kendo UI with WebSpeed - PUG Challengepugchallenge.com/downloads2015/269_2015_Kendo_UI_with_WebSp… · Introduction into Kendo UI Basic usage – Kendo UI in SpeedScript](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01c3f07e708231d400ede5/html5/thumbnails/49.jpg)
WEB-CONTEXT JSON Support
In theory, WebSpeed can be used as backend to JSDO (incl. server side paging, filtering, sorting)
WEB-CONTEXT:IS-JSON attribute Returns TRUE when content-type
application/json or text/json was posted to server WEB-CONTEXT:FORM-LONG-INPUT returns
JSON String Use Progress.JsonObject.ObjectModelParser or
ProDataset:READ-XML for input processing
Kendo UI with WebSpeed 49
![Page 50: Using Telerik Kendo UI with WebSpeed - PUG Challengepugchallenge.com/downloads2015/269_2015_Kendo_UI_with_WebSp… · Introduction into Kendo UI Basic usage – Kendo UI in SpeedScript](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01c3f07e708231d400ede5/html5/thumbnails/50.jpg)
Agenda
Introduction into Kendo UI Basic usage – Kendo UI in SpeedScript Extending mapped web objects Auto-complete TextBox Using Kendo UI Grid with WebSpeed Asynchronous Data Access Implementing custom request handlers Generating JSON definition from ABL Using Telerik Chart ControlsKendo UI with WebSpeed 50
![Page 51: Using Telerik Kendo UI with WebSpeed - PUG Challengepugchallenge.com/downloads2015/269_2015_Kendo_UI_with_WebSp… · Introduction into Kendo UI Basic usage – Kendo UI in SpeedScript](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01c3f07e708231d400ede5/html5/thumbnails/51.jpg)
Implementing custom request handlers
web/objects/web-disp.p handles every request to WebSpeed
Agent startup procedure Available in source code Can be customized
Parses URL and determines the web object to run to serve the request
Kendo UI with WebSpeed 51
![Page 52: Using Telerik Kendo UI with WebSpeed - PUG Challengepugchallenge.com/downloads2015/269_2015_Kendo_UI_with_WebSp… · Introduction into Kendo UI Basic usage – Kendo UI in SpeedScript](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01c3f07e708231d400ede5/html5/thumbnails/52.jpg)
Customizing web-disp.p
Standard web-disp.p does only support procedural 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 of cgi-wrappers calling into class files
Kendo UI with WebSpeed 52
![Page 53: Using Telerik Kendo UI with WebSpeed - PUG Challengepugchallenge.com/downloads2015/269_2015_Kendo_UI_with_WebSp… · Introduction into Kendo UI Basic usage – Kendo UI in SpeedScript](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01c3f07e708231d400ede5/html5/thumbnails/53.jpg)
Kendo UI with WebSpeed 53
![Page 54: Using Telerik Kendo UI with WebSpeed - PUG Challengepugchallenge.com/downloads2015/269_2015_Kendo_UI_with_WebSp… · Introduction into Kendo UI Basic usage – Kendo UI in SpeedScript](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01c3f07e708231d400ede5/html5/thumbnails/54.jpg)
Kendo UI with WebSpeed 54
![Page 55: Using Telerik Kendo UI with WebSpeed - PUG Challengepugchallenge.com/downloads2015/269_2015_Kendo_UI_with_WebSp… · Introduction into Kendo UI Basic usage – Kendo UI in SpeedScript](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01c3f07e708231d400ede5/html5/thumbnails/55.jpg)
Request URL for data
http://localhost/cgi-bin/cgiip.exe/WService=SmartWeb/JsonData/Consultingwerk/SmartComponentsDemo/Web/CustomerDataSource
WebSpeed Messenger URL JsonData keyword to redirect request to
JSON data-handler.w ABL Class Name (Data Source), turn / into
periodKendo UI with WebSpeed 55
![Page 56: Using Telerik Kendo UI with WebSpeed - PUG Challengepugchallenge.com/downloads2015/269_2015_Kendo_UI_with_WebSp… · Introduction into Kendo UI Basic usage – Kendo UI in SpeedScript](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01c3f07e708231d400ede5/html5/thumbnails/56.jpg)
Kendo UI with WebSpeed 56
![Page 57: Using Telerik Kendo UI with WebSpeed - PUG Challengepugchallenge.com/downloads2015/269_2015_Kendo_UI_with_WebSp… · Introduction into Kendo UI Basic usage – Kendo UI in SpeedScript](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01c3f07e708231d400ede5/html5/thumbnails/57.jpg)
Query Manipulation
Review CustomerDataSource.cls in PDSOE
Kendo UI with WebSpeed 57
![Page 58: Using Telerik Kendo UI with WebSpeed - PUG Challengepugchallenge.com/downloads2015/269_2015_Kendo_UI_with_WebSp… · Introduction into Kendo UI Basic usage – Kendo UI in SpeedScript](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01c3f07e708231d400ede5/html5/thumbnails/58.jpg)
Agenda
Introduction into Kendo UI Basic usage – Kendo UI in SpeedScript Extending mapped web objects Auto-complete TextBox Using Kendo UI Grid with WebSpeed Asynchronous Data Access Implementing custom request handlers Generating JSON definition from ABL Using Telerik Chart ControlsKendo UI with WebSpeed 58
![Page 59: Using Telerik Kendo UI with WebSpeed - PUG Challengepugchallenge.com/downloads2015/269_2015_Kendo_UI_with_WebSp… · Introduction into Kendo UI Basic usage – Kendo UI in SpeedScript](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01c3f07e708231d400ede5/html5/thumbnails/59.jpg)
Generating JSON Definition from ABL
Kendo Widget Properties: JSON Objects We can use ABL Object Model Parser to
generate those object definition – instead of manually coding them in a designer
If your ABL framework support JSON Serializable objects and lists … that’s even a much simpler task
Kendo UI with WebSpeed 59
![Page 60: Using Telerik Kendo UI with WebSpeed - PUG Challengepugchallenge.com/downloads2015/269_2015_Kendo_UI_with_WebSp… · Introduction into Kendo UI Basic usage – Kendo UI in SpeedScript](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01c3f07e708231d400ede5/html5/thumbnails/60.jpg)
Kendo UI with WebSpeed 60
![Page 61: Using Telerik Kendo UI with WebSpeed - PUG Challengepugchallenge.com/downloads2015/269_2015_Kendo_UI_with_WebSp… · Introduction into Kendo UI Basic usage – Kendo UI in SpeedScript](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01c3f07e708231d400ede5/html5/thumbnails/61.jpg)
Kendo UI with WebSpeed 61
![Page 62: Using Telerik Kendo UI with WebSpeed - PUG Challengepugchallenge.com/downloads2015/269_2015_Kendo_UI_with_WebSp… · Introduction into Kendo UI Basic usage – Kendo UI in SpeedScript](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01c3f07e708231d400ede5/html5/thumbnails/62.jpg)
Kendo UI with WebSpeed 62
![Page 63: Using Telerik Kendo UI with WebSpeed - PUG Challengepugchallenge.com/downloads2015/269_2015_Kendo_UI_with_WebSp… · Introduction into Kendo UI Basic usage – Kendo UI in SpeedScript](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01c3f07e708231d400ede5/html5/thumbnails/63.jpg)
Code Review
CustomerOverview.cls WebSpeed – OO enabled Web widgets that hide Kendo UI from developer
Kendo UI with WebSpeed 63
![Page 64: Using Telerik Kendo UI with WebSpeed - PUG Challengepugchallenge.com/downloads2015/269_2015_Kendo_UI_with_WebSp… · Introduction into Kendo UI Basic usage – Kendo UI in SpeedScript](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01c3f07e708231d400ede5/html5/thumbnails/64.jpg)
Agenda
Introduction into Kendo UI Basic usage – Kendo UI in SpeedScript Extending mapped web objects Auto-complete TextBox Using Kendo UI Grid with WebSpeed Asynchronous Data Access Implementing custom request handlers Generating JSON definition from ABL Using Telerik Chart ControlsKendo UI with WebSpeed 64
![Page 65: Using Telerik Kendo UI with WebSpeed - PUG Challengepugchallenge.com/downloads2015/269_2015_Kendo_UI_with_WebSp… · Introduction into Kendo UI Basic usage – Kendo UI in SpeedScript](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01c3f07e708231d400ede5/html5/thumbnails/65.jpg)
Kendo UI Chart Dojo
Go to: http://dojo.telerik.com/tutorial/dataviz-chart-basics
Kendo UI with WebSpeed 65
![Page 66: Using Telerik Kendo UI with WebSpeed - PUG Challengepugchallenge.com/downloads2015/269_2015_Kendo_UI_with_WebSp… · Introduction into Kendo UI Basic usage – Kendo UI in SpeedScript](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01c3f07e708231d400ede5/html5/thumbnails/66.jpg)
Kendo UI Charts
Data may be contained in the html page (like in the Dojo sample)
Data may be loaded form remote data source
Kendo UI with WebSpeed 66
![Page 67: Using Telerik Kendo UI with WebSpeed - PUG Challengepugchallenge.com/downloads2015/269_2015_Kendo_UI_with_WebSp… · Introduction into Kendo UI Basic usage – Kendo UI in SpeedScript](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01c3f07e708231d400ede5/html5/thumbnails/67.jpg)
Kendo UI with WebSpeed 67
![Page 68: Using Telerik Kendo UI with WebSpeed - PUG Challengepugchallenge.com/downloads2015/269_2015_Kendo_UI_with_WebSp… · Introduction into Kendo UI Basic usage – Kendo UI in SpeedScript](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01c3f07e708231d400ede5/html5/thumbnails/68.jpg)
Questions
68http://www.consultingwerk.de/
![Page 69: Using Telerik Kendo UI with WebSpeed - PUG Challengepugchallenge.com/downloads2015/269_2015_Kendo_UI_with_WebSp… · Introduction into Kendo UI Basic usage – Kendo UI in SpeedScript](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01c3f07e708231d400ede5/html5/thumbnails/69.jpg)
Don‘t miss my other presentations
Monday 11.00: Telerik .NET for Infragistics Users
Monday 16.45: DIY: Lists, Enumerators, Enumerations, Serialization
Tuesday 11.00: Modernization – theSmartComponent Library
Tuesday 14.15: Structured Error Handling Wednesday 11.00: Telerik Kendo UI with
WebSpeed
Kendo UI with WebSpeed 69
![Page 70: Using Telerik Kendo UI with WebSpeed - PUG Challengepugchallenge.com/downloads2015/269_2015_Kendo_UI_with_WebSp… · Introduction into Kendo UI Basic usage – Kendo UI in SpeedScript](https://reader035.vdocuments.site/reader035/viewer/2022062223/5f01c3f07e708231d400ede5/html5/thumbnails/70.jpg)
Kendo UI with WebSpeed 70