2. DataFlex Web Framework Symposium – Part 9 Extending the Framework with JavaScript Stephen W. Meeley Development Team www.dataaccess.com

3. Goal This session will discuss that you can still do all the stuff that weve spent the last two years shielding you from – but that its really complex Keara [soon to be teenage, daughter]: Well, duh!

4. 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

5. 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 Harms 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 6

7. Tasks Renders the user interface Handles user interface events Communicates with the server Maintains the application state 7

8. Basic Concept Every Web Object in DataFlex has a corresponding JavaScript object. DataFlex classes have corresponding JavaScript classes. 1 to 1 relationship 8

9. 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)

10. df.WebObject Core of the JavaScript engine Web Properties Server Actions Harm Wibier Extending Web Framework Applications 10 _oParentReference to parent _sNameObject 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.

11. df.WebBaseUIObject Basic rendering functionality Calls methods needed for rendering Defines main rendering API Harm Wibier Extending Web Framework Applications 11 pbRenderDetermines if control should render. psCSSClassCSS 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.

12. df.WebBaseControl Basic control Control API (used by the containers) Positioning within column layout Harm Wibier Extending Web Framework Applications 12 piColumnIndexColumn index in the column layout. piColumnSpanWidth of the control in number of columns. psLabelLabel shown before / above / after control. peLabelPositionPosition of the label. setHeight(iHeight)Called when the height needs to be set.

13. df.WebObjectdf.WebBaseUIObject df.WebBaseContainer df.WebApp df.WebCarddf.WebTabPage df.WebPanel df.WebViewdf.WebModalDialog df.WebBaseControl df.WebBaseDEO df.WebCheckbox df.WebCombo df.WebDatePicker df.WebForm df.WebRadio df.WebButton df.WebCardContainerdf.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

14. 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.

15. Media Control DJCase.js – in AppHTML\Custom df.WebBaseControl Constructor Define synchronization Define methods Openhtml Closehtml Afterrender Client-action fill Renderlps Onclick Selectitem

16. 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

17. 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

18. Slider (2) WebSlider.css Sizes, colors, alignment, etc. More complex because its part of the Web Framework and needs to be Theme sensitive WebSlider.js – in Lib and included in df- include.js Lots of stuff Im not even going to pretend I understand

19. Weve 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.

20. In fact… By design, we went into depth on many of the topics covered during the Symposium Its 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, thats really confusing – you wont need to do that