Thanks, Mister! | Adobe Flex & AIR Development

PhoneSeek :: Adobe AIR application

By Mister | Published: March 2, 2009

PhoneSeek is an application to track any device that uses InstaMapper. InstaMapper is free real-time GPS tracking service. To use InstaMapper you need a GPS enabled device with the free InstaMapper tracking software installed along with a API Key from InstaMapper’s web site for each device you own. You can track mobile phones (iPhone, G1, Blackberry) or even automobiles.

Use Case

With PhoneSeek I can add my InstaMapper API Key for my phone and track it from the desktop. I can also add and track multiple devices. On my G1 phone, I installed the Android version of the InstaMapper tracking software. This software allows me to send my phone’s GPS data to InstaMapper service where I can view it either on their website or consume the data through InstaMapper’s web service. In PhoneSeek I just add the API Key to begin tracking the advice as soon as your phone starts to transmit GPS data.

Get PhoneSeek

Download the latest version from this location.

Development Background

PhoneSeek might be used to track devices from your family members, or maybe track down a lost or stolen phone. However, Phoneseek was basically created as a test project to learn PureMVC and also experiment with the new Google Maps API SWC for Adobe AIR. Previous versions of the Google Maps API SWC only worked for web-based applications.

Coming from Cairngorm to PureMVC was quite an experience. At first it was really painful because I had a tendency to over think things, or try to structure things more the Cairngorm ways (like dude, where are my delegates and commands).

I really had a hard time understanding where to put certain code, like update code, or code to set the window location on startup, and even how to pass around value objects used by more than one view. It took some time to get used to the PureMVC way, but all in all, its not a bad framework to work with. However, I still prefer Cairngorm and have since started to investigate and really enjoy Mate.

Credit for some of the graphics goes to DragonArtz Designs.

- Mister

Posted in AIR, API, Android, Cairngorm, ColdFusion, Mate | Tagged Adobe AIR, Cairngorm, Flex, Mate, PureMVC | 5 Comments

The New Type of Dot-Com Work Force?

By Mister | Published: February 10, 2009

Today, I was inspired to write a brief post about my beliefs towards the ideal work environment. I was inspired by an article about creators of Twitter and their experience coming from the early dot-com era of blow-out parties and slackers with bank rolls, to having a more mature dot-com. My favorite quote from a the article references the work culture:

Really, it’s like any other office, except there’s hardly anybody there. They’re all working at home. … “There’s not a lot of foosball going on here,” CEO Evan Williams, 36, says. “People are working on what needs to be done. I know when I’ve been in those cultures, there’s just a lot more goofing off. That burns a lot of cycles that don’t need to be burned. Part of it’s an age thing. My first couple of companies, I only socialized with work people. A high percentage of people here have spouses, have families. They can go home.”

You can tell that Evan Williams really gets the whole “age” thing about the new type of dot-com work culture and understands that there is a paradigm shift in the programming workforce. We are moving from the young hungry programmers working 24/7 in drab caves and subsisting on only pizza and caffeine to new start up companies that have “seasoned” programmers living balanced lives while still producing quality work.

My background

I have been in large companies, education institutions, small companies, and even worked ( way too briefly ) for myself. I have had opportunities to experience a lot of different company cultures. For me it is usually the CEO that sets both the pace and the environment vibe for each company (especially if you are on your own). What I have always noticed is that most companies are reluctant to embrace new modes and thoughts for working. We live in a completely wired world with people and resources all over the planet, yet most employers still hold on to the belief that they need to see your face every day in order for you to accomplish your work. I think the real reason is simple, they don’t believe it works or understand how it works. Despite the countless productivity studies to the contrary, if your boss doesn’t see people in the office, they get freaked out, simple as that.

Posted in Misc | 2 Comments

Adobe AIR Runtime Font Differences

By Mister | Published: February 6, 2009

This was a heck of a problem to discover and even worse to try to figure out why. Sadly, I did not find a good solution the problem. I will give the short and sweet rundown of the issue. You have three different machines, three different operating system, the same version of Flex Builder (3.0.2), and the same code base. Now you would think that when you create a release version of an AIR application on one machine, then deploy it on another, you would get consistent results. However, we experienced that an AIR file created one Windows environment was different from the AIR file created on another Windows environment and a Mac machine. The difference was visible with the fonts displayed in the application.

I have to be clear about this part, because first you might think that the fonts are rendered differently on each machine because we didn’t embed the font within the application. So you would see different fonts on a Mac or from one PC to another. That would be a good guess, but you would be wrong. I have running on my Mac three copies of our AIR application (app_1.air, app_2.air, app_3.air), running side-by-side at the same time on the same screen. All three applications compiled form the same exact code base, but from different machines (two PC’s and one Mac).

Posted in AIR, Flex, Font | Tagged AIR, Flex, Flex Builder 3 | 6 Comments

Flex :: ImageCache, a cheap way to cache images

By Mister | Published: January 29, 2009

In a previous post about Ely’s SuperImage, I mentioned that we decided to implement a simpler method for caching images within a Flex application. ImageCache is a simple class file that extends the Image control by adding the ability for the control to cache bitmap data. Unlike SuperImage, ImacheCache can handled SWF files, it just lacks all the bells and whistles of SuperImage, though image flicker is eliminated.

Using ImageCache

ImacheCache is just two class files. ImageCache.as which extends the Image control and ImageCachUtility.as which is a Singleton class that used by Imagecache to store and retrieve the BitmapData for cached images. Bitmap data is stored in a regular ArrayCollection object and retrieved by using the full path to the image (because image names can be duplicates but paths should be unique). Once the amount of cached images reaches the cache limit, the controls works on first in first out, dropping off older cached images as it caches new ones and staying within the cache limit. SWF fiels are not actually cached and will load as normal. You just use ImageCache like you would the Image control within your project:

1	<controls:imagecache cacheLimit="200" id="image" source="{data.url}" width="100" height="100" complete="imageComplete()" ioError="imageError()" xmlns:controls="com.thanksmister.controls.*"/>

Cache Limit

ImageCache has a property called “cacheLimit” which tells the control how many images to cache. Because caching images can reduce the performance of your application. The larger the cache limit value, the more memory your application will use because it is storing all the Bitmap data in memory. If you want to reset the image cache, create an instance of the ImageCacheUtility and call the method “clear()”. ImageCache has been used and tested extensively for large media sites. Below is a screen shot of images from Flickr, the list on the left uses the standard Image control, the list on the right uses the ImageCache control. It seems that there may be some security issue when loading Flickr images without doing a proxying the images. Run the example locally or proxy Flickr images for best results.

Posted in AIR, Component, Flex | Tagged BitmapData, Flex, Image, ItemRenderer, List, TitleList | 21 Comments

Scrolling List Control with Tweener

By Mister | Published: January 25, 2009

I was on a simple little side task last week, to create a scrolling effect using the Flex control and also remove the default scroll bars. I didn’t want to do the usual trick, scrolling a HBox with items added to it using a repeater, or whatever. I wanted to animate the scrolling that occurs within an actual List control but give it a little easing effect. The call went out to Twitter for suggestions, and within minutes Jesse Warden responded with with “use the tween class dude” and also my friend Jerry Don reminded me of a new smooth scrolling List created by Alex Harui. This helped to point me in the right direction.

Scrollbars and Mouse Wheel

The first objective was to remove the default List scroll bar because I wanted to use buttons to scroll the list from the top to bottom and vice versa with just one click of a button. Ok, no problem, verticalScrollPolicy=”off” just hides the scroll bar, however it also removes the ability to scroll the list with the mouse wheel. Now I had to hack into the List control to add this functionality back. This part was not too hard, I found a good code example, though it was in German, and repurposed it for my needs.

Posted in AIR, Component, Flex | Tagged Effects, Flex, List, maxVerticalScrollPosition, Mouse Wheel, Scrollbar, Tween, verticalScrollPosition | 4 Comments

SuperImage Redux

By Mister | Published: January 18, 2009

I have been meaning for so long to post this code. Some time ago I had the pleasure of working with John Yanarella from Universal Mind. John was helping my employer at the time to put together an application that allows users to upload, manage, and share media assets. We needed an efficient way to cache and display images to optimize the performance of loading and viewing a large number of thumbnails.

SuperImage

Last year Ely Greenfield posted on his blog QuietlyScheming a way to end images from flickering when you display them in a Flex List control. Ely created a new component called SuperImage that replaces the Flex Image control. SuperImage fixes a few issues with the current Image control layout in addition to adding the ability to cache loaded images to stop them from constantly reloading (causing the flicker when scrolling a list).

SuperImage Update

In our project we wanted use SuperImage, but what we wanted was for SuperImage to behave more like the Flex Image control. Specifically we wanted the control to broadcast the same standard events as the Image control; ioError, securityError, imageComplete, progress, completem, completeEffect. The new SuperImage also implements IDataRenderer, IDropInListItemRenderer, and IListItemRenderer interfaces. John Yanarella did a great job cleaning up the SuperImage control and add the missing functionality. We ended up not using the SuperImage and instead used a simpler implementation for caching the Image control.

Posted in API, Component, Flex | Tagged API, Component, Flex, Flickr, Image, List | 6 Comments

Having trouble getting a client to pay?

By Mister | Published: January 9, 2009

My good friend Dan Florio (Twitter friends actually) kicked off a discussion about what to do when a client doesn’t pay. He has some great tips and is also asking for some community input. I am sure there are plenty of bad experiences out there to go around, mine included. What would be great is to hear the creative and legal ways that Flex community members handle this particularly disdainful and sensitive issue. Join the discussion at polyGeek.com.

-Mr

Posted in Flex, Flex News | Tagged Flex, Twitter | Leave a comment

Flex 3, ColdFusion 8, and Error #1034

By Mister | Published: December 11, 2008

Working on project for a new client I had had the opportunity to use Flash Remoting from Flex to talk to services on a ColdFusion server without running the ColdFusion server locally on my machine. Since I am working remote these days (at home), I wanted to connect to the CFC’s on the ColdFusion server remotely from my local Flex Builder 3 working environment. I setup a simple “Hello World” example that I found over at ASFusion.

I uploaded the HelloWorldService.cfc file to the remote server in “C:\ColdFurion8\wwwroot\components\com\test\HelloWolrdService”. I then set up a RemoteObject with the endpoint property pointing to the remote ColdFusion server instead of the local host (since the example points to a local host):

1	<mx:remoteobject id="CFCService" endpoint="http://myremoteserver.com/flashservices/gateway/" source="components.com.test.HelloWorldService" result="getResponse(event.result)">

But I got a “Security Sandbox Error” right away from the call. This usually tells me that there needs to be a crossdomain.xml file on the root of server allowing access from my specific location or completely open using the “*” value. For more on the Flash security policy, check out plenty of info at Adobe’s site.

Posted in ColdFusion, Flash Remoting, Flex | Tagged Adobe, ColdFusion, Flex, Flex Builder 3, RemoteObject, Remoting | Leave a comment

Storing an ArrayCollection in the EncryptedLocalStore

By Mister | Published: December 5, 2008

On one of my side AIR projects I got the idea to store an ArrayCollection (AC) object into the EncryptedLocalStore (ELS) to have a sort of mini data structure. I thought it would be no problem since you can basically throw anything you want into the EncryptedLocalStore as long as its not over 10MB where performance would be hampered. I built a little sample script to test the idea by filling an AC with a bunch of value objects. Upon retrieving the AC from the ELS, I cast it as an AC, but none of the value objects were readable. I tried casting the value objects, but that threw a runtime error in Flex.

I did some searching around and found one example from the Adobe AIR cookbook that stores and retrieves an value object from the ELS, casting the object as a value object when retrieved. However, I really wanted to store a whole AC of value objects and retrieve them. So I did a little more searching and found one blog post that outlines the same issue I was having: “when I read the object from disk back into my application, the type of objects from Array Collection is lost.”

Ok, cool, so the blog post lists a generic function to solve the solution by transforming the objects stored in the AC back to a proper value object. I wanted to make a little demo that combines the AIR cookbook example with the solution for storing/retrieving AC from the ELS with a slight modification of the generic function.

Posted in AIR, Flex | Tagged Adobe AIR, Adobe Integrated Runtime, AIR, ArrayCollection, describeType, EncryptedLocalStore, Flex | 3 Comments

Cairngorm Plugin for Flex

By Mister | Published: December 1, 2008

If you are a heavy user or closet fan of Cairngorm (like me) then you would be interested in knowing that there is a new Cairngorm plug-in out from Adobe that generates some of the Cairngorm code automatically from Flex Builder 3. Also read some of the notes that Brian Deitte wrote after attending the Adobe MAX session “RIA Development with Cairngorm: Tips from the Experts” which I unfortunately did not attend. Brian will also be on the newly formed Cairngorm Committee which will guide the future of Cairngorm

Cairngorm Plugin

Just one small problem I ran into when installing the plugin, I received the following error:

1	Cairngorm Plugin (0.0.6.200811131413) requires plug-in "org.eclipse.emf.codegen".

To resolve this, I selected the Europa Discovery Site from the wizard along with the Caingrom plugin option created by following the installation instructions. I then used the “Select Required” button to install the needed eclipse plugins for codegen that are required by the Cairngorm plug-in. This installs the EMF (Eclipse Modeling Framework).

-Mister