Archive for the 'ajax' Category

Mar

13

SWFUpload

Posted by admin under ajax, technology - No Comments
SWFUpload is a small JavaScript/Flash library to get the best of both worlds. It features the great upload capabilities of Flash and the accessibility and ease of HTML/CSS.
  • Upload multiple files at once by ctrl/shift-selecting in dialog
  • Javascript callbacks on all events
  • Get file information before upload starts
  • Style upload elements with XHTML and css
  • Display information while files are uploading using HTML
  • No page reloads necessary
  • Works on all platforms/browsers that has Flash support.
  • Degrades gracefully to normal HTML upload form if Flash or javascript is unavailable
  • Control filesize before upload starts
  • Only display chosen filetypes in dialog
  • Queue uploads, remove/add files before starting upload
Mar

5

Smart GWT 2.1 Released

Posted by admin under ajax, news, web2.0 - No Comments

Smart GWT 2.1

Smart GWT 2.1 has just been released. Like prior releases, this release has significant improvements and new features.

Smart GWT is a GWT based framework that allows you to not only utilize its comprehensive widget library for your application UI, but also tie these widgets in with your server-side for data management. Smart GWT is based on the powerful and mature SmartClient library.

Smart GWT is compatible with GWT 1.5.3 , GWT 1.6.4, GWT 1.7.x and GWT 2.0.x

Mar

3

To make a AJAX File upload

Posted by admin under ajax, internet, resource - No Comments

Based on my knowledge, all the File Upload control which based on the RFC1867 ( Form-based File Upload in HTML. (http://www.ietf.org/rfc/rfc1867.txt) ) need a full postback, and cannot work in an UpdatePanel.

There are many way to make a “AJAX” file upload, please check:

http://www.muraton.net/post/2008/01/FileUpload-and-Ajax-UpdatePanel.aspx

http://mobiledeveloper.wordpress.com/2007/05/15/file-upload-with-aspnet-ajax-updatepanel/

http://forums.asp.net/t/1207035.aspx

http://geekswithblogs.net/ranganh/archive/2008/04/01/file-upload-in-updatepanel-asp.net-ajax.aspx

http://www.muraton.net/post/2008/01/FileUpload-and-Ajax-UpdatePanel.aspx

http://mobiledeveloper.wordpress.com/2007/05/15/file-upload-with-aspnet-ajax-updatepanel/

http://aspalliance.com/1442_Building_AJAX_Enabled_File_Uploading_System_with_Progress_Bar_Using_ASPNET_20.all

http://geekswithblogs.net/rashid/archive/2007/08/01/Create-An-Ajax-Style-File-Upload.aspx

http://msmvps.com/blogs/luisabreu/archive/2006/12/14/uploading-files-without-a-full-postback.aspx

http://blogs.infragistics.com/blogs/tony_lombardo/archive/2007/04/09/file-uploads-where-s-the-ajax.aspx

http://www.codeproject.com/KB/aspnet/AJAXUpload.aspx

http://www.codeplex.com/fileuploadajax

http://geekswithblogs.net/ranganh/archive/2008/04/01/file-upload-in-updatepanel-asp.net-ajax.aspx

Aug

5

jQuery Wordpress Plugins

Posted by admin under ajax, internet, resource - No Comments

jQuery allows for impressive animations and interactions that are easily created and utilized in your Wordpress blog. If used wisely, these plugins can enhance your blog by making it far easier for your readership to read your words of genius, and participate in your blog.

This articles details some of the better plugins that utilize jQuery.

Infinite Scroll Plugin. This baby adds related pages on to the one that your reader is reading. The content it grabs is predetermined by you by using the .load() method which is an CSS selector of the HTML you have chosen. This is also knows as autopagerize, paginate, and endless pages.

jQuery Lightbox Plugin. This plugin can be used to overlay images on a page. It is compatible with Wordpress 2.2 and up, and fully compatible with K2. It is well worth considering if you are using a lot of pictures on your blog.

Wordpress Post Information Plugin. This simple plugin allows you to view post meta information by using the toggle function in JavaScript. It is an on demand feature.

Continue Reading »

Apr

23

Ajax Framework Analysis Results

Posted by admin under ajax, internet - No Comments

Way back in January, I wrote about how my colleagues and I were evaluating Ajax frameworks to build a SOFEA-style architecture. To make our choice, we used the following process:

  1. Choose a short list of frameworks to prototype with.
  2. Create an application prototype with each framework.
  3. Document findings and create a matrix with important criteria.
  4. Create presentation to summarize document.
  5. Deliver document, presentation and recommendation.

When I wrote that entry, we had just finished step 2 and were starting step 3. I first wrote this blog post a week later, when we delivered step 5. Here is the comparison and conclusion sections of the analysis document we composed.

Framework Comparison
In order to evaluate the different frameworks against important criteria, we created a matrix with weights and ranks for each framework. This matrix shows how our weighting and rankings lead us to the winner for our project. You can view this matrix online or see below for a summary.

Note: Criteria whose values were identical across all candidates were weighted at zero. Charting capability was weighted at zero b/c we decided to use Flash for this.

This matrix indicates that GWT is the best candidate for our team to develop SOFEA-style applications with. In addition to the matrix, below are graphs that illustrate interesting (and possibly meaningless) statistics about each project.

Number of Committers

Books on Amazon

Conclusion
After working with the various frameworks, we believe that all the frameworks were very good and could be used to write applications with. If all weights are equal, these frameworks were almost even when compared against our evaluation criteria. The graph below illustrates this.

Ranking with equal criteria weights

Even after applying the weighted criteria, the evenness doesn’t change a whole lot.

Ranking with weighted criteria

Without considering the even or weighted criteria, we believe the decision all comes down to what the developers on the project feel they will be most comfortable with. If you’re developing with Dojo or YUI, chances are you’re dressing up existing HTML and possibly using progressive enhancement to add more rich functionality. On the other hand, Ext JS and GWT are similar to Swing programming where you build the UI with code (JavaScript for Ext JS, Java for GWT).

The tools available for JavaScript development have gotten increasingly better in recent years. IntelliJ IDEA has a JavaScript Editor that provides many of the same features as its Java editor. Aptana Studio also has excellent support for authoring and debugging JavaScript. However, we believe the Java debugging and authoring support in IDEs is much better. Furthermore, we are more familiar with organizing code in Java projects and feel more comfortable in this development environment.

Based on this evaluation, we believe that GWT is the best framework for our team to develop SOFEA-style applications with.

Flash Forward to Today…
The core GWT library from Google doesn’t have a whole lot of widgets, nor do they look good out-of-the-box. So early on, we experimented with two alternative implementations that continue to leverage GWT concepts and tools:

  • GXT: a GWT version of Ext JS
  • SmartGWT: a GWT version of SmartClient

Unfortunately, over the past few months, we’ve found that both of these implementations are too heavy for our requirements, mostly because of the file size of the generated JavaScript code. For example, a feature I wrote generated a 275K *.cache.html file using GXT. After determining that was too slow to give users the initial “pop”, I re-wrote it without GXT. After a day, we had an application with *.cache.html files of 133K. Yes, that’s over a 50% reduction in size!*

Because of these findings, we are proceeding with the core GWT library from Google and adding in new components as needed. It is cool to know you can make a UI “pop” with GWT, as long as you stick to the core - close-to-the-metal - components. For those applications that can afford an initial “loading…” state, I’d definitely recommend looking at GXT and SmartGWT.

* To make refactoring easier, I copied GXT MVC into our source tree and modified all imports.  (Via RaibleDesigns)

Feb

5

Ajax: The State of the Art with Dion and Ben

Posted by admin under ajax, internet, resource, technology, web2.0 - No Comments

This morning, I added Dion and Ben’s talk titled Ajax: The State of the Art. Below are my notes from the event.

Ajax started out as a bunch of hacks. It showed that we could take our web interfaces and do a lot more with them. A hack isn’t necessarily a bad thing. Often, they turn into something much more elegant over time. The new browsers have many amazing capabilities that we haven’t taken advantage of yet. We’ve seen discussions on Ajax go from how to do XHR to frameworks and how rich and mature they are. Dojo is great for Enterprise Development (packing system, namespaces). jQuery is well-suited for lightweight developers (PHP). Prototype is fantastic for people who do a lot of JavaScript development and take it very seriously.

Today’s Ajax landscape is mature, really rich, and really exciting. Today, Dion and Ben are going to talk about technologies they’re really excited about for the future.

Canvas
The building blocks of the web are text, boxes and images. With canvas, it really makes a lot more things possible. You can do bitmap rendering and image manipulation. They’re showing a slide with Doom and Mario Kart running. Canvas 3D does true 3D rendering. Firefox and Opera have done prototypes of this. Can you do canvas-type things today in a browser? Yes, if you use Flash or Curl. Dion and Ben are excited about canvas over plugins for the following reasons:

  • No start-up delay
  • Available on mobile devices today
  • Rendering fidelity with browser (especially important for typography)
  • No bridges necessary (no marshalling/unmarshalling)
  • Not a plug-in

The <canvas> tag originally came from Apple’s Dashboard. Dashboard’s programming model was in HTML and JavaScript. Dashboard is using WebKit under the covers. Today, canvas support exists in every major browser except for IE. The good news is there are Flash and Silverlight bridges to add support to IE. There’s also an ActiveX component that wraps the Firefox implementation and allows it to run in IE.

SVG
Dion and Ben aren’t that excited about SVG because it’s such a huge spec. We’ve been struggling with the HTML standard for the last 10 years and the thought of another huge spec for the next 10 years isn’t that appealing.

Fast JavaScript
Almost all major browsers have a Fast JavaScript implementation. Chrome has V8, Safari has SquirrelFish Extreme, Firefox has TraceMonkey and Opera has Carakan. This is exciting because of industry trends and how companies are trying to reduce computation cycles in data centers. The more computing that can be put on the client, the better. IE doesn’t have anything, but Dion and Ben believe they are working on something.

Web Workers
Interface latency is awful for applications. Jakob Nielsen once said:

0.1 second is about the limit for having the user feel that the system is reacting instantaneously. 1.0 second is about the limit for the user’s flow of thought to stay uninterrupted, even though the user will notice the delay.

Anything that takes longer than a tenth of a second should be pushed to a background thread. Unfortunately, there are no threads in the web. Maybe we can add threads to JavaScript? Brendan Eich has said that “Threads suck” and there’s very little chance for threads getting into JavaScript. Gears brought Worker Pools and this is going into HTML 5 as Web Workers. You could also use Java applets to do this. With the latest Java Plugin, many of applets’ long-standing issues have been solved.

Desktop Integration
The ability to build desktop apps as web apps is very exciting. There’s a few technologies that demonstrate this: Fluid, Mozilla Prism, Adobe AIR, Appcelerator Titanium and Gears. The Palm Pre demonstrates the logical extension of this. The Palm Pre uses the web stack as its developer SDK. It’s very cool that web developers don’t have to learn anything new to become a Palm developer. Desktop integration is exciting especially if we can access desktop applications like email and address book.

The Ajax frameworks that are out there have done a lot to make web development simpler. However, there’s still a lot of pain with CSS and cross-browser issues. What if you took canvas and combined it with a sophisticated grid-based layout in JavaScript?

There’s a lot of platforms out there: Microsoft Silverlight, Adobe Flash, Apple Cocoa and Sun’s JavaFX. The web often isn’t considered a platform. Dion and Ben believe there should be an Open Web Platform. The problem right now is there is no central location to find out how to get stuff done. You have to search and find resources from many different locations. Mozilla is putting it’s resources into creating an Open Web Platform. This site will consist of 4 different areas:

  • Home
  • Documentation (for different frameworks, browsers, quirks)
  • Dashboard (state of the open web)
  • Roadmap (what’s going on)

This is not just Mozilla, it’s very much a community effort. This is something that Ben and Dion have been working on. But there’s something else they’ve been working on too. They’ve been talking about all these cool things, but what about an interesting application to test all these technologies?

Bespin
As they looked at code editors, most of them provide awful user experiences. Bespin is the Editor of Your Dreams and contains the following features:

  • Accessible from anywhere - any device in any location
  • Simple to use, like Textmate (not heavyweight like Eclipse) - an editor, not an IDE
  • Wicked Fast - performance, performance, performance
  • Rock-solid real-time collaboration, like SubEthaEdit - it just works
  • Integrated command-line, like vi - Fun like Quicksilver, social like Ubiquity
  • “Self-hosted” environment, like Emacs - For extreme extensibility, but with JavaScript!

Dion and Ben are showed a screen shot of Bespin and now they’re doing a demo. The core editor has what you’d expect with syntax highlighting and line numbers. Canvas doesn’t have text-selection by default, so they had to write it from scratch. The command line allows you to get help, run core command and also to subscribe to commands that others write. You can change your keybindings to emacs or vi as well as many other settings. Much of Bespin is event-driven, so you can easily plugin new behavior for different events.

For viewing files, they couldn’t bring themselves to use a tree. Instead, they developed a file-browsing interface that looks very much like Apple’s Finder. Personally, I like Finder, but wish it had Windows Explorer’s path bar that allows you to simply type in the path without mouse clicks. Back to the command line. They’ve done a lot to make things more discoverable so users can easily find the power of the editor.

Bespin could be used to engage developers more with open source projects. Checking out projects, modifying code and creating patches can be a real pain. Bespin could be used to interface with open source projects in the cloud. You could login, modify code and easily patch/build with the click of a button. One other thing they want to do is to have the server do code-analysis as you’re developing.

Is it OK to love a software tool? You must love your software tools. What we do as Software Developers is one of the most difficult jobs on the planet. Programmers, like poets, start with a blank slate and create something from nothing. If you don’t love your tools, you’ll start resenting what you do. If you don’t love your tools, it shows in your work. – Dave Thomas at RubyConf08

Thunderhead
A GUI Toolkit written with canvas and JavaScript. Allows you to do layouts with very little thought. It’s a lab experiment that’s in progress, stay tuned for more information.

All users care about is the user interface. Dion and Ben believe there’s a key to creating compelling user experiences. It all has to do with managing expectations. It’s not that different from how you manage relationships in your life. Expectations for movies and games have changes drastically over the years. What used to be the web (animated gifs and awful web pages) has also changed drastically (video of Apple’s online store). What was cool with MapQuest got changed drastically with Google Maps. What we have today isn’t the end of the game - expectations will continue to change. However, users have different expectations for software.

Alan Cooper has done some interesting work in this area. The software designer needs to focus in on a user’s goals. There are basic things you can apply to all users, for instance “sex sells”. An example of this is Delicious Library. This application allows you to keep track of things in your home such as books, movies, music and games. They made $500K in 3 months and made $54K the first day, with no advertising.

The quality of any software is determined by the interaction. If the interaction isn’t good, it will poison the entire experience. Donald Norman has a good quote: “Attractive things work better”. In society, this is often called “Dress for Success”.

The Open Web is hear to stay because it has:

  • An Easy Programming Model
  • Easy Remoting
  • Extensive Customization Vectors (e.g. GreaseMonkey)
  • Easy Deployment
  • Great Widgets
  • Great Visual Effects
  • Great Mobile Story
  • Desktop Integration
  • State-of-the-Art Plug-ins

Bespin is a tech preview that they hope to release next week. Thunderhead will be released at the same time.

Conclusion
This was a great talk and easily the most inspiring of the conference. Dion and Ben always do a great job and the sexiness of their presentation made it all the more appealing.

Feb

21

Comet: Reverse Ajax for streaming data from the server

Posted by admin under ajax, internet, technology - No Comments

Daniel Rubio (who maintains the blogs section for TSS.com) has written an article called “Comet: Reverse Ajax for streaming data from the server,” describing ‘Comet,’ a technology to push events from the server side to a browser client. Comet manages to avoid the issues related to having a browser poll a server to check for new events.

The first thing you need to realize is that the data service on the serverside needs to be designed to hold state on behalf of browsers clients, a process that can either be very difficult or very easy, depending on the platform and language you are using. Once again, this takes us to the stateless nature of Web applications and the way a browser needs to identify itself constantly either via cookies or session IDs, or what some characterize as the Hollywood principle – “don’t call us we’ll call you” – referring that only a browser is equipped to make calls and never vice-versa.

This last issue takes us down the road of building an asynchronous server application, or if you prefer a fancier name, an HTTP-based event routing bus, or in other words, a latent application on the serverside able to keep track of clients wishing to receive updates, a design very much in line with the messaging systems used in enterprise systems that are based on publish/subscribe channels.

However, since this last mechanism represents a departure from the “bread and butter” approach used in most Web platforms, it is a big reason why most Comet applications today rely on either custom adapted application-servers or embeddable versions that can tackle these issues. In the particular case of Java, Jetty and Grizzly are two servers that currently have out-of-the box support for Comet-type designs, with varying support in other languages like Python and other popular Java servers like Tomcat, for what is technically known as “continuation support,” a paradigm by which applications are shielded from the stateless nature of the Web. Continuation support also is a touted feature of higher-level language Web frameworks written in Smalltalk and Lisp that have this capability.

Turning our attention to the client side of things, a browser can take various routes to stay in contact with these type of server applications. Among these approaches are long-polling, dynamic script tags and inclusively a workaround using IFrames, none are standard approaches by any means, which is yet another reason why many client side Comet designs rely on the use of frameworks to abstract away incompatibilities between browser implementations – similar to Ajax – with one such framework being Dojo, which in itself now serves as both an Ajax/Comet framework.

Of course, the term Comet itself is something to wonder about. AJAX’ meaning is fairly well-known, as “Asynchronous Javascript and XML,” but what about Comet?

As far as the actual term is concerned, Comet emerged as a pun to Ajax’s meaning outside IT circles as a household cleaner. But quirky name or not, Comet is serving the purpose of an umbrella name for delivering data onto browsers as it becomes available on the serverside, a technique that will surely be of the same impact and go hand in hand with what we know today as Ajax. (theserverside)

Dec

1

Beyond Ajax: Software Development, Two Years from Now

Posted by admin under ajax, resource, technology - No Comments

Ajax has dramatically changed the lives of Web developers during the past two years, but the next two may be even more interesting. Developers—spurred by user expectations, rapidly evolving business models and ever-changing development processes—will need to do things they can’t even imagine today. And how can a forward-thinking IT department or entrepreneur—who is so dependent on innovative software developers—prepare for that future?

In a set of five articles, beginning with Beyond Ajax, CIO.com interviewed the tool builders. Their vision of the computing future will shape the tools they build, which means those are the programming tools you’ll use in a few years to build your own applications. But while CIO.com spoke with vendors, it was the techies, not the marketroids: folks like Tim Bray, Scott Guthrie, David Intersimone. Input was solicited from both vendors of proprietary software (such as Microsoft and Adobe) and open source projects (such as the Dojo Toolkit, and Open Laszlo).

Their predictions address the next round of developer opportunities, problems—and consequences. The articles cover a range of subjects, from The Convergence of Desktop, Web and Mobile Clients to UI changes (the immersive, cinematic interface) to evolving development tools which should make software development easier (what Dojo’s Alex Russell called “Interceding with the Browser gods”).

But Are Web Browsers Ready for the Next Generation of Internet Applications? Probably not, according to Tim Bray, who said, “The people who make a living building Web apps and tools for them live on a different planet than the people who build browsers.” All those problems… er, challenges were packaged up and handed to the folks who run Mozilla and IE, and the Browser dudes responded about making the Internet trustworthy, standards-compatible and innovative.

What kinds of developer tools would you like to see a few years from now? What are the toughest developer pain points you’d like tool vendors to address?

Nov

16

AJAX Google Pagerank Tool

Posted by admin under ajax, resource - No Comments

InstantPageRanker.com is designed to give webmasters and web marketing professionals an SEO tool to instantly determine a website’s Google PageRank.

Type a website address in the box below to see the pagerank instantly (ie. www.tmtbox.com or tmtbox.com).

Nov

16

DWR 2.0 RC4 Released

Posted by admin under ajax - No Comments

DWR has a new release that should be pretty stable, with a final release coming soon.

Features

  • The biggy is Guice support. If it wasn’t for the fact that we could add this in without touching the core of DWR, I’d say this was too big a change at this point in the release cycle, however Tim Peierls (who you might know from this project) has done a stack of work to make DWR and Guice play really well together. You can read more about the background on Tim’s blog.
  • Security: The Fortify review highlighted some areas where DWR was lacking. You can read more about what DWR now does to protect you in the DWR security documentation.
  • Reverse Ajax: There have been some cases where reverse ajax has not been as stable as it should be. I hope that most of those are now behind us.

The reverse Ajax features are really quite something. If you haven’t checked them out yet, do so.