Page History

...

Now lets start with Coding part:

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

Code Block



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

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 -6 will make you understand more, why we are doing this entry here.

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

Step - 2 : Include validation.js and prototype.js are located at framework/images/webapp/images/prototypejs/Step - 2 : Add another menu item to applicatoin menu bar by name "Ajax". Below given is the controller entry :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.

Code Block


<!-- Request Mapping -->


<request-map uri="Ajax">
&nbsp;&nbsp;&nbsp; <security https="true" auth<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 :

Code Block

&nbsp;&nbsp;&nbsp; <response name="success" type="view" value="PersonFormByAjax"/>
</request-map>

<!-- ViewRequest Mapping -->

<view<request-map nameuri="PersonFormByAjax" typeAjax">
    <security https="screentrue" pageauth="component://practice/widget/PracticeScreens.xml#PersonFormByAjax"/>


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 Step - 3 : Create new screen called "PersonFormByAjax" in PracticeScreens.xml. Example code is given below:

PracticeApp.js is the customer 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 of Part-3 under "Writing CRUD operations for Person entity" section. Only difference is that this form is written in freemarker.

Code Block


<screen name="PersonFormByAjax">
"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"/>
                     <section>
            <actions>
<html-template location="component://practice/webapp/practice/CreatePerson.ftl"/>
                          <set field="headerItem" value="ajax"/> </html>
                <set field="titleProperty" value="PageTitlePracticePersonForm"/>
        </platform-specific>
                 <property-map resource="PartyUiLabels" map-name="uiLabelMap" global="true"/> </decorator-section>
                </decorator-screen>
           <set field="layoutSettings.javaScripts[]" value="/practice/js/PracticeApp.js" global="true"/> </widgets>
        </section>
        <entity-condition entity-name="Person" list="persons"/>
            </actions>
      </screen>

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

Code Block



<h2>${uiLabelMap.PartyCreateNewPerson}</h2>
<div id="createPersonError" style="display:none"></div>
<form method="post" id="createPersonForm" action="<@ofbizUrl>createPracticePersonByAjax</@ofbizUrl>">
  <div>
    <fieldset>
      <widgets><div>
        <label>${uiLabelMap.FormFieldTitle_salutation}</label>
        <decorator-screen<input nametype="CommonPracticeDecoratortext" locationname="${parameters.mainDecoratorLocation}">
                    <decorator-section name="body"salutation" value=""/>
      </div>
      <div>
            <platform-specific><label>${uiLabelMap.PartyFirstName}*</label>
        <input type="text" name="firstName"                  <html>class="required" value=""/>
      </div>
      <div>
        <label>${uiLabelMap.PartyMiddleName}</label>
        <input type="text"   <html-template location="component://practice/webapp/practice/person.ftlname="middleName" value=""/>
      </div>
      <div>
        <label>${uiLabelMap.PartyLastName}*</label>
        <input type="text" name="lastName"  <html-template location="component://practice/webapp/practice/CreatePerson.ftl"/>
                      class="required" value=""/>
      </html>div>
      <div>
                  </platform-specific><label>${uiLabelMap.PartySuffix}</label>
        <input type="text"     name="suffix" value=""/>
      </decorator-section>div>
      <div>
        <a id="createPerson" </decorator-screen>
      href="javascript:void(0);" class="buttontext">${uiLabelMap.CommonCreate}</a>
      </widgets>div>
        </section>fieldset>
    </screen>div>
</form>

Step - 6 : Now create PracticeApp.js in practice/webapp/practice/js/

Conclusion:

If you have followed all the steps and developed practice application from this application 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 work on, so for this books are available at : OFBiz Related Books

Space shortcuts

Child pages

Versions Compared

Old Version 131

New Version 132

Key

Conclusion: