{"id":476,"date":"2018-04-21T13:12:31","date_gmt":"2018-04-21T17:12:31","guid":{"rendered":"http:\/\/salzlechner.com\/dev\/?p=476"},"modified":"2018-04-21T13:17:20","modified_gmt":"2018-04-21T17:17:20","slug":"starzen-tileview-control-for-dataflex-webapp","status":"publish","type":"post","link":"http:\/\/salzlechner.com\/dev\/2018\/04\/21\/starzen-tileview-control-for-dataflex-webapp\/","title":{"rendered":"StarZen TileView Control for DataFlex WebApp"},"content":{"rendered":"<p>The TileView control was created to replace the\u00a0default Dashboard view provided by DAW in their WebApplications. The Dashboard view is rather limited in functionality which prompted the creation of this class<\/p>\n<p>Some of the features we had been looking for are<\/p>\n<ul>\n<li>Dynamic Tiles<br \/>\nDynamically hiding and showing tiles. When doing so we expect the tile view to reorganize of course<br \/>\nDynamically adding and removing tiles. We also expect the tile view to reorganize when tiles are removed or added<br \/>\nDynamically changing content on tiles<\/li>\n<li>Ability to easily change the appearance of tiles (Colors, Font, Font Size, Text location, icon, image, etc)<\/li>\n<li>Different size tiles<\/li>\n<li>Tiles with icons<\/li>\n<li>Tiles with images<\/li>\n<li>Responsive View<br \/>\ntiles view should reorganize based on size of device<\/li>\n<\/ul>\n<h2>Types of Tiles<\/h2>\n<p>We want to support different size tiles. Normal Size (a square tile), small size (also square but smaller, 4 filling the space of one normal tile) and a wide tile (rectangular filling the space of 2 normal tiles)<\/p>\n<p>We also want to support tiles with icons as well as tiles with images<\/p>\n<p>Here is an example of what these tiles look like<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-478\" src=\"http:\/\/salzlechner.com\/dev\/wp-content\/uploads\/sites\/2\/2018\/04\/tileview1.png\" alt=\"tileview1\" width=\"496\" height=\"492\" srcset=\"http:\/\/salzlechner.com\/dev\/wp-content\/uploads\/sites\/2\/2018\/04\/tileview1.png 496w, http:\/\/salzlechner.com\/dev\/wp-content\/uploads\/sites\/2\/2018\/04\/tileview1-150x150.png 150w, http:\/\/salzlechner.com\/dev\/wp-content\/uploads\/sites\/2\/2018\/04\/tileview1-300x298.png 300w\" sizes=\"(max-width: 496px) 100vw, 496px\" \/><\/p>\n<p>Lets take a look at the code that created these tiles<\/p>\n<pre class=\"lang:default decode:true \">Object oTileView is a cszTileView\r\n    Set piColumnSpan to 0\r\n            \r\n    Object oSchedClientTile is a cszTile\r\n        Set psID to \"1\"\r\n        Set psBackgroundColor to \"#0072c6\"\r\n        Set psBackgroundImage to \"images\/icon-schedclients.png\"\r\n        Set psLabel to \"Scheduled Clients\"\r\n    End_Object\r\n\r\n    Object oBird1Tile is a cszTile\r\n        Set psID to \"bird1\"\r\n        Set psBackgroundColor to \"\"\r\n        Set psBackgroundImage to \"images\/bird1.png\"\r\n        Set psLabel to \"Bird1\"\r\n        Set psImageType to \"fill\"\r\n        Set psTextTop to 5\r\n        Set psTextAlign to \"left\"\r\n    End_Object\r\n\r\n    Object oShiftTile is a cszTile\r\n        Set psID to \"2\"\r\n        Set psBackgroundColor to \"#005899\"\r\n        Set psBackgroundImage to \"images\/icon-shifts.png\"\r\n        Set psLabel to \"Shifts\"\r\n        Set pbShow to False\r\n    End_Object\r\n\r\n    Object oSchedTile is a cszTile\r\n        Set psID to \"3\"\r\n        Set psBackgroundColor to \"#179bd7\"\r\n        Set psBackgroundImage to \"images\/icon-schedule.png\"\r\n        Set psLabel to \"Schedule\"\r\n    End_Object\r\n\r\n    Object oTileContainer is a cszTile\r\n        Set psID to \"cont\"\r\n        Set psTileType to \"container\"\r\n        Set psBackgroundColor to \"#ffffff\"\r\n        Set psBackgroundImage to \"\"\r\n        Set psLabel to \"111\"\r\n        Set psImageType to \"none\"\r\n\r\n        Object oSmallTile is a cszTile\r\n            Set psID to \"small1\"\r\n            Set psBackgroundColor to \"#179bd7\"\r\n            Set psBackgroundImage to \"images\/icon-schedule.png\"\r\n            Set psLabel to \"Small\"\r\n            Set psTileType to \"small\"\r\n        End_Object\r\n        \r\n        Object oSmallTile2 is a cszTile\r\n            Set psID to \"small2\"\r\n            Set psBackgroundColor to \"#0065b0\"\r\n            Set psBackgroundImage to \"images\/icon-shifts.png\"\r\n            Set psLabel to \"Small\"\r\n            Set psTileType to \"small\"\r\n        End_Object\r\n        \r\n        Object oSmallTile3 is a cszTile\r\n            Set psID to \"small3\"\r\n            Set psBackgroundColor to \"#179bd7\"\r\n            Set psBackgroundImage to \"images\/bird1.png\"\r\n            Set psLabel to \"Bird1\"\r\n            Set psImageType to \"fill\"\r\n            Set psTileType to \"small\"\r\n        End_Object\r\n    End_Object\r\n\r\n    Object oWideTile is a cszTile\r\n        Set psID to \"4\"\r\n        Set psTileType to \"wide\"\r\n        Set psBackgroundColor to \"#4b99ee\"\r\n        Set psBackgroundImage to \"images\/icon-schedule.png\"\r\n        Set psLabel to \"Schedule\"\r\n    End_Object\r\n\r\n    Object oBirdWide is a cszTile\r\n        Set psID to \"bird\"\r\n        Set psTileType to \"wide\"\r\n        Set psBackgroundColor to \"#179bd7\"\r\n        Set psBackgroundImage to \"images\/bird.png\"\r\n        Set psLabel to \"Schedule\"\r\n        Set psImageType to \"fill\"\r\n        Set psTextAlign to \"left\"\r\n    End_Object\r\n\r\nEnd_Object\r\n<\/pre>\n<p>We can also dynamically modify a tile as follows<\/p>\n<pre class=\"lang:default decode:true\">Procedure UpdateMyTile\r\n    \/\/ change tile\r\n    Set psBackgroundColor of oSchedClientTile to \"#379417\" \r\n    Set psBackgroundImage of oSchedClientTile to \"images\/icon-schedclients.png\" \r\n    Set psLabel of oSchedClientTile to \"New Test\" \r\n\r\n    \/\/ send update to client\r\n    Send RequestUpdateTile to oSchedClientTile\r\nEnd_Procedure<\/pre>\n<h2>Responsive Tiles<\/h2>\n<p>We want our tile view to be responsive and change based on device size or browser size<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-480\" src=\"http:\/\/salzlechner.com\/dev\/wp-content\/uploads\/sites\/2\/2018\/04\/tileviewanim.gif\" alt=\"tileviewanim\" width=\"1030\" height=\"986\" \/><\/p>\n<h2>Hiding and Showing Tiles<\/h2>\n<p>We can hide and show Tiles by setting the pbShow property of the tile object<\/p>\n<h2>Full Dynamic Tiles<\/h2>\n<p>if we want to create tiles fully dynamic we can do that as well<\/p>\n<pre class=\"lang:default decode:true \">Object oTileView is a cszTileView\r\n   Set piColumnSpan to 0\r\n            \r\n   Procedure DoCreateDynamicTiles\r\n       Integer hoTile\r\n                \r\n       Send ClearTiles \r\n                \r\n       Get Create (RefClass(cszTileHandler)) to hoTile\r\n       Set psID of hoTile to \"1\"\r\n       Set psBackgroundColor of hoTile to \"#0072c6\"\r\n       Set psBackgroundImage of hoTile to \"images\/icon-schedclients.png\"\r\n       Set psLabel of hoTile to \"Scheduled Clients\"\r\n                                \r\n       Send SendJsonTile (GetTileJson(hoTile)) \r\n                                       \r\n       Set psID of hoTile to \"bird1\"\r\n       Set psBackgroundColor of hoTile to \"#0072c6\"\r\n       Set psBackgroundImage of hoTile to \"images\/bird1.png\"\r\n       Set psLabel of hoTile to \"Bird1\"\r\n       Set psImageType of hoTile to \"fill\"\r\n\r\n       Send SendJsonTile (GetTileJson(hoTile)) \r\n                                                \r\n       Set psID  of hoTile to \"2\"\r\n       Set psBackgroundColor  of hoTile to \"#005899\"\r\n       Set psBackgroundImage  of hoTile to \"images\/icon-shifts.png\"\r\n       Set psLabel  of hoTile to \"Shifts\"\r\n       Set psImageType of hoTile to \"icon\"\r\n\r\n       Send SendJsonTile (GetTileJson(hoTile)) \r\n                                                \r\n       Send Destroy to hoTile\r\n                \r\n       Send CreateTileView\r\n   End_Procedure\r\n            \r\n   Procedure OnTileClick String sTileID\r\n                \r\n   End_Procedure\r\nEnd_Object\r\n<\/pre>\n<p>The above code creates 3 tiles dynamically. We can also use the\u00a0<em>ClearTiles<\/em> method to remove all tiles as well as the\u00a0<em>DeleteTile\u00a0<\/em>method to delete a specific tile.<br \/>\nA tile can be hidden or shown using the\u00a0<em>ShowTile<\/em> method.<\/p>\n<p>Visually Tiles can be modified in size, color, icon, image and other appearance using properties and\/or css classes<\/p>\n<p>This is just one of the many controls StarZen created for the WebApp platform.<\/p>\n\n\t\t<div class='author-shortcodes'>\n\t\t\t<div class='author-inner'>\n\t\t\t\t<div class='author-image'>\n\t\t\t<img src='http:\/\/salzlechner.com\/dev\/wp-content\/uploads\/sites\/2\/2016\/02\/mike5crop-566174_60x60.jpg' alt='' \/>\n\t\t\t<div class='author-overlay'><\/div>\n\t\t<\/div> \n\t\t<div class='author-info'>\n\t\t\tMichael Salzlechner is the CEO of StarZen Technologies, Inc.<\/p>\n<p>He was part of the Windows Team at Data Access Worldwide that created the DataFlex for Windows Product before joining\u00a0<a href=\"http:\/\/starzen.com\">StarZen Technologies<\/a>. StarZen Technologies provides consulting services as well as custom Application development and third party products specifically for DataFlex developers<\/p>\n\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/div>\n","protected":false},"excerpt":{"rendered":"<p>The TileView control was created to replace the\u00a0default Dashboard view provided by DAW in their WebApplications. The Dashboard view is rather limited in functionality which prompted the creation of this class Some of the features we had been looking for are Dynamic Tiles Dynamically hiding and showing tiles. When doing so we expect the tile [&hellip;]<\/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-476","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\/476","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=476"}],"version-history":[{"count":6,"href":"http:\/\/salzlechner.com\/dev\/wp-json\/wp\/v2\/posts\/476\/revisions"}],"predecessor-version":[{"id":484,"href":"http:\/\/salzlechner.com\/dev\/wp-json\/wp\/v2\/posts\/476\/revisions\/484"}],"wp:attachment":[{"href":"http:\/\/salzlechner.com\/dev\/wp-json\/wp\/v2\/media?parent=476"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/salzlechner.com\/dev\/wp-json\/wp\/v2\/categories?post=476"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/salzlechner.com\/dev\/wp-json\/wp\/v2\/tags?post=476"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}