svn commit: r1059429 - in /ofbiz/trunk/framework/example: config/ExampleUiLabels.xml webapp/example/WEB-INF/controller.xml widget/example/ExampleForms.xml widget/example/ExampleMenus.xml widget/example/ExampleScreens.xml

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
1 message Options
Reply | Threaded
Open this post in threaded view
|

svn commit: r1059429 - in /ofbiz/trunk/framework/example: config/ExampleUiLabels.xml webapp/example/WEB-INF/controller.xml widget/example/ExampleForms.xml widget/example/ExampleMenus.xml widget/example/ExampleScreens.xml

adrianc
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>