|
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> |
| Free forum by Nabble | Edit this page |
