Skip to main content

Prototype, Dojo, Script.aculo.us (JavaScript Framework)

These three famous Javascript frameworks are certainly in the top list of every web developer. They are a proven help in developing dynamic and creative web portals. Without their birth, how in the earth “google” could produce a fanstatic portal such as “igoogle” ( hhmmmm have you thought of it? ).


Now, if you are just starting to explore the usage and advantages of either of these frameworks, let me give you a little hint of the best tool to use in your application (*wink).


Advantages …


1. AJAX Function


All of these frameworks enable you to deal with AJAX with ease and they are also cross-browser compliant. Besides simple requests, they also provide various ways to handle the response from the server, either through XML, JSON or plain text. My advise here, if you only need a way to use AJAX functions and customized UIs is not a concern, use the primitive framework – prototype. Prototype is the best tool to use as it is just a one file function compared to the other two customized, bulky in size frameworks, and if you are the type of developer who codes their way to customize, prototype is the most flexible.


Sample Code 



new Ajax.Request('your_url’,
  {
    method:'get',
    onSuccess: function(transport){
      var response = transport.responseText || \"no response text\";
      alert(\"Success! \n\n\" + response);
    },
    onFailure: function(){ alert('Something went wrong...') }
  });

Expandable Code



new Ajax.Request('your_url’,
  {
    method:'get',
    onSuccess: transport,
    onFailure: doError
  });

Functions “transport” and “doError” must be declared somewhere in your code. This way, codes are more flexible and expandable. Do something like this 



function transport (x) {
          loadXML( x.responseText );
         …
}

2. Widgets


Script.aculo.us and Dojo are add-on libraries to the Prototype framework primarily for visual effects and interface behaviors. Several widgets, DOM utilities, and animations can be found here. These are actually the highlights of the outset of prototype where group of individuals created and customized the prototype framework to produce dynamic and ready to use widgets.


You can find various component animations in Script.aculo.us such as different effect combination, draggable objects, movie effect and etc. Click here for more reference and see their DEMOs.


To date, DOJO seems to be most useful for corporate websites. It can cater large dataset to be turned into a displayable grid without performance penalty. It also has the most wanted charting utility for your reports. It is fully internationalized, DOJO comes with translations supporting over 100 languages, even scripts like Arabic and Hebrew.


The latest tools I have used in DOJO are the TAB enabled div, drag and drop, and the package loading. All these helped me developed the site I wanted. Here are some sample screenshots and codes.


dojotab


The code 



<div  dojoType=\"dijit.layout.TabContainer\" refreshOnShow=\"true\" style=\"height:450px;\">
<div dojoType=\"dijit.layout.ContentPane\" title=\"Equipment Registration\">…</div>
<div dojoType=\"dijit.layout.ContentPane\" title=\"Equipment Update\"> … </div>
<div dojoType=\"dijit.layout.ContentPane\" title=\"Configure\"> … </div>
</div>

draggable


Refer to the official DOJO site for more codes and demos.


I hope this post helped you somehow.

Labels:

Comments

Post a Comment

Popular posts from this blog

Cross-Site Scripting - (HACK) a way out

I came across to this discovery when i was affronted with the problem of trying to communicate TWO sites on different domain/server and some parameters need to be passed. As you may have “Googled” it, you can’t do outright javaScript function call from your site to a partner site since it resides on different domains. It’s a violation of the Cross-Site Scripting W3C standards for it is highly probable for site security breach. To make the picture clearer, here’s the scenario. Take for an example your site caters a hotel reservation and you have a partner seller that also maintains a site for marketing. If you want to maximize you potential sales, you’ll opt to let your partner embed/include your reservation site somewhere in their site. See the diagram now? Partner site e.g resides in www.marketing.com and your site in www.hotelreservation.com , without directly accessing your site, a customer must be able to get a hotel reservation on you part...
Post a Comment
Read more

Search Engine Optimization (SEO)

Often we focus our site development mainly on its GUI (Graphical User Interface) and content, although this is very critical and needed, yet we tend to neglect adding some essentials that also need to be considered and included in order to optimize the site search ability. We want surfers to find and read our sites especially if we want to market something, thus it is important to make sure that our site link will be included in the list of search results on any search engines. The question is how will you do it? How will Google, Yahoo, msn etc, will find your site be indexed and included in their search results? There are a lot of things to learn and take into consideration if you want to optimize your site. Before proceeding, I’ll provide primary reference for you to get started before jumping into SEO. Read through this and decide if you need to reconstruct your site or not. Google Webmaster Site – This will acquaint you to search engines basic concepts. Webmaster Guidel...
Post a Comment
Read more

Reviewing the BASICS

Right knowledge in OOP makes your code and implementation more reliable. This can be achieved by correct coding practice and methodology. However, there will come a time that you’ll be affront with confusion of concepts and implementation of what OOP objects to use in right and efficient way. You’ll be stuck if you’re not well equipped. In this article, I’m hoping to aid newbies in this context, familiarize you with the basics of OOP that i think you need to know to get all throughout a smooth coding spree. Here are some common discussions found in development forums that you might find useful resource. Static vs Non-Static Static members : Act like global variables. There is only one instance of it in the entire program execution. They can be used with the class name directly and shared by all objects of a class. Example on referring a static method or data member. class A { static int firstInt; static int secondInt; static void i...
Post a Comment
Read more