DataFlex Web Framework Symposium – Part 9Extending the Framework with

JavaScript

Stephen W. MeeleyDevelopment Team

www.dataaccess.com

Goal

• This session will discuss that you can still do all the stuff that we’ve spent the last two years shielding you from – but that it’s really complex

• Keara [soon to be teenage, daughter]: Well, duh!

Do I (really) need to do this?

No!

• This is a capability of the Framework that is very valuable to understand exists

• It is not a requirement for Web application development

Do I (really) need to do this?

• OK, but what do I need to know? How the Web Framework really works All those technologies (JavaScript, CSS, HTML and DOM,

etc.) Class construction Client-side debugging Harm’s favorite beer…

6

What is the JavaScript engine?

• Runs in the browser• Client-side implementation of the controls• Part of the DataFlex Web Framework• Copied into the AppHTML of your

workspace• Included from index.html

7

Tasks

• Renders the user interface• Handles user interface events• Communicates with the server• Maintains the application state

Basic Concept

Every Web Object in DataFlex has a corresponding JavaScript object.

DataFlex classes have corresponding JavaScript classes.

1 to 1 relationship8

Components of a Control

• DataFlex Class Package AppSrc (workspace) Defines server-side interface (methods and properties)

• JavaScript Class AppHTML (workspace) Defines the client-side interface

• Renders the user interface• Handles user interface events• Communicates with the server

• CSS• AppHTML (workspace)

Extending Web Framework Applications

10

df.WebObject

• Core of the JavaScript engine Web Properties Server Actions

Harm Wibier

_oParent Reference to parent

_sName Object name

set(sProp, sValue) Update web property value (executes setter)

get(sProp) Gets web property value (executes getter)

prop(iType, sProp, sValue) Define web property

event(sName, iMode) Define event.

fire(sName, aParams) Fires an event (to the server if needed).

serverAction(sMethod, aParam, fHandler) Call server action.

Extending Web Framework Applications

11

df.WebBaseUIObject• Basic rendering functionality

Calls methods needed for rendering Defines main rendering API

Harm Wibier

pbRender Determines if control should render.

psCSSClass CSS classname applied to the HTML.

render() Renders the control.

openHtml(aHtml) Generates the opening HTML.

closeHtml(aHtml) Generates the closing HTML.

afterRender() Performs further initialization.

focus() Gives the control the focus.

Extending Web Framework Applications

12

df.WebBaseControl• Basic control

Control API (used by the containers) Positioning within column layout

Harm Wibier

piColumnIndex Column index in the column layout.

piColumnSpan Width of the control in number of columns.

psLabel Label shown before / above / after control.

peLabelPosition Position of the label.

setHeight(iHeight) Called when the height needs to be set.

df.WebObject

df.WebBaseUIObject

df.WebBaseContainer

df.WebApp

df.WebCard

df.WebTabPage

df.WebPanel

df.WebView

df.WebModalDialog

df.WebBaseControl

df.WebBaseDEO

df.WebCheckbox

df.WebCombo

df.WebDatePicker

df.WebForm

df.WebRadio

df.WebButton

df.WebCardContainer

df.WebTabContainer

df.WebHorizontalLine

df.WebImage

df.WebLabel

df.WebList

df.WebGrid

df.WebPromptList

df.WebSpacer

df.WebTreeView

df.WebCommandBar

df.WebMenuBar

df.WebMenuItem

df.WebToolbar

Media Control

• Relatively simple - very specific task / use• cDJCase.pkg – in AppSrc

cWebBaseControl Construct_Object

• Define web properties (including local data)• Configure class / superclass (ms.DJCase)

Define methods• AddItem• ShowItems ClientAction “fill”• OnSelect

• DJCase.css – in AppHTML\Custom Sizes, colors, allignment, etc.

Media Control

• DJCase.js – in AppHTML\Custom df.WebBaseControl Constructor

• Define synchronization Define methods

• Openhtml• Closehtml• Afterrender• Client-action fill• Renderlps• Onclick• Selectitem

Slider Case Study

• Complex – generalized use increases complexity• Defined need• Examined options• Used “outside” resource for JavaScript• Used “inside” resource for DataFlex• Made adjustments

Data and non-data aware Overall behaviors

• Styled – including multiple themes

Slider

• cWebSlider.pkg cWebBaseDEO Construct_Object

• Define web properties (including local data)• Configure class / superclass (df.WebSlider)

Define methods• AddLabel• OnFillLabels• RefillLabels• SerializeObject• ValueToPosition / PositionToValue (data binding)• SetPositionFromValue / SetValueFromPosition• File_Field_Value_Changed• Refresh• UpdateDataBinding

Slider (2)

• WebSlider.css Sizes, colors, alignment, etc. More complex because it’s part of the Web

Framework and needs to be Theme “sensitive”

• WebSlider.js – in Lib and included in df-include.js Lots of stuff I’m not even going to pretend I

understand

We’ve all been here before…

• Just another highly-technical capability of the product that few will master but many will use…

• Look to the usual suspects… Examples, documentation, training, Forum

discussions, open source projects, gurus-for-hire, etc.

In fact…

• By design, we went into depth on many of the topics covered during the Symposium

• It’s important to understand that while you can use the product at these technical levels you do not have to

• Chances are, if it was a section where you thought “wow, that’s really confusing” – you won’t need to do that