Page History

...

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

...

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

• PracticeApp.js is the customer 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.

...

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 this 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>">
  <div>
    <fieldset>
      <div>
        <label>${uiLabelMap.FormFieldTitle_salutation}</label>
        <input type="text" name="salutation" value=""/>
      </div>
      <div>
        <label>${uiLabelMap.PartyFirstName}*</label>
        <input type="text" name="firstName" class="required" 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>
  </div>
</form>

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

Step - 6 : Now create PracticeApp.js in practice/webapp/practice/js/ 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

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

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: false,
        onSuccess: 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;
};

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