Page History

...

Step - 1 : Now its the time to create a decorator for the screens in this application so for that create a file by name CommonScreens.xml file in "widget" directory. This file will be containing the common screens which will be used through out the whole application. E.g. A common screen may have header and footer included in it so which ever is the screen will be using it as a decorator will be having those in common. For this you can take reference from CommonScreens.xml file of "example" component.
An important reading at this moment is at Understanding the OFBiz Widget Toolkit another is the FAQ in this you can read the contents under heading  "The Decorator".
Step - 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.

<?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="MainAppBar" title="PracticeApplication" extends="CommonAppBarMenu" extends-resource="component://common/widget/CommonMenus.xml">
        <menu-item name="main" title="Main"><link target="main"/></menu-item>
    </menu>
</menus>

...

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

context.persons = delegator.findList("Person", null, null, null, null, false);

...

Step - 1 : Now add one more menu item to by name "PersonForm" to your PracticeMenus.xml file.
Step - 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). Step - 3 : Create new screen by name personForm and include this list form in it.

<form name="ListPersons" type="list" list-name="persons" list-entry-name="person" target="updatePracticePerson" paginate-target="personForm">
        <auto-fields-service service-name="updatePracticePerson" default-field-type="edit" map-name="person"/>
        <field name="partyId"><hidden/></field>
        <field name="submitButton" title="Update" widget-style="smallSubmit"><submit button-type="button"/></field>
        <field name="deletePracticePerson" title="Delete Person" widget-style="buttontext">
        <hyperlink target="deletePracticePerson?partyId=${person.partyId}" description="Delete"/>
      </field>
</form>

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

<screen name="PersonForm">
        <section>
            <actions>
                <set field="headerItem" value="personForm"/>
                <set field="titleProperty" value="PageTitlePracticePersonForm"/>
                <entity-condition entity-name="Person" list-name="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>
                        <label text="New Person" style="h2"/>
                        <include-form name="CreatePerson" location="component://practice/widget/PracticeForms.xml"></include-form>
                    </decorator-section>
                </decorator-screen>       
            </widgets>
        </section>
</screen>

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

...

Step - 2: Now create a file by name PracticeUiLabels.xml and create some of the ui labels for practice applicaton. (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 labels like

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

...

Here the path is the path of the file where the event is written. it will be practice/script/org/hotwax/practice.
and for java event controller entry will be like:

<request-map uri="createPracticePersonJavaEvent">
    <security https="true" auth="true"/>
    <event type="java" path="org.hotwax.practice.PracticeEvents" invoke="createPracticePersonJavaEvent"/>
    <response name="success" type="view" value="CreatePracPersonJavaEvent"/>
    <response name="error" type="view" value="CreatePracPersonJavaEvent"/>
</request-map>

...

After writting event in Java don't forget to compile it by running "ant" command. At this moment you will need to add build.xml file to your component directory i.e. at hot-deploy/practice/ For the content of build.xml file you can refer "example" component.
Here in build.xml file ensure one thing you are having follwing entry:

<target name="classpath">
    <path id="local.class.path">
        <fileset dir="../../framework/base/lib/j2eespecs" includes="*.jar"/>
    </path>
</target>

...

This will needed for the classes like

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

...

Step - 3 : Do an entry in ofbiz-component.xml file for this seca definition to to be loaded. It will be :

<entity-resource type="eca" reader-name="main" loader="main" location="entitydef/eecas.xml"/>

...