BLOG

NEXT STEPS

Posts Tagged ‘Prototype Tutorial’

OFBiz Tutorial:Use Dependent Selects to Manage Country-State Select Boxes

Wednesday, July 14th, 2010

Javascript components for managing Dependent Selects is starting to find use in ecommerce applications we are developing. It all started with need for updating contents of State field, on change of Country in postal address forms.

More then a year ago we started using Ajax for updating State select box options on change of Country select box value. It was a step forward but I wasn’t satisfied. Recently I had time to build a Dependent Select javascript component that takes the process of managing dependent selects boxes to the next level. Please read my blog post, OFBiz Tutorial – Dependent Selects for Prototype, to know more about it. If you are wondering about a scenario from real world, Here you go.

Below is the piece of code from the Freemarker template for the Checkout page in OFBiz ecommerce application.  It renders Country and State select boxes with their options.

?View Code LANGUAGE
1
2
3
4
5
6
7
8
9
10
11
12
13
14

<div>
      <label for="shipToCountryGeoId">Country</label>
<select id="shipToCountryGeoId" class="required select dependentSelectMaster" title="shipToCountry" name="shipToCountryGeoId">
        <option title="${country.geoId}" value="${country.geoId}">${country.get("geoName")?default(country.geoId)}</option>
        <!--#list-->
      </select></div>
<div id="shipToStates">
      <label for="shipToStateProvinceGeoId">State</label>
<select id="shipToStateProvinceGeoId" class="required shipToCountry" name="shipToStateProvinceGeoId">
        <option class="${country.geoId}" title="${stateAssoc.geoId}" value="${stateAssoc.geoId}">&lt;#if shippingAddress.stateProvinceGeoId?has_content &amp;&amp; shippingAddress.stateProvinceGeoId?default("") == stateAssoc.geoId&gt; SELECTED <!--#if-->&gt;${stateAssoc.geoName?default(stateAssoc.geoId)}</option>
            <!--#list-->
          <!--#if-->
        <!--#list-->
      </select></div>

Following Javascript code will unobtrusively manage the relationship between Country select box (master) and State select box (slave),

?View Code LANGUAGE
1
2
3

$('checkoutPanel').select('.dependentSelectMaster').reverse().each( function (elt) {
  new Dependent( $$( '.'+elt.title ).first() , elt );
})

Where ‘checkoutPanel’ is Id of wrapper div that encloses checkout html form. Apply ‘dependentSelectMaster’ class to select boxes that have dependent slave elements, making them the master. Slave select box is related to its master using title and class attribute of elements, A select box is slave if it has a class applied to it that is equal to title of master select box.

The javascript code snippet traverses DOM tree looking for master select boxes. Using title attribute of master select it finds all the slaves and creates Dependent select relationship between them. Its all clean and simple.

Needless to say, you’ll need to include Prototype.js and DependentSelect.js in your webpage. I hope you will find this short OFBiz tutorial useful.

- Anil

Anil Patel is Chief Development Officer at HotWax Media as well as an OFBiz project committer, PMC member, and active community contributor. He also studies karate! Anil will join other HotWax Media employees and advisors in periodically posting thoughts here related to OFBiz, eCommerce, ERP, and related topics.

Tags: , , , , , ,
Posted in Apache OFBiz, Apache OFBiz Development, Enterprise eCommerce, HotWax Media, OFBiz Tutorials, OFBiz eCommerce, Prototype Tutorials | No Comments »

OFBiz Tutorial – Dependent Selects for Prototype

Friday, May 14th, 2010

In my first OFBiz Tutorial, I will show you how to make dependent select boxes using Prototype.

Building a web UI that lives up to the expectations of contemporary web designers is a challenge that every web developer faces. One that has remained a pain for a while is Dependent Select boxes. jQuery has a nice UI plugin that serves the purpose, but I cannot use it because I am married to Prototype javascript framework. I finally decided to implement one using Prototype. Dependent Select by Sliver, a UI plugin for jQuery is nice and simple, so I decided to base my component on the same concept.

Here it is, Dependent class allows you to link two select boxes in a parent child relationship. Any two select boxes can be linked. All you need to do is

  1. Parent select box options should have unique value of title attribute.
  2. On child select box, class attribute of options should be set to title of their parent.
  3. In javascript Create new Dependent object by passing child and parent select boxes.

Here is sample code. (Copied from Dependent Select by Silver website)

?View Code HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<select name="selectme" id="selectme">
    <option value="">-- select --</option>
    <option value="1" title="flowers">Flowers</option>
    <option value="2" title="animals">Animals</option>
</select>
 
<select name="selectme2" id="selectme2">
    <option value="">-- select --</option>
    <option value="1" class="flowers">Sunflower</option>
    <option value="2" class="flowers">Rose</option>
    <option value="3" class="animals">Dog</option>
    <option value="4" class="animals">Cat</option>
</select>
 
<script>
    new Dependent($('selectme2'),$('selectme'));
</script>

My goal was to build a dependent select box that will work in complex enterprise application scenarios. A nonstandard case is when the value of a parent select box value is change by background code. It gets even more complex when select boxes are disabled. Good news is, our Dependent class is smart enough to deal with these use scenarios.

In the process of solving these problems I learned about an interesting feature in Prototype, it has a AOP like ability. We can modify behavior of existing code by wraping function inside of a custom wrapper function. A Prototype function wrap is applied to the setValue function on Element to handle the background select value changes and disabled select box value change.

I have enjoyed building and using this new component. Download the component from its home on the web. I hope you will be able to find some interesting applications for it as well.

- Anil

Anil Patel is Chief Development Officer at HotWax Media as well as an OFBiz project committer, PMC member, and active community contributor. He also studies karate! Anil will join other HotWax Media employees and advisors in periodically posting thoughts here related to OFBiz, eCommerce, ERP, and related topics.

Tags: , , ,
Posted in OFBiz, OFBiz Tutorials, Prototype Tutorials | 1 Comment »

Prototype Tutorials – Smart Columns

Wednesday, November 18th, 2009

From time to time HotWax Media’s open source ERP (Apache OFBiz) business analysts and developers will use this blog to sound off on technical issues related to e-commerce, ERP, order management, accounting, user interfaces, and related topics.  The following post is just such an example.

Smart Columns Prototype

Warning: this is not for the technically faint of heart.  If your eyes begin to glaze over, quickly hit the back button, take solace in the fact that HotWax Media makes it our business to handle all of your technical needs related to open source ERP, and contact us today.

The great debate of jQuery vs. Prototype has been raging for quite some some time now, with many different voices offering their opinions on the matter.  It does seem that JQuery has the current lead over the venerable Prototype.  If you compare the amount of plugins offered up by JQuery to those that extend Prototype, it is clear JQuery appears to have much more community design and development support.

I would to offer some (somewhat biased) mediation on the debate and say “What’s the big deal?  In the end, it’s still just javascript”.  In other words, to completely butcher Shakespeare, “A rose by any other name, will still make a button submit an Ajax form”.

We javascript developers, and indeed web developers in general, tend to be a fickle bunch.  We are always attracted to the latest new and shiny technology, hence all of the excitement and support for JQuery.  However, you can pretty much do anything in Prototype that you can do with JQuery.

So, in an effort to show Prototype some love, I would like to show you, in the first of a multi-part series, how to take a cool JQuery trick and replicate (and sometimes improve) it with Prototype.

Soh Tanaka’s recent blog about about creating Smart Columns w/ CSS & JQuery has been getting a lot of play around the internet lately, so I thought we could start there.  In this tutorial, I will demonstrate how to create “Smart Columns” using the Prototype Framework instead.

We’ll start by creating our external javascript file. Let’s call it smartcolumns.js. We will take an Object Oriented approach and use Prototype’s awesome Class.create() method to set up our functions.

?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

SmartColumns = Class.create({
    initialize: function(){
        this.position();
        Event.observe(window,'resize',this.position.bind(this));
    },
    position: function(){
        var columns = $('columns');
        $(columns).setStyle({
            width: '100%'
        });
        this.resize();
    },
    resize: function(){
        var columns = $('columns');
        var dimensions = $(columns).getDimensions();
        var colWrap = $(dimensions).width;
        var colNum = Math.floor(colWrap / 200);
        var colFixed = Math.floor(colWrap / colNum);
 
        $(columns).setStyle({
            width: colWrap + 'px'
        });
 
        $$('.column-block').each(function(elm) {
            $(elm).setStyle({
                width: colFixed + 'px'
            });
        });
    }
});

Now lets add some CSS (we’ll just copy Soh’s styling so that we can have a side by side comparison).

?View Code CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

body {
    margin: 0;
    padding: 0;
    font-size: 10px;
    font-family:  Arial, Verdana, Helvetica, sans-serif;
    line-height: 1.8em;
    background: #695e53;
}
img {border: none;}
a {color: #423b35;}
* {margin: 0; padding: 0;}
h1,h2{ font-weight: normal; margin: 10px 0; padding: 10px 0;}
h1 {
    font-size: 4em;
    padding: 15px 5%;
    margin: 0 auto;
    background: #2b221b;
    line-height: 1em;
    color: #e3e1d5;
    border-bottom: 1px solid #1b140e;
}
.container {
    padding: 10px 5%;
}
ul.column{
    width: 100%;
    padding: 0;
    margin: 10px 0 50px;
    list-style: none;
}
ul.column li {
    float: left;
    width: 200px;
    padding: 0;
    margin: 5px 0;
    display: inline;
}
.block {
    height: 355px;
    font-size: 1em;
    margin-right: 10px;
    padding: 20px;
    background: #e3e1d5;
    -moz-border-radius: 3px;
    -khtml-border-radius: 3px;
    -webkit-border-radius: 3px;
}
.block h2 {
    font-size: 1.8em;
}
.block img {
    width: 89%;
    padding: 5%;
    margin: 0 auto;
    background:#fff;
    -ms-interpolation-mode: bicubic;
    display: block;
    -moz-border-radius: 3px;
    -khtml-border-radius: 3px;
    -webkit-border-radius: 3px;
}

Finally, let put it all together. Add your CSS and Javascript to your document. Again, we’ll will just use the original example’s markup for comparison, and we’ll load in Prototype using Google’s AJAX Libraries API for convenience.

?View Code HTML4STRICT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80

<script src="http://www.google.com/jsapi" type="text/javascript"><!--mce:0--></script>
<script type="text/javascript"><!--mce:1--></script>
<script src="smartcolumns.js" type="text/javascript"><!--mce:2--></script>
 
<script type="text/javascript"><!--mce:3--></script>
<h1>Smart Columns w/ CSS &amp; Prototype</h1>
<div class="container">
<ul id="columns" class="column">
	<li class="column-block">
<div class="block">
              <a href="http://www.designbombs.com/technology/too-much-tweet/"><img src="http://www.designbombs.com/wp-content/themes/DesignBombs/images/gallery/toomuch_thumb.gif" alt="" /></a>
<h2><a href="http://www.designbombs.com/technology/too-much-tweet/">Too Much Tweet</a></h2>
Odio velit vulpes zelus elit euismod. Singularis abluo autem saepius tego quod letatio meus. Os, tamen, tincidunt facilisi laoreet consectetuer quis. Feugiat ille, indoles, turpis</div></li>
	<li class="column-block">
<div class="block">
              <a href="http://www.designbombs.com/illustrations/berit-somme/"><img src="http://www.designbombs.com/wp-content/themes/DesignBombs/images/gallery/somme_thumb.gif" alt="" /></a>
<h2><a href="http://www.designbombs.com/illustrations/berit-somme/">Berit Somme</a></h2>
Odio velit vulpes zelus elit euismod. Singularis abluo autem saepius tego quod letatio meus. Os, tamen, tincidunt facilisi laoreet consectetuer quis. Feugiat ille, indoles, turpis</div></li>
	<li class="column-block">
<div class="block">
              <a href="http://www.designbombs.com/light/jason-reynolds/"><img src="http://www.designbombs.com/wp-content/themes/DesignBombs/images/gallery/jasonreynolds_thumb.gif" alt="" /></a>
<h2><a href="http://www.designbombs.com/light/jason-reynolds/">Jason Reynolds</a></h2>
Odio velit vulpes zelus elit euismod. Singularis abluo autem saepius tego quod letatio meus. Os, tamen, tincidunt facilisi laoreet consectetuer quis. Feugiat ille, indoles, turpis</div></li>
	<li class="column-block">
<div class="block">
              <a href="http://www.designbombs.com/illustrations/vanity-claire/"><img src="http://www.designbombs.com/wp-content/themes/DesignBombs/images/gallery/vanityclaire_thumb.gif" alt="" /></a>
<h2><a href="http://www.designbombs.com/illustrations/vanity-claire/">Vanity Claire</a></h2>
Odio velit vulpes zelus elit euismod. Singularis abluo autem saepius tego quod letatio meus. Os, tamen, tincidunt facilisi laoreet consectetuer quis. Feugiat ille, indoles, turpis</div></li>
	<li class="column-block">
<div class="block">
              <a href="http://www.designbombs.com/design-firm/we-are-sofa/"><img src="http://www.designbombs.com/wp-content/themes/DesignBombs/images/gallery/wearesofa_thumb.gif" alt="" /></a>
<h2><a href="http://www.designbombs.com/design-firm/we-are-sofa/">We Are Sofa</a></h2>
Odio velit vulpes zelus elit euismod. Singularis abluo autem saepius tego quod letatio meus. Os, tamen, tincidunt facilisi laoreet consectetuer quis. Feugiat ille, indoles, turpis</div></li>
	<li class="column-block">
<div class="block">
              <a href="http://www.designbombs.com/design-firm/outline-2-design/"><img src="http://www.designbombs.com/wp-content/themes/DesignBombs/images/gallery/outline2design_thumb.gif" alt="" /></a>
<h2><a href="http://www.designbombs.com/design-firm/outline-2-design/">Outline 2 Design</a></h2>
Odio velit vulpes zelus elit euismod. Singularis abluo autem saepius tego quod letatio meus. Os, tamen, tincidunt facilisi laoreet consectetuer quis. Feugiat ille, indoles, turpis</div></li>
	<li class="column-block">
<div class="block">
              <a href="http://www.designbombs.com/blog/rocket-club/"><img src="http://www.designbombs.com/wp-content/themes/DesignBombs/images/gallery/rocketclub_thumb.gif" alt="" /></a>
<h2><a href="http://www.designbombs.com/blog/rocket-club/">Rocket Club</a></h2>
Odio velit vulpes zelus elit euismod. Singularis abluo autem saepius tego quod letatio meus. Os, tamen, tincidunt facilisi laoreet consectetuer quis. Feugiat ille, indoles, turpis</div></li>
	<li class="column-block">
<div class="block">
              <a href="http://www.designbombs.com/portfolio/emotions/"><img src="http://www.designbombs.com/wp-content/themes/DesignBombs/images/gallery/emotions_thumb.gif" alt="" /></a>
<h2><a href="http://www.designbombs.com/portfolio/emotions/">Emotions</a></h2>
Odio velit vulpes zelus elit euismod. Singularis abluo autem saepius tego quod letatio meus. Os, tamen, tincidunt facilisi laoreet consectetuer quis. Feugiat ille, indoles, turpis</div></li>
	<li class="column-block">
<div class="block">
              <a href="http://www.designbombs.com/ecommerce/sansa/"><img src="http://www.designbombs.com/wp-content/themes/DesignBombs/images/gallery/sansa_thumb.gif" alt="" /></a>
<h2><a href="http://www.designbombs.com/ecommerce/sansa/">Sansa</a></h2>
Odio velit vulpes zelus elit euismod. Singularis abluo autem saepius tego quod letatio meus. Os, tamen, tincidunt facilisi laoreet consectetuer quis. Feugiat ille, indoles, turpis</div></li>
	<li class="column-block">
<div class="block">
              <a href="http://www.designbombs.com/design-firm/legwork-studio/"><img src="http://www.designbombs.com/wp-content/themes/DesignBombs/images/gallery/legworkstudio_thumb.gif" alt="" /></a>
<h2><a href="http://www.designbombs.com/design-firm/legwork-studio/">Legwork Studio</a></h2>
Odio velit vulpes zelus elit euismod. Singularis abluo autem saepius tego quod letatio meus. Os, tamen, tincidunt facilisi laoreet consectetuer quis. Feugiat ille, indoles, turpis</div></li>
	<li class="column-block">
<div class="block">
              <a href="http://www.designbombs.com/community/moytoy/"><img src="http://www.designbombs.com/wp-content/themes/DesignBombs/images/gallery/moytoy_thumb.gif" alt="" /></a>
<h2><a href="http://www.designbombs.com/community/moytoy/">Moytoy</a></h2>
Odio velit vulpes zelus elit euismod. Singularis abluo autem saepius tego quod letatio meus. Os, tamen, tincidunt facilisi laoreet consectetuer quis. Feugiat ille, indoles, turpis</div></li>
	<li class="column-block">
<div class="block">
              <a href="http://www.designbombs.com/design-firm/method-arts/"><img src="http://www.designbombs.com/wp-content/themes/DesignBombs/images/gallery/methodarts_thumb.gif" alt="" /></a>
<h2><a href="http://www.designbombs.com/design-firm/method-arts/">Method Arts</a></h2>
Odio velit vulpes zelus elit euismod. Singularis abluo autem saepius tego quod letatio meus. Os, tamen, tincidunt facilisi laoreet consectetuer quis. Feugiat ille, indoles, turpis</div></li>
	<li class="column-block">
<div class="block">
                <a href="http://www.designbombs.com/ecommerce/479-popcorn/"><img src="http://www.designbombs.com/wp-content/themes/DesignBombs/images/gallery/479popcorn_thumb.gif" alt="" /></a>
<h2><a href="http://www.designbombs.com/ecommerce/479-popcorn/">479 Popcorn</a></h2>
Odio velit vulpes zelus elit euismod. Singularis abluo autem saepius tego quod letatio meus. Os, tamen, tincidunt facilisi laoreet consectetuer quis. Feugiat ille, indoles, turpis</div></li>
	<li class="column-block">
<div class="block">
                <a href="http://www.designbombs.com/design-firm/mode-project/"><img src="http://www.designbombs.com/wp-content/themes/DesignBombs/images/gallery/modeproject_thumb.gif" alt="" /></a>
<h2><a href="http://www.designbombs.com/design-firm/mode-project/">Mode Project</a></h2>
Odio velit vulpes zelus elit euismod. Singularis abluo autem saepius tego quod letatio meus. Os, tamen, tincidunt facilisi laoreet consectetuer quis. Feugiat ille, indoles, turpis</div></li>
</ul>
</div>

That’s all there is to it folks. Take a look at the finished product and compare it to the original. Big thanks to Soh Tanaka for the inspiration to this tutorial.

If you have made it this far, you must be a ninja!  HotWax Media offers training and support to get you and your team up and running on Apache OFBiz as quickly as possible, so contact us and let us know if we can support your open source e-commerce and ERP efforts!

- Ryan

Ryan Foster is a designer and OFBiz developer for HotWax Media.

Ryan Foster - OfBiz Developer

Tags: , ,
Posted in Prototype Tutorials | 1 Comment »