Thursday, May 31, 2007

Google Gears: a sea change for web applications?

I thought that Adobe Apollo might have hit a sweet spot for allowing developers to create hybrid desk top and web applications. I think that Google may have hit a sweeter spot with Gears. Gears installs as a FireFox add-on and uses the SQLite database to store data locally on your file system. Each site that you visit that is 'Gears enabled' causes a pop up permissions dialog to appear - I recommend being careful of which web sites you allow to use the Gears add-on. I have reviewed the developers' documentation and it looks straight forward to set up and a Javascript SQL database API makes it easy to use SQL in your Javascript.

Labels: , ,


Monday, February 12, 2007

Java + AJAX in 18 lines

I have been investing a fair amount of time learning the Dojo Javascript library but I had an application where I only needed AJAX to handle HTML form input - I wanted a server side function to return HTML to be inserted below the form. Dojo is a huge library so I pulled the prototype.js library out of one of my old Ruby Rails projects (prototype.js is only about 70KB). I put the following in my form JSP page:
<form id="myForm2">
 <input type="text" id="input_test_form_text" />
 <input type="button" value="Search" onclick="getS()" />
</form>
<div id="searchresults"></div>

<script type="text/javascript" src="prototype.js"></script>
<script>
 function getS() {
var params = 'query=' + $F('input_test_form_text');
var x = new Ajax.Updater('searchresults', '/ajax_search.jsp',
{method: 'get',parameters: params});
 }
</script>
The follow is a trivial server side JSP ajax_search.jsp that does nothing but returns the original query as an HTML snippet:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<%
String req = request.getParameter("query");
out.println("<p>request for 'query' is:" + req + "</p>");
%>

Labels: , , ,


Wednesday, February 07, 2007

Heavy weight Javascript + AJAX vs. very light weight CSS + DHTML

Although I spend most of my time working on artificial intelligence (AI) projects, I have spent a lot of personal time in the last year working on basic web application skills. I have been prototyping a system using the Dojo Javascript library - great stuff, but definitely heavy weight. However, by loading up all required Dojo library and application specific Javascript at once, and then using AJAX does provide a responsive user experience - after the initial load up time.

After dinner last night, I re-wrote the web UI for my current commercial development project using minimal CSS, HTML, and a small amount of Javascript - although switching work contexts now requires fetching more resources from the server, the amount of data transfer is minimal and the web app is still very responsive, even factoring in slower network connections.

I have looked at Open Lazlo and other heavy weight client frameworks - they look great, but for someone like me whose primary work does not involve building web applications, I like reducing my own learning curve by choosing technologies that cover all of my requirements and simply using them unless some far more compelling comes along.

Labels: , ,


Saturday, January 20, 2007

Using the Dojo Javascript library in Ruby Rails

I have been using the fine Dojo Javascript library in a web app written in Common Lisp and this morning added Dojo to the code base for a current Rails project. The easiest way to get started using Dojo and Rails is to simply install the developer's version (non-compacted) of dojo.js and the src directory directly in your Rail project's public/javascripts directory, so it looks like this:
public/
javascripts/
dojo.js
src/
Again, the "src" directory contains the dojo source files (besides the dojo.js loader). Dojo will complain about rendered Rails web pages withot HTML and HEAD tags, so I added the following HTML with Dojo setup to the view for my main application controller:
<html>
 <head>
  <title>KBSportal KnowledgeManagement</title>
  <script type="text/javascript">
  djConfig = {isDebug: true};
 </script>
 <script src="/javascripts/dojo.js" type="text/javascript"></script>
 <script type="text/javascript">
  dojo.require("dojo.io.*");
  dojo.require("dojo.event.*");
  dojo.require("dojo.widget.TabContainer");
  dojo.require("dojo.widget.LinkPane");
  dojo.require("dojo.widget.ContentPane");
  dojo.require("dojo.widget.LayoutContainer");
  dojo.require("dojo.widget.Checkbox");
 </script>
 <style type="text/css">
  body {
   font-family : sans-serif;
  }
  .dojoTabPaneWrapper {
   padding : 10px 10px 10px 10px;
  }
 </style>
</head>
Dojo is definitely "heavier weight" than the prototype.js Javascript library that is provided with Rails so you may not want to use Dojo for very high traffic sites.

Labels: , , ,


Saturday, November 25, 2006

AJAX tools for multiple development platforms

I feel like I have come full circle (almost) in AJAX development: I started out a few years ago adding some simple AJAX enabled forms to a JSP based application. When first starting out, it took hours to get something working. Then a year ago, I discovered how simple it is to use AJAX in Rails: fine, except that Ruby does not have high enough performance for some applications (unless large parts are written in C - Ferret, for example).

I have spent many evenings playing around with various release versions of the Google Web Toolkit (GWT) and it is very compelling, especially if you already are used to developing GUI applications in Java - the only new wrinkle worth mentioning is getting used to handling events asynchronously. The problem with GWT is that it really does tie you to the Java platform. I spend most of my time developing AI applications, but that said, who does not want basic knowledge and competence at building web applications?

I use Common Lisp, Java, and Ruby for development, so for the occasional AJAX tasks that I have, I have settled with the well respected dojo Javascript toolkit because it plays very well with both Lisp and Java JSP based web applications. Dojo is also easy to use with Rails, if you want an alternative to Rail's great AJAX support.

By using Dojo, I basically have to deal with just one learning curve no matter what platform I am developing on. Here is a simple example for a JSP page (assuming that this would be more interesting to most people than a Lisp example):

Add this to your <head> section on a top level JSP page:

<script type="text/javascript">
var djConfig = { isDebug: true };
</script>
<script type="text/javascript" src="dojo.js"></script>
<script type="text/javascript">
dojo.require("dojo.io.*");
dojo.require("dojo.event.*");
</script>
Then try putting this somewhere on your JSP page (note: this assumes that you have another JSP page ajax.jsp that gets the form values and returns content to be placed into the DIV element with ID=ajxplydiv. Anthing that ajax.jsp writes using out.print() gets inserted asynchronously into the "ajxplaydiv" DIV element):

<h3>test AJAX Form:</h3>
<form id="myForm">
<input type="text" name="input_test_form_text" />
<input type="button" name="button1"
value="Try AJAX form" id="ajaxButton" />
</form>

<div id="ajxplaydiv">
initial context for AJAX play div
</div>

<script type="text/javascript">

var buttonObj = document.getElementById("ajaxButton");
dojo.event.connect(buttonObj, "onclick",
this, "my_onclick_button");

function my_onclick_button() {
var ajaxargs = {
url: "ajax.jsp",
load: function(type, data, evt){
dojo.byId('ajxplaydiv').innerHTML = data;
},
error: function(type, data, evt){
alert("Error occurred!");
},
mimetype: "text/plain",
formNode: document.getElementById("myForm")
};
dojo.io.bind(ajaxargs);
}
</script>
The call to dojo.io.bind sends a request containing the form data to the ajax.jsp page, and whenever the results are returned then the Javascript functions "load" or "error" defined in the data block in my_onclick_button() is called. This is just one example of processing form data and adding HTML below the form without refreshing the page - but is a common use case for using AJAX. This example assumes that I have both the dojo "src" directory and dojo.js in my top level web resources directory. The great thing about dojo is that it encapsulates all asynchronous event handling, offers a good supply of visual components (that map to HTML elements) and is simple to use no matter what programming language you are using for a web application.

Labels: , , , ,


Saturday, October 07, 2006

Java + AJAX : IntelliJ 6 + GWT a great combination

I plan on doing a major overhaul to our "knowledge intensive" cooking and recipes web portal including AJAX support and a better artificial intelligence recipe wizard. The portal is written in Java using JSPs and custom tag libraries.

I have actually considered re-writing the whole thing in Ruby Rails, partially for the AJAX support and partially because Rails is easier to develop with. However, after spending a few hours experimenting with the IntelliJ 6 Google Web Toolkit (GWT) plugin and wizard support, a lot of the advantage of Rail's excellent AJAX support is minimized. Both free developers from most Javascript hassles of using AJAX.

The is a short flash demo that is worthwhile watching if you are considering using GWT.

Labels: ,


This page is powered by Blogger. Isn't yours?

Subscribe to Posts [Atom]