Monday, April 30th, 2007
Category: Book Reviews
, GWT
A mini book deserves a mini review, and so it is with the “Digital Shortcut” from January 2007 entitled Google™ Web Toolkit Solutions (Digital Short Cut): Cool & Useful Stuff. The 112 page PDF goes further than any of the free tutorials out there in that it develops two non-trivial applications using GWT: a Yahoo! Trips app that uses proxied Yahoo web services, and an Address Book, that makes use of Hibernate persistence through RPC.
The applications are non-trivial in that they tackle complex use cases, backend processing, web service, backend persistence and the integration of third party Javascript frameworks — all aspects of GWT application development that are of great interest to serious developers. (Source code available for download.) In order, the chapters cover the following:
- Chapter 1 covers what must already be fairly familiar to most GWT developers — making an RPC call to a backend servlet. This chapter, however, does an exceptionally good job of explaining the why and how of GWT RPC in exhaustive detail. The Yahoo Trips application is used to illustrate how to proxy an RSS feed.
- Chapter 2 shows how to integrate third party Javascript libraries with GWT. In this case Scriptaculous is used to provide an effect in the Yahoo Trips application to the panel containing the search results. The chapter focuses on two ways to incorporate scripts in the app — simply including script tags in the application html file, and GWT script injection, i.e. through the GWT config file.
- Chapter 3 shows one way of how to implement drag and drop with GWT, using a fairly OO approach. The code seems pretty reusable and useful. Again, the Yahoo! Trips app is used.
- Chapter 4 shows how to bring GWT into the mix. Most of it is old hat for experienced Hibernate hands, but the example does work through implementing a sort of remote DAO using the GWT RPC. It’s always good to see how that is done, even if it looks simple on paper. The Address Book app is used for this example.
- Chapter 5 shows how to use ant to deploy your apps to Tomcat. I assume most everyone is using Googlipse or some non-free alternative, but writing ant files for automated build environments is still a useful thing to know.
- Chapter 6 illustrates the use of popups and “deferred commands.” Popups are obvious (modal and modeless dialogs); deferred commands are a way of giving focus to widgets that have not yet been displayed. I really haven’t seen good treatment of this aspect of GWT programming elsewhere. Uses the Address Book app for this example.
Over all, the book doesn’t skimp on explanations and code samples and is written in a clear style. It doesn’t address unit testing with JUnit, but I suppose you can get that information elsewhere. For those of you who like to learn by doing, this is a decent tutorial (and worth the $10 price tag) that can tide you over until the bigger GWT tomes come out.
Category: Editorial
Sun’s Dan Ingalls has been talking about Project Flair, a new open source programing environment:
“It’s a self-supporting Web programming kernel that’s all written in JavaScript,” Ingalls said when interviewed during the Sun Labs Open House event in Menlo Park, Calif. Small and simple, Flair presents a “great vehicle for experimenting with [what] I guess what you would call, sort of, collaborative object development, that kind of thing,” said Ingalls.
“It’s sort of almost an opposite approach to AJAX,” leveraging a multi-user whiteboard concept for development, he said.
My favourite part:
“AJAX sort of deals with all of the old way of doing things. It makes it simpler, which is great, but underneath it’s still all this junky HTML, Document Object Model, CSS, all that stuff, where 30 years ago, we knew how to do that stuff cleanly with a dynamic programming language and a simple graphics model”
Whatever you feel about HTML, DOM, CSS, and “all that stuff”, a couple of developers know it and work with it. Competing with the open web again? At least the project uses JavaScript and not SomeNewBetterLanguageForYouToLearnFromScratch.
Category: JavaScript, Library, Announcements
VegUI is another Ajax framework that also masks as a JavaScript based window manager.
Unlike all frameworks, this one has been worked on for a long time before coming out to the public:
vegUI was originally developed to serve as a foundation for the online browser-based mmorpg Lands of Kazram. So
it was developed with 4 core features in mind:
- Speed
- Compact Design
- Total control over appearance, flexibility
- Modular Design
I like to think that i’ve managed to stay true to all four of those concepts, and now 2.5 years after the development on vegUI had started i feel quite comfortable in releasing it to the public.
There is a lot of documentation including tutorials.
Category: Dojo
There has been a ton of work going on over in Dojo land, and Alex has given his hands a rest from coding, to give us an update on Dojo 0.9 over at SitePen HQ.
It is wrong to think of Dojo as an Ajax toolkit. It is more akin to a stdlib for JavaScript, as it is so many modules that are very broad indeed.
That being said, there has been a push to make Dojo even more pragmatic, lean, and fast. It is great to see the new course of action:
Early this year it became clear that for folks building Dojo apps, the question of “what is Dojo?” was becoming increasingly hard to answer. Each individual user might be working with a different subset and therefore they don’t share a common definition, which makes sharing what you know about the system harder than it needs to be.
In response, we’re in the middle of a huge undertaking: rethink the entire API surface area of Dojo from the ground up and split it up into 3 different top-level projects. With R&D dollars and time coming from all corners of the Dojo universe, 0.9 is shaping up to be smaller, faster, more coherent, and easier to understand.
What this means is:
- Dojo Base: This new core is aiming at 50k (< 20k gz), and will contain “things like dojo.query(), dojo.connect(), the package system, style and DOM manipulation functions, ajax, and a small-but-flexible animation system.” An important change is that there will be only one dojo.js per version, unlike now, where you can build your own dojo.js files, or choose a set packaged version.
- Dijit: The new widget system will be its own package. “The Dijit team is working on a set of consistent, themed, localized, and accessible widgets that not only improve on the usability of the existing widget set, but will also provide huge performance improvements in declaring and constructing widgets in a page.”
The Dojo team is already seeing fruits of their labors with performance improvements, even before they have done the final tweaks.
In the future, I hope for a world where a lot of these libraries will Just Be There, so you won’t have to have the same size worries, and instead we will be able to focus on speed, and other issues. When you look at most popular libraries, the reason they are popular is often to do with the libraries that you have access too (e.g. CPAN).
Friday, April 27th, 2007
Category: Announcements, DWR
I hope Joe had a nice warm beer last night after he released the final version of DWR 2.0.
We have been talking about this release for awhile, and it is great stuff. Now you can do amazing things with Reverse Ajax, and know that security is core to the framework.
We asked Joe now that this version is out of the door, what is he looking to do for future releases:
JMS support, and OpenAjax Hub support so you can do pub/sub across
reverse ajax from one browser to another and back onto an enterprise
message bus.
ImageConverter to take Swing Images and turn them into Gifs. This would
make things like JCaptcha easy, but it also enable sexy things like
running a Swing app with -headless, taking screenshots and broadcasting
them to browsers. Add some event handling and you have multi-user X over
Ajax.
A Reverse Ajax compiler so we can take a large Javascript API (like for
example GI ;-) and create a Java version that generates script that can
be posted over reverse ajax.
An a million dull things like a better API to convert from
ScriptSessions to HttpSessions, session delete on window close, etc.
Good stuff to come!
Category: JavaScript, Library, CSS
Real Editor is a real-time CSS editor, built on SAJA.
It let’s MySpace users change their styles inline via simple dialogs, menus, and pickers.
Category: CSS
DD Tab Menu is a standards compliant, 2 level tab menu. Move your mouse over a tab, and a 2nd level content appears beneath it. The script uses CSS to control all of its appearance, and plain HTML to implement the entire menu tabs and contents.
Highlights of this script are:
- Standards compliant, with menu tabs and sub contents defined using
plain HTML, making customization a breeze. Five styles to choose from by
default, or customize the tabs yourself.
- Entire menu and its contents search engine friendly.
- Set which menu tab should be selected by default when the page loads
(ie: 1st tab, 2nd tab etc). If the tab contains a sub content, that
content is shown as well. Or, have the script automatically
select a tab when the page loads based on a match between the current
page’s URL and one of the menu tabs’. If there is a match, that tab is
selected.
Note that the “auto select tab” feature mentioned above is rudimentary
and isn’t meant to replace directly selecting or using server side
scripting to identify which tab corresponds to the current page. It
won’t account for all possibilities where two URLs are the same. Use it
as a convenience and fallback plan!
Category: Showcase, GWT
Thomas Steiner has released REST Describe, a GWT application, open-sourced, that groks WADL:
The application is based on the idea that creating a description for a Web Service should be a rather simple task given the information already contained in requests. Let’s take a very simple imaginary online bookmarking Web Service to make the idea clear:
http://bookmarks-online.com/api/v1/getBookmarks?userId=tom&tags=rest&limit=10
Simply by looking at the URI we can extract the following information:
http://bookmarks-online.com: there is a Web Service at this base address./api/v1/: this is the path to access the service components.getBookmarks: there is an operation called getBookmarks?userId=tom&tags=rest&limit=10: it takes three arguments, userId, tags, and limit. When we have a closer look, we could guess that “userId” and “tags” are both strings, and that “limit” is an integer value.
And all this information just from one example request. This is basically what the Google REST Describe approach is based on. It takes an ideally complete list of URIs, analyzes the structure, does some type estimations, and afterwards creates an XML representation of the request.
Thursday, April 26th, 2007
Category: JavaScript
We love to play with the plumbing don't we. jscsscomp is the latest compressor that uses Nicolas Martin PHP version of the Dean Edwards JavaScript Compressor.
With a swish of mod_rewrite:
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} -f
RewriteRule ^(.*\.)(js|css)$ jscsscomp/jscsscomp.php?q=$1$2 [L,NC]
you can get your JavaScript like this:
HTML:
-
-
<script src = "/jscsscomp/yahoo.js, dom.js, event.js, effects/dragdrop.js, slider.js"></script>
-
Category: CSS
Matthew Batchelder has been looking at the impact of latency on web applications with respect to downloading lots of images as icons, based on thoughts he heard from Zimbra when they presented at The Ajax Experience.
His piece on Faster Page Loads With Image Concatenation goes into why and how:
For complex web apps, the quantity and resulting latency of icons and images used can greatly impact page load times...and developers, in most cases, generally try to reduce page load time with a sweet web app rather than increase it.
To reduce latency in my apps, I use Image Concatenation! Coupled with a bit of CSS magic, performance improves and life is great.
He also discusses using CSS to handle inactive icons (instead of duplicate images):
CSS:
-
-
#sidebar img.icon{
-
filter:alpha(opacity=50);
-
-moz-opacity: 0.5;
-
opacity: 0.5;
-
}
-
-
#sidebar img.icon:hover{
-
filter:alpha(opacity=100);
-
-moz-opacity:1.0;
-
opacity:1.0;
-
}
-
Category: Showcase, Chat
Radius IM is a mashup of Google Maps (location) with IM (teh social).
It’s the only site that shows you where your friends are hanging out and lets you surf for other people based on location. It supports all the major networks: MSN, AIM/ICQ, Yahoo, and GTalk/Jabber. And you can use radiusIM from anywhere because there are no downloads.
It uses Ajax heavily, and is built on the Dojo Toolkit.
Wednesday, April 25th, 2007
Category: Announcements, Adobe
Adobe continues to impress with the direction that it is pushing with open products. Adobe Flex is being open sourced under a Mozilla-style license.
This announcement is more than a "hey, now you can peak at the source code" move. Flex has shipped with source code for quite some time, and some core members of the community have been able to find bugs themselves. Moving to an open source development model now completes the roadmap, allowing for these developers to contribute their skills.
Changing to an open source development model isn't a trivial task. As such, it will take some time to implement everything that Adobe wants too. Putting a copyright on code is one thing, openings up a bug database and subversion is another. Cultivating the community is the hard part, and Adobe is carefully trying to do this right. I think that they understand that this will only be a true success if a rich community of contributors grows out of this. When talking to them, they often mentioned how the Flex development team will bring in outside developers who will become just as much a part of the product as the Adobe employees. I hope this happens.
A few things are opening up here. The core Flex framework itself, the debugger, the XML compiler, and the components themselves, some of which are used in the Apolo framework.
I hope that this is a success, and prooves to the Adobe boardroom that it should continue in their path to opening up other products within Adobe. Many would like to see a fully open Flash (although there are good reasons not to).
What do you think about this announcement. Do you care about an open Flex? Do you want an open Flash?
Podtech has published a video interview on the topic:
Category: JavaScript, Library, Prototype, Announcements
A new version of Protoype has dropped.
Prototype 1.5.1 RC 3 gives us features such as:
- Ajax.Requests now supports per-request
onCreate callbacks. [#8011]
- JSON strings are automatically stripped of their security delimiters (if present) before
eval. More details on this security issue here (PDF document). [#7910]
- all
toJSON methods now generate YAML-loadable JSON. [#7883]
Event.element now returns an extended element. [#7870]- Linefeed normalisation is now prevented in IE on
String#escapeHTML and String#unescapeHTML for consistency with other browsers.
- Added a new
Element.childElements method (shorter alias of Element.immediateDescendants).
- Added a new
Element.firstDescendant method (same as using Element.down with no arguments).
Performance improvements:
- Faster
$$() utility and Element.getElemementsBySelector method. [#7873], [#7901]
- Optimized
Element.next, Element.down, Element.up and Element.previous DOM methods. [#7848]
- Speed improvements of
String#escapeHTML and String#unescapeHTML in IE and Safari.
And plenty of bug fixes. You can see the gory details in the change log.
Category: Articles
Dustin Diaz has written an article on the Seven JavaScript Techniques You Should Be Using Today.
Dustin delves into:
- Branch when possible: When performance matters, it’s often advisable to branch out your functions in a way that ensures processor-intensive or memory-hungry tasks won’t be frequently repeated. One of the most common scenarios where this situation can arise is handling browser differences
- Make Flags: var w3 = !!(document.getElementById && document.createElement); The not operators (!!) simply perform a Boolean conversion. The first operator changes the type of the object on the right to a Boolean, and then the second will just reverse whatever the first returned
- Make bridges: function getUserNameByIdBridge (e) { getUserNameById(e.id); }
- Try Event Delegation: Read Christian Heilmann's work
- Include methods with your getElementsByWhatever: Use callbacks. getElementsBySelector('#example p a', function(el) {}
- Encapsulate your code:
(function() { ..... })();
Category: UI
Jesse Kuhnert was looking at the Google Rounded Corners and decided to implement his own, using the same URL structure.
You can see his demo at work, and you can add corners by doing this:
CSS:
-
-
.detail {
-
display:block;
-
margin-top:2em;
-
padding: 0 1.1em 2em;
-
background: url("rounded?bc=white&w=600&h=40&shadow=true&ah=10&aw=10&sw=4&o=.5") left bottom no-repeat;
-
}
-
Category: Showcase, Yahoo!
Newsvine has relaunched itself. The "evergreen" release empowers the user to create a newspaper that fits their taste.
You will now see:
- That you can drag and drop content around the page
- You can add news sources
- You see how live the web stream is
The live piece is a little disorientating (but you can of course just click the X and be done).
The cool Ajax features are done using YUI, and there are age old hacks hidden in a view source, such as:
JAVASCRIPT:
-
-
window.onbeforeunload = function () {
-
// This fucntion does nothing. It won't spawn a confirmation dialog
-
// But it will ensure that the page is not cached by the browser.
-
}
-
Just having an unbeforeunload event handler -- regardless of whether or not it actually does anything, regardless of whether or not you spawn a dialog box or not, even if the entire function declaration consists entirely of just { } -- just defining an event handler will prevent the page from being cached -- ever.
As a matter of fact, even if you allow page caching, the page will be not be cached. Having an onbeforeunload event means the page will be re-built every single time it is accessed. Javascripts will re-run, server-side scripts will be re-run, the page will be built as if the user was hitting it for the very first time, even if the user got to the page just by hitting the back or forward button.
I have always liked the look of Newvine. It is great to see the relaunch.
—
Next Page »
