WellFrame Web – Wellcode software

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 ‘main’ components are illustrated in very short words here. This page is not the documentation of this section.

All JavaScript components in WellFrame Web are prefixed with “wf.”. So by using the WellFrame Web components do not use this prefix in your javascript scripts to avoid name conflicts.

The main components are:

wf.service

This is a javascript module that provides routines to interacte with the WellFrame web service. The interaction with the web service happens by using the RESTful capability of the web service. The WellFrame service interface is preconfigured for http, https, RESTful and SOA.

wf.WebEntity

Overridable basic javascript class. It implements the presentation of an entity object. It allows

displaying an entity object as visual item,
as row of an entity list table,
print the item in several cases,
edit the entity object and interacte with the web service,
dependet entity items (parents, sub items) could be displyed based on conditions derived from user
several ways to override standard routines to add the target business logic.

wf.WebEntityList

Overridable basic javascript class. It implements the presentation of a list of entity objects. It allows

displaying a list of entities as visual items,
as detailed list table,
print the items list in several cases,
insert, edit or remove entities into or from the given list and interactes with the web service,
several ways to override standard routines to add the target business logic.

wf.WebEntityFactory

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.

wf.EntityProvider

This is the broker what takes care about creating new presentation objects (WebEntity, WebEntityList and WebEntityFactory).
Those basic classes can be overriden by entity implementations. So the EntityProvider detects the correct class to instanciate.
As Example, if the entity “my.Person” has implemented the above basic class WebEntity, the entity provider will create a new instance of class “my.Person“, rather than “wf.WebEntity“.

wf.EventHandler

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.

wf.Find

Overridable basic javascript class that implements the find cabability of WellFrame framework.

index.html

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.

In other words, the web interface is a single-page application (SPA).

style sheets

WellFrame Web is css driven. So the required css files must be bound in the application.

Example: Wello

Wello Modules are implemented using this Framework. Please refer to the modules on this page to see the strongness of WellFrame Web.

Visit The Live Demo of Wello to see how it works.

Small Example: Addresses

Purpose: Show location of address in google maps, when displaying an address as main entrance (wf.WebEntity.DisplayParent)

//
// ContactAddress Entity Presentation
//
wf.ContactAddress = function (item) {
    wf.WebEntity.call(this, item);

    this.VerticalEditPage = false;
    this.SideLabelEditPage = false;
}

wf.ContactAddress.prototype = Object.create(wf.WebEntity.prototype, {
});

wf.ContactAddress.prototype.constructor = wf.ContactAddress;

//
// Show address location in google maps, when displayed as root of page
//
wf.ContactAddress.prototype.DisplayParent = function () {
    wf.WebEntity.prototype.DisplayParent.call(this);

    // display google map
    wf.google.ShowAddress(this);
}

// ContactAddress Entity Presentation

wf.ContactAddress = function (item) {

wf.WebEntity.call(this, item);

this.VerticalEditPage = false;

this.SideLabelEditPage = false;

}

wf.ContactAddress.prototype = Object.create(wf.WebEntity.prototype, {

});

wf.ContactAddress.prototype.constructor = wf.ContactAddress;

// Show address location in google maps, when displayed as root of page

wf.ContactAddress.prototype.DisplayParent = function () {

wf.WebEntity.prototype.DisplayParent.call(this);

// display google map

wf.google.ShowAddress(this);

}

ContactAddress is an entity that has overriden the basic class WebEntity. So calling the rountine “wf.EntityProvider.CreateEntity” for “ContactAddress” will create an object of the class “wf.ContactAddress“.

// retrieve a contact address from web service
wf.service.postCall("GetContactAddress", {
    contactAddessId: 10
}, this, function (_this, addressItem) {

    // create a presentation for the retrieved item
    var visualAddress = wf.EntityProvider.CreateEntity(addressItem);

    // address is of type "wf.ContactAddress"
    visualAddress.DisplayParent();
});

// retrieve a contact address from web service

wf.service.postCall("GetContactAddress", {

contactAddessId: 10

}, this, function (_this, addressItem) {

// create a presentation for the retrieved item

var visualAddress = wf.EntityProvider.CreateEntity(addressItem);

// address is of type "wf.ContactAddress"

visualAddress.DisplayParent();

});

Result of the upove example:
address