Page History

...

Overview

This tutorial is divided in into 6 Parts:

Part 1:  In this part, you will learn how to create and load your own custom component and add a first screen that shows “This is practice application”

Part 2: Going ahead, you will create some advanced GUI patterns, interact with existing database tables and will learn how to secure your web application.

Part 3: Here you learn interacting how to interact with database entities, you . You will write services for performing CRUD operations (Create, Retrieve, Update, Delete) and events for form field validation purposeevents.

Part 4: In Part 4, you will learn how to call automatic triggers (services) based on conditions that your define.  Calling multiple
services as a group and sharing common parameters of services using the concept of interfaces will be discussed.

...

Part 6: At the final step you will use Axis to allow for communication between the client and server side applications. After completing this application, you will become be an OFBiz developer.

Do's and Don'ts

1. For any additional queries and concerns you can refer to the Example component. You will always find the code in the example component to reflect reflects the latest version of OFBiz. Refer to it , whenever you want to see some sample code for the development of this application. This will help you in future development activities as well.
   When each new feature is added, it is added in the Example component as a reference.
2. Before starting the development of this application you must read the :
   1. OFBiz Contributors Best Practices ,  
   2. Coding Conventions and
   3. Best Practices Guide
3. Don't copy any files from other components, as the revision number for the file is also copied. Always create a new file and, if required,  copy and paste the contents of the original file. Also be careful to remove any unused code as well.
4. For searching for any documents the best place to start is : OFBiz Documentation Index.
5. Right from the beginning, reading the console log must be a habit to make troubleshooting easy. It also gives an understanding of the system's internal processing steps.

...

1. Create the sub-directory (folder) in hot-deploy/ and name it "practice" (hot-deploy/practice). The directory name should match the name of the new component that we are creating.
   Note : Remember that all development for this componentis should be done in this folder only. 

2. Create the ofbiz-component.xml file on path hot-deploy/practice and place the following contents in it You can check this the corresponding file in any other OfBiz component to see how it is used in that component.:

   Code Block

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

...

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.
2. Since "practice" which is the name of the webapp which you are going to develop, create a hot-deploy/practice/webapp/practice folder. A component can consist of multiple webapps  . For example,the "marketing" component has two webapps "marketing" and "sfa".
3. Create the hot-deploy/practice/webapp/practice/WEB-INF directory.
   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.

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.

   Code Block

   <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/PracticeScreens.xml</param-value> <!-- change the path to the following if the above doesn't work for you --> <!-- <param-value>component://practice/webapp/practice/widget/PracticeScreens.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>

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

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

   3. 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> <!-- 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"/> <!-- change the path to the following if the above doesn't work for you --> <!-- <view-map name="main" type="screen" page="component://practice/webapp/practice/widget/PracticeScreens.xml#main"/> --> <!-- end of view mappings --> </site-conf>

      Creating the User Interface

...