BP1350: Progress Dynamics Applications for the Web

1
BP1350Progress Dynamics Applications for the
Web

• Sunil Belgaonkar, Principal Software Engineer
• Doug Adams, Principal Software Engineer

2
Objectives

• Introduce Progress Dynamics Web and its benefits
• Explore the new DHTML architecture
• Demonstrate building Progress Dynamics
  application and enable it for the Web
• Discuss best practices and design considerations

3
Agenda

• Progress Dynamics Overview
• Progress Dynamics Web
• Architecture Components
• Building Web Applications
• Writing Business Logic
• Configuration
• Summary

4
Progress Dynamics
Component of OpenEdge Studio A better way to
engineer world-class distributed business
applications
5
The Better Way
A Switch in Paradigms
6
Progress Dynamics Premise

• Define the Application, Dont Code It
• Requires fewer technical resources
• Less prone to technical errors
• Abstraction avoids technology lock-in
• Automate Everything Possible
• Automate the 80
• Concentrate on the 20
• Provide Extensible Common Services
• Provide Consistency
• Concentrate on Business Logic

7
Progress Dynamics Architecture
8
Progress Dynamics Demo
9
Agenda

• Progress Dynamics Overview
• Progress Dynamics Web
• Architecture Components
• Building Web Applications
• Writing Business Logic
• Configuration
• Summary

10
What is Progress Dynamics Web?

• Builds on Progress Dynamics framework
• DHTML rendering engine
• supporting server-side managers
• Windows GUI emulated in a web browser
• Rich, interactive UI linked objects, field
  state, validation, lookup, find/filter, search

11
What is Progress Dynamics Web?

• Stateless enterprise applications in a web
  browser
• Low network chat
• High performance, client-to-server communication
• Flexible, extensible architecture

12
Why Use Dynamics Web?

• No client install
• Need rich, interactive, dynamically generated web
  UI
• Builds upon Dynamics framework
• Rapid application development environment
• Proven, extensible framework
• Reuse business logic
• Enterprise application deployment

13
Progress Dynamics Web Demo
14
Agenda

• Progress Dynamics Overview
• Progress Dynamics Web
• Architecture Components
• Building Web Applications
• Writing Business Logic
• Configuration
• Summary

15
Progress Dynamics Web Layers
Web browser, HTTP client
WebTools
Request Manager
UI Manager
Session
Security
Profile
General
Local
WebSpeed 4GL Internals
_progres.exe p web-disp.p icfparam
ICFSESSTYPEICFWS
16
Web Request Overview
17
DHTML Core Technologies

• HTML DOM
• JavaScript Objects
• Replicate ADM2 behaviors
• Expose events, methods, properties
• Cascading Style Sheets (CSS 2)
• Static HTML for layout
• Certified on Internet Explorer 5.5

18
Why JavaScript Objects?
Mozilla
Other
Internet Explorer
XBL
???
HTC
19
New DHTML Architecture
Mozilla
Other
Internet Explorer
JavaScript Objects
XUL XBL
???
HTC
W3C\DOM
20
Benefits of JavaScript Objects

• Cross-browser, cross-platform support
• Object extensibility
• Leverage existing JavaScript code
• Expose methods, events, and parameters to other
  objects

21
JavaScript Objects

• Generic objects
• ryapph.js, ryinfo.js, ryinithtml.js, rylookup.js,
  ryrender.js, ryutil.js
• Menu objects
• ryhotkey.js, rymenubar.js, rypopup.js,
  rytoolbar.js, rytreeview.js
• ADM2 simulation
• rybrowse.js, rydata.js, ryfolder.js, rywbo.js,
  rywdo.js

22
DHTML Control Structure
23
Agenda

• Progress Dynamics overview
• Progress Dynamics Web
• Architecture Components
• Building Web Applications
• Writing Business Logic
• Configuration
• Summary

24
Building Web Applications

• Same as GUI, but
• you can change the look-and-feel.

25
Tailoring Web Applications
JSobjects
API
CSS, HTML
26
Changing The Look - CSS

• Standard stylesheets ryapp.css, rymain.css
• Extend standard stylesheets

_at_import url(../dhtml/ryapp.css) / Tabfolders
/ folder TD.front backgroundurl(../img/tbluef
.gif) folder TD.back backgroundurl(../img/t
blueb.gif)

• Attach CSS using StyleSheetFile attribute

27
Web Client Logic API

• Write client logic procedures in JavaScript
• Take advantage of Client Logic API
• consistency across clients
• hides DOM complexity

with(apph.logic) // Hide widget
hideWidget(customerfullo.browse.custnum) //
Disable widget disableWidget(customerviewv.name
)

• Attach CSS using StyleSheetFile attribute

28
Custom Event Handling

• Data hooks
• add, cancel, delete, reset, update, validate,
  view
• UI hooks
• pagechange, refresh, run

function customerfullo_view() with
(apph.logic) if(widgetValue('customerviewv.bala
nce')gt20000) highlightWidget('customerviewv.b
alance,warn) else highlightWidget('custo
merviewv.balance')
29
Extending JavaScript Objects

• Create object file with override behavior
• Include object file in default.htm layout file
• Set objects JavaScriptObject property to new
  object file

30
Extending JavaScript Objects

• // rybrowse2.js
• Browse2.prototypenew Browse()
• function Browse2()
• Browse2.prototype.actionOldBrowse.prototype.actio
  n
• Browse2.prototype.actionfunction(a,prm)
• with(this)
• switch(a0)
• case 'outline' elem.style.borderWidt
  h'4px'
• elem.style.borderColor'red'
• break
• default
• actionOld(a,prm) // Call old action()

31
Moving to New Architecture
SP1
SP2
If you changed Re-edit appropriate htm files
Layout Files
If you changed Extend JavaScript Classes
HTC Files
32
Build Application Demo
33
Agenda

• Progress Dynamics overview
• Progress Dynamics Web
• Architecture Components
• Building Web Applications
• Writing Business Logic
• Configuration
• Summary

34
Writing Business Logic

• runOnServer() JavaScript API
• run server-side logic based on DHTML client
  request
• setClientAction 4GL procedure
• set client actions and/or return data to DHTML
  client
• 4GL SESSIONCLIENT-TYPE
• include/exclude code based on client type
• Server logic can be in SDO logic procedure or
  separate .p or Persistent Library of Internal
  Procedures (PLIP)

35
Business Logic Demo
36
Recommended Practices

• Override framework CSS files using _at_import
• Minimize client-side logic for portability
• Utilize Client Logic API
• Override JavaScript objects to implement your own
  behaviors

37
Recommended Practices

• Code for cross-browser support
• Take advantage of repository attributes for
• CLASS property HtmlClass
• STYLE property HtmlStyle
• attaching JavaScript files JavaScriptFile
• attaching stylesheet files StyleSheetFile
• overriding objects JavaScriptObject
• Use web server Extension Mapping to shorten URL

38
Agenda

• Progress Dynamics overview
• Progress Dynamics Web
• Architecture Components
• Building Web Applications
• Writing Business Logic
• Configuration
• Summary

39
Configuration

• Provided out-of-the-box
• ICFWS Session Type (icfconfig.xml)
• Managers pre-started
• ICFDB, your app database
• wsdynamics1 broker
• Agent -icfparam ICFSESSTYPEICFWS
• Environment Variables
• logging, state-aware, compile-on-fly

40
Configuration

• To support multiple configurations
• Create multiple WebSpeed brokers
• Create web server virtual directories
• Create an extension mapping for .icf to
  c\dlc\bin\cgiip.exe i broker

41
Session Type Demo
42
Agenda

• Progress Dynamics overview
• Progress Dynamics Web
• Architecture Components
• Building Web Applications
• Writing Business Logic
• Configuration
• Summary

43
Summary

• No client install
• Dynamically generated GUI, DHTML applications
  from same common, abstract repository
• Consistent look-and-feel across GUI and Web
  browser clients
• Reusable, extensible, dynamic objects
• Standards-based architecture, open browser
  readiness using native JS objects

44
Products Under Development

• This section includes information about potential
  future products and/or product enhancements.
• What we are going to say reflects our current
  thinking, but some information contained herein
  is preliminary and subject to change. Any future
  products we ultimately deliver may be materially
  different from what is described here.
• In other words - you cant believe everything we
  are going to say.

45
Whats Next?

• Improve GUI Consistency
• Static and dynamic SBO support
• Treeview Object support
• Dynamic Frames
• Certify other popular web browsers across
  platforms e.g. Mozilla/ Netscape

46
B2C Functionality

• Static / Dynamic Content Mix
• Dynamic Tags
• Layout Flexibility
• New Object Types Catalog Viewer
• Cross-Page Business Transactions
• Flexible Process and Work Flow
• Greater Browser / Platform Flexibility
• Common Tools / Business Logic

47
Questions
?