Prototype Javascript – Introduction

Click this image to view the official website of Protoype

- INTRODUCTION -

I am currently working on a huge web-based application project for our customer in the United States. It is a customer (client) – company (server) end to end solution that tends to ease their business transactions by making them online – in short accessible anywhere. We are using the MVC pattern but haven’t implemented any of the existing Java Frameworks. Subdivided into three layers, Front End-Business Delegate-DAO, the said application runs on Tomcat Server (Web) and JBoss Server (Application)

Focusing on the Front End (client views), we have used the AJAX technology to asynchronously connect our JSP’s to our Servlets and do the necessary end to end processing of data (both request and JSON objects).

Now the big question is – how does our JSP sends and receives data to and from the server? Is it possible that a simple JSP could dynamically execute AJAX calls, form data and event handling, and present the result in an expected format?

Apparently, the answer is a big YES! And this is because of the javascript framework that we are currently using. It is, without further ado, called “PROTOTYPE”.

This Javascript framework allows you to develop dynamic web applications with ease at it provides functions that are of great help to dynamic content pages. Such functions are the following:

- Document Object Model Manipulation
- Object Oriented Programming in Javascript
- Data Manipulation
- XML and JSON data format support
- AJAX calls with ease

All you have to do is to import the prototype.js file in your page/application and its functions are ready for your usage.

This series will guide you on how to use the Prototype Framework. Actual web application examples are also given in order for you to use them on the go. Most of its contents are taken from the Prototype guide as well as from the consolidated examples on the web and on my actual work.

- UTILITY METHODS (PART 1) –

These might be the most useful methods of Prototype framework. If Java has core syntax and commands, these are the Prototype counterpart. You might see yourself using these methods over and over again as it acquires, manipulates, and presents data in your web document dynamically.

Note: DOM knowledge is a prerequisite on this part as these methods are well used on Form elements manipulation.

————————————————————————
$
Syntax: $(id/element)  HTML Element
————————————————————————

The conventional DOM way of acquiring an element in a web document is through the document.getElementById() syntax. Apparently, Prototype simplifies it by just using the dollar ($) sign and the id of the expected element to manipulate. Thus, this statement will return the actual element for further manipulation.

DOM: document.getElementById(‘username’);

PROTOTYPE: $(‘username’);

After acquiring the element, you can do the manipulation:
1) Alerting the value of the textbox:

var tBox = $(‘username’);
alert (tBox.value);

2) Changing the class name of the textbox

var tBox = $(‘username’);
tBox.className = ‘myTextBox’;

————————————————————————
$$
Syntax: $(css Rule)  Array of HTML Elements
————————————————————————

This is a great way to acquire multiple elements based on a rule. A replacement on either document.getElementsByTagName() or document.getElementsByClassName(). It will return an array of HTML Elements which you can iterate for manipulation.

DOM: document.getElementsByTagName(‘input’);

PROTOTYPE: $$(‘input’);
After acquiring the element, you can do the manipulation:
1) Alerting the value of the textboxes:

var tBoxes = $$(‘input’);
tBoxes.each(function(e){
alert (e.value);
});

Note: The .each() function is the Prototype way to iterate objects. It is an alternative for looping statements.

2 Comments

Comments RSS TrackBack Identifier URI