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