Page History

This tutorial document is targeted at OFBiz beginners. It covers the fundamentals of the OFBiz application development process. The goal of this tutorial is to acquaint a developer with best practices, coding conventions. the control flow and things that the developer needs to know in order to modify OfBizOFBiz. This exercise acts as the "Helloworld" for OFBiz similar to the first Helloworld application used when the "C" programming language was introduced by Kernighan and Richie.

...

Part 5: In this part of the tutorial you will create your custom entity, extend an existing OfBiz OFBiz entity and prepare the XML data for your application.

...

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 references at this moment are Understanding the OFBiz Widget Toolkit and "The Decorator" section in FAQ.
   Add a 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. Anchor
   include-menu include-menu

   Create a menu for this application by creating a file named PracticeMenus.xml in "widget" directory of you component. For this, reference the 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 menu 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. These scripts will be 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. Create a file by name Person.groovy in the "actions" directory to fetch all the records from the entity "Person". At this moment this is really going to be very little code (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 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. The only code that is needed to do 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 entry named "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 :
   

...

1. For this create directory by name "config" in your component directory i.e. "practice".
   Note: -Here remember to create an entry for the config directory in your ofbiz-component.xml file.
   which will be:

   Code Block
   <classpath type="dir" location="config"/>

   That means you have to place the config directory on the classpath to access configuration files.

2. Now create a file by name PracticeUiLabels.xml and create some of the ui labels for practice applicatonapplication. (take reference from ExampleUiLabels.xml). Here remember one thing whenever you make a change in UiLabels then you have to restart the server for having the changes in effect. At first, create only 2 ui UI labels likeas:

   Code Block
   <property key="PracticeApplication"> <value xml:lang="en">This is first practice</value> </property> <property key="PracticeCompanyName"> <value xml:lang="en">OFBiz: Practice</value> </property>

3. Include this UI Label resource in your main decorator screen which you created earlier and use these one or two UI labels which you are having now.
4. Use those 2 UI labels at appropriate places.
   Note: Always search first for any existing UI label in OFBiz and if you don't find it there then only create the new one.
   Now run the application and see the output screen as bellow from:
   Output Screen:
   

...