Page History

...

1. 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:

   Code Block
   <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

   Code Block
   <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>

2. 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.

   Code Block

   <?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:

   Code Block
   <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>

3. 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

   Code Block
   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?

4. 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:

   Code Block
   <#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>

5. 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:

   Code Block

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

6. 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 .

   Tip
   title Hint
   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 :
   

Anchor
include-form include-form

Now moving to create a form for showing the content of Person entity on the screen (Using Form Widget)

1. Now add one more menu item to by name "PersonForm" to your PracticeMenus.xml file.

2. Create one file in widget by name PracticeForms.xml and create a list form for showing the records from person entity.
   (Take reference from ExampleScreens.xml and ExampleForms.xml files).

   Code Block

   <form name="ListPersons" type="list" list-name="persons" list-entry-name="person" default-map-name="person" paginate-target="personForm"> <!-- Important: Here service definition for updatePracticePerson has been used for automatically rendering the form fields, which you can use after completing CRUD operations from Part-3 --> <!-- auto-fields-service service-name="updatePracticePerson" default-field-type="display" map-name="person"/--> <!-- The above method can be used in case a service specific form is being rendered, otherwise form-fields can be explicitly mentioned as given below:--> <field name="firstName"><display/></field> <field name="middleName" ><display/> </field> <field name="lastName" ><display/> </field> </form>

3. Create new screen by name personForm and include this list form in it.

   Code Block

   <screen name="PersonForm">         <section>             <actions>                 <set field="headerItem" value="personForm"/>                 <set field="titleProperty" value="PageTitlePracticePersonForm"/>                 <entity-condition entity-name="Person" list="persons"/>             </actions>             <widgets>                 <decorator-screen name="CommonPracticeDecorator" location="${parameters.mainDecoratorLocation}">                     <decorator-section name="body">                         <label text="Person List" style="h2"/>                         <include-form name="ListPersons" location="component://practice/widget/PracticeForms.xml"></include-form>                     </decorator-section>                 </decorator-screen>                    </widgets>         </section> </screen>

4. Do the needful for showing this screen in controller.xml.
   Now run the application again and observe the difference.
   Till Now you have worked on controller requests mappings, Screen widget, form widget, Decorator, Menus, groovy, ftl.

...