Author: adrianc
Date: Sun Jan 16 01:14:21 2011
New Revision: 1059429
URL: http://svn.apache.org/viewvc?rev=1059429&view=rev
Log:
New feature - Page Layout Best Practices demonstration and visual theme test
jig.
Based on a recent dev mailing list discussion, I added a page to the Example
component that demonstrates some basic layout concepts. The idea is to display
the page, then look at the screen widget definition and the HTML markup to see
how the page is constructed.
The page can also be used for visual theme development - because most of the
common UI elements are all on one page.
This could be improved - it needs a multi-column layout example, a tree widget
example, and a form widget field group example.
Internationalization note: This commit contains new UI labels.
Modified:
ofbiz/trunk/framework/example/config/ExampleUiLabels.xml
ofbiz/trunk/framework/example/webapp/example/WEB-INF/controller.xml
ofbiz/trunk/framework/example/widget/example/ExampleForms.xml
ofbiz/trunk/framework/example/widget/example/ExampleMenus.xml
ofbiz/trunk/framework/example/widget/example/ExampleScreens.xml
Modified: ofbiz/trunk/framework/example/config/ExampleUiLabels.xml
URL:
http://svn.apache.org/viewvc/ofbiz/trunk/framework/example/config/ExampleUiLabels.xml?rev=1059429&r1=1059428&r2=1059429&view=diff
==============================================================================
--- ofbiz/trunk/framework/example/config/ExampleUiLabels.xml (original)
+++ ofbiz/trunk/framework/example/config/ExampleUiLabels.xml Sun Jan 16
01:14:21 2011
@@ -466,6 +466,12 @@
<value xml:lang="it">Descrizione lunga</value>
<value xml:lang="zh">详ç»æè¿°</value>
</property>
+ <property key="ExampleLayoutDemo">
+ <value xml:lang="en">Layout Demo</value>
+ </property>
+ <property key="ExampleLayoutDemoText">
+ <value xml:lang="en">Demonstrate layout best practices and provide a
visual theme test jig.</value>
+ </property>
<property key="ExampleLayerFromLayer">
<value xml:lang="en">Layered lookup field (only test purp.)</value>
<value xml:lang="fr">Lookup de type layer (only test)</value>
Modified: ofbiz/trunk/framework/example/webapp/example/WEB-INF/controller.xml
URL:
http://svn.apache.org/viewvc/ofbiz/trunk/framework/example/webapp/example/WEB-INF/controller.xml?rev=1059429&r1=1059428&r2=1059429&view=diff
==============================================================================
--- ofbiz/trunk/framework/example/webapp/example/WEB-INF/controller.xml
(original)
+++ ofbiz/trunk/framework/example/webapp/example/WEB-INF/controller.xml Sun Jan
16 01:14:21 2011
@@ -233,6 +233,12 @@ under the License.
<security https="true" auth="true"/>
<response name="success" type="view" value="ExamplePieChart"/>
</request-map>
+
+ <request-map uri="ExampleLayoutDemo">
+ <security https="true" auth="true"/>
+ <response name="success" type="view" value="ExampleLayoutDemo"/>
+ </request-map>
+
<!-- end of request mappings -->
<!-- View Mappings -->
@@ -278,6 +284,8 @@ under the License.
<view-map name="ExampleBarChart"
page="component://example/widget/example/ExampleScreens.xml#ExampleBarChart"
type="screen"/>
<view-map name="ExamplePieChart"
page="component://example/widget/example/ExampleScreens.xml#ExamplePieChart"
type="screen"/>
+ <view-map name="ExampleLayoutDemo"
page="component://example/widget/example/ExampleScreens.xml#ExampleLayoutDemo"
type="screen"/>
+
<!-- Supported Content Types -->
<!--
text/html
Modified: ofbiz/trunk/framework/example/widget/example/ExampleForms.xml
URL:
http://svn.apache.org/viewvc/ofbiz/trunk/framework/example/widget/example/ExampleForms.xml?rev=1059429&r1=1059428&r2=1059429&view=diff
==============================================================================
--- ofbiz/trunk/framework/example/widget/example/ExampleForms.xml (original)
+++ ofbiz/trunk/framework/example/widget/example/ExampleForms.xml Sun Jan 16
01:14:21 2011
@@ -248,4 +248,52 @@ under the License.
</field>
<field name="submitButton" title="${uiLabelMap.CommonAdd}"><submit
button-type="button"/></field>
</form>
+
+ <form name="LayoutDemoForm" type="single" target="${demoTargetUrl}"
default-map-name="demoMap">
+ <field name="name" title="${uiLabelMap.CommonName}"><text/></field>
+ <field name="description"
title="${uiLabelMap.CommonDescription}"><text/></field>
+ <field name="dropDown" title="${uiLabelMap.CommonEnabled}">
+ <drop-down>
+ <option key="Y" description="${uiLabelMap.CommonYes}" />
+ <option key="N" description="${uiLabelMap.CommonNo}" />
+ </drop-down>
+ </field>
+ <field name="checkBox" title="${uiLabelMap.CommonEnabled}">
+ <check/>
+ </field>
+ <field name="radioButton" title="${uiLabelMap.CommonEnabled}">
+ <radio>
+ <option key="Y" description="${uiLabelMap.CommonYes}" />
+ <option key="N" description="${uiLabelMap.CommonNo}" />
+ </radio>
+ </field>
+ <field name="submitButton" title="${uiLabelMap.CommonSave}"><submit
button-type="button"/></field>
+ <field name="cancelButton" title="${uiLabelMap.CommonEmptyHeader}"
widget-style="smallSubmit">
+ <hyperlink target="${demoTargetUrl}"
description="${uiLabelMap.CommonCancel}"></hyperlink>
+ </field>
+ </form>
+
+ <form name="LayoutDemoList" type="list" list-name="demoList"
paginate-target="${demoTargetUrl}" separate-columns="true"
+ odd-row-style="${altRowStyle}" header-row-style="${headerStyle}"
default-table-style="${tableStyle}">
+ <field name="name" title="${uiLabelMap.CommonName}"><display/></field>
+ <field name="description"
title="${uiLabelMap.CommonDescription}"><text/></field>
+ <field name="dropDown" title="${uiLabelMap.CommonEnabled}">
+ <drop-down>
+ <option key="Y" description="${uiLabelMap.CommonYes}" />
+ <option key="N" description="${uiLabelMap.CommonNo}" />
+ </drop-down>
+ </field>
+ <field name="checkBox" title="${uiLabelMap.CommonEnabled}">
+ <check/>
+ </field>
+ <field name="radioButton" title="${uiLabelMap.CommonEnabled}">
+ <radio>
+ <option key="Y" description="${uiLabelMap.CommonYes}" />
+ <option key="N" description="${uiLabelMap.CommonNo}" />
+ </radio>
+ </field>
+ <field name="submitButton" title="${uiLabelMap.CommonUpdate}"
widget-style="button-col">
+ <submit button-type="button"/>
+ </field>
+ </form>
</forms>
Modified: ofbiz/trunk/framework/example/widget/example/ExampleMenus.xml
URL:
http://svn.apache.org/viewvc/ofbiz/trunk/framework/example/widget/example/ExampleMenus.xml?rev=1059429&r1=1059428&r2=1059429&view=diff
==============================================================================
--- ofbiz/trunk/framework/example/widget/example/ExampleMenus.xml (original)
+++ ofbiz/trunk/framework/example/widget/example/ExampleMenus.xml Sun Jan 16
01:14:21 2011
@@ -35,6 +35,7 @@ under the License.
<menu-item name="ExampleGeoLocation"
title="${uiLabelMap.CommonGeoLocation}"><link
target="ExampleGeoLocationPointSet1"/></menu-item>
<menu-item name="Birt" title="${uiLabelMap.Birt}"><link
target="BirtMain"/></menu-item>
<menu-item name="ExampleCharts" title="Chart examples"><link
target="ExampleBarChart"/></menu-item>
+ <menu-item name="LayoutDemo"
title="${uiLabelMap.ExampleLayoutDemo}"><link
target="ExampleLayoutDemo"/></menu-item>
</menu>
<menu name="EditExample" extends="CommonTabBarMenu"
extends-resource="component://common/widget/CommonMenus.xml">
@@ -94,4 +95,16 @@ under the License.
<menu-item name="ExampleBarChart" title="Bar chart"><link
target="ExampleBarChart"/></menu-item>
<menu-item name="ExamplePieChart" title="Pie chart"><link
target="ExamplePieChart"/></menu-item>
</menu>
+
+ <menu name="LayoutDemo" extends="CommonTabBarMenu"
extends-resource="component://common/widget/CommonMenus.xml">
+ <menu-item name="Selected" title="${uiLabelMap.CommonSelected}"
widget-style="selected">
+ <link target="${demoTargetUrl}"/>
+ </menu-item>
+ <menu-item name="Enabled" title="${uiLabelMap.CommonEnabled}">
+ <link target="${demoTargetUrl}"/>
+ </menu-item>
+ <menu-item name="Disabled" title="${uiLabelMap.CommonDisabled}"
widget-style="disabled">
+ </menu-item>
+ </menu>
+
</menus>
Modified: ofbiz/trunk/framework/example/widget/example/ExampleScreens.xml
URL:
http://svn.apache.org/viewvc/ofbiz/trunk/framework/example/widget/example/ExampleScreens.xml?rev=1059429&r1=1059428&r2=1059429&view=diff
==============================================================================
--- ofbiz/trunk/framework/example/widget/example/ExampleScreens.xml (original)
+++ ofbiz/trunk/framework/example/widget/example/ExampleScreens.xml Sun Jan 16
01:14:21 2011
@@ -462,4 +462,160 @@ under the License.
</widgets>
</section>
</screen>
+
+ <screen name="ExampleLayoutDemo">
+ <!-- Demonstrates UI layout best practices and serves as a visual
theme test jig.
+ For more information:
+
https://cwiki.apache.org/OFBADMIN/user-interface-layout-best-practices.html
+ https://cwiki.apache.org/OFBADMIN/html-and-css-best-practices.html
+
https://cwiki.apache.org/OFBIZ/ofbiz-maincsscss-html-element-collection-styles.html
+ -->
+ <section>
+ <actions>
+ <property-map resource="ExampleUiLabels" map-name="uiLabelMap"
global="true"/>
+ <set field="titleProperty" value="ExampleLayoutDemo"/>
+ <set field="headerItem" value="LayoutDemo"/>
+ <set field="tabButtonItem" value="Selected"/>
+ <set field="demoText"
value="${uiLabelMap.ExampleLayoutDemoText}" global="true"/>
+ <set field="errorMessage" from-field="demoText" global="true"/>
+ <set field="eventMessage" from-field="demoText" global="true"/>
+ <set field="demoTargetUrl" value="ExampleLayoutDemo"/>
+ <set field="demoMap.name"
value="${uiLabelMap.ExampleLayoutDemo}"/>
+ <set field="demoMap.description"
value="${uiLabelMap.ExampleLayoutDemoText}"/>
+ <set field="demoMap.dropDown" value="Y"/>
+ <set field="demoMap.checkBox" value="Y"/>
+ <set field="demoMap.radioButton" value="Y"/>
+ <set field="demoList[]" from-field="demoMap"/>
+ <set field="demoList[]" from-field="demoMap"/>
+ <set field="demoList[]" from-field="demoMap"/>
+ <set field="altRowStyle" value=""/>
+ <set field="headerStyle" value="header-row-1"/>
+ <set field="tableStyle" value="basic-table light-grid"/>
+ </actions>
+ <widgets>
+ <decorator-screen name="main-decorator"
location="${parameters.mainDecoratorLocation}">
+ <decorator-section name="pre-body">
+ <section>
+ <condition>
+ <and>
+ <if-has-permission permission="EXAMPLE"
action="_VIEW"/>
+ </and>
+ </condition>
+ <widgets>
+ <include-menu name="LayoutDemo"
location="component://example/widget/example/ExampleMenus.xml"/>
+ </widgets>
+ </section>
+ </decorator-section>
+ <decorator-section name="body">
+ <section>
+ <condition>
+ <if-has-permission permission="EXAMPLE"
action="_VIEW"/>
+ </condition>
+ <widgets>
+ <section name="Standard Page Start">
+ <widgets>
+ <container style="page-title">
+ <label
text="${uiLabelMap.ExampleLayoutDemo}"/>
+ </container>
+ <container style="button-bar
button-style-1">
+ <!-- Typically used for intra-app
links -->
+ <link target="${demoTargetUrl}"
text="${uiLabelMap.CommonNew}" style="create"/>
+ <link target="${demoTargetUrl}"
text="${uiLabelMap.CommonSelected}" style="selected"/>
+ <link target="${demoTargetUrl}"
text="${uiLabelMap.CommonEnabled}"/>
+ <link
text="${uiLabelMap.CommonDisabled}" style="disabled"/>
+ </container>
+ <container style="button-bar
button-style-2">
+ <!-- Typically used for inter-app
links -->
+ <link target="${demoTargetUrl}"
text="${uiLabelMap.CommonNew}" style="create"/>
+ <link target="${demoTargetUrl}"
text="${uiLabelMap.CommonSelected}" style="selected"/>
+ <link target="${demoTargetUrl}"
text="${uiLabelMap.CommonEnabled}"/>
+ <link
text="${uiLabelMap.CommonDisabled}" style="disabled"/>
+ </container>
+ </widgets>
+ </section>
+ <section name="h1-h6 Styles">
+ <widgets>
+ <horizontal-separator/>
+ <label style="h1" text="${demoText}"/>
+ <label style="h2" text="${demoText}"/>
+ <label style="h3" text="${demoText}"/>
+ <label style="h4" text="${demoText}"/>
+ <label style="h5" text="${demoText}"/>
+ <label style="h6" text="${demoText}"/>
+ </widgets>
+ </section>
+ <section name="Form/List Styles">
+ <widgets>
+ <horizontal-separator/>
+ <include-form name="LayoutDemoForm"
location="component://example/widget/example/ExampleForms.xml"/>
+ <include-form name="LayoutDemoList"
location="component://example/widget/example/ExampleForms.xml"/>
+ <section>
+ <actions>
+ <set field="tableStyle"
value="basic-table dark-grid"/>
+ </actions>
+ <widgets/>
+ </section>
+ <include-form name="LayoutDemoList"
location="component://example/widget/example/ExampleForms.xml"/>
+ <section>
+ <actions>
+ <set field="altRowStyle"
value="alternate-row"/>
+ <set field="headerStyle"
value="header-row-2"/>
+ <set field="tableStyle"
value="basic-table hover-bar"/>
+ </actions>
+ <widgets/>
+ </section>
+ <include-form name="LayoutDemoList"
location="component://example/widget/example/ExampleForms.xml"/>
+ </widgets>
+ </section>
+ <section name="Screenlet Styles">
+ <widgets>
+ <horizontal-separator/>
+ <screenlet>
+ <label text="${demoText}"/>
+ </screenlet>
+ <screenlet
title="${uiLabelMap.ExampleLayoutDemo}" id="screenlet-demo" collapsible="true">
+ <include-form
name="LayoutDemoForm"
location="component://example/widget/example/ExampleForms.xml"/>
+ </screenlet>
+ <screenlet
title="${uiLabelMap.ExampleLayoutDemo}" padded="false">
+ <section>
+ <actions>
+ <set field="altRowStyle"
value="alternate-row"/>
+ <set field="headerStyle"
value="header-row-1"/>
+ <set field="tableStyle"
value="basic-table light-grid hover-bar"/>
+ </actions>
+ <widgets/>
+ </section>
+ <include-form
name="LayoutDemoList"
location="component://example/widget/example/ExampleForms.xml"/>
+ </screenlet>
+ <screenlet
title="${uiLabelMap.ExampleLayoutDemo}" padded="false">
+ <section>
+ <actions>
+ <set field="altRowStyle"
value="alternate-row"/>
+ <set field="headerStyle"
value="header-row-2"/>
+ <set field="tableStyle"
value="basic-table hover-bar"/>
+ <set field="viewSize"
value="1" type="Integer"/>
+ </actions>
+ <widgets/>
+ </section>
+ <container style="button-bar
button-style-1">
+ <link
target="${demoTargetUrl}" text="${uiLabelMap.CommonNew}" style="create"/>
+ <link
target="${demoTargetUrl}" text="${uiLabelMap.CommonSelected}" style="selected"/>
+ <link
target="${demoTargetUrl}" text="${uiLabelMap.CommonEnabled}"/>
+ <link
text="${uiLabelMap.CommonDisabled}" style="disabled"/>
+ </container>
+ <include-form
name="LayoutDemoList"
location="component://example/widget/example/ExampleForms.xml"/>
+ </screenlet>
+ </widgets>
+ </section>
+ </widgets>
+ <fail-widgets>
+ <label
style="h3">${uiLabelMap.ExampleViewPermissionError}</label>
+ </fail-widgets>
+ </section>
+ </decorator-section>
+ </decorator-screen>
+ </widgets>
+ </section>
+ </screen>
+
</screens>
