{"id":443,"date":"2018-04-20T16:14:59","date_gmt":"2018-04-20T20:14:59","guid":{"rendered":"http:\/\/salzlechner.com\/dev\/?p=443"},"modified":"2018-04-20T16:14:59","modified_gmt":"2018-04-20T20:14:59","slug":"dataflex-webapp-a-simple-control","status":"publish","type":"post","link":"http:\/\/salzlechner.com\/dev\/2018\/04\/20\/dataflex-webapp-a-simple-control\/","title":{"rendered":"DataFlex WebApp – A simple control"},"content":{"rendered":"

The easiest way to create custom controls for DataFlex WebApp is to use the cWebHtmlBox<\/em> class<\/p>\n

The cWebHtmlBox class is a simple control that allows the developer to send custom HTML code to the client<\/p>\n

Lets see how this works<\/p>\n

\/\/\r\n\r\nObject oMyCustomHtml is a cWebHtmlBox\r\n    Set psHtml to \"<b>Hello World<\/b>\r\nEnd_Object\r\n\r\n<\/pre>\n
the code above would show the text “Hello World” in bold<\/p>\n
Now lets create a class for a simple test control<\/p>\n
\/\/\r\n\r\n\/\/ use DAW WebHtmlBox class\r\nUse cWebHtmlBox.pkg\r\n\r\nClass cMyCustomControl is a cWebHtmlBox\r\n    Procedure Construct_Object\r\n        Forward Send Construct_Object\r\n\r\n        Set psHtml To \"<b>Hello World<\/b>\"\r\n    End_Procedure\r\nEnd_Class\r\n<\/pre>\n
The code above is a new class that creates our custom control that shows the bold Hello World text.<\/p>\n
Now lets try to do something a little more\u00a0functional<\/p>\n
Lets create a class that uses the psLabel property for a text label and creates custom HTML including the use of custom CSS styling and we also add a property to change the appearance of the label in code<\/p>\n
\/\/\r\n\r\nClass cMyCustomControl is a cWebHtmlBox\r\n    Procedure Construct_Object\r\n        Forward Send Construct_Object\r\n\r\n        Property Boolean pbBold False        \r\n    End_Procedure\r\n    \r\n    Function HtmlValue String sLabel Returns String\r\n        String sHtml\r\n        If (pbBold(Self)) Begin\r\n            Move  ('<div Class=\"myCustomControl\"><span><b>'+sLabel+'<\/b><\/span><\/div>') to sHtml            \r\n\r\n            \/\/ or we could use a different css class for the bold option\r\n            \/\/ Move  ('<div Class=\"myCustomControlBold\"><span><b>'+sLabel+'<\/b><\/span><\/div>') to sHtml            \r\n        End\r\n        Else Begin\r\n            Move  ('<div Class=\"myCustomControl\"><span>'+sLabel+'<\/span><\/div>') to sHtml            \r\n        End\r\n        \r\n        Function_Return sHtml\r\n    End_Function\r\n    \r\n    Procedure Set psLabel String sLabel\r\n        String sHtml\r\n        \r\n        Get HtmlValue sLabel to sHtml\r\n                \r\n        Set psHtml to sHtml\r\n    End_Procedure\r\n    \r\n    Procedure DoSetLabel String sLabel\r\n        String sHtml\r\n\r\n        Get HtmlValue sLabel to sHtml\r\n\r\n        Send UpdateHtml \r\n    End_Procedure\r\nEnd_Class<\/pre>\n
in the above code we create a property with the name of pbBold<\/em>.<\/p>\n
The HtmlValue function accepts a string parameter and then builds a small piece of HTML code. It builds different html depending on the pbBold property.<\/p>\n
In addition we define\u00a0a setter for the psLabel property that in turn calls the HtmlValue function to get the HTML code and then sets the psHtml web property.<\/p>\n
Another method the\u00a0DoSetLabel<\/em>method is declared to allow dynamic changing of the content during runtime without the use of web properties to avoid the overhead of the\u00a0content of the property being syncronized<\/p>\n
to use the new class we can use the following code<\/p>\n
\/\/\r\n\r\nObject oMyCustomHtml is a cMyCustomControl\r\n    Set pbBold to True\r\n    Set psLabel to \"Hello World\"\r\nEnd_Object\r\n\r\n<\/pre>\n
In order to add CSS styling we have to create a CSS style. In order to do this we can create a new CSS file in the AppHtml folder. Lets create a text file called myustomControl.css and add the following CSS<\/p>\n
\/\/\r\n\r\n.myCustomControl {\r\n    border: 2px solid red;\r\n}\r\n<\/pre>\n
this will create a red border with 2 pixels width around our control<\/p>\n
but in order for the web application to find our style we need to modify the web applications index.html file<\/p>\n
open the index.html file and modify as shown below<\/p>\n
\/\/\r\n\r\n    <!-- DataFlex Custom Controls (do not remove this line, used for automatic insertion) -->\r\n\r\n    <link rel=\"stylesheet\" type=\"text\/css\" href=\"myustomControl.css\" \/><\/pre>\n
make sure to refresh the browser to reload the index.html file and the\u00a0control should now use the new styling<\/p>\n
This is a very simple way of creating a custom control and is also rather limited. We will also show how to add more sophisticated controls using\u00a0Javascript as well<\/p>\n
 <\/p>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
The easiest way to create custom controls for DataFlex WebApp is to use the cWebHtmlBox class The cWebHtmlBox class is a simple control that allows the developer to send custom HTML code to the client Lets see how this works \/\/ Object oMyCustomHtml is a cWebHtmlBox Set psHtml to “<b>Hello World<\/b> End_Object the code above […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","ngg_post_thumbnail":0,"footnotes":""},"categories":[6,27],"tags":[],"class_list":["post-443","post","type-post","status-publish","format-standard","hentry","category-dataflex","category-dataflex-webapp"],"_links":{"self":[{"href":"http:\/\/salzlechner.com\/dev\/wp-json\/wp\/v2\/posts\/443","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/salzlechner.com\/dev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/salzlechner.com\/dev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/salzlechner.com\/dev\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/salzlechner.com\/dev\/wp-json\/wp\/v2\/comments?post=443"}],"version-history":[{"count":5,"href":"http:\/\/salzlechner.com\/dev\/wp-json\/wp\/v2\/posts\/443\/revisions"}],"predecessor-version":[{"id":475,"href":"http:\/\/salzlechner.com\/dev\/wp-json\/wp\/v2\/posts\/443\/revisions\/475"}],"wp:attachment":[{"href":"http:\/\/salzlechner.com\/dev\/wp-json\/wp\/v2\/media?parent=443"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/salzlechner.com\/dev\/wp-json\/wp\/v2\/categories?post=443"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/salzlechner.com\/dev\/wp-json\/wp\/v2\/tags?post=443"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}