Page History

...

Here on first line, Event.observe(element, eventName, handler), registers an event handler on a DOM element.
- Argument 1: The DOM element you want to observe; as always in Prototype, this can be either an actual DOM reference, or the ID string for the element.
- Argument 2: The standardized event name, as per the DOM level supported by your browser. This can be as simple as 'click'.
- Argument 3: The handler function. This can be an anonymous function you create on-the-fly, a vanilla function.
So here on window load, on-the-fly function is called. where form validations and form submission is done.
In CreatePerson.ftl you see that class="required" are used on forms's input element, You then activate validation by passing the form or form's id attribute as done in second line. More on this can be learned from learn validation
On third line, observer is on "createPerson" which is id of anchor tag (button) in CreatePerson.ftl,
so that when end user clicks "create button" , the instance method, validate(), will return true or false. This will activate client side validation.
And then createPerson function is called which is out of the scope of window load observer.
In request variable, createPersonForm's action is stored. $('createPersonForm') is again a id of form in CreatePerson.ftl.
new Ajax.Request(url,options) : Initiates and processes an AJAX request.
The only proper way to create a requester is through the new operator. As soon as the object is created, it initiates the request, then goes on processing it throughout its life-cyle.
Request life cycle:
- Created
- Initialized
- Request sent
- Response being received (can occur many times, as packets come in)
- Response received, request complete
So here createPracticePersonByAjax request will be called from controller.xml, which will call createPracticePerson service and do needful entries.
Now if response is successful and server has not returned an error, "new Ajax.Updater($('personList'), 'UpdatedPersonList'" will be executed.
Ajax updater, performs an AJAX request and updates a container's contents based on the response text. To get more on this please read : ajax updater
So "personList" is the id of div in person.ftl, which will be replaced by view response of UpdatedPersonList request.

...

This is same as Person Screen

Now this screen will be shown by Ajax updater.

Code Block

<screen name="UpdatedPersonList">
    <section>
        <actions>
            <script location="component://practice/webapp/practice/WEB-INF/actions/person.groovy"/>
        </actions>
        <widgets>
            <platform-specific>
                <html>
                    <html-template location="component://practice/webapp/practice/person.ftl"/>
                </html>
            </platform-specific>
        </widgets>
    </section>
</screen>

Note

One important thing to remember is "id" used in form should always be unique, as prototype only understand ids. And if you use same id on different elements then prototype may get confused and your javascript will be blocked.

Also installation of firebug is suggested from get firebug, for debugging javascript in Mozilla.

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 135

New Version 136

Key

Conclusion: