Kendo UI® Builder by Progress®: Modernizing OpenEdge Applications

68 Pages·2016·2.01 MB·English

by  Progress Software Corporation

Kendo UI Builder by
®
Progress :
®
Modernizing OpenEdge Applications

Notices
©2016ProgressSoftwareCorporationand/oroneofitssubsidiariesoraffiliates.Allrightsreserved.
ThesematerialsandallProgress®softwareproductsarecopyrightedandallrightsarereservedbyProgressSoftwareCorporation.Theinformationinthesematerialsissubject
tochangewithoutnotice,andProgressSoftwareCorporationassumesnoresponsibilityforanyerrorsthatmayappeartherein.Thereferencesinthesematerialstospecific
platformssupportedaresubjecttochange.
BusinessMakingProgress,Corticon,DataDirect(anddesign),DataDirectCloud,DataDirectConnect,DataDirectConnect64,DataDirectXMLConverters,DataDirectXQuery,
DeliverMoreThanExpected,Icenium,KendoUI,MakingSoftwareWorkTogether,NativeScript,OpenEdge,PoweredbyProgress,Progress,ProgressSoftwareDevelopers
Network,Rollbase,RulesCloud,RulesWorld,SequeLink,Sitefinity(andDesign),SpeedScript,StylusStudio,TeamPulse,Telerik,Telerik(andDesign),TestStudio,and
WebSpeedareregisteredtrademarksofProgressSoftwareCorporationoroneofitsaffiliatesorsubsidiariesintheU.S.and/orothercountries.AccelEvent,Analytics360,
AppsAlive,AppServer,Arcade,BravePoint,BusinessEdge,DataDirectSpy,DataDirectSupportLink,DevCraft,DigitalFactory,Fiddler,FutureProof,HighPerformanceIntegration,
JustCode,JustDecompile,JustMock,JustTrace,OpenAccess,ProDataSet,ProgressArcade,ProgressProfiles,ProgressResults,ProgressRFID,ProgressSoftware,ProVision,
PSEPro,SectorAlliance,Sitefinity,SmartBrowser,SmartComponent,SmartDataBrowser,SmartDataObjects,SmartDataView,SmartDialog,SmartFolder,SmartFrame,
SmartObjects,SmartPanel,SmartQuery,SmartViewer,SmartWindow,WebClient,WhoMakesProgress,andXervoaretrademarksorservicemarksofProgressSoftware
Corporationand/oritssubsidiariesoraffiliatesintheU.S.andothercountries.JavaisaregisteredtrademarkofOracleand/oritsaffiliates.Anyothermarkscontainedherein
maybetrademarksoftheirrespectiveowners.
PleaserefertotheReleaseNotesapplicabletotheparticularProgressproductreleaseforanythird-partyacknowledgementsrequiredtobeprovidedinthedocumentation
associatedwiththeProgressproduct.
September2016
Lastupdatedwithnewcontent:Version1.0
KendoUIBuilderbyProgress:ModernizingOpenEdgeApplications:Version1.0 3
Notices
4 KendoUIBuilderbyProgress:ModernizingOpenEdgeApplications:Version1.0
Contents
Table of Contents
Chapter 1: Overview and Architecture.........................................................7
StepstomodernizeanOpenEdgeapplication........................................................................................7
Architecture and components.................................................................................................................9
Chapter 2: Kendo UI Designer Overview...................................................11
App layout and components.................................................................................................................12
Creating and designing an app.............................................................................................................14
Data providers and data sources..........................................................................................................19
Adding and editing a data provider............................................................................................20
Addingandeditingadatasource...............................................................................................22
Editor and semantic types..........................................................................................................25
Modules and views...............................................................................................................................30
Editing the login view.................................................................................................................31
AddingandeditingaData-Gridview..........................................................................................34
Adding and editing a Data-Grid-Formview................................................................................39
Adding and editing a Data-Grid-Separate-Form view................................................................46
App generation and deployment...........................................................................................................53
Chapter 3: Extension Points and Source Code Customization...............55
Static files..............................................................................................................................................56
Custom assets...........................................................................................................................57
HTML code.................................................................................................................................57
JavaScript code..........................................................................................................................57
Company logo.......................................................................................................................................58
Customize the view templates..............................................................................................................58
Customsemantictypes.........................................................................................................................59
OpenEdge Data Object Services...............................................................................................59
Kendo UI Builder........................................................................................................................59
Custom UI editor types.........................................................................................................................60
General view events.............................................................................................................................60
View-specificevents..............................................................................................................................62
CustomHTMLsections.........................................................................................................................64
Row templates......................................................................................................................................65
Row template format..................................................................................................................65
RowtemplateID.........................................................................................................................66
Rowtemplatefunction................................................................................................................66
Column templates.................................................................................................................................67
KendoUIBuilderbyProgress:ModernizingOpenEdgeApplications:Version1.0 5
Contents
6 KendoUIBuilderbyProgress:ModernizingOpenEdgeApplications:Version1.0
1
Overview and Architecture
TheKendoUI®BuilderbyProgress®facilitatesthemodernizationofexistingProgress®OpenEdge®desktop
businessapplicationsbymovingtheapplicationuserinterface(UI)tothewebusingKendoUI.TheseOpenEdge
applicationscanbesimpletomorecomplexapplicationscontainingmultiple,feature-specificmodules.
ApplicationsthatalreadyconformtotheOpenEdgeReferenceArchitecture(OERA)areespeciallywellsuited
formodernizationusingtheKendoUIBuilder.However,youcanmodernizeanyOpenEdgeapplicationwith
itsUIseparatedfromitsbusinesslogicrunningonanOpenEdgeapplicationserver,whichcanbeeitheran
instanceofProgressApplicationServerforOpenEdgeortheclassicOpenEdge®AppServer®.
KendoUIBuildertoolingsupportsthedesignanddevelopmentofamodernandresponsivewebUIintheform
ofadeployableOpenEdgewebappthataccessesoneormoreABLapplicationservicesimplementedas
OpenEdgeDataObjectServices.ThistoolingsupportsUIupgradesforfutureversionsoftheinitialwebapp
overtime,withlittleornoadditionalcoding,usingcustomizabletemplatesandmeta-datafromwhichthe
deployablewebappisgenerated.
Fordetails,seethefollowingtopics:
• StepstomodernizeanOpenEdgeapplication
• Architectureandcomponents
Steps to modernize an OpenEdge application
ForOpenEdge,theKendoUIBuilderincludescomponentsfromseveralProgressproductsthatyouuseinan
iterativefashiontomodernizeanOpenEdgeapplicationasfollows:
1. EnsurethatyourapplicationUIisseparatefromitsbusinesslogic,withtheABLbusinesslogictailoredto
runonanOpenEdgeapplicationserver.TheOpenEdgeReferenceArchitectureprovidesamethodology
KendoUIBuilderbyProgress:ModernizingOpenEdgeApplications:Version1.0 7
Chapter1:OverviewandArchitecture
foraccomplishingthis.FormoreinformationontheOERA,seeOpenEdgeGettingStarted:GuideforNew
Developers.
FormoreinformationontailoringABLbusinesslogictorunonyourchoiceofOpenEdgeapplicationserver,
seetheoverviewandapplicationdevelopmentdocumentationfor:
• ProgressApplicationServerforOpenEdge—ProgressApplicationServerforOpenEdge:Introducing
PASforOpenEdgeandProgressApplicationServerforOpenEdge:ApplicationMigrationand
DevelopmentGuide
• OpenEdgeAppServer—OpenEdgeGettingStarted:ApplicationandIntegrationServicesandOpenEdge
ApplicationServer:DevelopingAppServerApplications
YoucanthendeployandrunyourABLapplicationwithitsUIrunninginaseparateABLclientthataccesses
itsbusinesslogicasanABLapplicationservice.
2. ImplementanewserviceinterfaceforyourbusinesslogicintheformofanOpenEdgeDataObjectService.
AnOpenEdgeDataObjectServiceprovideswebaccesstoyourABLbusinesslogicthroughoneormore
OpenEdgeDataObjectsimplementedasABLBusinessEntities.ABLBusinessEntitiesareannotatedABL
classorprocedure-basedobjectsthatprovideastandardwebinterfacetoyourdataandbusinesslogic.
AnOpenEdgewebappcanthenaccessthisstandardinterfaceusingaJavaScriptDataObject(JSDO)
thathidestheunderlyingdetailsofthenetworkrequestandresponseprotocolfromtheapp.ADataObject
ServicethenmanagesallwebaccessbetweenaninstanceoftheJSDOinthewebappandagivenData
ObjectrunningontheOpenEdgeapplicationserver.
ForanoverviewofOpenEdgeDataObjectServicesandhowtoimplementABLBusinessEntitiesasData
Objects,seetheinformationonDataObjectServicesinOpenEdgeDevelopment:WebServices.
Forinformationoncreating,editing,testing,anddeployingDataObjectServicesforbothPASforOpenEdge
andtheclassicOpenEdgeAppServer,seetheProgressDeveloperStudioforOpenEdgeOnlineHelpand
theadministrationdocumentationforeachOpenEdgeapplicationserver.
Note: AlsoseetheNewInformationdocumentationforrecentservicepacksofyourOpenEdgeRelease
11.6(startingwithServicePack11.6.3).
ForinformationontheJSDOandhowitcanbeusedinwebappstoaccessDataObjectServices,seethe
ProgressDataObjects:GuideandReference
3. DesignandbuildtheOpenEdgewebappthatcontainsthewebUIforyourOpenEdgeapplicationusingthe
KendoUIDesigner.ThisisaNode.js-based,KendoUIBuildertoolthatcaninstallintoyourOpenEdge
environment.TheKendoUIDesigneristhusanon-premise,visualdesigntoolthataccelerateswebapp
developmentbasedonselectedDataObjectServicemeta-dataandUItemplatesforsupportedKendoUI
components.
TheinitialresultisasetofUImeta-datathatyoucancustomizeinaprescribedfashion.Youcantheninvoke
theintegratedKendoUIGeneratortobuildandpreviewthewebappfromthismeta-data,allowingyouto
testtheUIanditsdataaccessfromwithintheKendoUIDesigneritself.
ThepresentdocumentationprovidesanoverviewoftheKendoUIDesignerandhowtoworkwithittobuild
andtestawebappwithaccesstoOpenEdgedataandbusinesslogic.Formoredetailedinformationon
usingtheoptionsoftheKendoUIDesigner,seeKendoUIBuilderbyProgress:UsingtheKendoUIDesigner.
4. Optionally,useProgressDeveloperStudioforOpenEdgetodeployeachstageofcompletionforbothData
ObjectServicesandtheclientOpenEdgewebapp.InKendoUIDesigner,youcanconfigurethewebapp
locationsotheKendoUIGeneratorautomaticallybuildsthewebappwithinaWebUIprojectofDeveloper
Studio.Fromthisproject,youcandeploytheapptoadevelopmentinstanceofPASforOpenEdgetotest
generalwebaccess.Ultimately,youcandeploythecompletedwebappforreleaseonanyproductionweb
serverofyourchoice.
8 KendoUIBuilderbyProgress:ModernizingOpenEdgeApplications:Version1.0
Architectureandcomponents
Forabriefwalk-throughofbuildinganOpenEdgeapplication,end-to-end,withthemodernwebUIprovided
byanOpenEdgewebapp,seeKendoUIBuilderbyProgress:SampleWorkflow.
Architecture and components
ThefollowingfigureshowstheoverallarchitectureoftheKendoUIBuildercomponentsandtheirrelationship
formodernizingOpenEdgeapplications:
Figure1:KendoUIBuildercomponents
Refertothenumberedcalloutsinthefollowingdescription:
KendoUIBuilderbyProgress:ModernizingOpenEdgeApplications:Version1.0 9
Chapter1:OverviewandArchitecture
1. UseanappropriateprojectinProgressDeveloperStudioforOpenEdgetodevelopDataObjectsfrom
BusinessEntitiesthatyoucreateandpackagetogetherasoneormoreDataObjectServicesfordeployment
toanOpenEdgeApplicationServer.UseanABLWebAppprojecttobuildanddeployDataObject
ServicestoaninstanceoftheProgressApplicationServerforOpenEdge.UseaDataObjectprojectto
buildanddeployDataObjectServicestotheclassicOpenEdgeAppServer.
2. ThedeploymentofDataObjectServicesincludesDataServiceCatalogs.EachDataObjectServiceis
definedbyanassociatedDataServiceCatalog.ThisCatalogisaJSONfilethatcontainsmeta-datadescribing
theschemaandoperationssupportedbyeachDataObjectmanagedbytheDataObjectService.The
JavaScriptDataObjects(JSDOs)thattheKendoUIDesigneranditsgeneratedwebappscreatetoaccess
DataObjectresourcesrelyontheCatalogforeachDataObjectServicethatprovidestheseresourcesto
manageaccesstothedataacrossthenetwork.
3. TheKendoUIDesignerrunsasaNode.jsapplicationinstalledonyourlocalsystemusingyoursupported
defaultbrowser(forexample,ChromeorFirefox)todisplayitsUI.UsetheDesignertocreateanOpenEdge
webapp,forwhichyouspecifyanameandfolderlocationforthefiles.AnOpenEdgewebappintheKendo
UIBuilderisbuiltfromatemplatethatconsistsofoneormoduleswithaccesstotableresourcesprovided
byoneormoreDataObjectServices.Youcreateeachmodulefromoneormoreviewsthatyouspecify
usingselectedUITemplateswithapredefinedKendoUIconfiguration,suchasagridandform.Youbind
datatoeachviewbyassociatingaDataObjectresourcetableasadatasource.Youcandefineappfunction
andpresentationbysettingpropertiesontheapp,eachmodule,anditsviews,thenpreviewtheresultwith
realdatafromthedatasourcesthatareboundtotheviews.Atanypointinyourdesign,youcansavethe
currentstateofthewebapptoJSONUIMeta-Datathat,togetherwiththeselectedUITemplates,define
theUIandbehavioroftheapp.NotethattheUImeta-dataisitselfindependentoftheKendoUI
implementation,andisusedtogenerateaKendoUI-basedwebappbasedontheUITemplatesthatyou
select.
4. Atanystagethatyouarereadytopreviewandtesttheapp,youcanbuildtheappbyinvokingtheKendo
UIGenerator.ThisisaYeoman-basedcodegeneratorthattakesthesavedJSONUIMeta-Dataand
referencedUITemplatesasinput,andgeneratesadeployableOpenEdgewebappcontainingthe
functionalityyouhavedesigned.Inaddition,theGeneratorbuildsyourwebappinthecontextofBootstrap
andAngularJS,whichprovidesaresponsiveUIforyourapp.ThegeneratedHTML5/CSSandJavaScript
filesarethensavedtotheapplocationyouhavespecified,whichcanbeaWebUIProjectofProgress
DeveloperStudioforOpenEdge.
5. BycreatingaWebUIProjectinDeveloperStudio,youcansaveyourgeneratedWebAppforDeployment
eitherasadevelopmentbuildforroundtriptestingonadevelopmentinstanceofPASforOpenEdgeoras
areleasebuildfordeliveryonaproductioninstanceofPASforOpenEdge.Inaddition,youcanexportthe
WebUIProjectasaWebUIApplication,whichcreatesaWARfileforyourwebappthatyoucandeploy
toanycompatiblewebserverofyourchoice.
10 KendoUIBuilderbyProgress:ModernizingOpenEdgeApplications:Version1.0