Web Info & Tutorials

November 16th, 2006

GOOGLE WEB TOOLKIT 1.2 RELEASED

GWT 1.2 has been officially released.

The last important bugs have been squashed from the RC that was out there recently.

Features

  • Create a Widget by compositing other Widgets. Lay out Widgets automatically in Panels. Send your Widget to other developers in a JAR file.
  • To communicate from your web application to your web server, you just need to define serializable Java classes for your request and response. In production, GWT automatically serializes the request and deserializes the response from the server. GWT’s RPC mechanism can even handle polymorphic class hierarchies, and you can throw exceptions across the wire.
  • No, AJAX applications don’t need to break the browser’s back button. GWT lets you make your site more usable by easily adding state to the browser’s back button history.
  • In production, your code is compiled to JavaScript, but at development time it runs in the Java virtual machine. That means when your code performs an action like handling a mouse event, you get full-featured Java debugging, with exceptions and the advanced debugging features of IDEs like Eclipse.
  • Your GWT applications automatically support IE, Firefox, Mozilla, Safari, and Opera with no browser detection or special-casing within your code in most cases.
  • GWT’s direct integration with JUnit lets you unit test both in a debugger and in a browser…and you can even unit test asynchronous RPCs.
  • Easily create efficient internationalized applications and libraries.
  • If GWT’s class library doesn’t meet your needs, you can mix handwritten JavaScript in your Java source code using our JavaScript Native Interface (JSNI).

As we mentioned when we released the 1.2 Release Candidate, you can now develop and debug with GWT on Mac OS X in addition to Linux and Windows. We are pretty proud of this particular feature because GWT is now about as “platform independent” as you can get: develop on Windows, Linux or Mac OS X and deploy to IE, Firefox, Safari and Opera on any platform, without any special cases in your code. (If you want a bit more detail about our implementation of Mac OS X support, our release nomenclature and other tidbits, this recent InfoQ interview may interest you.)

We also have already talked about how much faster the 1.2 hosted mode debugging environment is. And it is. If you’ve ever found yourself dropping to the command line using only the GWT compiler because hosted mode was too slow, you really should check out 1.2. Refreshes in hosted mode are almost instantaneous, and hosted mode lets you actually debug your code.

November 16th, 2006

POPUP NIGHTMARE 2.0?

Nat Torkington on the O’Reilly Radar recently commented on the rise of “floats” (AKA “divdows”, “Ajax dialogs”).

One of the really big issues facing us, IMHO, is the new Javascript-driven ad technology called “floats”. They’re not separate windows popped up, they’re in-window divs that move up to obscure the web page and force the user to click to dismiss them. They can’t trivially be blocked because they’re generated by Javascript code within the page, and identifying such code is a similar problem to identifying viruses. They ruin the user’s experience by being unavoidable and maximally intrusive.

At the moment they’re rare (e.g., TVNZ and MSN only show them once per user per day) but if we learned anything from 2001 it’s that greed will ruin user experience if it can get an extra buck in ad revenue. We got popup blockers as a result of the 2001 popup orgy. What’s going to save us from the 2007 float invasion?

It’s really not as scary as it sounds, as these new popups can only live inside the tab/window of the app that launched them - sites that run annoying Ajax popups are only doing themselves a disservice, the web equivalent of nagware. Christian Flury has outlined the counter-arguments.

  • Javascript pop-up windows left a trace in your working environment: Even after leaving the page that had triggered them, you still had those few additional browser windows open – and those were the days before tabbed-browsing became popular, so it was already difficult enough to stay on top of your zillions of open browser windows
  • Psychologically, from a site owner’s perspective, a pop-up window is not as closely associated with your page as an ad that occupies your own real estate, so to speak.
  • More importantly, back in the olden days, it was far from obvious, especially to the not so tech-savvy, which page had actually triggered the pop-up window.

That said, there are still security implications - with richer graphics and browser scripting, it’s easier to pretend you’re a native OS dialog box.

November 16th, 2006

MOBILE-UNFRIENDLY WEBSITES

Phil Greenspun bemoans the difficulty of streaming recent scheme apps from his sidekick.

My Motorola/Windows XP sound began to expire after digit years. Wanting something that would permit me ready in contact with friends over AOL Instant Messenger, I got a T-Mobile Sidekick. I was reluctant to intend a non-flip phone, but so farther I hit exclusive managed to attain digit inadvertent sound call per day. The Web covering is torturously slow. I’ve institute that most of the Web sites matured in the primeval 1990s impact meet fine. It is doable to index in, modify discover forms, intend results. What doesn’t work? The stylish and large Web sites. They are likewise script-heavy. Programmers seem to hit irrecoverable that though the cipher screen has ever-greater capabilities, the cipher individual is progressively conjunctive from a handheld device. I proven using digit of my students’ sites from terminal semester. They raised whatever username/password cipher from a Ruby on Rails toolkit. It relies on JavaScript. The place is 100 proportionality junked from the Sidekick.

Have we proven that “the meliorate the tools the worsened the application?”

Seems dirty to blessed Rails for this … Rails makes it meet as cushy to physique reachable websites as it does to physique pure-Ajax websites. Can you blessed Ajax for this? Yes, a taste … it’s genuine that most scheme developers are more convergent on delivering rich, interactive, experiences than making sites reachable from the mobile. In this example, it is indeed quite undignified that someone created a login tender requiring Javascript. For more impulsive applications, though, it’s meet not applicatory or worthwhile to attain the place mobile-compatible.

Greenspun mentions that some primeval ’90s websites impact quite substantially on the phone, but it staleness be said that some sites created in the New ’90s or primeval ’00s would impact rattling poorly on the phone, because those were the nowadays when some developers utilised Flash or Javascript for the intoxicant of it (mmmm…cascading menus) and were inattentive to scheme standards. A field thought in some Ajax apps is to ingest well-known scheme conventions where possible, and augment them with impulsive activity where necessary. For that reason, some recent Ajax apps are actually more reachable than their equivalents from a some eld back.

November 16th, 2006

GETFIREBUG: 1.0 IS GETTING CLOSE

Firebug 1.0 is currently in beta, and looks rattling assorted to the 0.4.1 that we every undergo and love.

The newborn website Get Firebug gives you a looking of what is reaching shortly:

I rattling same how the crowning screenshot is actually “live”, letting you utter on the tabs to wager apiece area. Very pleasant indeed.

Firebug 1.0

November 16th, 2006

UJS ILLUSTRATED WITH EVENT WAX

Dan Webb, one half of the team behind the Unobtrusive Javascript Plugin for Rails, posted an article on how he used UJS to develop a slick help sidebar for Event Wax.

He first gets the help sidebar working using a traditional request for the whole page, and then he adds the ajax functionality via apply_behavior calls from UJS. This ensures that for users without javascript they will still be able to use help, not to mention the links remain Google-friendly since they point to real resources and not just a JS event. Rails makes the server side piece easy with the respond_to method that looks at what the client is requesting and sends back either the full html page or just a javascript fragment for the ajax users.

All in all it looks just as easy as doing things the nasty way with inline events, so if you are using Rails there isn't a good reason to not use UJS.

event wax screenshot

November 16th, 2006

YHC/JAVASCRIPT: WRITE APPS IN HASKELL

We have converters that allow us to stay in Java-land, Ruby-land, and others. Now we have a new kid on the generator block: Yhc/Javascript.

Yhc/Javascript is aimed to create a tool that generates Javascript out of a binary Yhc core file. The ability to convert an arbitrary Haskell source into Javascript makes it possible to execute Haskell programs in a Web browser. This, in turn, allows for development of both client and server sides of an Internet application entirely in Haskell.

Check out the Simple Echo Demo.

For fun, do a view source on that page :)

November 16th, 2006

BACK BUTTON SUPPORT: SAFARI AND SPEED

Daniel Kantor has implemented a Back button solution in Streampad and has shared it with us.

One of the main gripes against AJAX webapps is how they break the back button in a typical browser. There have been a few solutions (notably Brad Neuberg’s Really Simple History) but none have got it working in Safari. GMail still does not have a working back button in Safari.

They say the third time is the charm and I have tried to get a Back button thing in Streampad twice before. I do not want to use someone else’s library as they are usually more complex than I need and I did not want to put something in place until I had Safari working. I tried a few different techniques, but when I got it working in Safari, it would break in Firefox or IE.

I finally figured out a way to get this working in Firefox, IE and Safari.

While Daniel struggled with this, he found that the back button support caused a slow down in the entire app performance. He came up with a new solution that didn't suffer from the performance issues:

The general concept is this: You load a page into an iframe that calls parent.goBack() and then changes its own location to a new page (a blank page will do). Because the page jumps to a new location, it now has a history. If you click the back button, it will load the page again (calling parent.goBack()) and then spring forward to the dummy blank page.

var historyArray = Array(); // create an empty array to hold the history
var historyCounter = -1; // initialize the array pointer to -1

function historyAdd(f){
  if (historyCounter == -1){  // the first time this is called it will change the iframe location
  document.getElementById(’hFrame’).src = “/historySpring.php”;
}

var o = historyArray[historyCounter];
if (f != o){ // don’t put in consecutive duplicates
  historyCounter++
  historyArray[historyCounter] = f; // add function to history
}

function goBack() {
  if (historyCounter> 0){ // don’t want to call it if there is nothing in history array
    historyCounter– // set the pointer back one
    var f = historyArray[historyCounter]; // get the function from the history array
    f = f+”()”;
    eval(f); // call the function
  }
}
 

November 16th, 2006

SWFUPLOAD: A NICER FILE UPLOAD EXPERIENCE

Lars Huring and aggroup hit created SWFUpload, a diminutive JavaScript/Flash accumulation that tries to re-make the artefact enter uploads entireness on the internet.

It entireness by exchange the table of a div with a diminutive straight winkle that handles every the upload-frontend, javascript for plan and callbacks and html/css for styling/looks.

This allows:

  • Specify what filetypes are to be displayed in the upload dialog
  • Upload binary files using connatural ctrl/shift-click to superior binary files
  • Get enter filler and another content before upload starts and inform that aggregation backwards to the page.
  • Style upload buttons some artefact we poverty using html/css and more…

It module mortify to a connatural html upload input-field if flash/javascript isn’t present.

Example

<script type=“text/javascript”>

        mmSWFUpload.init({
                upload_backend : “../../upload.php”,
                button_image : “images/custom_button.png”,
                button_mouseover_image : “images/custom_button_over.png”,
                breadth : “258px”,
                peak : “82px”,
                direct : “SWFUpload”,
                allowed_filetypes : “*.gif;*.jpg;*.png”,
                upload_start_callback : ‘uploadStart’,
                upload_progress_callback : ‘uploadProgress’,
                upload_complete_callback : ‘uploadComplete’,
                upload_error_callback : ‘uploadError’,
                upload_cancel_callback : ‘uploadCancel’
        });

</script>
 

SWF Upload