the iPhone, development, and Hedonism

Sorry, should’ve clarified...some emails were going around amongst my colleagues, and we were discussing the newest iPhone.  While Apple is the king of cool right now, they're still stuck with a crappy cell phone provider that is worthless if you want your phone conversation to last longer than  30 seconds (about the average amount of time before an average call drops - with full signal strength, mind you).

For me, Flash happens to be a medium I work in, but I’m a Rich Internet Application developer, and HTML5 + javascript, or Flash + javascript, or Silverlight + javascript all can achieve the same thing (eventually)...My job is to make shit look cool (kinda like bouncing gradient balls using gravity to propel themselves through millions of particles of pixie dust (optimized by apparat, of course), all while synthetically growing and teaching you something about polymorphism, or something like that)

I don’t think the hedonistic value of owning an iPhone would actually improve my life in the least, aside from earning the respect and envy of toy collectors...I know I’m a luddite, because I don’t want a phone that surfs the web on a shoddy little screen (high res or not).

Smart phone or not, I hate surfing the web on tiny screens...watching a movie, or playing a game is ok, and getting some quick information distilled down to a quick blurb on twitter-like basis would be useful, but reading entire sites, surfing through the Nytimes, or even going to craigslist suck on these little screens (at least for someone like me with big fat fingers).  The iPad comes closer for casual users, or people who don’t need a professional development environment, and just some connectedness...the iPhone (compared to the Incredible) is ok, but I’m not losing sleep.

I’ve got to get back to making cool shit happen on the screen (whichever size screen that may be).

Oh, and Hedonism is an amazing scotch by Compass Box.  I really love their bottle of Peat monster, and they've got some yummy other bottles.  Try them out if you can. 

Getting Flex 3.6 SDK, Flashbuilder 4, Tomcat, and BlazeDS to all play nice?

Ok, I'll be honest, I haven't gotten Blaze to play nicely yet, but I haven't had anything to setup w/ it yet.  I'm connecting to a previous setup that used Tomcat to connect to OLAP, and I'm recreating it in FB4 instead of Spring Suite tools.  Much of my team prefers STS, but I am comfortable right now in my efficiency in FB3/4, so I blogged yesterday about wiring up the Flex 3.6 SDK

Connecting to a Tomcat server was the last hurdle before I get to a BlazeDS, and so I found this nice little plugin that I couldn't get from any other source.  For some reason, Tomcat isn't supported easily on Eclipse 3.5, and I'm not a fan of the standalone Flash Builder.  I prefer the Eclipse plugins, and found this would help me stay within the Eclipse.

http://www.eclipsetotale.com/tomcatPlugin.html#A3

This was a very nice find.  I simply put the package in my eclipse plugin folder, and immediately when I restarted Eclipse, I had a Tomcat option on my toolbar.  In the preferences pane (Command+,) I could point the plugin at my Tomcat install, and away I go. 

Now I can setup keyboard shortcuts (like Command+shift+t) to start/restart, or stop Tomcat.  The information from eclipsetotale is quite helpful, and I'm glad I came across it.

Now to get down to some hardcore devving

:)

Getting up to speed on the latest Flex 3 SDK’s

This is not assuming you already have Flex 3 installed on your machine (eclipse plug-in or stand alone).

In order to do this and avoid buggy errors, the latest nightly build of Flex SDK 3.6 is what I’ve used successfully.  I found one of many a bug which are annoying as all get out regarding comboboxes (which is why I prefer/recommend 3.6).

In order to get up and running quickly, download either the latest or 2nd to latest nightly build of SDK 3.6, found here from Adobe.

Inside your Flexbuilder sdk folder, create a folder for 3.6.0, something like this:
for 
Windows: C:\Program Files\Adobe\Flex Builder 3\sdks

for Mac: [I use eclipse w/ the plugin, but it’s probably something similar] /Applications/Adobe Flex Builder 3 Plug-in/sdks

Now install (or copy over) the newest SDK to this folder from the download.

Next you’ll need to download the data visualization package (and unit testing if you use that).  While the latest build is for 3.5, you can use the package for 3.6 as well.

And instructions for where to copy the files from/to:

This helped me get the environment up and running quickly in 3.6.  This can also apply to anyone developing using Flashbuilder 4 and working with SDK 3.x (for previous projects).  

Creating an AIR Installer badge for Flex Devs

In building a recent app, the customer asked me to also make a flash badge for their installer.  This way they could deploy the app installer, yet control the download of the AIR app.  For me, the badge allows two things, control of the app's image, and some nice SEO.  If you can get other sites to deploy your badge (which is a simple group of files), then you can get some nice cross linkage SEO (not to mention and SEO linking/MetaData you might have in the SWF that runs the installer), and also some good data.

So to create a Badge, use Adobe's sample badge which I found here (on my Mac):

/Applications/Adobe Flex Builder 3 Plug-in/sdks/3.6.0/samples.

After you copy it into your project's folder (or wherever you'll most effectively work with it), you'll need to open it in Flash to manipulate some of it.  Now, I am not a Flash IDE user.  It takes me quite some time to figure out what the heck timelines are, and what layers are doing where, but in all honesty, if I could just figure this out, I'm sure I could do some killer stuff in Flash that would help out my enterprise apps.  Anyways, inside the group of items are .js, .html, .as, .swf, .jpg, and .fla.  The .fla allows me some room for designing, creating, and manipulating my text area.  Following Lee Brimelow's (http://www.gotoandlearn.com/play?id=56) example of making a tooltip in Flash (something I enjoy taking for granted in Flex), I built a hover over tooltip in my installer badge, as well as added some SEO in the metadata of the swf, and inside the jsp/html page.

It took me a few minutes to realize that the badge itself was generated from Flash, so once I got inside of Flash, and started tooling around, I found out I could easily automate, or graphically change around, things on my installer badge.  And by using my own customized image, I could adjust inside the .fla what the image was to be shown, and could now use an animated .gif, or a .png, or (using the awesomeness of alchemy and ZaalLabs) 40+ image types.

Also, because the fla incorporates the as file, I adjusted a few settings there for some more seo, and used that to compile and push out my swf.  bada-boom, bedaubing, I now have a kick-a$$ installer badge, with a custom logo, and I can mess around and adjust anything about the badge I want (including animation, or generative art, or what not).  And the installer file is tiny (in comparison to a flex app, this thing was only about 6k when I was done).  6 friggin K.  That's ridiculously small…I need to learn to make Flex apps that small.

Anyways, please enjoy hopefully these step by steps will help you make a better AIR app installer badge.

Working w/ Global settings in Flash to get around Sandbox Security issue

I am working on an app that needs local resources and network resources.  I was getting very frustrated during my development because I couldn't read the local setup file.  Unfortunately, after a lot of digging around, the only reason I could find that the app wouldn't load was because the global settings for flash had been changed.  Because these settings are only available by going online here:

http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager02.html
or here:
http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager03.html
or here:
http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager04.html
or here:
http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager06.html
or here:
http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager07.html

The following isn't a tab, but allow you to view set your player updates:
http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager05.html

Anyways, the annoyance for me is a couple of things:
1) why is this remote (aka why do I have to keep reloading a page  to look at flash player settings inside of a flash swf?)
2) What is the garbage that Charles is recording going back and forth, and
3) where is this swf object located on my machine so that I may have some more control over it.

It's amazing to see what sites (intentionally visited or not - which includes pop-ups) that are stored in the global settings…I need to understand this more if I'm going to want more security for my machine.

Anyways, the point I had about this post was that the global security settings were causing me some problems in connecting my app to the intertubes.  Once I made a checkmark on the Global Security Settings, I could actually see content and it resolved my problems (and all of this started as a search into possible cross domain issues, and not just my own irrational fears that someone might actually want to track all the websites I've been to and store private information about it without letting me know/delete/erase this stuff, manage my own security, etc…). 

Compiling Release Build in Flex - non-alerted memory error:

I use Eclipse with FB3 plug-in for all my development, and often can become the case with opportunistic applications, Eclipse will grab more and more memory.  If I'm working on 2-3 apps at once, compiling and changing objects, I quickly lose up to 500MB to Eclipse.  Garbage collection and heap status size are determined by the .ini file.  When working on projects that have to embed a couple of fonts, I've had to increase the size, so that the compiler doesn't give me an out of memory error and ask me to close my workbench.

Well, to keep Eclipse from becoming a memory hog, I changed the runtime and max perm size to 128 respectively.  This normally keeps Eclipse happy, running pretty quickly, and about as close to 300MB at runtime as I can keep it.  Well, recently while building out a project, I tried to export my final build, and the application kept crashing or bombing out.  The problem was that it wasn't telling me what was going on.  It just kept stopping, and not giving me a reason why.  I knew something was wrong because the release-bin folder remained empty.

Switching over to Eclipse's plug-in development, I checked the error logs (very, very important resource when Flex and Eclipse fail without giving you warning…).  The error:
java.lang.reflect.InvocationTargetException
.
.
.
Caused by: java.lang.OutOfMemoryError: Java heap space
Root exception:
java.lang.OutOfMemoryError: Java heap space

Aha! Eureka - my answer lay in the fact that I had changed my workbench max and permanent size to something smaller than it could use, but it wouldn't tell me that.  Why Eclipse, is there now message?  Well, glad I know how to find the error log in Eclipse.

Hope this helps anyone else who's Release Build fails, and no answer/reason is given…

Dynamically Showing Embedded Images in Flex

Dynamically Showing Embedded Images

Several resources will show how easy it is to embed an Image in Flex. You can embed inline, via meta tag, and another way (which I forgot right now). Regardless of any of these ways, they assume you always know when you are going to be using your embedded image, and don't have much flexibility if you want to dynamically change the image for a component based on something as arbitrary as mouseOver.

If you look at the profuse examples when googling, you come across many that show you how to embed inline:
<
<mx:Image id="img" source="{@Embed(source=assets/img.jpg)}" />

Or you can embed an image via metatag inside your class, and then call it explicitly in your component:

<mx:Metadata>
[Embed(source="assets/icons/myImg.png")]
public static const myImg:Class;
</mx:Metadata>
…
<mx:Image id="img" source="{myImg}" />

Or you can embed the object in another class, foo, and then reference it in your Image:

import location.for.assetClass.foo;
...
<mx:Image id="img" source="{foo.myImg}" />

More often than not, I like to go the third route, mainly because I want to be able to access the images from another class, or from multiple components. Now knowing how to embed images is great, but my quandary was, "What do I do if I have 30 or 100 small icons/images that I want to embed, and the component that is using the image doesn't know the embedded image to use until runtime, i.e. itemRenderer, or dynamically generated object using static icons (recycled buttons…)?"

For this example, I am using a simple list, with a custom itemRenderer. The list's dataprovider has an id and some other information for each record. In my customItemRenderer, I can get the data.id and use that to determine the picture I wanted to use. The only problem was, I have know idea how to call foo.myImg dynamically. I tried getClassByName(data.id), but it refused to cast my object to a class or would return null.

I really thought that because I had embedded my image, then cast it as a class, I'd be able to call it by name. Bummer!

Next I setup an array and a method inside of class foo. The array, called myAssets, is an array of all the classes inside of foo. The function was called from the itemRenderer, in init() to get the class for the image to assign it, as a ByteAsset, to the source for the image. Inside of foo, I have the following:

public function getClass(str:String):Class{
var s:String = "[class IconAssets_" + str + "]";
for (var i:int = 0; i < myAssets.length; i++){
var t:String = myAssets[i].toString();
trace(t);
if(s == t){
return myAssets[i];
}
}
return null;
}

I would pass in the data.id to the getClass(), and the return would be the class I needed. This actually worked, but seemed quite cumbersome, especially because now I was not only responsible for creating the embedded image, but also adding and maintaining an array for all objects. This seemed a bit extraneous, so I finally hit on a solution that let's me do this quickly and easily.

The most annoying part of all of this is either not knowing the correct syntax (because I'm a music major and am learning coding on my own), wording to search the world of Flex development blogs, or something else involving the continual error between seat and keyboard…

Anyways, the ultimate solution was actually quite easy.

Keeping the foo class with all my embedded images is fine, and in my itemRenderer, for the image, I just need to put the following for the source:

<mx:Image id="img" source="{foo[data.id]}" />

That's it! Probably too much time spent trying to figure this out, but in the end, the class is acting like an object, and I can get any of my "properties" out of the class pretty easily now. I struggled w/ this concept on an earlier project, but now that I have the quick fix to dynamically change the source of an image with an embedded image without having to hard code any values in the component is much, much better. Ok, so lesson learned, the answer wasn't that hard, but I needed to futz with the other possibilities before I could finally get it right. Now that I got it right, I promise I shouldn't get it wrong again*.

*I might, but that's all part of my slow learning.