tpryan

Flex Mobile – Getting Rid of the Action Bar

The viewNavigatorApplication framework in Flex 4.5 is awesome. The ability to manage the various screens of your application is really useful and powerful. But one part of it doesn’t make sense in all applications.

I speak of the ActionBar. This is the UI chrome at the top of the app that contains the screen title and any application navigator features you use. This make a lot of sense in iOS or PlayBook apps, where the entire UI is software based, but in Android, you should use the hardware buttons. If all of the controls move off of the ActionBar, then depending on your needs it might make sense to get rid of it completely.

This is easy enough to do in a view, you just turn it off by setting actionBarVisible=”false” on the view. This worked for me for awhile, but then I changed the way I set up my application. I followed tip number 2 on this post by my colleague Michaël Chaize. In short, I load my data on application start, and push to the first view only after the data has loaded. Makes for a great experience for the user, except that I was getting flashes of the ActionBar while the data was loading up. I can’t tell what exactly is going on, but it looks like there is some sort of placeholder or default view that’s not obvious.

This was a pain for me for awhile, but today I finally figured out how to fix it. On your main application page, where you define viewNavigatorApplication, set actionBar.visible=false;

Good thing to note is that this only affects the ActionBar that is visible in that little flash; if you make another ActionBar visible later, it will show up.

Here’s the source:

https://gist.github.com/1043438.js

CFAIR Synchronization Resources

I talked earlier today as part of Adobe Developer Week on synching up data between ColdFusion and AIR (mobile) clients.

I referenced a whole bunch of pages in my talk, and wanted to link them all out at once.

Finally source code from github for the demos I showed in my session:

Hope this helps!

Quick and Dirty Skinning of a Flex Mobile Button

I’m working on a mobile project and trying to implement based on a beautiful design comp. Unfortunately I haven’t had a lot of luck finding out how to do this right… So I’ll tell you how I did it, right or wrong.

So I start off with the design comp. This is what I want to achieve:

First, I create a blank skin that extends spark.skins.mobile.ButtonSkin.

The mobile skins use an image named “border” to render the border of the button. I’ll exploit that to show the new background image of my skin. There are two images for mobile skins: an up and a down. The Button has a function to return, which should be the correct image for either the up or down state… so:

I import new background images to replace the default up and down backgrounds of the button.

Code snippet – Import new button skins on Snipplr

http://snipplr.com/js/embed.js
http://snipplr.com/json/54891

I override the getBorderClassForCurrentState function. (I’m also changing the font color here on the down state, probably the wrong place to do it but it works.)

Code snippet – Override GetBorderClass on Snipplr

http://snipplr.com/js/embed.js
http://snipplr.com/json/54892

This will yield this result:

It’s using the background but it’s small, so I hardset the size in the constructor.

Code snippet – Hardset the size on Snipplr

http://snipplr.com/js/embed.js
http://snipplr.com/json/54893

This is a big no-no when it comes to mobile development, as that doesn’t scale to many screens well. But my app is pretty specific and I can get away with it.

This yields:

Good, but I need to remove the background shape. I do this by overriding drawBackground and setting it to do nothing.

Code snippet – Nullify draw background on Snipplr

http://snipplr.com/js/embed.js
http://snipplr.com/json/54894

Which yields this:

Finally I need to set the fonts. Mobile buttons have drop shadows on their text, but they don’t render using an actual dropshadow filter; they do it by having a second textfield behind the first. So I need to alter and tweak that font to the same settings by overriding the labelDisplay_valueCommitHandler.

Code snippet – LabelDisplayCommitHandler on Snipplr

http://snipplr.com/js/embed.js
http://snipplr.com/json/54895

And there you have it, a custom skinned button in Flex Mobile. If anyone sees glaring problems with this let me know.

Here’s the entire source if you are interested.

Code snippet – Flex Mobile Button Skin on Snipplr

http://snipplr.com/js/embed.js
http://snipplr.com/json/54896

NY Flex User Group and Flash and the City 2011

I’ll be in New York next week doing two events:

NY Flex User Group
Tuesday June 7th 2011
Razorfish: 1440 Broadway 18 Flr. New York, NY 10018
Register

I’ll be talking about the Flash Builder 4.5 and Flex 4.5. But I’ll also touch on some of upcoming features of Flex and Flash Builder and showing off a few cool new mobile projects.

Flash and the City
Thursday June 9th 2011
Find out more

I’ll be talking about ColdFusion, what’s currently going on with it, and why you would want to use it as a Flash Developer.

Creating Mobile Application Icons with Fireworks

One of the many issues you have to manage when creating mobile applications is the myriad number of icon sizes you have to deal with. There’s a great summary of them at SavageLook.com.

As a developer, your first instinct is that there has to be some way of automating this. In fact, one of my coworkers, Piotr Walczyszyn has created one of these.

The difficulty with this approach in my opinion, is that you end up with suboptimal icons. For my current cross screen applications, I need to make icons that range in size from 512×512 pixels, to 29×29 pixels. The automatic approach will have you create an icon at 512×512 and size down to each size you need until you hit 29×29 pixels. But 512×512 is so much more room to work with. You could add extra text, more graphics, or detail. At the other end, 29×29 is so small, words aren’t able to fit and be legible. Often you want to just have initials or one letter. Often you have to change the font to make it legible at that size even for one letter.

The best solution would be to have individual files for each icon. But that seems like a lot of pain. I’m sure people do it. I’m sure I do not want to be one of those people.

So I want to have one file I need to edit to create my icons, I want to be able to have multiple resolutions of icons, and have each one be different, if needed. But I’d also like to just cut and paste and resize if need be.

My solution: Fireworks and slices. I made a template that has guides for all of the icon resolutions that I currently support. I added in slices, and named them to get good file names via the export. Then I just export the slices to get the icon files.

To use:

Download the template
Place all your icons on the template
Chose File -> Export from the menu
Change Export to “Images Only”
Deselect “Include Areas without Slices”
Export

Now I have one file to tweak when I have to tweak icons. I can tweak all of the icons separately. I can get all of the icons out in one export command. Exactly what I wanted, good and fast.

Let me know if the template helps you guys out at all.

Flex Media Queries for BlackBerry PlayBook

A cool feature now in Flex is media queries. Media queries allow you to deliver different CSS, depending on either the device OS or the pixel density of the device. This is very useful for tweaking your apps to work with the different standards for UI across devices.

Here’s an example. It changes the appearance of Flex menus on iOS, to make the look more iOS’y.

Code snippet – Media Query Example on Snipplr

http://snipplr.com/js/embed.js
http://snipplr.com/json/54386

The relevant docs mention:

Android
IOS
Macintosh
Windows
Linux

But there’s no mention of BlackBerry PlayBook. After a little digging, I found this tidbit in the original sdk docs.

os-platform (allowed values are “Android”, “IOS”, “Macintosh”, “Windows”, “Linux”. Other values are allowed and will be matched against the three character platform abbreviation in Capabilities.version in case new platforms become available).

Which means the example below totally works for BlackBerry PlayBook.

Code snippet – QNX Media Query on Snipplr

http://snipplr.com/js/embed.js
http://snipplr.com/json/54387

Toddler Timeout now on the Amazon Appstore

Toddler Timeout is now available on the Amazon Appstore store.

For those who have asked, I’m working on the iPhone version. There’s a bunch of stuff you have to do to get yourself into iTunes. I’ve finally got testing hardware, and am waiting to get access to the device to test. Then there is getting approved, which frankly, I have no idea when it will happen. But I am working on it.

Toddler Timeout

My first full fledged mobile app is now on the Android Market.

It’s called “Toddler Timeout!” and it’s got real world uses. If you do the whole timeout thing on your kids, this is a timer for doing that when you’re on the go. That’s right, discipline for your child ANYWHERE!

My plan is to release it on the Android Market first, use the easy to publish nature of the Android Market to iterate over all of the bone head bugs I’ve left in it. I’ve also submitted it to the Amazon App Store too. It’s awaiting approval.

Then once I’ve stabilized it, I’ll get it on to submit it to the BlackBerry and IOS stores.

A couple technical things about it:

It uses Flex
The timer is a Flex MX PieChart
I minimally performance tuned it

Expect a few blogs posts around it soon.

Go give it a shot. Toddler Timeout!

Motorola MOTODEV App Summits – South American Leg

A few weeks back I announced that Adobe would be participating in Motorola’s MOTODEV tour featuring the XOOM and ATRIX. Mark Doherty and I will be talking at multiple events with Motorola.

I’m pleased to tell you we have confirmation on dates for the South American (and Central American) leg of the MOTODEV tour.

Beijing, China – April 26 (Mark)
Shanghai, China – April 29 (Mark)
Sao Paulo, Brazil – May 16 (Terry)
Buenos Aires, Argentina – May 19 (Terry)
Mexico City, Mexico* – May 23

Can’t wait.