Creating Practice Application (Hello World...)

Sponsored by HotWax Media
Written by: Pranay Pandey with feedback and contributions from Chirag Manocha, Ravindra Mandre, Rob Schapper
Special thanks to Anil Patel and Mridul Pathak for inspiring me to write this tutorial.

Part-6 is introduced by Divesh Dutta and Arun Patidar, Special thanks to Rishi Solanki for the idea of introducing this section.

This tutorial document is meant for OFBiz beginners. It will help learn fundamentals of OFBiz application development process. Aim behind the creation of this tutorial is to acquaint a developer with best practices, coding conventions and the control flow and many more. This practice acts as the "Helloworld" for OFBiz similar as the first Helloworld when the programming "C" language was introduced by Kernighan and Richie.

Important!

This tutorial is intended to be used with the latest SVN revision. It will not work with Release 4.

You can watch OFBiz videos, which are available at Framework Introduction Videos, in parallel with the development of this application.

Part - 1

Note - 1 :- For any additional queries and concerns you can refer Example component. You will always find the code in example component to be the latest code of OFBiz. Take reference whenever you want to see some sample code for the development of this application, this will help you in future developments as well.
Every new feature is first added in the Example component for the references.
Note - 2 : Before starting the development of this application you must read the contents from:
OFBiz Contributors Best Practices , Coding Conventions and Best Practices Guide
Note - 3 : Don't copy any file from other component, as the revision number for the file is also copied. Always create a new file and, if required, then copy the contents of the file." Also be conscious about the unused code as well.
Note - 4 : For searching any of the document the best place is at : OFBiz Documentation Index.
Note - 5 : Right from the beginning, reading the console log must be a habit to make troubleshooting easy and understanding the system well.
Note - 6 : You can find the source code of this application attached with this document that you are going to develop but it is preferred to just take reference from it

Create first basic application by name "practice" :

Step - 1 : Create the sub-directory (folder) in hot-deploy/ and name it "practice"(hot-deploy/practice). The directory name should match the new components name that we are creating.
Note : Remember that all customized development is done at this place only.
Step - 2 : Create the ofbiz-component.xml file on path hot-deploy/practice and place the following content in it (for reference you can check this file in any other component of OFBiz):

<?xml version="1.0" encoding="UTF-8"?>
<ofbiz-component name="practice"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:noNamespaceSchemaLocation="http://ofbiz.apache.org/dtds/ofbiz-component.xsd">
      <resource-loader 	name="main" type="component"/>
    <webapp name="practice"
       title="Practice"
       server="default-server"
       base-permission="OFBTOOLS"
       location="webapp/practice"
       mount-point="/practice"
       app-bar-display="false"/>
</ofbiz-component>

ofbiz-component.xml explained:

1. The ofbiz-component.xml file is responsible for letting OFBiz know where resources are at as well as allowing you to add to the classpath.
2. The 'resource-loader name' can be any string. Here we are setting it as "main". The 'type' tells OFBiz that we will be loading a component.

<resource-loader name="main" type="component"/>

3. In <webapp> tag, we have different attributes and their purpose is as follows:

<webapp name="practice"
       title="Practice"
       server="default-server"
       base-permission="OFBTOOLS"
       location="webapp/practice"
       mount-point="/practice"
       app-bar-display="false"/>

a) name :- defines the name of our web application.
b) title :- This will be the title of the application which will be shown in the top navigation.
c) server :- This will let OFBiz know what server to use
d) base-permission :- This line requires that the user should have the OFBTOOLS permission to be able to use the application. Since the 'admin' user has this permission we do not have to create any new users.
e) location :- This will be the location that is the default base directory for the server
f) mount-point :- This is the URL used to access this resource. in this case it would be localhost:8080/practice
g) app-bar-display :- This will let OFBiz know if we want our component to show up in the main application tabs that are part of the common ofbiz decorator.

Creating the web app:

Step - 1 : Create a "webapp" directory in the practice component (hot-deploy/practice/webapp).
This directory contains all the webapp related files for the component we are creating.
Step - 2 : Create a sub-directory inside the webapp directory by the name of "practice" which is the name of the webapp which you are going to develop (hot-deploy/practice/webapp/practice). A component can have multiple webapps attached to it. e.g. In the "marketing" component there are two webapps "marketing" and "sfa".
The webapp we are creating will follow the J2EE webapp standards.
Step - 3 : Create WEB-INF directory in your webapp (hot-deploy/practice/webapp/practice/WEB-INF).
An OFBiz web application requires two configuration files, a controller.xml and a web.xml. The controller.xml tells OFBiz what to do with various requests from visitors: what actions to take and what pages to render. web.xml tells OFBiz what resources (database and business logic access) are available for this web application and how to handle web-related issues, such as welcome pages, redirects, and error pages.
Step - 4 Create a file named "web.xml"(web.xml follows j2ee webapp specs). Contents of this file can be copied from any of the existing component e.g. /framework/example component. The Important values to change are the <display-name>, the localDispatcherName, the mainDecoratorLocation and the webSiteId.

<context-param>
    <param-name>webSiteId</param-name>
    <param-value>PRACTICE</param-value>
    <description>A unique ID used to look up the WebSite entity to get information about catalogs, etc.</description>
</context-param>
<context-param>
     <param-name>localDispatcherName</param-name>
     <param-value>practice</param-value>
     <description>A unique name used to identify/recognize the local dispatcher for the Service Engine</description>
</context-param>
<context-param>
     <param-name>mainDecoratorLocation</param-name>
     <param-value>component://practice/widget/CommonScreens.xml</param-value>
     <description>The location of the main-decorator screen to use for this webapp; referred to as a context variable in screen def XML files.</description>
</context-param>

For now just put websiteId as "PRACTICE", you will explanation after some time in this tutorial only.

For now put the value: "component://practice/widget/CommonScreens.xml" in for the mainDecoratorLocation and you will see why in a while. This location is used in pointing to the main decorator location in screens like
```
${parameters.mainDecoratorLocation}
```
Which increases the code Independence from changing the path at many places when we need to change the main decorator location. At that time we just need to change the location there only and it will work for all the screens where it has been used. One more advantage of doing this in screens is the purpose of resuability of existing screens which we can use from other components, but it decorate that screen by your decorator only as the same pattern is used at all the places and in all the components to show the mainDecoratorLocation. Concentrate on this when you add decorators in your screens in not too distant future with the development of this application.
Step - 5 Create a file named "controller.xml" (used by ofbiz webapp controller) This file will be small and simple at first but will grow as we add functionality later on. For now insert the following code:
```
<?xml version="1.0" encoding="UTF-8"?>
<site-conf xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:noNamespaceSchemaLocation="http://ofbiz.apache.org/dtds/site-conf.xsd">
       <include location="component://common/webcommon/WEB-INF/common-controller.xml"/>
       <description>Practice Component Site Configuration File</description>
       <owner>Copyright 2001-2009 The Apache Software Foundation</owner>
       <handler name="screen" type="view" class="org.ofbiz.widget.screen.ScreenWidgetViewHandler"/>
       
       <request-map uri="main">
           <security https="false" auth="false"/>
           <response name="success" type="view" value="main"/>
       </request-map>
       
       
       <view-map name="main" type="screen" page="component://practice/widget/PracticeScreens.xml#main"/>
       
</site-conf>
```
Step - 6 : Move up one level and create a new directory named 'error'(hot-deploy/practice/webapp/practice/error).
Step - 6.a : Create a file error.jsp inside the "error" directory. Contents of this file can be copied from any of the existing component e.g. example component.
The location of your error page will be specified in the beginning of your controller.xml file like <errorpage>/error/error.jsp</errorpage> . You will need to make or copy over a /webapp/practice/error/error.jsp page to show an error message to the user.
Step - 7 : Create a sub-directory inside your component directory "practice" named "widget"(hot-deploy/practice/widget). This directory will contain your forms, menus, and screens which will be created for UI.
Step - 8 : Create a file inside the directory "widget" named "PracticeScreens.xml". Contents of this file can be copied from any existing component e.g. example component.
As now onwards you will be able to create screens views so an important reading at this place will be Best Practices Guide . On this page there links to following:
HTML and CSS Best Practices
Managing Your Source Differences
Methodology Recommendations

User Interface Layout Best Practices
All these readings will be really of help.
Very first screen will be like :

<?xml version="1.0" encoding="UTF-8"?>
<screens xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
     xsi:noNamespaceSchemaLocation="http://ofbiz.apache.org/dtds/widget-screen.xsd">
    <screen name="main">
        <section>
            <widgets>
                <label text="This is first practice"/>
            </widgets>
        </section>
    </screen>
</screens>

Step - 9 : Now that we have the basic elements in place let's review the basic flow no matter how large or complex your component gets. First, a request will be made by a browser to see a specific resource. Take for example the request: "localhost:8080/practice/control/main"

When OFBiz sees this request it will look at the /practice section first. This is because in our ofbiz-component.xml file we said our webapps mount point would be /practice. Now OFBiz knows that our practice component will handle the rest of the request.
OFBiz will then look at our controller.xml file. Inside our controller.xml file we have request-maps and view-maps. If it finds a request-map with the name 'main' it will use the associated view-map, as follows. The request-map can either specify a view, or as we will see later an event or a service. If it specifies a view it will look further down in the controller.xml file and see if there is a view-map with the name specified by the value tag in the request-map.
For now we will keep it simple and assume that all the views go to a type=screen. If this is the case then the page tag will specify a path to a screen definition file as well as a screen name to display after the "#" sign.

Step - 10 : Now its the time to run you first practice application!

Start the server by typing the following at the command line : java -Xmx256M -jar ofbiz.jar (the -Xmx256M command just ensures that the program has enough memory) Then, hit the url http://localhost:8080/practice/control/main in your browser. Your browser should show "This is first practice" as seen below.

Output Screen :

Step - 11 : Create a file in the webapp directory "practice" named index.jsp (Contents of this file can be copied from the "example" component). This file is responsible for redirecting the response to control/main if you give a url such as http://localhost:8080/practice/. If you give a url such as http://localhost:8080/practice/unknown/requestit will be redirected to the redirectPath specified in web.xml. In that case, ContextFilter will filter out the request and use the redirect path to redirect the request.

Part - 2

Doing some advancements :

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

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

Include this menus file in your CommonPracticeDecorator as follows:

<screen name="CommonPracticeDecorator">
        <section>
            <widgets>
                <include-menu location="component://practice/widget/PracticeMenus.xml" name="MainAppBar"/>
                <decorator-section-include name="body"/>
            </widgets>
        </section>
    </screen>

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

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

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

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

    <screen name="person">
        <section>
            <actions>
                <script location="component://practice/webapp/practice/WEB-INF/actions/Person.groovy"/>
            </actions>
            <widgets>
                <decorator-screen name="CommonPracticeDecorator" location="${parameters.mainDecoratorLocation}">
                    <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>

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

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 :

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

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

 <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="display" map-name="person"/>
</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="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>

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.

Create main Decorator for decorating this application:

Step - 1 : Create screen by name "main-decorator" in CommonScreens.xml file.(Take reference from CommonScreens.xml file of Example component.)

<screen name="main-decorator">
        <section>
            <actions>
                <property-map resource="CommonUiLabels" map-name="uiLabelMap" global="true"/>
                <property-map resource="PracticeUiLabels" map-name="uiLabelMap" global="true"/>
                <set field="layoutSettings.companyName" from-field="uiLabelMap.PracticeCompanyName" global="true"/>
                <set field="activeApp" value="practice" global="true"/>
                <set field="applicationMenuName" value="PracticeAppBar" global="true"/>
                <set field="applicationMenuLocation" value="component://practice/widget/PracticeMenus.xml" global="true"/>
            </actions>
            <widgets>
                <include-screen name="GlobalDecorator" location="component://common/widget/CommonScreens.xml"/>
            </widgets>
        </section>
</screen>

Step - 2 : Now include this decorator in CommonPracticeDecorator screen which you are already having.
Now run it again and see the difference.

Now its the time to show practice application in the app bar :

Step - 1 : For this just make app-bar-display="true" in ofbiz-component.xml file.
Restart the server then run it again you will find practice application in app bar.

Create UI Labels:

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

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

That means you have to place the config directory on the classpath to access configuration files.
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>

Step - 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.Step - 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 new one.
Now run the application and see the output screen as bellow from :
Output Screen:

Now its time to make this practice application secure by checking authentication (user login):

Step - 1 : Take reference from ExampleMenus.xml file for having login and logout options in your menu.
Targets for these options will be available from "component://common/webcommon/WEB-INF/common-controller.xml", which we have to include in our controller.xml.
or you can do these entries in your controller.xml file under

<!- Request Mappings ->
<!-- Security Mappings -->
 <request-map uri="checkLogin" edit="false">
    <description>Verify a user is logged in.</description>
        <security https="true" auth="false"/>
        <event type="java" path="org.ofbiz.webapp.control.LoginWorker" invoke="checkLogin" />
        <response name="success" type="view" value="main"/>
        <response name="error" type="view" value="login"/>
    </request-map>
    <request-map uri="login">
        <security https="true" auth="false"/>
        <event type="java" path="org.ofbiz.webapp.control.LoginWorker" invoke="login"/>
        <response name="success" type="view" value="main"/>
        <response name="error" type="view" value="login"/>
    </request-map>
    <request-map uri="logout">
        <security https="true" auth="true"/>
        <event type="java" path="org.ofbiz.webapp.control.LoginWorker" invoke="logout"/>
        <response name="success" type="request" value="checkLogin"/>
        <response name="error" type="view" value="main"/>
    </request-map>

These requests are needed to add in your controller only when you have not included any of the other component controller which consist of these requests. So if you have already included common-controller.xml file then you don't need to explicitly do these entries in your controller.
and the same view we have in place can be used for which we have entry in common-controller.xml file we can also have our own:

<view-map name="login" type="screen" page="component://common/widget/CommonScreens.xml#login"/>

Step - 2 : Make changes in requests in controller.xml file make auth="true" means now these requests needs authentication.
This is first security level which you have implemented. you request should look like :

<request-map uri="main">
    <security https="true" auth="true"/>
    <response name="success" type="view" value="main"/>
    <response name="error" type="view" value="main"/>
</request-map>

Now run your application and observe the difference. you can login by user name : admin and pwd: ofbizHere we should understand why we had given the permission "OFBTOOLS" in base-permission in ofbiz-component.xml file. To understand this please read following carefully and perform steps as mentioned:
Confirm that user 'admin' has the 'OFBTOOLS' permission.
Step : 1 - Login into partymanager to confirm that the user admin has the required permission https://127.0.0.1:8443/partymgr/control/main
Step : 2 - Once your logged in search for the user by typing 'admin' in the User Login field and then clicking the Lookup Party button.
Step : 3 - This does a wild char* search and you should see multiple users returned.Click the 'Details' button for the admin user.
Note : Important point to note here is that the person 'Mr. THE PRIVILEGED ADMINISTRATOR' has a partyid admin has multiple logins as listed in the
User Name(s) form.
Step : 4 - We interested in the admin user login so click on the 'Security Groups' button and confirm that the use 'admin' is part of the 'FULLADMIN' group. The Groups that the user belongs to is shown in the bottom list form Drill down on the FULLADMIN.
Step : 5 - Click on the Permissions tab. This tab shows all the permissions for the FULLADMIN security group. Navigate between the permissions till you find the OFBTOOLS permissions.
'OFBTOOLS_VIEW Permission to access the Stock OFBiz Manager Applications.' This confirms that the userlogin 'admin' has the permission 'OFBTOOLS'
Step : 6 - Take a moment to review the entity model as it relates to users and permissions. The arrow represents the many side of the relationship.An really important reading at this moment is at : OFBiz Security

Part - 3

Writing CRUD operations:

Create, Update and Delete operations for an entity will be done by services which we will be writing in minilang.
At first approach we will write our own services for performing these operations for making a better understanding with it.
Onwards we will be doing this by calling already implemented services.
For doing so we will take the entities from Party model which are:
--Party
--Person
A person is a party so for the creation of a person first a party needs to be created with partyTypeId="PERSON".
So there can be two ways to do that:
1. Create service for the creation of a party with type Person.
2. Create a party first in the service which will be creating person.

For writing services following steps must be performed:

Step - 1: Create directory by name "servicedef" in component directory "practice". This directory will contain all the service definition files e.g. services.xml, secas.xml.
Note : If it is a service which is written in Java then it will be placed in "src" directory and if it is a service which is written in minilang then it will be placed in script directory. e.g. for java applications/party/src/org/ofbiz/party/party/PartyServices.java and for minilang applications/party/script/org/ofbiz/party/party/PartyInvitationServices.xml. Respective class path and file path will be mentioned in the service definition.
*Step - 2 :*In controller you have to create an entry for the request for the execution of a service and set the response like

<request-map uri="createPracticePerson">
    <security https="true" auth="true"/>
    <event type="service" invoke="createPracticePerson"/>
    <response name="success" type="view" value="PersonForm"/>
</request-map>

Step - 3: Now all the services which you have written needs to be loaded when server starts so you need to do an entry for service definition in ofbiz-component.xml file which will be like

<service-resource type="model" loader="main" location="servicedef/services.xml"/>

So whenever you make any change in any service definition then you must restart the server to have changes in effect.

Writing CRUD operations for Party entity:

First we will be writing services for Party then while writing services for creating Person we will be calling the service for party.
Step - 1 :Create a file by name "services.xml" in servicedef directory.
Step - 2 : Define services for CRUD operations for Party entity. Name of services will be createPracticeParty, updatePracticeParty, deletePracticeParty and specify the correct location to the file where these services will be implemented like /framework/example/script/org/ofbiz/example/example/ExampleServices.xml.
Step - 3 : Create directory structure and PracticeServices.xml file in your component directory for giving the implementation of these services.
(For implementation take reference from services.xml and ExampleServices.xml files of Example component)
Note : Do not use the <override> tag as it is introduced later in the tutorial.
From this place if you want to run these services then you can run them by webtools--> Run Service . By this place you can test your services.
Note: At this place you must read http://markmail.org/message/dj4wvtm4u2nxoz3r. This feature has been recently added against the traditional approach of writing CRUD operations for an entity.
This new feature enables you to just define the services by mentioning the operation you want to perform.Basically just set the engine attribute to "entity-auto" and the invoke attribute to "create", "update", or "delete".
like you can take a look in the following code from services.xml of example component:

<service name="createExample" default-entity-name="Example" engine="entity-auto" invoke="create" auth="true">
    <description>Create a Example</description>
    <permission-service service-name="exampleGenericPermission" main-action="CREATE"/>
    <auto-attributes include="pk" mode="OUT" optional="false"/>
    <auto-attributes include="nonpk" mode="IN" optional="true"/>
    <override name="exampleTypeId" optional="false"/>
    <override name="statusId" optional="false"/>
    <override name="exampleName" optional="false"/>
</service>

engine="entity-auto" invoke="create" play the role for creating the records for the default-entity "Example."
Here for practice you may go by following further steps those steps will help you in understanding the concept then onwards you can practice the pattern given above in your code as its the best practice for these kind of simple operations in OFBiz.

Writing CRUD operations for Person entity:

- Here for the creation of record for person entity we will need to have the partyId for that so we will first call the service createPracticeParty then after getting the partyId we will create the record for person.
- Here we will be adding one add form in the bottom of the list form which we have for the person entity. This form will be calling the services for creating a record for person.
Step - 1 : Create the add form for the creation of person and add this in the same screen for person form.

<form name="CreatePerson" type="single" target="createPracticePerson">
      <auto-fields-service service-name="createPracticePerson"/>
      <field name="submitButton" title="Create" widget-style="smallSubmit"><submit button-type="button"/></field>
</form>

Step - 2 : Write CrUD operations for person entity.this is a code for createPracticePerson in services.xml

<service name="createPracticePerson" default-entity-name="Person" engine="simple"
          location="component://practice/script/org/hotwax/practice/PracticeServices.xml" invoke="createPracticePerson" auth="true">
     <description>Create a Person</description>
     <auto-attributes include="pk" mode="OUT" optional="false"/>
     <attribute name="salutation" mode="IN" type="String" optional="true"/>
     <attribute name="firstName" mode="IN" type="String" optional="false"/>
     <attribute name="middleName" mode="IN" type="String" optional="true"/>
     <attribute name="lastName" mode="IN" type="String" optional="false"/>
     <attribute name="suffix" mode="IN" type="String" optional="true"/>
</service>

similar for Update and Delete
Step - 3: Now convert the List form with editable field(Ref. ListExampleItems from ExampleForms.xml) and add Update and delete option with it and also in the same screen there is add form also. As shown bellow

<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 - 4 : Create controller entries for these services which are going to be called by this form.
Now run the application and see the output screen as bellow:
Output Screen:

Writing Events:

Events can be written in Java and minilang both. Now the next development which you are going to do will be writting these events.
Events are used for the validation and conversion using Simple Map Processor. The Simple Map Processor Mini-Language performs two primary tasks: validation and conversion. It does this in a context of moving values from one Map to another. The input map will commonly contain Strings, but can contain other object types like Integer, Long, Float, Double, java.sql.Date, Time, and Timestamp.
Before moving any further an important link to go through is : http://docs.ofbiz.org/display/OFBIZ/Mini-Language+Guide#Mini-LanguageGuide-smapFor making an understanding with it implementation will be done by performing following steps:
Step - 1 : For this create another tab in your practice application menu bar for this by Name "Events".
Step - 2 : Now create another menu with two menu item in PracticeMenus.xml file by name "EventMenu". This menu will be having 2 menu Item one will be by name "EventMinilang" and another by name "EventJava". One will be used to show the form which we will be calling an event which will be in minilang and other will be used to call java event.
Step - 3 : Simply show form on the request of both which will be for creating a new person. Both the forms will be different for calling different events as target in them.

<menu name="EventMenu" default-menu-item-name="eventMinilang" default-selected-style="selected"
         type="simple" menu-container-style="button-bar button-style-1" selected-menuitem-context-field-name="headerItem">
      <menu-item name="eventMinilang" title="Create Person --- Event MiniLang">
           <link target="createPracticePersonEventM"/>
      </menu-item>
      <menu-item name="eventJava" title="Create Person --- Event Java">
           <link target="createPracticePersonEventJ"/>
      </menu-item>   
</menu>

Step - 4 : Show labels in screens above the form like "New Person - Simple Event" and "New Person - Java Event" so that it will be easy to identify the purpose of that form.
Step - 5 : Now set event in target of the forms and create request mappings in controller for the event.
Here important thing to note is in case of simple event controller entry will be like :

<request-map uri="createPracticePersonSimpleEvent">
    <security https="true" auth="true"/>
    <event type="simple" path="component://practice/script/org/hotwax/practice/PracticeEvents.xml" invoke="createPracticePersonSimpleEvent"/>
    <response name="success" type="view" value="CreatePracPersonSimpleEvent"/>
    <response name="error" type="view" value="CreatePracPersonSimpleEvent"/>
</request-map>

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>

Here the path is the classpath in which this event is defined.
The file name will be PracticeEvents.java and will be created at practice/src/org/hotwax/practice.

Simple Event

Step - 6 : Now in the script/org/hotwax/practice/ create one file by name PracticeEvents.xml.
Step - 7 : Write the event in PracticeEvents.xml file by name createPracticePersonSimpleEvent.(For reference you can go through the event "createUser" from UserEvents.xml from party component)
The event which you will be writing should be the simple one as you just have to process 5 fields coming from the form which are salutation, firstName, middleName, lastName, suffix. and then you have to call the createPracticePerson service.
For processing the field you will be using simple map processor as you have read earlier.
Follow these steps for writing the event:
7.a : Process fields coming from the form like:

<call-map-processor in-map-name="parameters" out-map-name="createPersonContext">
    <simple-map-processor name="createPersonMap">
        <process field="firstName">
            <copy/>
            <not-empty>
                <fail-property property="PracticeFirstNameMissingError" resource="PracticeUiLabels"/>
            </not-empty>&nbsp;&nbsp;&nbsp;
        </process>
    </simple-map-processor>
</call-map-processor>
<check-errors/>

7.b : Create some Ui labels for showing them in fail-property like PracticeFirstNameMissingError.
7.c : Now call service createPracticePerson service by passing out map which is obtained after processing fields as a in map to the service.
OutPut Screen :

Part - 4

Java Event:

Here the java event which you will be writing will be fairly simple. For reference you can check any of the *Events.java file.
Step - 1 : The contents will be :

public static String createPracticePersonJavaEvent(HttpServletRequest request, HttpServletResponse response){
    LocalDispatcher dispatcher = (LocalDispatcher) request.getAttribute("dispatcher");
    GenericDelegator delegator = (GenericDelegator) request.getAttribute("delegator");
}

Step - 2 : Now you have to process the fields comming from the form like

String salutation = (String) request.getParameter("salutation");
String firstName = (String) request.getParameter("firstName");

Step - 3 : Now prepare a map for the values which you have to pass to the service which you will call "createPracticePerson" . Like

Map createPersonCtx = UtilMisc.toMap("salutation", salutation, "firstName", firstName);

Step - 4 : Then at the end just call the service "createPracticePerson" like

try{
    Map person = dispatcher.runSync("createPracticePerson", createPersonCtx);
 }catch (GenericServiceException e){
     Debug.logError(e.toString(), module);
     return "error";
 }
return "success";

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;

So create a file by name build.xml and then compile it. It will create a build directory in your component directory which will be containing all *.jar and class files after compilation. For the content of build.xml file you can refere example component.
For running the simple event don't forget to make an entry for <classpath type="dir" location="script"/> in ofbiz-component.xml file.
For running the java event make an entry <classpath type="jar" location="build/lib/*"/> in ofbiz-component.xml file.

ECA(Event Condition Action):

ECA : It is a combinition of 3 things: an event, conditions per event, and actions per event. It is a rule used to trigger an action upon the execution of an event when certain conditions are met. When a service is called for example a lookup is performed to see if any ECAs are defined for this event. Events include before authentication, before IN parameter validation, before actual service invocation, before OUT parameter validation, before transaction commit, or before the service returns. Next, each condition in the ECA definition is evaluated and if all come back as true, each action is performed. An action is just a service which must be defined to work with the parameters already in the service's context. There is no limit to the number of conditions or actions each ECA may define.
For more details on this visit : Service Engine Guide
1. SECA (Service Event Condition Action) : This is used when we want to trigger another service(action) on the execution of a service when certain conditions are met.
2. EECA (Entity Event Condition Action) : This is used when we want to trigger a service on the creation of a record for an entity when certain conditions are met.
For the implementation of ECA again we will be following the same approach for screens, menus by following steps:
Step - 1 : Add one more application menu named "ECA" to the practice application's menu bar.(Do the needful entries for target in controller.xml)
Step - 2 : Now create another menu called "EcaMenu" in the PracticeMenus.xml file. This menu will have two menu items named "seca" and "eeca". For each of these, two screens will be needed that use the "CreatePerson" form which we created above. (in personForm screen)

<menu name="EcaMenu" default-menu-item-name="seca" default-selected-style="selected"
       type="simple" menu-container-style="button-bar button-style-2" selected-menuitem-context-field-name="headerItem">
      <menu-item name="seca" title="Create Person --- SECA">
          <link target="seca"/>
      </menu-item>
      <menu-item name="eeca" title="Create Person --- EECA">
          <link target="eeca"/>
      </menu-item>   
</menu>

SECA :

Step - 1 : For this you have to write another service by name "createPartyRoleVisitor", which will be setting the role for the party which will be created by "createPracticePerson" service.
The service "createPartyRoleVisitor" will be triggered by the seca rule which you will define for service "createPracticePerson".
In the new service involved entity will by "PartyRole". In "createPartyRoleVisitor" just call service "createPartyRole" which is already implemented.
Step - 2 : Now you have to create a file by name "secas.xml" in "servicedef" directory. Seca definition will come here. (Take reference from secas.xml of "party" component). This will be

<eca service="createPracticePerson" event="commit">
    <condition field-name="partyId" operator="is-not-empty"/>
    <action service="createPartyRoleVisitor" mode="sync"/>
</eca>

Step - 3 : Do an entry in ofbiz-component.xml file for this seca definition to to be loaded. It will be :
<service-resource type="eca" loader="main" location="servicedef/secas.xml"/>
Don't forget to restart the server after doing this entry.
Now run the service through form and check the records in PartyRole entity. You will find a role is set for the party created because synchrounously you have triggered another service by seca rule for setting up the role for the party created.

EECA :

Step - 1 : For this you have to write another service by name "createPartyRoleCustomer", which will be setting the role for the party which will be created means when a record for the entity "Party" will be created this service will be triggered for setting a role customer for that party. The service "createPartyRoleCustomer" will be similar to "createPartyRoleVisitor".
Step - 2 : Now you have to create a file by name "eecas.xml" in "entitydef" directory, which will be in your component directory "practice". Eeca definition will come here. (Take reference from eecas.xml of "accounting" component). This will be :

<!-- To create party role whenever a party is created -->
<eca entity="Party" operation="create" event="return">
    <condition field-name="partyId" operator="is-not-empty"/>
    <action service="createPartyRoleCustomer" mode="sync"/>
</eca>

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

Don't forget to restart the server after doing this entry.
Now run the service through form and check the records in PartyRole entity. You will find a role is set for the party created because synchrounously you have triggered a service by eeca rule for setting up the role for the party created.
The main difference here is that you are triggering a service when an operation is performed on the entity. In our case it is "create".
Note : Here you have created a saparate menu to understand the concept separately. As you written seca for the service "createPracticePerson", so where ever in your practice application you will be calling this service that seca will trigger "createPartyRoleVisitor" and on the other hand when a party will be created "createPartyRoleCustomer" will be triggered.
Output Screen :

Group Service:

Group services are used to call more then one services as a group. Service groups are a set of services which should run when calling the initial service. You define a service using the group service engine, and include all the parameters/attributes needed for all the services in the group. The location attribute is not needed for groupservices, the invoke attribute defines the name of the group to run. When this service is invoked the group is called and the services defined in the group are called as defined.
For mor details on this visit :http://docs.ofbiz.org/display/OFBTECH/Service+Engine+Guide
For the implementation of Group service follow these steps:
Step - 1 : Add another menu item to applicatoin menu bar by name "Group Service".(Do the needful entries for target in controller.xml)
Step - 2 : Now create new screen and a form for creation of the person because the target for the form will be the group service which we will be defining.
Note : Now the time is to define the group service. We will be defining the group service for the services which we have implemented for this practice application.
Step - 3 : You will be defining the service group in services.xml file.(Take reference from services.xml of party component).
Just write one more service which will be setting the role "CLIENT" for the party which will be created by createPracticePerson Service.
Create a group service by name "partyGroup" like :

<!-- Group service -->
<service name="partyGroup" engine="group" auth="true">
    <description>Creates a party, person and party role Client</description>
    <group>
        <invoke name="createPracticePerson" result-to-context="true"/>
        <invoke name="createPartyRoleClient"/>
    </group>
</service>

Don't forget to restart the server before testing it.

Interface:

The interface service engine has been implemented to help with defining services which share a number of the same parameters. An interface service cannot be invoked, but rather is a defined service which other services inherit from. Each interface service will be defined using the interface engine.
For more details on this visit : http://docs.ofbiz.org/display/OFBTECH/Service+Engine+Guide
For implemeting the interface follow these steps:
Step - 1 : Add another menu item to applicatoin menu bar by name "Interface".(Do the needful entries for target in controller.xml)
Step - 2 : Create new screen, form and service for creating a person. Here service will implement the interface. (For creating interface take reference from services_fixedasset.xml of accounting component) it will be like :

<!-- Peson Interface -->
<service name="createPersonInterface" engine="interface" location="" invoke="">
    <attribute name="firstName" mode="IN" type="String" optional="false"/>
    <attribute name="middleName" mode="IN" type="String" optional="true"/>
    <attribute name="lastName" mode="IN" type="String" optional="false"/>
    <attribute name="suffix" mode="IN" type="String" optional="true"/>
</service>
<service name="createPracticePersonInterfaceService" engine="simple"
        location="org/hotwax/practice/PracticeServices.xml" invoke="createPracticePersonInterfaceService" auth="false">
    <description>Creates a new Person</description>
    <implements service="createPersonInterface"/>
    <attribute name="partyId" mode="OUT" type="String" optional="false"/>
    <override name="suffix" optional="false"/>
</service>

Here we are implementing an interface and overriding the behaviour of the attribute "suffix", which will have effect when this service will be in action.
Implementation of service createPracticePersonInterfaceService will be the same as createPracticePerson.
Don't forget to restart the server after this implementation.

Part - 5

Creating new entity:

For the creation of new entity you can again take a referecne from example component for this you can have a look in entitymodel.xml file of example component. You can create new entities by following these steps:
Step - 1 : Create a new subdirectory by name entitydef in hot-deploy/practice/.
Step - 2 : Create new file by name entitymodel.xml. This file will contain the defintions of entities which you want to define.
Step - 3 : For loading the defintion you need to do an entry in your ofbiz-component.xml file like:

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

That implies that when ever you do a change you need to restart the server to have those changes in effect.
At this place an important reading is at http://docs.ofbiz.org/display/OFBTECH/General+Entity+Overview.
You will rarely find this way to define new entity because you are already having entities there in OFBiz already defined which will be useful for the conduction of your business process. Though you may feel at some place to add more fields to an existing entity so how can you do that? The next step will show you the way how you can extend an entity for your customized needs.
Earlier we used to have one more file in same directory by name entitygroup.xml which not needed any more because code is checked in to the trunk for this.

Extending an existing entity:

Yes you can extend an existing entity for adding more fields to for your custom needs. This can be done in following way:
Step - 1 : For extending an entity you can do in this manner in the entitydef/entitymodel.xml file of your custom application.

<extend-entity entity-name="">
    <field name="" type=""/>
</extend-entity>

As an example of this you can refer entitymodel.xml file from party component.
This is the simplest form it can be more complex. This will add up one more field to the entity you already have. Now it depends which field you want for your custom needs. Here you can also defined relation of this field with other entities you want. But before doing this you should search extesively may be you will be adding a field for a purpose and there is already a field which will serve the purpose, so be concisous about this. Also go for a extensive study of data model then do this.
For entity engine configuration dont forget to read : Entity Engine Configuration Guide

Preparing Data For Custom Application:

For preparing data for your practice application following steps can be performed:
Step - 1 : Create new folder in practice by name "data" and create a file in it by name PracticeData.xml.
Step - 2 : Now we are going to create the data for a user for this we have to prepare it in a specific order for a party like :

<?xml version="1.0" encoding="UTF-8"?>
<entity-engine-xml>
    <Party partyId="DemoUser" partyTypeId="PERSON"/>
    <Person partyId="DemoUser" firstName="Practice" lastName="Person"/>
    <PartyRole partyId="DemoUser" roleTypeId="VISITOR"/>
    <ContactMech contactMechId="5000" contactMechTypeId="EMAIL_ADDRESS" infoString="practice.person@gmail.com"/>
    <PartyContactMech partyId="DemoUser" contactMechId="5000" fromDate="2001-05-13 00:00:00.000" allowSolicitation="Y"/>
    <PartyContactMechPurpose partyId="DemoUser" contactMechId="5000" contactMechPurposeTypeId="PRIMARY_EMAIL" fromDate="2001-05-13 00:00:00.000"/>
</entity-engine-xml>

The purpose is to create a record for a party who is a person with a role of VISITOR and creating an email address which is a primary email address for that party.
Step - 3 : Now also add website data here which is as follows:

<WebSite webSiteId="PRACTICE" siteName="Practice Application" visualThemeSetId="BACKOFFICE"/>

This data is used for theme setup of a specific application and logged in user can change his theme for the back office application.

Step - 4: Now we have to an entry in ofbiz-component.xml file :

<entity-resource type="data" reader-name="demo" loader="main" location="data/PracticeData.xml"/>

After doing this entry when you will run the command ant run-install to load demo data then the data from this file will be loaded as demo data and once you start the server you can see this record added for person by going to Person Form in practice application or you can prefer to go to https://localhost:8443/webtools/control/entitymaint and find each entity and check the records have gone in the database or not.

Part -6

Important!

This part of the tutorial doesn't work with the latest version of Ofbiz. You can find informations about Ajax Request with this version in the Example component (tab Ajax Examples).

Ajaxify Your Request:

What is AJAX: AJAX stands for Asynchronous JavaScript and XML. It is used for allowing the client side of an application to communitcate with the server side of the application. Before AJAX, there was no way for the client side of a web application to communicate directly with the server. Instead, you would have to use page loads. With AJAX, the client and server can communicate freely with one another without page reloads.

In OFBiz we use prototype framework. Prototype is a Open Source JavaScript Framework that aims to ease development of dynamic web applications. Here is the official link: prototypejs

Now lets start with Coding part:

Step - 1 : Make entry of /js in allowedPaths of web.xml. So now allowed paths parameter will look like given below:

This will allow .js files which are under /js folder to load.
Step -7 will make you understand more, why we are doing this entry here.

<init-param>
    <param-name>allowedPaths</param-name>
    <param-value>/control:/select:/index.html:/index.jsp:/default.html:/default.jsp:/images:/includes/maincss.css:/js</param-value>
</init-param>

Here you must not miss that this will require a server restart.

Step - 2 : Include validation.js and prototype.js in main-decorator in practice/widget/CommonScreens.xml. For this you have to write below given code in <actions> block of main-decorator.

We are including these library files in main-decorator screen, because all other screens uses main-decorator and thus both the libraries will be available in other screens as well.

<set field="layoutSettings.javaScripts[+0]" value="/images/prototypejs/validation.js" global="true"/>
<set field="layoutSettings.javaScripts[]" value="/images/prototypejs/prototype.js" global="true"/>

validation.js and prototype.js are located at framework/images/webapp/images/prototypejs/

Step - 3 : Add another menu item to application menu bar by name "Ajax". Below given is the controller entry:

<!-- Request Mapping -->

<request-map uri="Ajax">
    <security https="true" auth="true"/>
    <response name="success" type="view" value="PersonFormByAjax"/>
</request-map>

<!-- View Mapping -->

<view-map name="PersonFormByAjax" type="screen" page="component://practice/widget/PracticeScreens.xml#PersonFormByAjax"/>

Step - 4 : Create new screen called "PersonFormByAjax" in PracticeScreens.xml. Example code is given below:

PracticeApp.js is the custom js file where we will be writing our custom js code for ajaxifying our request.
person.ftl is the same file we created above.
CreatePerson.ftl is a new file which you need to create now. This file contains form for creating new person, which is same as we created in step-1 of Part-3 under "Writing CrUD operations for Person entity" section. Only difference is that this form is written in freemarker.

<screen name="PersonFormByAjax">
    <section>
        <actions>
            <set field="headerItem" value="ajax"/>
            <set field="titleProperty" value="PageTitlePracticePersonForm"/>
            <property-map resource="PartyUiLabels" map-name="uiLabelMap" global="true"/>
            <set field="layoutSettings.javaScripts[]" value="/practice/js/PracticeApp.js" global="true"/>
            <entity-condition entity-name="Person" list="persons"/>
        </actions>
        <widgets>
            <decorator-screen name="CommonPracticeDecorator" location="${parameters.mainDecoratorLocation}">
                <decorator-section name="body">
                    <platform-specific>
                        <html>
                            <html-template location="component://practice/webapp/practice/person.ftl"/>
                            <html-template location="component://practice/webapp/practice/CreatePerson.ftl"/>
                        </html>
                    </platform-specific>
                </decorator-section>
            </decorator-screen>
        </widgets>
    </section>
</screen>

Step - 5 : Create new file CreatePerson.ftl explained above in practice/webapp/practice/ and place below given code:

Also notice ids used in this .ftl file.
We will be using these ids in our js file.

<h2>${uiLabelMap.PartyCreateNewPerson}</h2>
<div id="createPersonError" style="display:none"></div>
<form method="post" id="createPersonForm" action="<@ofbizUrl>createPracticePersonByAjax</@ofbizUrl>">
  <fieldset>
    <div>
      <label>${uiLabelMap.FormFieldTitle_salutation}</label>
      <input type="text" name="salutation" value=""/>
    </div>
    <div>
      <label>${uiLabelMap.PartyFirstName}*</label>
      <input type="text" name="firstName"  value=""/>
    </div>
    <div>
      <label>${uiLabelMap.PartyMiddleName}</label>
      <input type="text" name="middleName" value=""/>
    </div>
    <div>
      <label>${uiLabelMap.PartyLastName}*</label>
      <input type="text" name="lastName" class="required" value=""/>
    </div>
    <div>
      <label>${uiLabelMap.PartySuffix}</label>
      <input type="text" name="suffix" value=""/>
    </div>
    <div>
      <a id="createPerson" href="javascript:void(0);" class="buttontext">${uiLabelMap.CommonCreate}</a>
    </div>
  </fieldset>
</form>

Click on "Ajax" menu to observe the PersonFormByAjax screen.

Step - 6 : Add new div in person.ftl file. Now person.ftl will look like:

Here again div's id will be used in PracticeApp.js file

<#if persons?has_content>
  <div id="personList">
    <h2>Some of the people who visited our site are:</h2>
    <br>
    <ul>
      <#list persons as person>
        <li>${person.firstName!} ${person.lastName!}</li>
      </#list>
    </ul>
  </div>
</#if>

Step - 7 : Now create PracticeApp.js in practice/webapp/practice/js/ and place the below given code :

Here on first line, Event.observe(element, eventName, handler), registers an event handler on a DOM element.
- Argument 1: The DOM element you want to observe; as always in Prototype, this can be either an actual DOM reference, or the ID string for the element.
- Argument 2: The standardized event name, as per the DOM level supported by your browser. This can be as simple as 'click'.
- Argument 3: The handler function. This can be an anonymous function you create on-the-fly, a vanilla function.
So here on window load, on-the-fly function is called. where form validations and request calling is done.
Important thing to notice is why we write other observation code on window load event, and answer is here we keep restriction, that on window load, all the elements of the form will get activated and then we put observation on form's elements.
In CreatePerson.ftl you see that class="required" are used on forms's input element, You then activate validation by passing the form or form's id attribute as done in second line. More on this can be learned from learn validation
On third line, observer is on "createPerson" which is id of anchor tag (button) in CreatePerson.ftl,
so that when end user clicks "create button" , the instance method, validate(), will return true or false. This will activate client side validation.
And then createPerson function is called which is out of the scope of window load observer.
In request variable, createPersonForm's action is stored. $('createPersonForm') is again a id of form in CreatePerson.ftl.
new Ajax.Request(url) : Initiates and processes an AJAX request.
The only proper way to create a requester is through the new operator. As soon as the object is created, it initiates the request, then goes on processing it throughout its life-cyle.
Request life cycle:
- Created
- Initialized
- Request sent
- Response being received (can occur many times, as packets come in)
- Response received, request complete
So here createPracticePersonByAjax request will be called from controller.xml, which will call createPracticePerson service and do needful entries.
Form's elements are serialized and passed as a parameter in ajax request. This is represented in last line of createPerson function.
Now if response is successful and server has not returned an error, "new Ajax.Updater($('personList'), 'UpdatedPersonList'" will be executed.
Ajax updater, performs an AJAX request and updates a container's contents based on the response text. To get more on this please read : ajax updater
So "personList" is the id of div in person.ftl, which will be replaced by response of UpdatedPersonList request.

Event.observe(window, 'load', function() {
    var validateForm = new Validation('createPersonForm', {immediate: true, onSubmit: false});
    Event.observe('createPerson', 'click', function() {
       if (validateForm.validate()) {
           createPerson();
       }
    });
});

function createPerson() {
    var request = $('createPersonForm').action;
    new Ajax.Request(request, {
        asynchronous: true,
        onComplete: function(transport) {
            var data = transport.responseText.evalJSON(true);
            var serverError = getServerError(data);
            if (serverError != "") {
                Effect.Appear('createPersonError', {duration: 0.0});
                $('createPersonError').update(serverError);
            } else {
                Effect.Fade('createPersonError', {duration: 0.0});
                new Ajax.Updater($('personList'), 'UpdatedPersonList', {evalScripts: true});
            }
        }, parameters: $('createPersonForm').serialize(), requestHeaders: {Accept: 'application/json'}
    });
}

getServerError = function (data) {
    var serverErrorHash = [];
    var serverError = "";
    if (data._ERROR_MESSAGE_LIST_ != undefined) {
        serverErrorHash = data._ERROR_MESSAGE_LIST_;

        serverErrorHash.each(function(error) {
            if (error.message != undefined) {
                serverError += error.message;
            }
        });
        if (serverError == "") {
            serverError = serverErrorHash;
        }
    }
    if (data._ERROR_MESSAGE_ != undefined) {
        serverError += data._ERROR_MESSAGE_;
    }
    return serverError;
};

Step - 8: Now do required controller.xml entries :

Here you may see that after service invocation request is chained and and is redirected to json request.
json request is in common-controller.xml which invokes common json reponse events and send back json reponses.

<request-map uri="createPracticePersonByAjax">
    <security https="true" auth="true"/>
    <event type="service" invoke="createPracticePerson"/>
    <response name="success" type="request" value="json"/>
    <response name="error" type="request" value="json"/>
</request-map>
<request-map uri="UpdatedPersonList">
    <security https="true" auth="true"/>
    <response name="success" type="view" value="UpdatedPersonList"/>
</request-map>
<!--View Mappings -->
<view-map name="UpdatedPersonList" type="screen" page="component://practice/widget/PracticeScreens.xml#UpdatedPersonList"/>

Step - 9: Finally create UpdatedPersonList screen in practice/widget/PracticeScreens.xml

This is same as Person Screen

Now this screen will be shown by Ajax updater.

<screen name="UpdatedPersonList">
    <section>
        <actions>
            <script location="component://practice/webapp/practice/WEB-INF/actions/person.groovy"/>
        </actions>
        <widgets>
            <platform-specific>
                <html>
                    <html-template location="component://practice/webapp/practice/person.ftl"/>
                </html>
            </platform-specific>
        </widgets>
    </section>
</screen>

Step - 10: Now submit the form and and run your ajax request.

One important thing to remember is "id" used in form should always be unique. And if you use same id on different elements then prototype may get confused and your javascript will be blocked. these can well observed using firbug.
Also installation of firebug is suggested from get firebug, for debugging javascript in Mozilla.

Conclusion:

If you have followed all the steps and developed practice application from this tutorial then this will really help you in understanding other implementations in OFBiz. These things are basic foundation of working in OFBiz. Now you know that how you can start the development in OFBiz. Don't leave the extra links provided in this tutorial as they will really help you a lot in understanding the things which are there.
Here is another good reading will be help you a lot is available at FAQ Tips Tricks Cookbook HowTo
Now the next thing comes in mind is the business process which is really needed to read out for understanding OOTB implemention in OFBiz, flow of these processes and data model, so for this, books are available at : OFBiz Related Books. Here you can also find books other than business processes.

Now you are ready to dive in. Welcome to OFBiz world.

All the best

–
Pranay Pandey

Space shortcuts

Child pages

Creating Practice Application (Hello World...)

Part - 1

Create first basic application by name "practice" :

ofbiz-component.xml explained:

Creating the web app:

Part - 2

Doing some advancements :

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

Create main Decorator for decorating this application:

Now its the time to show practice application in the app bar :

Create UI Labels:

Now its time to make this practice application secure by checking authentication (user login):

Part - 3

Writing CRUD operations:

For writing services following steps must be performed:

Writing CRUD operations for Party entity:

Writing CRUD operations for Person entity:

Writing Events:

Simple Event

Part - 4

Java Event:

ECA(Event Condition Action):

SECA :

EECA :

Group Service:

Interface:

Part - 5

Creating new entity:

Extending an existing entity:

Preparing Data For Custom Application:

Part -6

Ajaxify Your Request:

Conclusion:

Space shortcuts

Child pages

OFBiz Tutorial - A Beginners Development Guide

Creating Practice Application (Hello World...)

Part - 1

Create first basic application by name "practice" :

ofbiz-component.xml explained:

Creating the web app:

Part - 2

Doing some advancements :

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

Create main Decorator for decorating this application:

Now its the time to show practice application in the app bar :

Create UI Labels:

Now its time to make this practice application secure by checking authentication (user login):

Part - 3

Writing CRUD operations:

For writing services following steps must be performed:

Writing CRUD operations for Party entity:

Writing CRUD operations for Person entity:

Writing Events:

Simple Event

Part - 4

Java Event:

ECA(Event Condition Action):

SECA :

EECA :

Group Service:

Interface:

Part - 5

Creating new entity:

Extending an existing entity:

Preparing Data For Custom Application:

Part -6

Ajaxify Your Request:

Conclusion: