Prototype.js

Develop Ajax applications like the pros, Part 1: Using the Prototype JavaScript library and script.aculo.us

Michael Galpin post an intresting tutorial about using Prototype and script.aculo.us libraries together. Here's the short list of topics discussed in this article:

  • Introduction to Prototype

  • Using Prototype's Ajax library

  • Working with HTML

  • Working with data

  • Summary

Source: IBM developerWork.

qGallery: Prototype gallery application

Sebastian Brink has developed a nice looking gallery application called qGallery

It is really simple to use you just have to upload your images in full resolution together with a simple xml file and include the script and a simple div into the webpage. Everything else is done automatically. The gallery is creating every used image on the fly with the help of some php scripts in the background.

Source: http://ajaxian.com

Prototype 1.6.0.2 Cheat Sheet

A new version of Prototype Cheat sheet - a full reference for Prototype 1.6.0.2 released. Here's some notes about notations:

«Modules are sorted in a somewhat logical order - those commonly used are mostly in the left/center area, while deprecated/utility methods are all the way to the right

  • Method can be recognized by parentheses following it (anything that doesn’t have ones is a property)

  • Deprecated items are marked red and have NO parentheses/arguments specified

  • Prototype extends quite few native objects’ prototypes with a set of convenient methods. In such cases there’s an explicit note about it next to a module name - i.g. stripScripts() method from “String (String.prototype)” can be called as 'foo'.stripScripts()

  • When a module is also a class, there’s a “(constructor)” note next to it - i.g. “Hash (constructor)” means that it should be called as new Hash()

  • There are few bonus items (such as those from Prototype.Browser) which are not yet included in documentation.»

Prototype 1.6.0.2: Bug fixes, performance improvements, and security

Prototype 1.6.0.2 was released . This release fix o address several compatibility and performance issues and helps to protect against a potential security issue for developers using Prototype outside of a web browser environment. Was fixed 28 bugs and made over a dozen improvements to the code base, including performance improvements for CSS selectors in Safari 3 and for the Element#up/#down/#next/#previous and Event#findElement methods in all browsers.

Prototype 1.6.0, script.aculo.us 1.8.0, and the Bungee book now available

The final versions of Prototype 1.6.0, script.aculo.us 1.8.0, and the Prototype & script.aculo.us book are now available. Prototype 1.6.0 is the most significant update to the framework since its inception over two years ago. We’re very excited about the changes in this release, and what better way to celebrate than with an update to script.aculo.us and a book covering all the new goodness?

Ajax photo gallery - JavaScript tree

Introduction.

I'm beginning series of articles where step by step describe ajax photo gallery developing process. This gallery I have created for one of my projects.

Task

Develop ajax gallery with not limited nesting in categories. Categories should support localization (in my case English and Russian ) Should be administrative panel. Everything what possible implement with help of Ajax.

Start developing

At the beginning of process I get html template of gallery. Not ideal, but everything clear with concept.

template

Basic idea of tree Html and CSS I got from here . But that tree can have only one nested level and doesn't work in IE.

So it seems to be first task.

Implementing the tree

I'm thinking about using tree from ext.js library library. But I decided to use prototype.js instead of heavy ext.js.
Task: Create tree with not limited nesting. Should allow add, edit and delete nodes.

Task is clear. First what I want to do, add IE support to and not limited nesting to the tree. Do this using plain Html and CSS. Dynamic generation will be little bit later.

As result I got such tree. As can maybe seen from picture pervious looking is slightly different. template

This picture created from such Html:

The next task to create with help of JavaScript the same Html.

On input should be pulled data. Data format is obvious.

JSON it's best JS can get!

With help of favorite text editor create test JSON data. With help of this data the tree of categories will be displayed.

So let's do tree rendering.

Render the tree.

Task: with help of JavaScript render tree. On input pull JSON on output will be DOM Html.

Object structure is pretty simple, tree class, and node class:

Tree - keeps nodes, rendering, etc.

TreeNode - implementation of node logic.

Useful methods: delete selected node (deleteSelectedNode), append node(appendNode), adding node to child collection of selected node. (appendNodeToSelected).

All code of node is not showed here because there is a lot of code (all listing will be available in attach). The node class implements editing methods:

Delete code:

Conclusion

First task completed. The tree is good looking in IE and FF; allows add, delete and edit nodes; implements simple API.

Example of tree, here.

Download here.

In the next part of serie I will implement server side, which will display the tree from database.

Russian version of article

Prototype 1.6.0 RC1: Changes to the Class and Event APIs, Hash rewrite, and bug fixes

Changes to the Class API

For example, in 1.6.0_rc0, where you’d write:

We’ve changed this so you now write:

var Foo = Class.create();
Foo.addMethods({ /* instance methods */ });

As in 1.6.0_rc0, you can still add instance methods directly from Class.create:

Prototype 1.6.0 release candidate

It has lots of new features such as:

  • Event API Enhancements
  • Function API Enhancements
  • Function API Enhancements
  • Class API Enhancements
  • Ajax API Enhancements
  • DOM API Enhancements
  • Template API Enhancements
  • Improved support for JavaScript 1.6 and WHATWG 1.0 standards

Prototype 1.5.1 released

final version of 1.5.1 is here. The core team and dozens of contributors have fixed 30 bugs and introduced a slew of features and performance optimizations since 1.5.0. Here’s a look at the highlights of our best release yet.

Cruiser Behaviors library

Cruiser logoOne of most comon web developer's tasks is making HTML element s do some useful things when events are fired by browser, for example, when user's mouse cursor is hovered over the element.
Classic solution for this is attaching event handlers right in HTML code, i.e. <div onclick=...
A great approach for programmer when you have full access to source code, have enough skills to modify it etc. But sometimes you cannot control element's event handlers (imagine you write an article on some website, or you need some event handlers to a particular mod_mainmenu links in Joomla)
While surfing the Web, I've found a library that solves this problem  - Cruiser Behaviors library.
I'll show you how you can separate the content and it's behavior using this library. Let's make a HTML that displays Google PR retreived live from Google server without writing event handlers as HTML element properties. PR will be displayed as a tooltip for element, updated once per page display and displayed when user's mouse cursor hovers over the link

V1.7.1 beta 1: 'Performance!'.times(3) + Sound

the heels of the recent Prototype 1.5.1 release candidate, here’s the latest and greatest version of script.aculo.us: 1.7.1 beta 1.

Beta warning: Things might not work as you might expect, though they really should—if you hit any problems, please use the bug tracker and give reports. The same that applies to Prototype applies for script.aculo.us too, so read the how to contribute page to see how you can help out here!

The most important change is the update to Prototype 1.5.1 which yields major performance improvements, slick new JSON support and various fixes all around. Note that the version of Prototype that comes with script.aculo.us 1.7.1 beta 1 is actually a few steps ahead of the 1.5.1_rc1 release and already incorporates a few additional fixes, so please use the version that comes with the script.aculo.us download.

Prototype 1.5.1 release candidate

The first release candidate for Prototype 1.5.1 is now available for download. Prototype 1.5.1_rc1 contains bug fixes, performance improvements, and a few new features. If you’re using Prototype 1.5.0 in your application, we urge you to upgrade to this release candidate and report any bugs you may encounter. Assuming no heinous bugs are found, you can expect the final version to be released sometime within the next couple of weeks.

Keep reading for an overview of what’s changed (or see the full CHANGELOG for more details).

Bug fixes

  • $$ no longer returns duplicates for certain selectors. [#7568]
  • Hash#toQueryString no longer doubly encodes certain parameters. [#7421]
  • $H no longer iterates over shadowed properties in Safari. [#7421]
  • Form.Element#disable will now call blur(), removed blur() call from Form.Element#enable. [#6034]
  • Fixed an issue with serializing empty array inputs. [#7516]
  • Fixed a bug in the simulated hasAttribute for IE due to getAttributeNode sometimes returning null.
  • Fixed that Form.Methods and Form.Element.Methods weren’t being applied correctly to forms and form elements in Safari. [#7358]
  • Fixed setStyle with opacity: 0 to work correctly in IE.
  • Fixed that Form.Element#activate shouldn’t raise an exception when the form or field is hidden.

New features and changes

Prototype 1.5 Documentation in PDF

The prototype team has new docs? PDF download thanks to Josh Clark.

Prototype API Docs

Context right mouse click menu

Today I want to share my javascript Context Menu control built with prototype.js.

It's pretty simple to use it :

In the head section of page add such code:

<link href="style/style.css" rel="stylesheet" type="text/css" />

<script type ="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/domutils.js"></script>
<script type="text/javascript" src="js/menu.js"></script>
<script type="text/javascript">

window.onload=function(){

var items = [
{ text: "Choose address", onclick:function(){alert("item0");} },
{ type: "divider"},
{ text: "Copy", onclick:function(){alert("item1");} }
];

var menu =new ContextMenu("table_body",items);

// menu.onBeforeShow =function(menu){ alert("on before show");};
// menu.onClose = function(menu){alert("on close");}

}

</script>

 

Where:

Avoiding Bloat in Widgets - OOP for Prototype.js

Widgets walk a fine line between abstractions and implementations. Implementation, in this case, is a practical solution chosen to perform a given function. The problems with widgets occur when the widget author walks too far in one direction, or worse, walks an outward spiral covering both directions. Both choices lead to script bloat and complexity thats hard to manage. You no longer have a simple solution for a defined problem, you have a complex solution for a variety of problems. The good news is there are ways to avoid both the bloat and complexity.

Syndicate content