The results have been tabulated and the winners are in! In Round II of the Last Call for Google I/O GWT contest, we asked contestants to implement a countdown clock in GWT similar to the official Google I/O countdown and received 48 entries from the US (regrettably, other countries were ineligible due to contest legal requirements).
The three judges from the GWT team were very impressed with the overall creativity and productivity of the participants, with one of the winning entries coming in only seven hours into the 24-hr contest. We selected the top 10 entries based on originality, visual appeal, and performance, and used the size of the compiled Javascript as a tie-breaker in close calls. Here are a few of the judges' favorites:
Nine of our ten contest winners provided a little info about themselves, so in no particular order, here they are. Congratulations to all!
Towers of Hanoi Christopher Troup Santa Monica, CA, USA / Halifax, NS, Canada GWT experience: 2 years Web Application Developer for SheepDogInc.ca. We use GWT in lots of ways ranging from full-scale GWT applications to progressive enhancement layers over traditional web applications.
Conveyer Belt Pierre Coirier Boston, MA, USA GWT experience: 3 years Lead front-end developer at Xplana, working on new student learning platform that bridges social networking and the traditional elements of education (http://www.xplana.com), creator of Mvp4g (MVP/Event bus framework for GWT)
Whac-a-Droid Brad Rydzewski Scottsdale, AZ, USA GWT experience: 3 years I'm a technology product manager at a large corporation during the day ... and enjoy caffeine-fueled nights working on my open source projects gwt-cal, gwt-touch and a gwt nintendo emulator
Breakout [Editor's note: move the mouse to play] Brian Reilly Cambridge, MA, USA GWT experience: 20 months Software developer for a biomedical research institution using GWT to develop applications to track DNA sequencing projects.
Morph Yi Yang Edmonton, AB, Canada GWT experience: 1.5 years Software developer for a local startup (CorpAv Inc.). We build awesome flight-scheduling software with awesome GWT technologies. We built our application entirely on pure GWT without using any third-party UI library (e.g. Ext-Gwt, SmartGwt) and managed to make it visually-appealing and user-friendly.
Word pixels John Ho Boston, MA, USA GWT experience: 2 years Web applications developer in the education software field. Our UI team primarily uses GWT for development.
Domino clock James Wendel Austin, TX, USA GWT experience: 2 years Software developer for a network security company. Have used GWT to create small utilities for personal websites. I started out as a Java UI developer and moved into web application development with GWT. Source code: http://code.google.com/p/oldclock/
Jumping for Droids [Editor's note: move your mouse over the developers to excite them by directing Androids their way] Tom Burke Scottsdale, AZ, USA GWT experience: 2 years Developer at a large Dilbert-style corporation in the finance industry. Been using GWT a little bit at work, and quite a lot on hobby projects.
Transitions Andy Keller Grand Rapids, MI, USA GWT experience: 2 years I'm the Director of Engineering at Traction Software, Inc. where we make collaboration software for business. Starting 2 years ago we re-implemented our entire interface using GWT and have shared some of our work in the gwt-traction project. We're huge fans of GWT. Source code: http://code.google.com/p/pulazzo-lastcall/
Floor physics [Editor's note: draw a line with the mouse under the clock and see the balls react] Chi Hoang USA GWT experience: 3 years I'm the Chief Architect at Solium Capital, a leading provider of stock plan administration technology and services. A rapidly increasing portion of the front end of our web based application is implemented in GWT.
Thanks again to all who participated!
We’re not going to be shy about this, the GWT team loves tools and APIs that make developers' lives better. That’s why we’re happy to have reached an important milestone within the GWT 2.3 release, and are making the GWT 2.3 Beta available for public preview today. This release focuses on bringing Google Services and APIs directly into the Eclipse IDE, making it easier than ever to build fantastic apps using the GWT SDK and Google Plugin for Eclipse (GPE).
Easy Discovery and Access to Google APIs The number of new APIs hosted by Google has been on the rise lately, and we think this is great for developers looking to add cool features to their apps, such as Google Maps overlays, Buzz streams, and Google Docs integration. To help developers build out these features, we’ve added the ability to browse and add Google APIs directly from Eclipse. Simply highlight a project and the select the “Google - Add Google APIs” menu item to get started.
Import Projects from Project Hosting What developer tool would be cloud-enabled if it didn’t allow you to store your source code in the cloud? GPE 2.3 provides a simple UI that makes importing projects, from Project Hosting, into Eclipse a piece of cake. We’ve been eating our own dogfood for years, with Project Hosting being the home for GWT source, issue, tracking, wikis, and downloads, so we’re particularly excited to see this functionality within GPE.
One Login, Many Services As we’ve increased the breadth of services that GPE is communicating with, we wanted to make sure that the user experience remained streamlined. To do so, we’ve included an option to specify your Google Account information only once (using the same authentication mechanisms as Gmail and Google Docs), and deploy to App Engine and import projects from Project Hosting as many times as necessary.
Local Storage APIs One of the key differentiators between legacy desktop apps and modern web apps is their ability to access data quickly and continue to be usable offline. With the GWT 2.3 SDK we’ve included support for accessing Web Storage, leveling the playing field by allowing web apps to store and retrieve data locally. This is not only faster than typical RPCs, but more functional too, as it allows the app to access data even when there is no Internet connection.
Along with this new set of features and functionality, we have a handful of issue fixes such as updated IE9 support and better iFrame loading within Internet Explorer. The full list of fixes can be found within the GWT issue tracker.
If you're looking to get started, the Google Plugin for Eclipse, as well as other developer tools, can be downloaded here.
As always, if you have any feedback, we’d love to hear it and the GWT Groups is the right place to submit it.
Posted by Chris Ramsdale, cramsdale@google.com
As I speak at JUGs and conferences around the world, I'm often surprised that some folks have never seen some of the best features of Google Plugin for Eclipse, such as using the Eclipse debugger with a GWT app. So in no particular order, here are 10 reasons you should use Google Plugin for Eclipse (GPE).
In keeping with the GWT philosophy of making it possible to write no-compromise AJAX in any modern browser, GWT 2.3 (in progress) will support IE9. We're adding a new user.agent property "ie9" and the notion of fallback properties, so any browser-specific bindings not yet implemented in ie9 will fall back to ie8 and show a compile-time warning that a fallback impl was used.
In the mean time, you can tell IE9 to behave as IE8 by inserting the following in the head section of your GWT host page:
<meta http-equiv="X-UA-Compatible" content="IE=8" />
Assuming that IE continues to maintain backward compatibility, you may want to insert the equivalent tag for IE9 once GWT 2.3 ships in order to make your app somewhat future-proof for future IE versions. For more information on document compatibility in Internet Explorer, see http://msdn.microsoft.com/en-us/library/cc288325(VS.85).aspx
The IE9 dev mode issue reported back in Dec is fixed in GWT 2.2.0: http://googlewebtoolkit.blogspot.com/2010/12/support-for-gwt-dev-mode-in-ie-9.html
You can follow the status of known IE9 issues here:
For those of you who were quick to register, we thank you for continuing to support our developer initiatives -- this year's I/O is slated to be one of our best yet. For the rest of our developers, we weren’t kidding when we told you we <3 our developers.
Starting Wednesday, March 16, we will be launching Last Call for Google I/O: A contest that spans 10 days, 10 developer challenges and 100 chances to win tickets to attend the now-sold-out Google I/O 2011.
To participate, see the official Last Call for Google I/O blog post.
The GWT / Developer Tools contest opens Wed Mar 25 at 9am PST.
There's more than one way to skin a GWT app. In this guest blog post, Erik Uzureau, User Experience Engineer at TravelTripper, shares their approach.
--
At TravelTripper, we make hotel reservation software. Our main product is a "booking engine" called RezTrip, a web based application that allows visitors of a hotel’s website to directly book a stay with that hotel.
As GWT applications go, we think RezTrip, when it comes to the question of styling, presents an interesting departure from traditional development. As a "white label" application, we needed to create our app in such a way that allows our hotel clients the ability to customize not only the "frame" around the application, but also the internal style of the application itself, such as fonts, colors, etc.
In other words, each hotel needs the ability to create their own custom header, footer, or sidebar and have it wrap the booking "application" portion of the page. Furthermore, each hotel needs to be able to change all the colors, fonts, and even some icons within the application.
The desired end result is a single booking engine application, running on multiple web sites, but always mimicking the look and feel of each individual hotel site.
We have two additional constraints:
Keeping Costs Low
Our in-house GWT team is top-notch, but expensive. The previous version of our application was built on basic JSP/HTML/CSS technology, and the customization work had been done by a more affordable entry-level web designer. Similarly, for this version of the application, we wanted to limit the involvement of our GWT developers as much as possible, where possibly leaving stylistic tweaks to our web designer.
We want the customizer to be able to do *all* the work, without requiring any Java or GWT knowledge.
Making Changes Easy and Harmless
We realized that GWT's application compilation philosophy changed a lot of our longstanding web development assumptions. We didn't want to create custom UiBinder files for each hotel's frame, or have to make spot changes to CSS that would require a full recompile and redeployment of the application.
We want to be able to make CSS changes without recompiling or redeploying the app.
The only way to satisfy the above two constraints is to have all the customization work happen in simple HTML/CSS files that live outside the GWT project and WAR directory. This allows the customizer to work in pure HTML/CSS, directly with the files on the server, without ever having to modify the internals of the GWT application. Changes can take effect immediately, without a need to redeploy the app.
We decided to have a separate index.html file for each property's customization. This allows custom header/footer/sidebar HTML, CSS and JavaScript to be included in the hotel's main page.
Another challenge for us was the need for the application portion of the booking engine to be able to be dynamically resized relative to the user's browser. To accomplish this, we decided to use a DockLayoutPanel, which handles the separation between the main application and the custom frame. We load an empty SimplePanel into each of the North, South, West, East sections of the DockLayoutPanel, and our application in the Center.
DockLayoutPanel
SimplePanel
Next, we add special code that runs directly from onModuleLoad() that scours the host HTML document for four DIVs with 4 unique ids: tt-Header, tt-Footer, tt-EastSidebar, and tt-WestSidebar. If the app finds a DIV with those ids, it loads it into the corresponding SimplePanel and auto-sizes to the contents. If no corresponding DIV is found, the app hides the SimplePanel entirely and sets the width or height to 0.
onModuleLoad()
tt-Header
tt-Footer
tt-EastSidebar
tt-WestSidebar
What this means is, that the customizer doesn't get to lay out the HTML page exactly like it will be displayed when live. Instead s/he must smash the relevant content into the four qualified DIVs. This is a minor annoyance, but at the end of the day, the code itself is still the same basic HTML/CSS/JavaScript, and so it is perfectly manageable by the web designer. The GWT application is already compiled to super-fast JavaScript, so there's no need for the customizer to know any GWT. Instead, the customizer can just edit the contents in the HTML file and hit refresh to see the changes.
Here again, we had to come up with a custom solution. To avoid the recompile/redeploy issue and also to keep it simple for the customizer, we had to handle the CSS for customizing the application without having to modify any code inside the GWT project.
What we ended up doing was creating three levels of CSS:
master.css
designer.css
Despite our constraints, we were able to configure our GWT application to perform exactly as we desired. Our application is fully customizable, both in terms of the surrounding frame layout and also the internal application's colors and fonts, all without the customizer having to know any Java or GWT. By carefully separating the different layers of the app, we were able to make it easily and efficiently customizable on the fly, without ever having to redeploy the application.
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>Paradise Hotel Reservation System</title> <!-- Master CSS File --> <!-- All styles in here can be overridden in designer.CSS (below) --> <link rel="stylesheet" href="../reztrip/CSS/master.CSS" type="text/CSS"/> <!-- Designer CSS File --> <!-- Single css file to be created and modified by the customizer. --> <!-- New styles for the frame and overridden style from master.CSS go here --> <link rel="stylesheet" href="style/designer.CSS" type="text/CSS"/> <script type="text/javascript" language="javascript" src="../reztrip/reztrip.nocache.js"></script> </head> <body> <div id="tt-Header" class="tt-Frame-Header"> <!-- because tt-Header has content, we will load it and auto-size --> <!-- it in the header area of the application frame --> <table class="tt-Frame-HeaderTable"> <tr> <td> <img src="img/paradise_logo.png"></img> </td> <td> <img src="img/paradise_menu.png"></img> </td> </tr> </table> </div> <div id="tt-Footer" class="tt-Frame-Footer"> <!-- empty, so no footer will load --> </div> <div id="tt-EastSidebar" class="tt-Frame-EastSidebar"> <!-- empty, so no east sidebar will load --> </div> <div id="tt-WestSidebar" class="tt-Frame-WestSidebar"> <!-- empty, so no west sidebar will load --> </div> <!-- OPTIONAL: include this if you want history support --> <iframe src="javascript:''" id="__gwt_historyFrame" tabIndex="-1" style="position:absolute;width:0;height:0;border:0"></iframe> </body> </html>
Google Plugin for Eclipse and GWT 2.2 are now available with several new features that we’re excited to share with you. First, Google Plugin for Eclipse 2.2 directly integrates GWT Designer, a powerful WYSIWYG Ajax user interface (UI) designer that makes it much easier to quickly build UIs. Second, developers can take advantage of the modern web with the first round of HTML5 support within the GWT SDK. Additionally, GWT’s CellTable widget now offers new functionality, such as default column sorting and the ability to set column widths. These new features make it even easier to build best in breed web apps using Java-based tools and Eclipse. And while these apps can be run on any platform, Google Plugin for Eclipse makes it very easy to deploy, and run, on Google App Engine.
Instructions for installing this new release of the Google Plugin for Eclipse and GWT SDK can be found here: Getting Started with Google Plugin for Eclipse.
If you’re simply looking for the GWT 2.2 SDK, you can find it here: GWT SDK Download.
GWT Designer Directly integrating GWT Designer into the Google Plugin for Eclipse has been a top priority for us over the past few months. We’ve had some very positive feedback from the community early on, and for this release we not only wanted to provide the best developer experience when using GWT Designer, we also wanted a seamless experience across GWT Designer and GPE.
HTML5 features GWT 2.2 includes support for HTML5-specific features, such as the Canvas element, which allows for dynamic, scriptable rendering of 2D shapes and bitmap images, and the embedding of Audio/Video tags. These APIs are still experimental and may change a bit over the next couple releases, but we feel that they're stable enough to deserve some real mileage (by you). One of the GWT team members, Philip Rogers, put together this demo to showcase the new Canvas support in the GWT SDK. You can find the code for this demo here: http://code.google.com/p/gwtcanvasdemo/.
New CellTable APIs With GWT 2.1, we found that developers were often times incorporating a CellTable widget into their project, and immediately adding the boilerplate code to add sorting, and then having to jump through hoops to set column widths. With the GWT SDK 2.2 release, this functionality is now part of the CellTable widget itself. Where we can, we want to improve the native GWT widgets, adding features and functionality that minimize the custom code that developers have to write.
If you would like to see these updates in action, checkout out the CellTable example with the GWT Showcase app.
A note about Java 1.5 GWT version 2.2 will only have deprecated support for Java 1.5, resulting in warnings when building applications. While Java 1.5 will still work for this release of GWT, developers should upgrade their version of Java to correct these warnings and ensure compatibility with future versions of GWT.
If you have questions or want to provide feedback, we’d love to hear it, and the best place to do so is in the Google Web Toolkit Group.
Chris Ramsdale, on behalf of the Google Developer Tools Team cramsdale@google.com
