Prototype Tutorials – Smart Columns

HotWax SystemsPublished: Updated:

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.

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

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.

Smart Columns w/ CSS & Prototype

  • Too Much Tweet

    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

  • Berit Somme

    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

  • Jason Reynolds

    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

  • Vanity Claire

    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

  • We Are Sofa

    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

  • Outline 2 Design

    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

  • Rocket Club

    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

  • Emotions

    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

  • Sansa

    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

  • Legwork Studio

    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

  • Moytoy

    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

  • Method Arts

    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

  • 479 Popcorn

    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

  • Mode Project

    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

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

HotWax Systems About HotWax Systems
HotWax Systems is the leading global service provider for Apache OFBiz application development, and creators of HotWax Commerce, the world’s leading open-source Unified Commerce Platform. In 2017, HotWax Systems expanded its portfolio to include a full set of consulting services and custom business solutions based on the Moqui Ecosystem of open source projects.

Comments 1

  1. Avatar for HotWax Systems

Leave a Reply

Your email address will not be published. Required fields are marked *