{"id":546,"date":"2016-04-30T23:43:48","date_gmt":"2016-04-30T23:43:48","guid":{"rendered":"http:\/\/www.wellcode.de\/home\/?page_id=546"},"modified":"2021-11-05T08:27:02","modified_gmt":"2021-11-05T08:27:02","slug":"wellframe-web","status":"publish","type":"page","link":"https:\/\/wellcode.de\/home\/index.php\/en\/wellframe-web\/","title":{"rendered":"WellFrame Web"},"content":{"rendered":"\n<p><em>WellFrame Web<\/em> package ist part of the <em>WellFrame framework<\/em>. It implements a web presentation layer for <em>WellFrame<\/em> business and data layer using HTML5, CSS3 and Javascript.<\/p>\n\n\n\n<p>It provides basic components to present the business logic implemented in <em>WellFrame<\/em> framework.<\/p>\n\n\n\n<p>The very &#8216;main&#8217; components are illustrated in very short words here. This page is not the documentation of this section.<\/p>\n\n\n\n<p>All JavaScript components in <em>WellFrame Web<\/em> are prefixed with <strong>&#8220;wf.&#8221;<\/strong>. So by using the <em>WellFrame Web<\/em> components do not use this prefix in your javascript scripts to avoid name conflicts.<\/p>\n\n\n\n<p>The main components are:<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">wf.service<\/h2>\n\n\n\n<p>This is a javascript module that provides routines to interacte with the <em>WellFrame web service<\/em>. The interaction with the web service happens by using the <strong>RESTful<\/strong> capability of the web service. The <em>WellFrame service interface<\/em> is preconfigured for http, https, RESTful and SOA.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">wf.WebEntity<\/h2>\n\n\n\n<p>Overridable basic javascript class. It implements the presentation of an entity object. It allows<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>displaying an entity object as visual item,<\/li><li>as row of an entity list table,<\/li><li>print the item in several cases,<\/li><li>edit the entity object and interacte with the web service,<\/li><li>dependet entity items (parents, sub items) could be displyed based on conditions derived from user<\/li><li>several ways to override standard routines to add the target business logic.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">wf.WebEntityList<\/h2>\n\n\n\n<p>Overridable basic javascript class. It implements the presentation of a list of entity objects. It allows<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>displaying a list of entities as visual items,<\/li><li>as detailed list table,<\/li><li>print the items list in several cases,<\/li><li>insert, edit or remove entities into or from the given list and interactes with the web service,<\/li><li>several ways to override standard routines to add the target business logic.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">wf.WebEntityFactory<\/h2>\n\n\n\n<p>Overridable basic javascript class. It is responsible to distribute business logic actions. Mainly it creates an entity or entity list presentation and is the main intrance to the entity.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">wf.EntityProvider<\/h2>\n\n\n\n<p>This is the broker what takes care about creating new presentation objects (WebEntity, WebEntityList and WebEntityFactory).<br>Those basic classes can be overriden by entity implementations. So the EntityProvider detects the correct class to instanciate.<br>As Example, if the entity &#8220;<em>my.Person<\/em>&#8221; has implemented the above basic class <em>WebEntity<\/em>, the entity provider will create a new instance of class &#8220;<em>my.Person<\/em>&#8220;, rather than &#8220;<em>wf.WebEntity<\/em>&#8220;.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">wf.EventHandler<\/h2>\n\n\n\n<p>user defined events can be bound on several actions of the above classes, as example by displaying an entity object or after displayed all objects in WebEntityList.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">wf.Find<\/h2>\n\n\n\n<p>Overridable basic javascript class that implements the find cabability of <em>WellFrame<\/em> framework.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">index.html<\/h2>\n\n\n\n<p>The main html intrance for the web application. All style sheets, javascripts, extrnal components must be referenced here. Even though all html templates that are used in the application must be defined here.<\/p>\n\n\n\n<p>In other words, the web interface is a&nbsp;<em>single-page application<\/em> (<em>SPA<\/em>).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">style sheets<\/h2>\n\n\n\n<p><em>WellFrame Web<\/em> is css driven. So the required css files must be bound in the application.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Example: Wello<\/h2>\n\n\n\n<p><em>Wello Modules<\/em> are implemented using this Framework. Please refer to the modules on this page to see the strongness of <em>WellFrame Web<\/em>.<\/p>\n\n\n\n<p>Visit <a href=\"\/WelloDemo\/index.html\">The Live Demo<\/a> of <em>Wello<\/em> to see how it works.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Small Example: Addresses<\/h2>\n\n\n\n<p><strong>Purpose:<\/strong> Show location of address in google maps, when displaying an address as main entrance (wf.WebEntity.DisplayParent)<\/p>\n\n\n\n<pre class=\"wp-block-preformatted lang:default decode:true\">\/\/\n\/\/ ContactAddress Entity Presentation\n\/\/\nwf.ContactAddress = function (item) {\n    wf.WebEntity.call(this, item);\n\n    this.VerticalEditPage = false;\n    this.SideLabelEditPage = false;\n}\n\nwf.ContactAddress.prototype = Object.create(wf.WebEntity.prototype, {\n});\n\nwf.ContactAddress.prototype.constructor = wf.ContactAddress;\n\n\/\/\n\/\/ Show address location in google maps, when displayed as root of page\n\/\/\nwf.ContactAddress.prototype.DisplayParent = function () {\n    wf.WebEntity.prototype.DisplayParent.call(this);\n\n    \/\/ display google map\n    wf.google.ShowAddress(this);\n}<\/pre>\n\n\n\n<p><em>ContactAddress<\/em> is an entity that has overriden the basic class <em>WebEntity<\/em>. So calling the rountine &#8220;<em>wf.EntityProvider.CreateEntity<\/em>&#8221; for &#8220;<em>ContactAddress<\/em>&#8221; will create an object of the class &#8220;<em>wf.ContactAddress<\/em>&#8220;.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted lang:default decode:true\">\/\/ retrieve a contact address from web service\nwf.service.postCall(\"GetContactAddress\", {\n    contactAddessId: 10\n}, this, function (_this, addressItem) {\n\n    \/\/ create a presentation for the retrieved item\n    var visualAddress = wf.EntityProvider.CreateEntity(addressItem);\n\n    \/\/ address is of type \"wf.ContactAddress\"\n    visualAddress.DisplayParent();\n});<\/pre>\n\n\n\n<p>Result of the upove example:<br><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-560 size-full\" src=\"\/home\/wp-content\/uploads\/address.png\" alt=\"address\" width=\"695\" height=\"661\" srcset=\"https:\/\/wellcode.de\/home\/wp-content\/uploads\/address.png 695w, https:\/\/wellcode.de\/home\/wp-content\/uploads\/address-300x285.png 300w\" sizes=\"auto, (max-width: 695px) 100vw, 695px\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>WellFrame Web package ist part of the WellFrame framework. It implements a web presentation layer for WellFrame business and data layer using HTML5, CSS3 and Javascript. It provides basic components to present the business logic implemented in WellFrame framework. The very &#8216;main&#8217; components are illustrated in very short words here. This page is not the &hellip; <a href=\"https:\/\/wellcode.de\/home\/index.php\/en\/wellframe-web\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">WellFrame Web<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-546","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wellcode.de\/home\/index.php\/wp-json\/wp\/v2\/pages\/546","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wellcode.de\/home\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wellcode.de\/home\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wellcode.de\/home\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wellcode.de\/home\/index.php\/wp-json\/wp\/v2\/comments?post=546"}],"version-history":[{"count":34,"href":"https:\/\/wellcode.de\/home\/index.php\/wp-json\/wp\/v2\/pages\/546\/revisions"}],"predecessor-version":[{"id":1698,"href":"https:\/\/wellcode.de\/home\/index.php\/wp-json\/wp\/v2\/pages\/546\/revisions\/1698"}],"wp:attachment":[{"href":"https:\/\/wellcode.de\/home\/index.php\/wp-json\/wp\/v2\/media?parent=546"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}