To continue with this content, please log in with your Data Access ID or create a new account.
Cancel Data Access ID
You may not be authorized to see this content. Please contact Data Access Europe for more information.
Cancel Data Access Europe
You are not authorized to see this content.
Cancel Data Access Europe
Next lesson:
DOM manipulation

Custom Controls

Lesson 4: Rendering the Control

Theory before learning to render controls:

  • When entering a view with a DataFlex application, the webapp framework gathers all the objects present in the view, serializes them and sends them to the client
  • The client takes the serialized version to call on a render function and an after-render function
    • The render function goes through an openHtml and closeHtml
  • Inside openHtml and closeHtml, HTML is generated and inserted into the document, which is how controls render themselves on screen. 
  • Then afterRender is called on to do things such as DOM Manipulation and initialization

Demonstration of the above theory:

  1. Open WebMsgBuilder.js from within the text editor
  2. Add the openHtml, closeHtml, and afterRender functions
    //Control functions and logic go here
    openHtml : function(aHtml) {
          // Forward Send, aHtml);

    aHtml.push(‘<div class=”WebMsgBuilding-wrp”>’);
    aHtml.push(‘<div class=”WebMsgBuilding-add-form-wrp”><input type=”text” class=”WebMsgBuilder-add-form”></div>’);
    aHtml.push(‘<div class=”WebMsgBuilding-add-btn-wrp”><button class=”WebMsgBuilder=add=btn”>Add</button></div>’);
    aHtml.push(‘<div class=”WebMsgBuilding-MebMsgBuilder-result-wrp”><textarea class=”WebMsgBuilder-result” readonly></textarea></div>’);
    aHtml.push(‘<div class=”WebMsgBuilder-send-btn-wrp”><button class=”WebMsgBuilder-send-btn”>Send message to server</button></div>’);

    closeHtml : function(aHtml) {
          //Forward send
, aHtml);

    afterRender : function () {
          //Find our container, mark it as the control root
          this._eControl = df.dom.query(this._eElem, “.WebMsgBuilder-wrp”);

          //Store some internal references for later use
          this._eForm = df.dom.query(this._eElem, “.WebMsgBuilder-add-form”);
          this._eAddBtn = df.domquery(this._eElem, “WebMsgBuilder-add-btn”);
          this._eSendBtn = df.dom.query(this._eElem, “.WebMsgBuilder-send-btn”);
          this._eResultArea = df.dom.query(this._eElem, “.WebMsgBuilder-result”);

          //Forward send


  3. Add references that are to be stored
    //Private property
    this._aMsgParts = [];
    this._eForm = null;
    this._eAddBtn = null;
    this._eSendBtn = null;
    this._eResultArea = null;

  4. To add the control to the workspace go to Dashboard.wo in the DataFlex Studio
  5. First, clean the code. Open the ‘Code Explorer’ in the left panel
  6. Expand ‘oDashboard’
  7. Expand ‘oWebMainPanel’
  8. Select and right click on ‘oTiles_grp,’ select ‘Highlight in Editor,’ and press ‘Delete’

  9. Highlight the ‘Responsive Rules’ section in the editor and delete it.

  10. Add the control to the Class Palette
  11. Open the ‘Class Palette’ in the left panel
  12. Right click anywhere, and select ‘Add Class to Palette…’

  13. From the window that appears, expand the options in the ‘Package File’ field, and select ‘cWebMsgBuilder.pkg’ from the the ‘AppSrc’ directory
  14. Expand the options in the ‘Icon Name’ field, and select ‘ControlCJContextMenu.ico,’ and press OK.
  15. From the Class Palette select, drag and drop ‘cWebMsgBuilder’ onto ‘Dashboard.wo’

  16. Press CTRL + 2 to open the object’s properties in the ‘Properties’ panel on the right
  17. Change ‘piMaxLenght’ to “10” to make it so the message can be a maximum of 10 characters long

  18. Select the run icon from the top toolbar.
  19. Open a web browser, enter the web applications location, and login (admin, admin)
  20. Localhost/WebMessageBuilder/ is used for the demonstration
  21. The two fields and buttons are shown in their raw, un-styled format
  22. Add CSS to the control
  23. From the file explorer, navigate to the AppHtml folder
  24. Select the ‘WebMsgBuilder’ directory
  25. Right click from within the directory, select ‘New,’ and select ‘Text Document’
  26. Name the new document ‘WebMsgBuilder.css’
  27. Open the new CSS document in the text editor
  28. Paste in CSS code to style the buttons and fields
    afterRender : function() {
         // Find our container, mark it as the control root
         this._eControl = df.dom.query(this._eElem, ".WebMsgBuilder-wrp");

         // Store some internal references for later use
         this._eForm = df.dom.query(this._eElem, ".WebMsgBuilder-add-form");
         this._eAddBtn = df.dom.query(this._eElem, ".WebMsgBuilder-add-btn");
         this._eSendBtn = df.dom.query(this._eElem, ".WebMsgBuilder-send-btn");
         this._eResultArea = df.dom.query(this._eElem, ".WebMsgBuilder-result");

    // Forward send;
  29. To use the CSS file it needs to be added to Index.html
  30. Open Index.html in the text editor
  31. Add a new tag to point to the CSS file

    <link rel=”stylesheet” type=”text/css” href=”WebMsgBuilder/WebMsgBuilder.css”>

  32. Refreshing the code in the browser shows that the spacing needs to be adjusted
  33. Open Dashboard.wo in the Studio, and add the code.
  34. Select the run icon from the top toolbar to recompile.
  35. Refresh the browser session to see the changes implemented with the CSS.