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:
Open WebMsgBuilder.js from within the text editor
Add the openHtml, closeHtml, and afterRender functions
//Control functions and logic go here openHtml : function(aHtml) { // Forward Send dfcc.WebMsgBuilder.base.openHtml.call(this, aHtml);
To add the control to the workspace go to Dashboard.wo in the DataFlex Studio
First, clean the code. Open the ‘Code Explorer’ in the left panel
Expand ‘oDashboard’
Expand ‘oWebMainPanel’
Select and right click on ‘oTiles_grp,’ select ‘Highlight in Editor,’ and press ‘Delete’
Highlight the ‘Responsive Rules’ section in the editor and delete it.
Add the control to the Class Palette
Open the ‘Class Palette’ in the left panel
Right click anywhere, and select ‘Add Class to Palette…’
From the window that appears, expand the options in the ‘Package File’ field, and select ‘cWebMsgBuilder.pkg’ from the the ‘AppSrc’ directory
Expand the options in the ‘Icon Name’ field, and select ‘ControlCJContextMenu.ico,’ and press OK.
From the Class Palette select, drag and drop ‘cWebMsgBuilder’ onto ‘Dashboard.wo’
Press CTRL + 2 to open the object’s properties in the ‘Properties’ panel on the right
Change ‘piMaxLenght’ to “10” to make it so the message can be a maximum of 10 characters long
Select the run icon from the top toolbar.
Open a web browser, enter the web applications location, and login (admin, admin)
Localhost/WebMessageBuilder/ is used for the demonstration
The two fields and buttons are shown in their raw, un-styled format
Add CSS to the control
From the file explorer, navigate to the AppHtml folder
Select the ‘WebMsgBuilder’ directory
Right click from within the directory, select ‘New,’ and select ‘Text Document’
Name the new document ‘WebMsgBuilder.css’
Open the new CSS document in the text editor
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");
REFERENCE LIBRARY
Custom Controls
