Page History

...

a) name :- defines the name of our web application.
b) title :- This will be the title of our componentthe 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. 

...

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, and the mainDecoratorLocation.   

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

...

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

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

  
  
  
  

...

CommonScreens.xml file code will be:

 <screen name="CommonPracticeDecorator">
      <section>
          <widgets>
              <decorator-screen name="main-decorator">
                  <decorator-section name="body">
                      <decorator-section-include name="body"/>                     
                  </decorator-section>
              </decorator-screen>
          </widgets>
      </section>
</screen>

...

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 - 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"/>{color}
    <event type="simple" path="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 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: 

...

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

...