Rule practice over technology

The Screen widget is the base !

Area refreshment possibility are limited by simple rules

Tidy up forms and screens from display and technical informations, that will be managed by the theme

The concept of "Screen" In OFBiz

It's essential to keep a coherence in the development and avoid particular case,
this is not for front-end development.

Each operation is related to a screen

This is allowed !

A screen or one of its element can update/reload :

Global page

Itself

A child screen

This is not !

A screen or one of its element cannot update/reload :

An other screen
A parent screen
A child of another screen

Advantage

With this basis, we can send enough informations to the framework to limit the issue due to the technology. Like area auto-resolve, coherence of calls, code limitation.

Application consistency

First step, structure the inside of screens

Sub-decorator concept

To guarantee consistency for the user and to help the theme and the screen developer, we reinforce the use of sub-decorator in order to let the theme organize ergonomically and technically the pages transverse to the application.

Once identified, an area will include the given screen

Details Decorator

To show a sum up of an object and its related data. Composed of five sections :

menu-bar: a menu

tab-bar: a tab menu to give access to related data into details section

summary: a summary that display main data of the object

actions: an action menu (or other) related to the object (update, duplicate or specific actions)

details: area that will display related data

Details Decorator

Implementation example

depending on your theme, you can reorganize it and keep the consistency through each screens

Embedded Decorator

Used to inject a specific screen in an structured page area.

Its goal is to define what kind of data the screen will have to render. The theme will adapt to the technology for data rendering. The sections are :

menu-bar: a menu

single: display of a single form

list: display a list of data

actions: an action menu
(search filtering, history display…)

content: display a content (Image or document)

Embedded Decorator

Implementation example

OR

depending on your theme, you can also reorganize it and keep the consistency through each screens

Short english video to present decorators, a full french video with english subtitle is present below

Full french video with english subtitle to present the argumentation for new decorators

Slimdown code

We will use previous principles to simplify form code, to let them massively rely on themes and screens where they are included.

Example with a form

Take this find facility form


    <form name="FindFacility" type="list" list-name="listIt"
        paginate-target="FacilitySearchResults"
        odd-row-style="alternate-row" header-row-style="header-row-2"
        default-table-style="basic-table hover-bar">
        <actions>...
        <field name="facilityId">....
        <on-event-update-area event-type="sort-column"
            area-id="search-results" area-target="FacilitySearchResults"/>
        <on-event-update-area event-type="paginate"
            area-id="search-results" area-target="FacilitySearchResults"/>
    </form>



                    

Currently on xml form


    <form name="FindFacility" type="list" list-name="listIt"
        paginate-target="FacilitySearchResults"
        odd-row-style="alternate-row" header-row-style="header-row-2"
        default-table-style="basic-table hover-bar">
        <actions>...
        <field name="facilityId">....
        <on-event-update-area event-type="sort-column"
            area-id="search-results" area-target="FacilitySearchResults"/>
        <on-event-update-area event-type="paginate"
            area-id="search-results" area-target="FacilitySearchResults"/>
    </form>


                        

Currently on xml form


    <form name="FindFacility" type="list" list-name="listIt"
        paginate-target="FacilitySearchResults"
        odd-row-style="alternate-row" header-row-style="header-row-2"
        default-table-style="basic-table hover-bar">
        <actions>...
        <field name="facilityId">....
        <on-event-update-area event-type="sort-column"
            area-id="search-results" area-target="FacilitySearchResults"/>
        <on-event-update-area event-type="paginate"
            area-id="search-results" area-target="FacilitySearchResults"/>
    </form>


                        

Currently on xml form


    <form name="FindFacility" type="list" list-name="listIt"
        paginate-target="FacilitySearchResults"
        odd-row-style="alternate-row" header-row-style="header-row-2"
        default-table-style="basic-table hover-bar">
        <actions>...
        <field name="facilityId">....
        <on-event-update-area event-type="sort-column"
            area-id="search-results" area-target="FacilitySearchResults"/>
        <on-event-update-area event-type="paginate"
            area-id="search-results" area-target="FacilitySearchResults"/>
    </form>


                        

It contains styles and screen refresh information besides its functional cover.

For each form, we must ensure that it is located in a screen with a search-results section and define the target.

With screen stack

By relying on the screen instead of a hard-coded section we got


<form name="FindFacility" type="list" list-name="listIt"
    paginate-target="FacilitySearchResults"
    odd-row-style="alternate-row" header-row-style="header-row-2"
    default-table-style="basic-table hover-bar">
    <actions>...
    <field name="facilityId">....
    <on-event-update-area event-type="sort-column"
        area-id="${screenId}" area-target="FacilitySearchResults"/>
    <on-event-update-area event-type="paginate"
        area-id="${screenId}" area-target="FacilitySearchResults"/>
</form>
                    

Use Theme

We can store informations in theme and load a generic form in file
themes/common-themes/widget/CommonForms.xml


<form name="CommonDynamicList" type="list" list-name="listIt"
  odd-row-style="alternate-row" header-row-style="header-row-2"
  default-table-style="basic-table hover-bar">
  <on-event-update-area event-type="sort-column" area-id="${screenId}"/>
  <on-event-update-area event-type="paginate" area-id="${screenId}"/>
</form>
                    

Use Theme

For the styles


<form name="CommonDynamicList" type="list" list-name="listIt"
  odd-row-style="alternate-row" header-row-style="header-row-2"
  default-table-style="basic-table hover-bar">
  <on-event-update-area event-type="sort-column" area-id="${screenId}"/>
  <on-event-update-area event-type="paginate" area-id="${screenId}"/>
</form>


                    

Use Theme

For sections generated by the screen stack


<form name="CommonDynamicList" type="list" list-name="listIt"
    odd-row-style="alternate-row" header-row-style="header-row-2"
    default-table-style="basic-table hover-bar">
    <on-event-update-area event-type="sort-column" area-id="${screenId}"/>
    <on-event-update-area event-type="paginate" area-id="${screenId}"/>
</form>

                

Exploit in final form

On the previous example applications/product/widget/facility/FacilityForms.xml



<form name="FindFacility" paginate-target="FacilitySearchResults"
    extend="CommonDynamicList"
    extend-location="component://common-theme/widget/CommonForms.xml">
    <actions>...
    <field name="facilityId">....
</form>


                    

All style and technical informations for refresh are managed by the theme. Functional forms are simplified

The result is a form with only essential informations. Remaining informations are managed by the screen or the theme.

Change process management

Form navigation concept, after an update or a sequence of updates is currently managed by the tag :
`<on-event-update-area>`
This constrains the form to know where it is used and in what environment.

For that matter, we move the idea of area refreshment to the object that call the process, and not the process itself

New element `Callback`

Into the links we add a new information : callback. When a process launch by these links is completed, it triggers the callback.

The link is dedicated to the screen, it knows what it is waiting for and what it needs to refresh.

It release the burden from the form or the chaining of forms doing the process

Callback Schema

Callback, code example

This is an update link with callback


    <menu-item name="edit">
        <link target="EditProductCategoryRollup" link-type="layered-modal">
            <auto-parameters-entity entity-name="ProductCategoryRollup"/>
            <callback area-target="ListProductCategoryChildRollup">
                <parameter param-name="productCategoryId" from-field="parentProductCategoryId"/>
            </callback>
        </link>
    </menu-item>
                    

Callback, code example

Il contient l'appel à une modal qui va gérer l'édition


    <menu-item name="edit">
        <link target="EditProductCategoryRollup" link-type="layered-modal">
            <auto-parameters-entity entity-name="ProductCategoryRollup"/>
            <callback area-target="ListProductCategoryChildRollup">
                <parameter param-name="productCategoryId" from-field="parentProductCategoryId"/>
            </callback>
        </link>
    </menu-item>
                    

It contains a call to a modal which will manage update

Callback, code example

Lors de la fin de la mise à jour, le callback indique quel action à réaliser, ici rappeler ListProductCategoryChildRollup pour raffraichir l'écran (résolution auto de la zone)


        <menu-item name="edit">
            <link target="EditProductCategoryRollup" link-type="layered-modal">
                <auto-parameters-entity entity-name="ProductCategoryRollup"/>
                <callback area-target="ListProductCategoryChildRollup">
                    <parameter param-name="productCategoryId" from-field="parentProductCategoryId"/>
                </callback>
            </link>
        </menu-item>
                    

After the update, callback defines what action to execute. In our exemple, it will call ListProductCategoryChildRollup to refresh the screen (with area auto-resolve)

Callback, by example

French video with english subtitle