Page History

...

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

<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

  Code Block
  ${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:

  Code Block

  <?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 Mappings --> <request-map uri="main"> <security https="false" auth="false"/> <response name="success" type="view" value="main"/> </request-map> <!-- end of request mappings --> <!-- View Mappings --> <view-map name="main" type="screen" page="component://practice/widget/PracticeScreens.xml#main"/> <!-- end of view mappings --> </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 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>

...

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

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.

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 - 34:  Now we have to an entry in ofbiz-component.xml file :

...