The Goal

Redesign Openbiz presentation layer.

The Problem

1. The default BizForm includes list, edit, new, search in one metadata.

a.    Multiple Display Mode + single Control definition limits the flexibility of configure different UI elements for different modes.

b.    This default metadata is tuned for highly interactive data centric administration applications like CRM, HRM. It is not intuitive to use it on consumer applications.

c.    Display Mode management in the BizForm introduces messy logic.

d.    No detail page is defined. The detail page is useful for bookmark and drilldown

e.    User can't use browser back/forward button to navigate between Display Modes

f.    Web page is not search engine friendly

2.  HTMLControl class includes all common HTML element rendering logic

a.    This makes it hard to develop a custom UI element

b.    All elements have to share the same XML element attribute

3.    Display popup in a new browser window

a.    Open a new window is slow

b.    A new window has inconsistent style with the main page

The Solution

1.    Redesign the BizForm with EasyForm on both metadata and class.

a.    Drop Display Mode from EasyForm. Developer don't need to worry the different configuration of the elements on different display mode.

b.    Limit single display on one page is easy to develop consumer facing applications.

c.    Assign different Form class for different purpose of the page. For example, ListForm is to show data in grid, while InputForm is for data input page.

d.    Define a new schema for Form metadata. This is to avoid confusion between the 2.3 BizForm metadata and the new metadata

e.    Define Search panel to allow easy search on list page

f.    Implement the commonly used data management flow.See screen below

g.    The new flow is browser and search engine friendly

h.    Still keep the advanced UI features like parent/child association, value picker ¡­

2.    Assign each UI element with its own class

a.    Each element's metadata may have different attributes

3.    Replace the heavy new window with light in-page window

Some Details

Class Diagram

EasyView    (base view class)
  - DynaView    (dynamic view class, dynamic view can be given any form to display)
EasyForm    (base form class)
  - InputForm    (form class for editing data)
  - NewForm    (form class for creating data)
  - ListForm    (form class for listing data set)
    - PickerForm    (form class for list data set in a picker popup)
Element    (base UI element class)
  - InputElement    (base input element class)
    - InputText    (Editbox element)
    - Textarea    (Textarea element)
    - Password    (Password element)
    - File        (File upload element)
    - Button        (Image/Text button element)
    - HTMLButton    (Standard button element)
    - ResetButton    (Standard Reset button element)
    - SubmitButton    (Standard Submit button element)
    - RichText    (Rich Text Editor element)
    - AutoSuggest    (Auto Suggestion input element)
    - InputDate    (Date input element)
    - InputDatetime    (Datetime input element)
    - InputPicker    (Input element with picker)
    - OptionElement    (base option element)
      - Listbox    (listbox, combobox element)
      - Checkbox    (Checkbox element)
      - Radio        (Radio element)
  - Hidden    (Standard Hidden element)
  - RowSelector    (Row selection checkbox element)
  - LabelText        (Label field element)
    - ColumnText    (Data field element as table column

Screenshots

1.    New section defined in an EasyForm

 
2.    Full function list page with child list page

3.    Drilldown to Detail page

 
4.    Edit page

 
5.    New Page

6.  New in-page picker popup

Typical EasyForm Metadata

<?xml version="1.0" encoding="UTF-8"?>
<EasyForm Name="f_EventList" class="ListForm" jsClass="jbForm" Title="Sports Events" Description="Event BizForm" BizDataObj="easy.d_Event" PageSize="10" DefaultForm="Y" TemplateEngine="Smarty" TemplateFile="list.tpl">
    <DataPanel>
        <Element Name="fld_id" Class="ColumnText" FieldName="Id" Label="Event Id"/>
        <Element Name="fld_name" Class="ColumnText" FieldName="Name" Label="Name" Sortable="Y" Link="controller.php?view=easy.v_EventDetail&amp;fld:Id={@:Elem[fld_id].Value}"/>
        <Element Name="fld_host" Class="ColumnText" FieldName="Host" Label="Host"/>
        <Element Name="fld_loc" Class="ColumnText" FieldName="Location" Label="Location"/>
        <Element Name="fld_start" Class="ColumnText" FieldName="Start" Label="Start"/>
        <Element Name="fld_end" Class="ColumnText" FieldName="End" Label="End"/>
        <Element Name="fld_desc" Class="ColumnText" FieldName="Description" Label="Description"/>
    </DataPanel>
    <ActionPanel>
        <Element Name="btn_edit" Class="Button" Text="Edit" CssClass="button">
            <EventHandler Name="onclick" Event="onclick" Function="EditRecord()" RedirectPage="controller.php?view=easy.v_EventEdit&amp;fld:Id={@:Elem[fld_id].Value}"/>
        </Element>
        <Element Name="lnk_new" Class="LabelText" Text="New" CssClass="button" Link="controller.php?view=easy.v_EventNew" Style="padding: 1 10 1 10; color:black;">
        </Element>
        <Element Name="btn_delete" Class="Button" Text="Delete" CssClass="button">
            <EventHandler Name="onclick" Event="onclick" Function="DeleteRecord()"/>
        </Element>
        <Element Name="btn_excel" Class="Button" Image="excel.gif" Text="Excel Export" CssClass="button">
            <EventHandler Name="onclick" Event="onclick" Function="CallService(excelService,renderCSV)" FunctionType="Popup"/>
        </Element>
    </ActionPanel>
    <NavPanel>
        <Element Name="btn_first" Class="Button" Image="prevfirst.gif" Enabled="{(@:m_CurrentPage == 1)?'N':'Y'}" Text="First" CssClass="button">
            <EventHandler Name="onclick" Event="onclick" Function="GotoPage(1)"/>
        </Element>
        <Element Name="btn_prev" Class="Button" Image="prev.gif" Enabled="{(@:m_CurrentPage == 1)?'N':'Y'}" Text="Previous" CssClass="button">
            <EventHandler Name="onclick" Event="onclick" Function="GotoPage({@:m_CurrentPage - 1})" ShortcutKey="Ctrl+Shift+Left"/>
        </Element>
        <Element Name="txt_page" Class="LabelText" Text="{'@:m_CurrentPage of @:m_TotalPages '}">
        </Element>
        <Element Name="btn_next" Class="Button" Image="next.gif" Enabled="{(@:m_CurrentPage == @:m_TotalPages )?'N':'Y'}" Text="Next" CssClass="button">
            <EventHandler Name="onclick" Event="onclick" Function="GotoPage({@:m_CurrentPage + 1})" ShortcutKey="Ctrl+Shift+Right"/>
        </Element>
        <Element Name="btn_last" Class="Button" Image="nextlast.gif" Enabled="{(@:m_CurrentPage == @:m_TotalPages )?'N':'Y'}" Text="Last" CssClass="button">
            <EventHandler Name="onclick" Event="onclick" Function="GotoPage({@:m_TotalPages})"/>
        </Element>
    </NavPanel>
    <SearchPanel>
        <Element Name="qry_name" Class="InputText" FieldName="Name" Label="Name"/>
        <Element Name="btn_dosearch" Class="Button" text="Search" CssClass="button">
            <EventHandler Name="onclick" Event="onclick" Function="RunSearch()" ShortcutKey="Enter"/>
        </Element>
    </SearchPanel>
</EasyForm>