Thursday, April 22, 2010

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.

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


Wednesday, April 21, 2010

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:
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).  

Monday, April 12, 2010

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 ( 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.