Holy Javascript Libraries, Batman! In case you’re keeping score, Adobe began shipping Dreamweaver CS5.5 less than two weeks ago with support for jQuery and jQuery Mobile. But, the versions included in Dreamweaver, jQuery 1.5 and jQuery Mobile 1.0a3, are already out of date! Because before you could even get your copy installed, the jQuery team released a significant upgrade to the core jQuery library – version 1.6. Along the way, the jQuery Mobile framework has also been updated to version 1.0a4, which includes several important bug fixes. So, if you are a Dreamweaver user and you want to develop jQuery Mobile sites and applications with these updated versions of the libraries, what are you supposed to do? Update your libraries, of course… here’s how… (more…)

As you’re building an Android app, you obviously need to test (often). But that means either deploying to the AVD (Android Virtual Device), ie the Android emulator, or actually putting it on a real phone/tablet. Using the emulator is, well, painful. Not only is it one of the slowest pieces of software I’ve ever seen, it isn’t “really” a phone and doesn’t “feel” responsive. In fact, I’ve seen weird behavior in the emulator that I didn’t see when the app moved to a real device.

But moving an app to your device means plugging it in, turning on USB storage mode (and thereby dumping access to your SD card from the phone while it is in that mode), copying the file over and then installing it – and potentially then, turning off USB storage, etc. It’s such a painful process that I started even dreading doing it — crossing my fingers that everything was working properly and continuing to code until absolutely, positively the last minute, and only then connecting my phone.

Then it hit me – there is a MUCH simpler way… in fact, it was a firm face-palm! Dropbox! Doh! That’s right, simply sign up for a free account, and then use the Dropbox application to add easy access to Dropbox right from your OS. Download the free app from the Marketplace on your Android devices and sign in. Now, I just compile and copy the apk file into my designated Dropbox folder. On the device, a single tap and the app is downloaded and installed! You gotta love it when the simplest solution was staring you in the face all along.

In addition to using CSS3 Media Queries for mobile-optimized sites, I’ve recently begun a lot of experimentation with creating native mobile apps with HTML5/CSS3/JS. After looking at both Titanium and Phonegap, I chose to dive deeper into Phonegap. Both products are great, but their approaches (and capabilities) are very different. For me, the decision to use Phonegap was simply that I like the idea of actually “seeing” what I’m building, versus everything being generated by Javascript. For whatever reason, I just feel more comfortable like that. I will definitely experiment with Appcelerator at some point in the future, especially if I’m looking for deep reaching native access that Phonegap can’t currently achieve.

As for UI, I’m a big jQuery fan, so the choice of using jQuery Mobile is a natural — and it’s even more attractive because Adobe is one of the sponsors of the project.

I’ve got several ideas for additional blog posts surrounding my early learnings in this space (Android development, in particular) – especially due to the fact that the Phonegap and jQuery Mobile documentation is not very detailed, but I thought I’d start with one that had me completely perplexed — an application splash screen. The need for a splash screen started almost immediately. Even with the simplest of “Hello World” applications, once I got it onto my Android phone, I would notice a blank white screen for several seconds before the main “page” showed up. I tried modifying the HTML, CSS and JS of my pages – all to no avail.

It turns out, the white screen is the embedded browser starting up, and until it is loaded, nothing is going to be shown onscreen. Enter the need for a splash screen. After spending the better half of a day wandering the rabbit holes of the intertubes, it seemed that the solution was easy on iOS. Just add a Default.png file to the resource structure of your app and you are done. On Android… not so much. And yes, I did attempt that “simple solution” however, when attempting to compile the app, it would error out with “res/drawable-hdpi/Default.png:0: error: invalid symbol: ‘Default’“.

Back to Google, I finally discovered that splash screen support on Android was added in version 0.9.3. A single thread in a forum, seemed to solve the issue, but there was lots of confusion (as I would find) surrounding the implementation of the solution. The thread indicated that a line super.setIntegerProperty( “splashscreen”, R.drawable.splash ); needed to be added to DefaultActivity.java file in the onCreate method. A second argument to the loadURL method defines the length of time the splash screen should be displayed. The value is given in milliseconds: super.loadUrl(“file:///android/www/index.html”, 1000);

After upgrading to 0.9.3 the error changed to “res/drawable-hdpi/Default.png: Invalid file name: must contain only [a-z0-9_.]“, which really puzzled me until I realized that the file name started with a capital letter. Changing it to a lowercase “d”, brought the original error back. After some head scratching, I decided to change the file name to “splash” to match the line “R.drawable.splash” that I had added to the java file — and surprise, it worked!

The moral of the story?

• Make sure you’re testing using version 0.9.3 or later
• Add

  super.setIntegerProperty("splashscreen", R.drawable.splash);

  to DefaultActivity.java file in the onCreate method before the loadURL method

• Add a second argument to the loadURL method for the timing
• Be sure to use splash as your file name – which can be either a JPG or PNG file