Welcome to Titanium! | Monday, January 9th

What’s New in Titanium 1.8 | Tuesday, January 10th

Best Practices in Mobile Development | Wednesday, January 11th

Targeting the Barnes and Noble NOOK with Titanium Mobile | Thursday, January 12th

Full-Stack Enterprise Mobile Application Development | Friday, January 13th

To register or learn more visit: http://developer.appcelerator.com/blog/2012/01/titanium-week-starts-today.html

As you might know, I am also the Community Lead for Flash Catalyst. Although there will not be any new versions of Flash Catalyst, I plan to continue helping Flash Catalyst users via the forums. However, expect fewer blog entries on Flash Catalyst. I will continue to write about prototyping and mobile development. So, to the entire Flash Catalyst team (Doug, Mark, Adam, Peter, Tara, Ian and the rest), Thank You for your efforts and may you find good fortune whereever you head to.

What is interesting about the app is some of it’s history. Originally, this service was only available as a web app. A fact they were quite proud of. I would usually refer to them as the example of going the web app route versus building a native application.

Recently, they made the leap into the native app realm, by wrapping their web app with PhoneGap. This makes good sense given their previous investment. But this blog post is not about this choice, but rather to talk about a UI choice.

untappd iOS home screen

Take a look at the initial screen from the iOS version of the app. What has focus?

If you said ‘Drink Up’ or the larger yellow tab with beer bottles, you would be wrong! Instead, it is the Friends tab. So many times, I go to check in with a beer and begin typing the beer’s name in the search field only to be informed that the beer can not be found in my friends. Then I remember that I need to switch tabs to log my beer.

untappd Drink Up screen

Why do I make this error? Well the designers have placed more visual emphasis on the Drink Up tab than then other tabs. By adding this visual weight to the element, a casual glance of the UI would lead the user to assume that the Drink Up tab was selected and the screen’s contents were based on that selection. In addition, except for the hint text in the search field, there is no difference in the top portion (about 20%) of either screen.

Now, logging your beers is the primary task of this app, and hence the reason for the visual emphasis for the tab’s look and feel. But what fails is that this tab is not automatically selected focus. It is an easy fix, programmatically set the default state to the Drink Up tab. One could go a bit further and maybe repeat the icons that are used on the tabs next to the search field. Let’s face it, this is an app you will use with alcohol!

So, as you develop your next great mobile application, take care in what you provide focus on and how this reflected in the code. Now what’s in my ‘fridge to drink…

For those who have heard some of my mobile presentations, I am creating a brand new application just for this talk, so no demo’s of my conference applications .

I am really looking forward to this conference and giving this talk. Hope to see you there!

My presentation on Developing AIR for Mobile with Flash Professional CS5.5, given at the recent FlashTent event, is now available for viewing. If you are just getting into mobile development, this talk will give you a nice overview of developing with AIR for mobile. I also spent some time talking about some general mobile development guidelines. Here is the talk description:

New to mobile development? Wondering how mobile applications are built? This presentation will walk you the entire development process of the AIR for mobile application from design to deployment.

Topics:

• Desktop vs. Mobile
• Ergonomics
• AIR
• AIR Application setup Android/iOS
• AIR Code Samples
• New Features
• Hitting walls aka limitations
• Publishing iOS/Android
• Best practices

I hope find this presentation useful, if you are interested in learning more about mobile development, I will be speaking on Choosing the Right Mobile Development Platform at this year’s 360 Flex Conference.

With extension installed, Jim expertly walks the reader through creating a simple rounded rectangle using Fireworks’ vector tools. Then using the CSS Properties Panel, he demonstrates how the properties are translated in CSS3 properties. He then applies these properties into a new HTML document. Although this process has to be done for each element in your design, it is still a great time saver when coding an advanced web site. The chapter goes further and demonstrates a few of the other great features in Fireworks like Master Pages.

In chapter 3, Jim explores the jQuery Mobile Theme Builder. For those not familiar with jQuery Mobile, it is a Javascript framework designed to transform web content into a more mobile-web friendly format. By default, jQuery Mobile ships with 5 visual themes (“A”, “B”, “C”, “D”, “E”). These themes are as visually exciting as the default look of a Flex component. By using jQuery Mobile Theme Builder, it becomes much easier to either create entirely new themes or modify one of the existing ones. The book provides well-written step-by-step instructions. Jim’s background in working with the education market shows in his clear and concise writing. One advantage of publishing as an eBook is that all the illustrations are in color.

If you are web developer who is exploring either the new capabilities of CSS3 or someone working with jQuery Mobile, you should find Using the CSS3 Mobile Pack for Adobe(r) Fireworks(r) CS5 a great reference for a very useful utility.

Recently Hawaii Flash and Everything Flash hosted a free all-day online conference, which I had the pleasure to present a talk on Adobe AIR for Mobile. I have posted my slides on my SlideShare account. The session was recorded, but I am not sure when it will be made available.

Thanks to all that attended and asked some great questions. Sorry I had to leave early, but I had ‘parenting’ chores…

What’s New in Flash Player 11
By Joseph Labrecque

This free ebook will present you with a full rundown of all the new features in the upcoming Flash Player 11 runtime. Along with each feature, if applicable, will be a demonstration of how to employ the new feature. There’s also be a short introduction to Flash Player and a chapter dedicated to providing you with additional resources.

What’s New in Adobe AIR 3
By Joseph Labrecque

This free ebook will present you with a full rundown of all the new features in the upcoming AIR 3.0 runtime. Along with each feature, if applicable, will be a demonstration of how to employ the new feature. There’s also be a short introduction to AIR and a chapter dedicated to providing you with additional resources.

Flash Catalyst Project error in Flash Builder 4.6

The reason for this error is that Flash Builder 4.6 does not come with Flex SDK 4.5 installed. You can manually install this SDK, and you should not have any issues.

If you would like to convert your project to use Flex SDK 4.6, there are a few steps you need to perform. The first is to disable the Automatic Check Compatibility function. Note: You can not do this in the Project Properties panel, it must be done via the menu.

Flash Catalyst Compatibility Checking

With the Flash Catalyst Checking disabled, bring up the Project Properties panel.

Project Flex SDK Properties

Change the SDK version to 4.6 from 4.5. Click OK. Your project will now compile under the new SDK. However, this means you will no longer be able to round-trip the project with Flash Catalyst.

Hope this quick post helps.

The first step was to find a way to hide the StageWebView until it had finished its initialization and contacted the server. Since this component is of the ‘Stage’ type, this means that the normal display manipulation will not work. Instead, I created the viewport of the StageWebView offscreen. Now, I just need to know when it has contacted the server and the first page has been loaded. For this, you can listen for the Location Changed event. (Note, there appears to be a bug in AIR for Android 3.0, where this event is only fired upon the first URL that is accessed. This is important later).

Once the page has been loaded into our StageWebView, I reset the viewport to be on-screen. Since I have a loading spinner animating on the stage, this delay is now neatly masked.

Loading spinner

However, my screen still shows a white StageWebView. Then the map tiles are displayed, followed by the map controls. So how can I improve this portion of the process?

The white StageWebView

In exploring the Google Map forums, I came across the notion of first serving a static Google Map, then waiting for the “tiles_loaded” event to be fired to swap the static map with the dynamic one. This was as simple as adding an <img> tag for the static map, and an event listener. In my web browser, this solution worked flawlessly.

Since there is a Location_Changing event that StageWebView is supposed to fire when the URL is changing, I thought I could tie into this by changing the page’s URL with an # attribute. But I then learned that this event does not currently properly fire on Android devices. I had planned to keep the StageWebView off-screen until the dynamic version of the map was ready before changing its viewport location.

Instead, I was forced to display the static map, then allow the loading of tiles and the map controls to occur visibly to the user. I soon ran into another problem. I had defined the width of the static map to be 480 pixels wide (I would have custom versions of the html page per device width), but once the html file was loaded into the StageWebView, I was able to scroll the image horizontally. What was going on!? Everything was working fine in my desktop browsers.

Note the scroll bars

So, I began looking into the various attributes of the viewport meta tag, to see if there was something I could do to adjust the viewport. If you are not familiar with this tag, the Android documentation has a great reference on it. If you read through their documentation, you will learn that web pages on high-density devices (which is required to run AIR for Android) are automatically scaled by 150%. Eureka! Now I had confirmed why the static image became scrollable, now to find the solution. Reading further, there is another interesting attribute that can be set: target-densitydpi. To quote the documentation, “You can change the target screen density for your web page using the target-densitydpi viewport property.” This property has five values; device-dpi, high-dpi, medium-dpi, low-dpi, or a value. The one of interest for us is the device-dpi. If the target-densitydpi is set to device-dpi, the page will use the device’s native dpi as the target dpi and default scaling never occurs. And with this one addition to our viewport tag, our html file will now renders correctly on-device. Here is a sample apk and the source files.