1 / 20

Extending DataFlex Web Framework with JavaScript – Insights and Techniques

This session explores the complexities of extending the DataFlex Web Framework using JavaScript. While you aren't required to dive deep into these advanced features, understanding them can significantly enhance your web application development. We'll cover how the framework works with JavaScript, CSS, and HTML, including client-side debugging and object construction. Gain insights into rendering user interfaces, handling events, and maintaining application state. This session aims to equip developers with knowledge to harness the full potential of DataFlex while using it effectively without needing to master every detail.

leona
Télécharger la présentation

Extending DataFlex Web Framework with JavaScript – Insights and Techniques

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. Goal • This session will discussthat you can stilldo 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!

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

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

  5. 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. Tasks • Renders the user interface • Handles user interface events • Communicates with the server • Maintains the application state

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

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

  9. df.WebObject • Core of the JavaScript engine • Web Properties • Server Actions Extending Web Framework Applications

  10. df.WebBaseUIObject • Basic rendering functionality • Calls methods needed for rendering • Defines main rendering API Extending Web Framework Applications

  11. df.WebBaseControl • Basic control • Control API (used by the containers) • Positioning within column layout Extending Web Framework Applications

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

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

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

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

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

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

  18. 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 

More Related