Category Archives: Easy Ajax

Turn On Debug Menu in Safari

Safari has an interesting set of options for debugging web pages. You just have to turn it on. From the Teminal, type the following:

defaults write com.apple.Safari IncludeDebugMenu 1

You can also turn it on for Windows by adding the following to your Preferences.plist (C:\Documents and Settings\USERNAME\Application Data\Apple Computer\Safari\Preferences.plist ) file:

<key>IncludeDebugMenu</key>
<true/>

For more info, check the Apple support documentation.

5 JavaScript Frameworks Reviewed

With AJAX being all the rage in today’s web applications, several toolkits have been developed to make Asynchronous Javascript And XML (AJAX) calls and dynamic HTML (DHTML) easier on the developer. Today we had a discussion in my ISys 532 Information Architecture class on the recently Open Sourced Google Web Toolkit (GWT) and its impact on enterprise web development. We talked briefly about a few other alternatives. While I don’t have extensive experience in all of these Javascript frameworks, here’s my take on each.

1. Google Web Toolkit (GWT) – This is a full-stack Java to browser toolkit that creates your browser independent Javascript from your Java code. If your application is already in Java, this might be a great toolkit for building AJAX rich, cross-browser compatible web apps. It features reusable UI components, its own Remote Procedure Call protocol that allows you to write all of your logic in Java, browser history management that won’t break the back button with AJAX calls, debugging, JUnit integration, and Internationalization libraries.

2. Yahoo! UI Library – This is different from the Google Web Toolkit in that it isn’t meant for a specific server-side environment. The Yahoo! UI Library gives developers tools to quickly create cross-browser user interface components. It has some nice widgets for drop down menus, drag and drop, and animation. The UI Library also features some nice css layout managers as well as css normalizing files. You can pick and choose which parts you want to use in your application. If you want some quick, standard 2 column layout templates, the UI Libraries are great. The Connection Manager also provides some nice libraries for performing asynchronous calls to your back-end server.

3. Prototype JavaScript Framework – This is one of my favorite JavaScript frameworks available. Prototype provides libraries for simple AJAX/AJAH calls to your back-end server. My favorite feature is its simple element targeting syntax. Finding an element in the DOM is super simple, and form manipulation is a breeze. There are also many other Javascript products that are built on top of the Prototype framework such as windows, rico widgets, and scriptaculous effects. Prototype is also the JavaScript library of choice for Ruby on Rails and CakePHP. This provides full-stack back-end to browser development similar to what Google’s Web Developer Toolkit is for Java. Prototype makes JavaScript programming fun again.

4. Dojo, the Javascript toolkit – Dojo is a full fledged JavaScript framework that combines the power of Prototype, Scriptaculous, and Rico, although it’s not built on the Prototype libraries. Dojo gives you the entire package in one. It provides some nice widgets including a rich text editor, calendars, color pickers, special combo boxes, form validation, trees, menus, fisheye lists (similar to Mac OS X’s object doc), and google/yahoo maps. It’s a great library if you are looking to use lots of custom form widgets. It also has built in support for quick RPC calls using JSON instead of XML. JSON RPC is the passing of serialized JavaScript objects across the network.

5. Adobe Labs Spry framework – I was recently introduced to this cool new AJAX framework created by Adobe. Spry takes a slightly different approach to AJAX applications. The syntax takes more of a tag-based approach to displaying and updating data. It takes advantage of XPath technologies to parse and render xml data that is loaded from the server. This approach is like XSL transformations done by JavaScript. It appears to make xml data updates very simple. I believe it would integrate well with any Ruby on Rails or CakePHP application as well. This is definitely a technology that I will be watching over the next few months.

Does anyone know of any other Javascript framework that should be mentioned here?

AJAX vs AJAH?

Since I’ve made the jump into CakePHP, I’ve begun using the Prototype javascript libraries. If you’re a Javascript programmer, and have never used prototype.js, you’re in for a real treat. It handles a lot of your cross-browser issues, and gives a really cool API for building Web 2.0 applications.

Anyways, prototype has a real nice function called Ajax.Updater, which makes a call to your server and replaces an element with the returned html. It makes creating an ajaxy application really nice. But is this really AJAX? Or is it AJAH?

AJAX stands for Asynchronous JavaScript And XML. So I came up with the term AJAH, which stands for Asynchronous JavaScript And HTML. Okay, I know that HTML is a flavor of XML, so technically you can say that it AJAH is AJAX, but I still think there is a difference.

XML is primarily a markup that allows you to send data formatted in such a way computers can read and interpret the data. The data can be extracted at a granular level. With HTML, the elements of data that you are passing are usually not extract-able unless you use micro-formatting.

With true AJAX, a call is made to the server, the nicely formatted data is returned and the client application extracts the data from the xml, and replaces whatever elements need to be replaced on a page. With AJAH, a glob of html is returned and slapped into the page.

So, which is better? I’m not sure at this point. AJAH definitely allows you to create a dynamic site that can talk to the server behind the scenes quickly and easily so I’m fine using AJAH.

Also, I’m working on a CakePHP/Frameworks post… Stay tuned.

Yahoo! UI Library

I posted this in my Tech & Biz Blog, but I figure this is better suited here in the php blog.

Yahoo is working hard to win hearts of the Web 2.0 world. They recently released two new products to their Developer Network.

The first service is the Yahoo UI Library. Many of the innovations of the Web 2.0 are powered by JavaScript. Anyone that has tried to develop a dynamic site using JavaScript will experience many frustrations as they try to make their scripts work cross-platform. It appears that Yahoo understands our pains, and has released a bunch of really cool JavaScript libraries to assist us in creating cool new Web 2.0 technologies.

The second service is a Design Patterns guide for developers. Coming up with the architecture for a new website can be difficult at times, especially when you are dealing with new functionality that you have never before implemented. Yahoo has gathered design patterns to assist us in creating web elements such as Breadcrumbs, Auto-Complete text fields, Drag and Drop page elements, Page Tabs, and Object Pagination. I believe his will be a great resource for all Web 2.0 companies.

Thanks Yahoo!

Read more at developer.yahoo.net/yui…