AjaxWrite

A lot of buzz today about AjaxWrite, a new AJAX word processor/text editor announced yesterday. It's all nice and everything, but it killed my browser once I hit save. Not something I'd be too happy about happening if it was a real document that I was trying to save.

It made my Firefox browser eat up 400MB of memory before crashing! It is supposed to be a Firefox only application, but something isn't quite right there yet. The application was slow to load as well, and several people mentioned it wasn't accessible at all.

In short, it's something I will pass on. Good idea though, I love all things that use AJAX in a novel way. This one, isn't quite up to par yet.

Incidentally, isn't AJAX supposed to be uppercased? ajaxWrite is going against that.

Tags: AJAX, AJAXWrite

  post to Del.icio.us

Playing with AJAX and Scriptaculous in rails

onClick="<%= visual_effect(:highlight, 'test'%>"
visual_effect(:puff, 'tests')
visual_effect(:shake, 'tests')
visual_effect(:DropOut, 'tests')
visual_effect(:SwitchOff, 'tests')
visual_effect(:Squish, 'tests')
visual_effect(:Pulsate, 'tests')
visual_effect(:Fold, 'tests')
visual_effect(:BlindDown, 'tests')
visual_effect(:grow, 'tests')

  post to Del.icio.us

AJAX Script.aculo.us and Rails

Scriptaculous has a new version (1.51) out. Today, I decided to install it as the version I had didn't support the toggle combination effect. For my latest project Adoppt, I needed the toggle feature. Although the Rails on edge (v 1.1) has the support for this added, I didn't want to upgrade yet.

Script.aculo.us has some wonderful effects. The documentation of its CoreEffects lists the options that can be used with most effects. These options include:

duration: Duration in seconds, given as a float. Defaults to 1.0
fps: Frames per second (default:25, max:100)
transition: "Sets a function that modifies the current point of the animation, which is between 0 and 1. Following transitions are supplied: Effect.Transitions.sinoidal (default), Effect.Transitions.linear, Effect.Transitions.reverse, Effect.Transitions.wobble and Effect.Transitions.flicker."
from: "Sets the starting point of the transition, a float between 0.0 and 1.0. Defaults to 0.0."
to: "Sets the end point of the transition, a float between 0.0 and 1.0. Defaults to 1.0."
sync: Sets whether the effect should render new frames automatically (which it does by default). If true, you can render frames manually by calling the render() instance method of an effect. This is used by Effect.Parallel().
queue: "Sets queuing options. When used with a string, can be ‘front’ or ‘end’ to queue the effect in the global effects queue at the beginning or end, or a queue parameter object that can have {position:’front/end’, scope:’scope’, limit:1}. For more info on this, see Effect Queues."

Ajaxian blog has some pointers on using the new Script.aculo.us 1.51 effects on Rails:

visual_effect :toggle_slide, ‘element’
visual_effect :toggle_blind, ‘element’
visual_effect :toggle_appear, ‘element’

I tried using them on Rails 1.0 but obviously it didn't work.

  post to Del.icio.us

WYSIWYG Javascript HTML Editors - TinyMCE

I have been in search of a functional and cross browser compatible WYSIWYG (For beginners: 'W'hat 'Y'ou 'S'ee 'I's 'W'hat 'Y'ou 'G'et) javascript editor for some time. My search ended with TinyMCE, available under open source GPL license. One of the great features of TinyMCE are the easily writable plugins. That means that with a basic understanding of CSS, JS and HTML, you can add custom buttons. I needed a plugin yesterday to implement blockquote, rightbox and leftbox buttons and after figuring out the basics it took me less than 30 minutes to write the plugin.

The implementation of Tiny MCE is really easy. Just drop two small scripts on any page with textfields and voila! All textfields will automatically become resizable with the WYSIWYG editor.



TinyMCE Wiki
Full featured example of TinyMCE
TinyMCE on MoxieCode


Some of the CMS (content management system) for which Tiny is available:

A lot of CMS have been 'tiny´ied' - some using it as their default editor, others have implemented in a module/plugin.

• Drupal
• Mambo, plugin
• PHP-Nuke
• Plone
• Puzzle Apps CMS
• Wordpress - plugin
• Xaraya

Problems with TinyMCE
Javascript Functions API documenting a variety of TinyMCE functions
Building a PHP Sample with TinyMCE
Buttons reference TinyMCE
FAQs about TinyMCE

Can I use TinyMCE in my commercial application?

Yes you can, the LGPL license is a Free Software License. You can read the whole license here or visit Free Software Foundation web site here

donadoni provides a great tip on how to toggle between enabling / disabling TinyMCE

var tinyMCEmode = true;
function toogleEditorMode(sEditorID) {
try {
if(tinyMCEmode) {
tinyMCE.removeMCEControl(tinyMCE.getEditorId(sEditorID));
tinyMCEmode = false;
} else {
tinyMCE.addMCEControl(document.getElementById('pagecontent'), sEditorID);
tinyMCEmode = true;
}
} catch(e) {
//error handling
}
}

TinyMCE
Javascript
HTML
AJAX

  post to Del.icio.us

OpenRico AJAX Library

OpenRico is an open-source Javascript library that allows you to create rich Internet applications with AJAX functionality. OpenRico AJAX library provides complete AJAX support with drag and drop functionality. In addition OpenRick AJAX supports cinematic effects using AJAX.

According to OpenRico website,

Rico originated as work done in Sabre Airline Solutions to create a suite of rich internet components, behaviors and effects for the web application space

The library is a fully object-oriented JavaScript and extends on the excellent prototype.js effort from the Ruby on Rails folks.

Very soon I will be posting an AJAX tutorial on how to create a RSS reader using AJAX. In my development, I have been able to get it working for RSS files but ATOM files and certain RSS files are still giving issues. Stay tuned for more on AJAX RSS reader.

  post to Del.icio.us

AJAX Tutorial

While I would like to call this tutorial, "AJAX Tutorial", you may call it "Yet another AJAX tutorial" or whatever you like :).

AJAX BASICS
AJAX is short for Asynchronous JavaScript and XML. Though the name is new, the technology isn't. The main reasons for using AJAX are
1. Remote Procedure Calls (making posts to the web server without having to reload the page)
2. Javascript parsing capabilities for XML documents.

Before we can make a HTTP request, we will need to create an instance of XMLHTTPRequest class for Safari and Mozilla based browsers (Firefox, Netscape etc). For Microsoft Internet Explorer (MSIE) compatibility, we need to create an instance of Microsoft.XMLHTTP. The reason is because in MSIE, XMLHTTP functionality was implemented as an ActiveX object.

Static function:
Dynamic function

http_request.onreadystatechange = function(){
// code here
};

Creating a request (can use GET, HEAD and POST):

http_request.open('GET', 'http://www.ajax-xml.blogspot.com/atom.xml', true);
http_request.send(null);

3rd party URLs cannot be opened due to browser security features. Toggle the asynchronous mode using the third parameter. As documented on Mozilla.org,

If TRUE, the execution of the JavaScript function will continue while the response of the server has not yet arrived. This is the A in AJAX.

1. Create an instance for XMLHTTP request
2. Override the header returned from the server (to ensure mime-type header is set to always xml). This can be accomplished by calling the member function overrideMimeType for our instance of XMLHTTP object with parameters set to "text/xml".
3. Take care of the response returned by server.
4. Set the onreadystatechange property of HTTP object to the name of function that will be invoked when the server returns a response.
5. To use POST, we must use

http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

6. To use GET, we must append "escaped" variables to the URL.
7. HTTP server response: http_request.status == 200
8.

States of readyState (http_request.readyState == 4):
# 0 (uninitialized)
# 1 (loading)
# 2 (loaded)
# 3 (interactive)
# 4 (complete) - means full server response has been received and it's OK for us to continue processing.

To be continued....
AJAX XML


The following sources were consulted, referenced and used in this AJAX tutorial.

  post to Del.icio.us

Dojo AJAX Library

With AJAX creating the buzz these days, AJAX libraries, AJAX toolkits and AJAX tutorials are popping up everywhere. According to the main website of Dojo AJAX:

Dojo is an Open Source toolkit that allows you to easily build dynamic capabilities into web pages and any other environment that supports JavaScript. Dojo provides components that let you make your sites more useable, responsive, and functional. With Dojo you can build degradeable user interfaces more easily, prototype interactive widgets quickly, animate transitions, and build AJAX-based requests simply. Dojo layers these capabilities onto a lightweight packaging system which forms the core of Dojo. When you write scripts with Dojo, you can include as few or as many of the available APIs as you need, and your app will only include what it uses.

Since Dojo AJAX toolkit has the backing up of open source, I think it will make it big and convert into a stable project. Declaring and using responsive DHTML interface components with this AJAX library is a snap. According to Dojo's site:

Dojo also provides application authors with a simple way of declaring and using responsive DHTML interface components. Prototype to deployment, Dojo is markup all the way, allowing you to work faster without having to learn new tools or APIs for things you already know how to do. Better yet, Dojo lets your widgets be portable between HTML, SVG, and whatever else comes down the pike. When your application is built on Dojo, you don't have to choose a technology before you choose what's best for your users.

Check the Dojo site for latest version of Dojo AJAX. For convenience, you can download the current version of AJAX library by Dojo. Stay tuned for more AJAX tutorials and information on Dojo AJAX.

Tags: AJAX Dojo AJAX Web 2.0 web2.0 xml

  post to Del.icio.us

AJAX , SOAP and Web 2.0

James Snell, a software engineer at IBM, has a great article on building SOAP (Simple Object Access Protocol) client with AJAX. James writes:

In order to invoke Web services from within a Web browser and reliably process the SOAP messages, you need to first understand the security issues. (See the sidebar "A Word about Security.") You also need to write a JavaScript script library (Figure 2) that can abstract away the inconsistencies of the underlying browser XML implementations, allowing you to work directly with the Web services data.

An example of AJAX based RSS reader is available here. More AJAX examples from DrClue.

On February 18, 2005, Jesse James Garrett, coined the term AJAX in the following passage. Believe it or not, since then AJAX has been the "buzz word."

Google Suggest and Google Maps are two examples of a new approach to web applications that we at Adaptive Path have been calling Ajax. The name is shorthand for Asynchronous JavaScript + XML, and it represents a fundamental shift in what’s possible on the Web.

Fueled Software has a few pointers on how not to use AJAX. Meanwhile, Informit has an article on how to use AJAX.

From the "Good Ajax Gone Bad" section of AJAX article by Fueled Software,

While Ajax is a compelling idea, too many people are jumping on the Ajax bandwagon and using it in ways that are overboard. In this post, we are going to look at some of the times when Ajax goes bad. Before we do, I want to say that these are merely examples of inappropriate or unnecessary use but they demonstrate concepts that can be useful.

According to the AJAX tutorial by Informit,

Kris Hadlock explains how to use AJAX in a real-world situation and how you can assess its value in a project. By the time you finish reading this article, you'll know what AJAX is as well as where, why, and how to use it.

The core features of Web 2.0 and section on AJAX from a Powerpoint tutorial by Anubhav Kale on AJAX

Core features of Web 2.0
Web as a Platform
Collective Intelligence
Above the level of Single Device
Services , not packaged software
Rich User experiences

AJAX
Assists in User Interfaces
Less machine readable / linkable webpages

AJAX Web 2.0 AJAX tutorial SOAP

  post to Del.icio.us

AJAX

Popularity of AJAX is increasing day by day. Google, Yahoo!, and Microsoft have all launched applications with AJAX. With this blog, I will help you understand and track AJAX developments.

AJAX is an abbreviation for Asynchronous JavaScript and XML

How to Learn AJAX in 20 minutes.
Tutorial: AJAX and PHP.
AJAX and XMLHttpRequest for PHP programmers

Tags: AJAX XML

  post to Del.icio.us