Smart GWT 2.4 has been released and, as expected, they are jumping on the HTML5 and iOS/Touch bandwagon. The fact that the touch support doesn’t require code changes for existing apps is most welcome. Also, the mention of the upcoming Smart GWT Mobile with “pixel perfect iOS look and feel” sounds intriguing. Many have tried, few have succeeded.

From the release announcement:

• GWT 2.1.1 Compatible
• Smart GWT QuickStart Guide
• Touch & Mobile support : Support for iPhone, iPad and iPod touch devices with no code changes required.
• Offline support : The Offline subsystem provides features for storing and retrieving values in persistent browser storage. It is also seamlessly integrated into the normal DataSource request/response cycle. With a single property DataSource.useOfflineStorage you can enable automatic offline caching of recently fetched data so that if a user goes offline they still have access to last data they viewed.
• User Defined data highlighting allows users to highlight important or unusual data values in a ListGrid or TreeGrid based on dynamic user defined rules instead of hard coding such logic for background and foreground cell colors within code. A Highlight Editor allows end users to fully configure such highlight rules to customize their view of the data.
• Advanced Hover components allows any UI component to be added as a hover, such as a grid, chart or even a layout combining several components when hovering over a ListGrid or TreeGrid row.
• Simplicity theme : A new ultralight skin that is easily customizable and virtually image free. This can be viewed by selecting the “Simplicity” theme from the dropdown in the Showcase explorer.
• IE Performance improvements : Performance improvements have been made across the board but some IE specific performance enhancements have been made and users can expect a significant improvement in responsiveness in IE.
• 24 hour Calendar support : The Calendar component now supports 24 hour time formatting.

Steve Gill of Nitobi has posted about a PhoneGap application called SnowReports. The application is open source and forkable on GitHub and shows how you can take a mobile Web application and port it between iPhone, Android, and webOS (and PhoneGap itself can even go beyond to other platforms such as Nokia/Blackberry).

Steve also put together a screencast that shows porting from iPhone to webOS in 10 minutes (as well as sharing tips and tricks of PhoneGap along the way):

If I put my Palm hat on, you may have heard about our $1M dollar Hot Apps program. It closes out at the end of June, but we have seen good apps rising in the ranks quickly. One recent example is Dropboxify. You still have time to get an application in the running for a decent prize. If you have a PhoneGap app already, then the 10 minutes are surely worth while ;)

Harmony is a new drawing tool, a HTML5/Canvas experiment with great potential. It provides some unique brush styles, and can produce some great-looking charcoal pencil style sketches, among other things. Better to try it out than explain it in words.

Creator Mr. Doob (Richard Cabello) explains how he used Canvas to make it darker the more you draw over it:

The whole thing is quite modular so I can keep adding more brush styles whenever I get inspired. During the process I found out that, for some reason (apparently lack of hardware acceleration), Firefox and Opera do not support context.globalCompositeOperation = ‘darker’. This was on the HTML5 spec before but got removed. Just so you know what I’m talking about, this is like the “multiply” blending in Photoshop. Webkit does support it tho. I hope they put it back on the specs and all browsers support it.

You can also save images using data URI encoding.

As it works on webkit, he made sure it worked on the mobile Android and iPhone browsers. No multi-touch as yet, but the touch UI still makes a nice input mechanism.

(Thanks FND)

Many (if not most) current Flash games, menus, and even video players require a visible mouse pointer. They are coded to rely on the difference between hovering over something (mouseover) vs. actually clicking. This distinction is not rare. It’s pervasive, fundamental to interactive design, and vital to the basic use of Flash content. New Flash content designed just for touchscreens can be done, but people want existing Flash sites to work. All of them—not just some here and there—and in a usable manner. That’s impossible no matter what.
….
Mouseover examples:

* Video players where the controls appear on mouseover and hide otherwise. (This seems to be the norm, in fact. Whereas a click on the same video does something different: usually Pause. Try Hulu for instance.)

* Games where you steer with the mouse without clicking (extremely common).

* Menus that popup up subpage links when you mouse over a main button, vs. going directly to a main category page when you click.
….

He claims all the alternatives are unsatisfactory, e.g. re-coding every application manually, introducing gestures, substituting double-clicking for clicking and clicking for mouseovers.

The issues are relevant to Javascript developers; for example, PPK has previously speculated on the demise of mouse* events, as well as hover in touch environments. How will that play out with a web app that relies on them?

It’s a bit like Dion’s recent tweet: “I find myself typing click^H^H^H^H^Htap 20 times a day at the moment. Is there a term that abstractly could mean both? :)”. We can get away with simple substitutions with straightforward web apps maybe, but it gets a lot more complicated with seriously rich interaction styles, the kind traditionally seen in some Flash games and now possible with Javascript. We tend to think of mobile device design as a matter of massaging the look with some CSS…the harder part to get right is often the “feel” in the look-and-feel equation. Platforms, like the web, which want to support multiple interaction styles, need to provide ways to ease the transition for developers, automating degradation and enhancement in the first instance, but allowing application designers to customise further for each device. Dan Saffer‘s sideshow below makes the point well, regarding gesture design in touch devices:

John Gruber has spotted a library for iPhone web apps, from none other than Apple. This mysterious library, called PastryKit, seems to have flown under the radar as a Google search reveals precious little on it. In similar vein to other efforts, Apple's library provides support for native-feel websites - websites that run in Mobile Safari, but feel like native apps. (That's the objective anyway; some look-and-feel emulators are "good enough", while others get stuck in the uncanny valley).

To get hands-on with PastryKit:

• Visit http://help.apple.com/iphone/3/mobile/ from your iPhone or iPod Touch. This is an official Apple site using PastryKit. If you're feeling lazy/iPhone-challenged, watch Gruber's screencasts.
• Now with the same site in regular Safari (on your Mac/PC), open up the Develop Menu (if it's not there, enable it in Preference|Advanced). Choose User Agent > Mobile Safari 3.0 (or probably any other version number). And now you can see it in your browser. From Develop Menu, Web Inspector will let you view the script.

The HTML includes PastryKit as follows:

PastryKit Javascript and PastryKit CSS are available. Unfortunately, they're a bit unclear due to compression, but Gruber nonetheless pored into the source:

PastryKit accomplishes all three of the aforementioned things — hiding the MobileSafari address bar, providing fixed-position toolbars, and providing scrolling with momentum — by disabling regular scrolling and setting up its own view hierarchy and implementing its own scrolling.

The whole question of native iPhone apps was a hot topic last month after PPK whipped up a storm on the question of web apps replacing iPhone apps. The really interesting thing here is Apple's stance. They launched the iPhone with web intended to be the platform for 3rd party apps, then switched over to native apps and haven't done much to facilitate native-style web apps since then. Is a change coming? As Gruber puts it:

The $64,000 question, though, is whether PastryKit is something Apple intends (or that a team within Apple hopes) to ship publicly. It seems like a lot of effort to build a framework this rich just for this iPhone User Guide, so I’m hopeful the answer is yes. Perhaps something integrated with the next major release of Dashcode? And, perhaps with integrated UI layout tools, along the lines of Interface Builder?

As well as apperaring in the user guide website, Chris Messina noted PastryKit apparently appears in the iTunes LP files.

It can be used as simple as:

You can tweak the threshold for the swipe, and take a peak at the demo which is shown here:

Jon Raasch has also updated his QuickFlip plugin that flips any piece of HTML like a card. The flip effect is similar to the UI animation on the iPhone, and uses an animation trick that is barely noticeable when fired quickly.

QuickFlip 2 resolves a number of usability and performance issues in
QuickFlip. The $.quickFlip() function can now be chained from any
jQuery selector, attaching all the styling and markup it needs
automatically. Additionally a new $.quickFlipper() function makes
triggering the flip effect a piece of cake. Other than that, minor
bugs have been fixed and performance has been tuned.

For more info:

• see the docs
• check out the examples

The PhoneGap team has been winning awards and developers like it.

However, we have just heard that some applications using PhoneGap have been targetted by the Apple review process:

Upon review of your application, cannot be posted to the
App Store due to the usage of private API. Usage of such non-public
API, as outlined in the iPhone SDK Agreement section 3.3.2 is
prohibited:

" An Application may not itself install or launch other executable
code by any means, including without limitation through use of a plug-
in architecture, calling other frameworks, other APIs or otherwise.
No interpreted code may be downloaded and used in an Application
except for code that is interpreted and run by Apple's Published APIs
and built-in interpreter(s).

The PhoneGap API implemented in your application is an external
framework.

This is just wrong. They haven't targeted RegexKitLite or Google Toolbox for Mac, or Joe Hewitt's cool new framework. PhoneGap only uses official APIs, so it isn't doing anything wrong there.

You could assume that this is on purpose, to keep people in the Obj-C sandbox. Or, you could consider the fact that the review process is probably manned by a LOT of people who sit there with check lists. I am hoping that someone at Apple gets to see the outcry from developers and steps in to do the right thing, just like they did when Trent Reznor and many others complained about the hypocrisy of his iPhone app not getting in the store.

So, fix it Apple. Please.

David Kaneda has created jQTouch a "jQuery plugin with native animations, auto list navigation, and default application styles for Mobile WebKit browsers like iPhone, G1, and Pre."

Features

Setup

jQTouch can now be initialized with one function:

PLAIN TEXT

JAVASCRIPT:

1.  
2. $(document).jQTouch({
3.    icon: 'jqtouch.png',
4.    statusBar: 'black-translucent'
5. });
6.  

This function writes all of the meta tags needed for an iPhone web app. Here are the default settings:

PLAIN TEXT

JAVASCRIPT:

1.  
2.  fullScreen: true,
3.  slideInSelector: 'ul li a',
4.  backSelector: '.back',
5.  flipSelector: '.flip',
6.  slideUpSelector: '.slideup',
7.  statusBar: 'default', // options: black-translucent, black
8.  icon: null,
9.  iconIsGlossy: false,
10.  fixedViewport: true
11.  

Animations

There are now functions for sliding a page up, and "flipping" to a page, using WebKit's built-in 3D capabilities. Both can be seen in the new preview

These new animations are integrated into the page history, and can be navigated by using the back button.

Image Preloading

I've added a quick-and-dirty function for preloading images, which you just send as an array. For example:

PLAIN TEXT

JAVASCRIPT:

1.  
2.  $.preloadImages([
3.      'themes/jqt/img/chevron_white.png',
4.      'themes/jqt/img/bg_row_select.gif',
5.      'themes/jqt/img/back_button.png'
6.      ]);
7.  });
8.  

Minor Improvements

• New HTML structure to ease toolbar button variations and improve animations.
• Various performance improvements
• Added minified code
• Started a custom theme, which will be offered alongside the standard Apple theme
• Created a new Home Screen icon
• Removed some iPhone-dependent code

David also answered some questions for us:

How does it compare to iUI?

It is similar in the way it can load views via built-in HTML or dynamic GET/POST requests, but it uses hardware-accelerated animations, and also includes transitions like slide up and 3D page flip. It also includes code for image preloading, a custom theme, and a much easier setup function which eliminates the need to write META tags for the app icon, viewport settings, etc.

What kind of extended functionality are you looking into

Ultimately, I plan on testing extensively on the G1 and, eventually, the Palm Pre. Other plans include a more robust theming system, and various callback methods to make extending jQTouch even easier.

With PhoneGap, would it just be a script that you can get built in?

I am currently in talks with the PhoneGap crew, and we are planning on including it stock with the kit. We're currently unsure if the script should be ported to XUI or remain based on jQuery.

The new showed this:

Compared to the old version:

There's no way to emulate the iPhone on Windows, but Shaun Sullivan has the next best thing: taking a Windows build of WebKit and embedding it inside an iPhone-like Chrome. It's not perfect, but it's as close as Windows users are going to get for now–and is very handy for checking how your site will likely look (modulo font issues).

He's only tested it on Vista, however.

Safari JavaScript Database Programming

The HTML 5 specification provides a new mechanism for client-side data storage: JavaScript database support. HTML 5 is currently in development by the Web Hypertext Application Technology Working Group (WHATWG).

JavaScript database support is available in Safari 3.1 and later, and in iPhone OS 2.0 and later.

You should read this documentation if you are a web developer who wants to store data locally on a user’s computer in amounts beyond what can reasonably be stored in an HTTP cookie.

HTML5 Application Cache

Michael Nordman of Google asked "Is this stuff built into shipping Safari or iPhone browsers yet?"

David Kilzer replied "This feature shipped with iPhone OS 2.1. When you use "Add to Home Screen" from the "+" button on Safari for iPhone, a web application with a manifest defined (per the HTML5 spec) will be saved with any cached resources. Note that the manifest file *must* be served with the correct MIME type for this to work.

There is no shipping version of Safari for Mac OS X or Windows that supports this feature yet."

Fantastic to see!

See how you can add fun (or annoying ;) transitions to your S5 prezos, even on the iPhone:

KUMAGAI Kentaro has created a JSCocoa based interactive console for the iPhone:

I’ve been struggling with transform property of UIView for long time. at last, I’ve decided to create UIMonkey that allows to manipulate the variables by trial and error through HTTP in Javascript with SpiderMonkey. Few days after I’ve started the project, I found JSCocoa through John Resig's article and I abandoned my project and rewrited my codes on JSCocoa.

Now it works on the top of JSCocoa. It’s very helpful while inspecting the hierarchy of the view tree or size of the views etc.

Very cool stuff as you can run code on the fly and see it all change in the emulator. His article explains how you set it up, and gives you some fun examples.

He discusses the various approaches:

• JiggyApp: JiggyApp provides a full API for developing an application - apparently separate from most of the typical APIs. Arguably, though, the code ends up being relatively usable (jailbroken only :(
• JSCocoa: JSCocoa is a full bridge that maps Cocoa development into JavaScript (instead of the typical Objective-C/Cocoa mapping). The result ends up working in both OS X and on the iPhone.
• PhoneGap: PhoneGap is an application that exposes a few JavaScript APIs to pages running MobileSafari. Right now this includes Geolocation and access to the Accelerometer.
• WebTouch: The other day "Dr Nic" wrote up an article on how he had used a WebKit instance (along with HTML, CSS, and JavaScript) to render a portion of his iPhone application.

I was chatting with someone on the PhoneGap team about their Android support. There is a play to be had to enable rich mobile applications all based on the Open Web stack that we know and love :)

Dr Nic has shared his experiences using WebKit to implement part of your iPhone app (in his case SurfView):

Negatives

• - (void)webViewDidFinishLoad:(UIWebView *)webView is slow. "You’re running an interpreter (JavaScript runtime) on top of a device with a small CPU and small memory. Go figure."
• The JavaScript bridge does not appear to block the main thread. This is a good/bad thing. You can invoke JavaScript code within the WebKit via your native Objective-C code.
• The JavaScript bridge is one directional. From Objective-C/UIKit you can invoke JavaScript upon the WebKit and henceforth do wonderful things
• Multiple languages in one project. Whilst we mainly just wanted to take a static HTML file, and dynamically update various elements with application data (e.g. the surf and weather conditions in the example above), we needed to do that via JavaScript.

Why you may want to do it

WebKit for rapid prototyping: WebKit exists and it is awesome at rendering HTML and CSS, with access to the powerful CSS3 transformations and webkit-specific bonus features.

It is highly likely that your designer can make something beautiful looking in Photoshop and cut it up into HTML + CSS. Comparatively, its highly unlikely they can cut it up into native Objective-C code.

WebKit isn’t the holy grail for non-Objective-C developers, but if your grand-poobar level skills are in JavaScript and HTML, and your Objective-C/iPhone skills are still catching up, then its a wonderful prototyping platform. Especially for static, complicated displays of data. Especially if that data includes HTML content from an external feed which needs to be rendered.

For Oakley’s Surf Report app, Anthony is toying with replacing some of the WebKit usage with native UI elements (normal UITableView with custom UITableViewCells) so that we can get back those precious seconds and give them to the user as a Christmas present.

A very nice read.

a collection of components and code examples that illustrate the power of CSS Visual Effects. So far, only 1 gem that illustrates a popular RIA user interface demo, "Cover Flow" is currently available. If you'd like to see more, please don't hesitate to suggest something you'd like to see.

Charles has a blog entry with a video showing off a mobile Safari demo of using Apple's CSS Visual Effects to create a Cover Flow interface:

The demo makes use of a variety of these extensions:

* zflow starts by loading each image from the images array. When each image is loaded, we scale the image to fit in a square region, and apply 3D CSS transforms to scale it in place.
* Reflections - zflow then takes the scaled image and creates a Canvas element that contains a gradient alpha mask of the image’s reflection (using a “reflect” function to do this) and positions the canvas element in place.
* Touch Controller - zflow creates a TouchController object, who’s job is to field touch events from Mobile Safari and calculate an appropriate offset.
* Clicking - zflow detects when no move events have been made, and zooms + rotates the focused image forward by setting a “CSS Transition”ed 3D transform on the focused image. Clicking again transitions the image back.
* Inertia - zflow achieves inertia by setting the “transition timing function” of the “tray” to an “ease-out” function, which slows things down. On the touch end event, we calculate the projected velocity and set the tray’s target position to that location. CSS Transitions handles the decay in velocity as the transition timing function executes — slowing the tray down gradually.

It makes you wonder how many folks are going to need to learn the SDK in the future...

• SDK Programming for Web Developers delves into the introduction to Objective-C and MVC
• Creating a first project in Xcode: Hello,
  World! gets you used to the tool chain

I hope to see books that focus on what you can do with the Web APIs too of course ;)

This article is based on iPhone in Action, to be published January 2009. It is being reproduced here by permission from Manning Publications. Manning early access books and ebooks are sold exclusively through Manning. Visit the book's page for more information.

Ben told us:

In thinking of an interesting test, I've created a menu that you can rotate across a fixed y-axis with touch, allowing you to spin the menu around and see the depth and back of elements. There are also some examples of how animations can be used as you click and the menu unfolds. I also added a lightbox to examine how one might view some photos although it's not really practical in this form.

Open up the demo in your iPhone / Touch and also take a peak at the source to see what is going on, with snippets like this:

PhoneGap is a free open source development tool and framework that allows web developers to take advantage of the powerful features in the iPhone SDK from HTML and JavaScript. We're trying to make iPhone app development easy and open. For many applications a web application is the way to but in Safari you don't get access to the native iPhone APIs, and the that's the problem we're trying to solve.

It is written in Objective-C and allows developers to embed their web app (HTML, JavaScript, CSS) in Webkit within a native iPhone app. We're big advocates of the Open Web and want JavaScript developers to be able to get access iPhone features such as a spring board icon, background processing, push, geo location, camera, local sqlLite and accelerometers without the burden of learning Objective-C and Cocoa.

PhoneGap also has a web app that allows web developers to quickly package their web app into a native iPhone app by providing a URL, a name and icon graphic the web service with automagically create a native iPhone application. We haven't open sourced that code but we're going to soon.

PhoneGap was conceived at iPhoneDevCamp II by Nitobi developer Brock Whitten, Rob Ellis, freelance designer Colin Toomey and Eric Oesterle.

There are a few APIs available now, and others pending:

You can take a peak at the open source code on github. For example, here is the code that wraps the iPhone location service:

[c]
@implementation Location

- (id)init{
NSLog(@"Gap::Location");
locationManager = [[CLLocationManager alloc] init];
[locationManager setDelegate:self];
return self;
}

+ (void)startTracking{
NSLog(@"starting location tracker");
[locationManager startUpdatingLocation];
}

+ (void)stopTracking{
NSLog(@"stopping location tracker");
[locationManager stopUpdatingLocation];
}

- (void)location{
NSLog(@"location is");
}

- (void)log{
NSLog(@"the location is...");
}

- (void)dealloc {
[locationManager release];
[super dealloc];
}

@end
[/c]