Part 2
Doing Some Advancements To User Interface
Now it is time to create a decorator for the screens in this application. Create a file named CommonScreens.xml in the "widget" directory. This file will contain the common screens which will be used throughout the entire application. A common screen may have a header and footer included so any other screens that use it as a decorator will also have those items. For this you can take reference from the CommonScreens.xml file in the "example" component.
CommonScreens.xml file code will be:
<screen name="CommonPracticeDecorator">
<section>
<widgets>
<decorator-section-include name="body"/>
</widgets>
</section>
</screen>
Refer to the "CommonScreens.xml" file in the "Example" component to see usage of main-decorator. Two important readings at this moment are Understanding the OFBiz Widget Toolkit and "The Decorator" section in FAQ.
Add reference in web.xml to the CommonScreens.xml
<context-param>
<param-name>commonDecoratorLocation</param-name>
<param-value>component://practice/webapp/practice/widget/CommonScreens.xml</param-value>
<description>The location of the common-decorator screen to use for this webapp; referred to as a context variable in screen def XML files.</description>
</context-param>
Create a menu for this application. For this create a file by name PracticeMenus.xml in "widget" directory of you component. For this take a reference from ExampleMenus.xml file of "example" component.
<?xml version="1.0" encoding="UTF-8"?>
<menus xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="http://ofbiz.apache.org/dtds/widget-menu.xsd">
<menu name="PracticeAppBar" title="PracticeApplication" extends="CommonAppBarMenu" extends-resource="component://common/widget/CommonMenus.xml">
<menu-item name="main" title="Main"><link target="main"/></menu-item>
</menu>
</menus>
Include this menus file in your CommonPracticeDecorator as follows:
<screen name="CommonPracticeDecorator">
<section>
<widgets>
<include-menu location="component://practice/webapp/practice/widget/PracticeMenus.xml" name="PracticeAppBar"/>
<decorator-section-include name="body"/>
</widgets>
</section>
</screen>
Create the sub-directory "actions" inside the WEB-INF directory.
In this directory we will create the scripting files. Scripting files are used to prepare data on fly. These files will be groovy files. Earlier we were using bsh(beanshell) files. This is a script which is used to fetch the data from database on the fly for the UI.
Reference : Tips & Tricks while working with Groovy & http://groovy.codehaus.org/. While working in groovy always be conscious about the imported classes and packages. Import only those which have been used in your file. For putting log messages use methods from "Debug" class just do this practice from the beginning itself. So create a file by name Person.groovy in this actions directory which will be fetching all the records from the entity "Person". At this moment this is really going to be the small code for doing this (a single line) like
context.persons = delegator.findList("Person", null, null, null, null, false);
The above statement will fetch all the records from the Person entity and will put them in context by the name persons. Now this list by the name person will be iterated in the ftl file to show the records.
At this place an important reading is available at : Which variables are available in screen context?
Now in webapp "practice" create one ftl file by name "Person.ftl" which will be used to show the data fetched by groovy file.
Reference : http://freemarker.sourceforge.net/docs/
At this moment you need only to iterate the list of persons which is there in the context. The only code that is needed to that is:
<#if persons?has_content>
<h2>Some of the people who visited our site are:</h2>
<br>
<ul>
<#list persons as person>
<li>${person.firstName?if_exists} ${person.lastName?if_exists}</li>
</#list>
</ul>
</#if>
Now create a new screen by name "person" in PracticeScreens.xml file and also create a new menu item in PracticeMenus.xml file.
PracticeScreens.xml new screen entry will be:
<screen name="person">
<section>
<actions>
<script location="component://practice/webapp/practice/WEB-INF/actions/Person.groovy"/>
</actions>
<widgets>
<decorator-screen name="CommonPracticeDecorator" location="${parameters.commonDecoratorLocation}">
<decorator-section name="body">
<platform-specific>
<html>
<html-template location="component://practice/webapp/practice/Person.ftl"/>
</html>
</platform-specific>
</decorator-section>
</decorator-screen>
</widgets>
</section>
</screen>
Now change the controller.xml file so it points to the new screen, as we did earlier.
Now again run the application and observe the results by giving http://localhost:8080/practice/control/person .
Hint
Icon
If the output screen does not contain the menu as shown below, you will most likely need to change auth="true" to auth="false" in your controller.xml for the menu to come up.
Output Screen :
Doing Some Advancements To User Interface
Now it is time to create a decorator for the screens in this application. Create a file named CommonScreens.xml in the "widget" directory. This file will contain the common screens which will be used throughout the entire application. A common screen may have a header and footer included so any other screens that use it as a decorator will also have those items. For this you can take reference from the CommonScreens.xml file in the "example" component.
CommonScreens.xml file code will be:
<screen name="CommonPracticeDecorator">
<section>
<widgets>
<decorator-section-include name="body"/>
</widgets>
</section>
</screen>
Refer to the "CommonScreens.xml" file in the "Example" component to see usage of main-decorator. Two important readings at this moment are Understanding the OFBiz Widget Toolkit and "The Decorator" section in FAQ.
Add reference in web.xml to the CommonScreens.xml
<context-param>
<param-name>commonDecoratorLocation</param-name>
<param-value>component://practice/webapp/practice/widget/CommonScreens.xml</param-value>
<description>The location of the common-decorator screen to use for this webapp; referred to as a context variable in screen def XML files.</description>
</context-param>
Create a menu for this application. For this create a file by name PracticeMenus.xml in "widget" directory of you component. For this take a reference from ExampleMenus.xml file of "example" component.
<?xml version="1.0" encoding="UTF-8"?>
<menus xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="http://ofbiz.apache.org/dtds/widget-menu.xsd">
<menu name="PracticeAppBar" title="PracticeApplication" extends="CommonAppBarMenu" extends-resource="component://common/widget/CommonMenus.xml">
<menu-item name="main" title="Main"><link target="main"/></menu-item>
</menu>
</menus>
Include this menus file in your CommonPracticeDecorator as follows:
<screen name="CommonPracticeDecorator">
<section>
<widgets>
<include-menu location="component://practice/webapp/practice/widget/PracticeMenus.xml" name="PracticeAppBar"/>
<decorator-section-include name="body"/>
</widgets>
</section>
</screen>
Create the sub-directory "actions" inside the WEB-INF directory.
In this directory we will create the scripting files. Scripting files are used to prepare data on fly. These files will be groovy files. Earlier we were using bsh(beanshell) files. This is a script which is used to fetch the data from database on the fly for the UI.
Reference : Tips & Tricks while working with Groovy & http://groovy.codehaus.org/. While working in groovy always be conscious about the imported classes and packages. Import only those which have been used in your file. For putting log messages use methods from "Debug" class just do this practice from the beginning itself. So create a file by name Person.groovy in this actions directory which will be fetching all the records from the entity "Person". At this moment this is really going to be the small code for doing this (a single line) like
context.persons = delegator.findList("Person", null, null, null, null, false);
The above statement will fetch all the records from the Person entity and will put them in context by the name persons. Now this list by the name person will be iterated in the ftl file to show the records.
At this place an important reading is available at : Which variables are available in screen context?
Now in webapp "practice" create one ftl file by name "Person.ftl" which will be used to show the data fetched by groovy file.
Reference : http://freemarker.sourceforge.net/docs/
At this moment you need only to iterate the list of persons which is there in the context. The only code that is needed to that is:
<#if persons?has_content>
<h2>Some of the people who visited our site are:</h2>
<br>
<ul>
<#list persons as person>
<li>${person.firstName?if_exists} ${person.lastName?if_exists}</li>
</#list>
</ul>
</#if>
Now create a new screen by name "person" in PracticeScreens.xml file and also create a new menu item in PracticeMenus.xml file.
PracticeScreens.xml new screen entry will be:
<screen name="person">
<section>
<actions>
<script location="component://practice/webapp/practice/WEB-INF/actions/Person.groovy"/>
</actions>
<widgets>
<decorator-screen name="CommonPracticeDecorator" location="${parameters.commonDecoratorLocation}">
<decorator-section name="body">
<platform-specific>
<html>
<html-template location="component://practice/webapp/practice/Person.ftl"/>
</html>
</platform-specific>
</decorator-section>
</decorator-screen>
</widgets>
</section>
</screen>
Now change the controller.xml file so it points to the new screen, as we did earlier.
Now again run the application and observe the results by giving http://localhost:8080/practice/control/person .
Hint
Icon
If the output screen does not contain the menu as shown below, you will most likely need to change auth="true" to auth="false" in your controller.xml for the menu to come up.
Output Screen :
扫一扫
187
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
