Joeflash’s Enigmacopaedia


The Perfect Flex Workflow: Flex Builder 3 with FDT 3.2, Part 1

Posted in Tutorials, Flex, Workflow, Flex 3, Flex Builder 3, Eclipse, FDT by Joeflash on the June 27th, 2009

I’ve long wanted to use FDT to turbocharge my ActionScript coding, but without Flex MXML support I couldn’t justify the cost of getting both Flex Builder and FDT. Then FDT 3.2 came out this past May — finally I had an answer to my prayers with FDT’s new MXML support. And I actually won a copy of FDT Enterprise at 360|Flex Indy: total awesomeness! Now I could decide if once and for all I could get rid of Flex Builder in favour of FDT.

So I tinkered with FDT, converting some of my old projects and seeing how they compiled and ran. And for the most part it all went off without a hitch. I was really quite impressed with FDT’s new Flex capabilities. Also, I had been using Flex Builder for the occasional Flash Professional project for code editing, and FDT now makes that sooo much easier, much like SEPY used to do back in the day.

But it was not to be. Shortly after porting over a Flex project I’m working on, I realize I’d gotten used to having aspects of Flex Builder available in my workflow. Like certain Flex project settings, and the Profiler. Maybe later on I’ll explore the enterprise features of FDT like the Debugger or the SoS logger, but for now all I want FDT to do is gimme that sweet coding savvy which Flex Builder sorely lacks. I mean, there isn’t a single Eclipse-based IDE or plugin I’ve seen which comes anywhere close to the sheer overwhelmingly awesome coding intelligence and snippet templates of FDT.

So what I’d like to be able to do is use FDT for coding both AS and MXML files, and use Flex Builder for the actual compilation, debugging and profiling. And of course the faster compiler and the Network Monitor in Flash Builder 4, when it’s released.

So how do I get the best of both worlds? They’re both available as plugins, so I should be able to install and use them both, right?
(more…)

Converting Flash Projects into Flex

When converting from a Flash CS3/4-based project, to a Flex-based project, there are not just one or two conversion paths to consider, there are many, all of which depends on the Flash project in question.

I’m on a discussion on LinkedIn, in which one guy asks if we know anyone who can do a Flash-to-Flex conversion project, which evolved into a discussion on techniques. Rather than post a pages-long reply, I thought I’d post it here instead:

First, for any Flash-to-Flex conversion to go smoothly, you’ll need at least one person on your team with a good dose of real-world experience with both Flash and Flex-based RIA projects (Flash banners do not qualify ;)), to guide the conversion process and make sure the best deployment strategies are implemented.

As far as the conversion path, there are several possibilities. Depending on the kind of project, you may want to migrate some, most or all of the project to Flex. When migrating from Flash to Flex, you’re not just migrating code, you’re migrating from a visual asset instantiation and state management environment to a purely coding-based methodology (if we forget for a second about Design View in Flex Builder).
(more…)

Help me speak at 360|Flex (and kick some ass in Flex Builder)

Posted in Flex, Workflow, Flex Builder 3, Conferences by Joeflash on the January 17th, 2009

John Wilker, one of the organizers of 360|Flex, has put up a voting system to help decide from 124 speaker submissions which 40 make the cut. If you wanna find out how to kick some ass in Flex Builder, like how to tweak the Eclipse JVM to speed up compile times, use Subclipse for subversion, or code like a mad dog, go vote for my talk. Full description as follows:

Kicking Ass and Taking Names: Optimizing Flex Builder Performance and Workflow

Flex Builder is a great tool. There are times when using this tool is great, grand, works like a charm. And other times it’s an excruciating experience akin to waiting for paint to dry while a crack team of ninja monkeys shove bamboo under your finger nails. This session will show you how to kick some serious ass in Flex Builder: speed up the IDE, code faster, leap tall buildings in a single bound and shoot lasers out of your eyes. (Okay, maybe not the lasers part, but still.) In this session we’ll be talking about:

  1. Optimizing Flex Builder Performance
    • Project Development Best Practises
    • Speeding up Eclipse
    • The Heap Status Indicator
    • Why Compilation Slows Down
    • Command-line Startup Options
    • JVM Memory Tuning,
  2. Using Language Intelligence
    • Code Assist, Syntax Highlighting, Mark Occurrences, Go to Defintion, etc.
    • Code Preferences
    • The Class Outline View & Sort Options
  3. Managing Workflow
    • Useful Keyboard Shortcuts
    • Search & Refactoring
    • The Diff Tool
    • Layouts for Productivity
  4. Customizing The Workbench
    • Custom Shortcuts
    • Customizing the Editor (Syntax Colouring, Changing the Editor Font Size, Bookmarks, etc.)
    • Editing the Workspaces List
    • Migrating a Workspace without getting an ulcer
  5. Code Versioning in Flex Builder
    • The Built-in Eclipse History / CVS
    • installing and using the subclipse subversion plugin
  6. Assorted Plugins (a melee of Eclipse plugins that’ll make your life easier)

Vote Now!! : )

And here’s my official conference bio (in case you’re wondering who the hell this guy is):

Joseph Balderson (aka “Joeflash”) is a freelance Flex and Flash Platform Developer living in central Ontario, Canada. He spends most of his time in his home studio mainlining code like a junkie on a binge tripped out on trance music, surrounded by three loving cats whom he’s training to meou on cue so they can answer the phones for him (but so far no success). In his spare time he… wait, what spare time?? Joseph is a staff writer at CommununityMX, and lead author on the upcoming book
Professional Flex 3 by Wrox/Wiley Publishing.

Moving a Flex Builder/Eclipse Workspace Without Importing Anything (Update)

Posted in Flex, Workflow, Flex 3, Flex Builder 3, Eclipse by Joeflash on the November 27th, 2008

In the last post, I examined how to move a Flex Builder/Eclipse workspace to a different directory location without re-importing all your projects. Only it didn’t work as well as expected. I finally figured it out, but use at your own risk, since this involves editing Eclipse binary metadata files.

Currently there is no user-friendly technique for moving an entire Eclipse workspace folder to a different directory. This I most wanted to do because the current technique involves the painstaking task of creating a new workspace, then reimporting all projects, reconfiguring all compiler settings, and then re-imputing all the SVN location data for Subclipse. Blech!!

I wanted to move all my workspaces from my C:\ drive to a C:\_fx3\ directory to get them off the root drive. But I don’t have whole days to mess around with importing projects and making sure all the settings have been imported faithfully. I just wanted to move entire workspace folders to the new directory, make a few metadata file hacks, and be done with it.

Well, as it turns out, it’s not that easy. What makes all the difference for most workspaces are not the XML metadata, which seems to be mostly for caching, but the .location files in the metadata project directories, which is where the absolute directory location for each project folder is referenced. Problem is they’re not meant to be user-edited. So use this technique at your own risk, as other absolute directory dependencies may exist that I’m not aware of. For now consider this an experiment in progress.

1. Copy your workspace to the new directory location.

2. Edit the XML metadata files in the workspace folder as detailed in this last post.

Now here’s where it gets interesting.

3. Find the .location files in the workspace metadata. They are located in the

\{workspace dir}\.metadata\.plugins\org.eclipse.core.resources\.projects\{project folder}

directories

3. Open up each .location file in a Hex Editor application. I’m using the free Hex Workshop utility from pbsoft.

Now let’s take a look at the process for editing one of those files.

4. Edit the URI in the binary data. In the Hex for each file you will see the characters “URI” followed by the absolute directory path for the project folder in question. Edit the path, making sure to add or delete bytes as required.

In my .location file, the old path is:

URI//file:/C:/profx3book/Chapter_01_Why_Flex

editing the .location file - start

I edit the new path to be

URI//file:/C:/_fx3/profx3book/Chapter_01_Why_Flex

5. Edit the byte before the “URI” to be the new character length of the path.

If your code editor has hex-to-dec conversion, as mine does, you can see that the character length of my old path, which includes “URI”, is hex 2C or 44 characters (see image above).

Select that byte value, and replace it with the character length of the new path. I got the character length by using word count in MS Word (Tools > Word Count…).

URI word count

The length is 49 characters, which is hex 31.

editing the .location file

5. Save the file.

6. Repeat for each .location file.

Now when load up Flex Builder and point to the new workspace location, I verify that the project does indeed point to where I told it to in the .location file. And my SVN locations are conserved, as are all my preferences. YAY!! :)

verifying the successful workspace move

Unfortunately, although this hack works, it’s a lot more trouble (or at the very least the same) as making a whole new workspace and importing each project one by one. I had to Hex edit over 20 files to move the entire workspace — which could hardly be considered a time-effective solution. I can make things easier on myself my copying the entire workspace to my new directory, but I still have to delete and recreate the workspace metadata by pointing to that new workspace folder, and then re-import every project in that workspace. Still, I learned quite a few things about Eclipse in the process, which was partly the goal of the exercise for me anyways.

Although I’ve used it for a few days now and I have not seen any compile or file referencing problems, and it seems like a sound solution, this technique has not been battle-tested, and I’m not an Eclipse developer by any stretch, so I’ll say it again:
use this technique at your own risk. Don’t come crying to me if this hack corrupts or messes up your Flex Builder or Eclipse workspace in any way.

If indeed this hack proves to be stable, as it seems to be, the next step would be to create a batch file or something that could at once copy the complete workspace directory to a new location, seek out and edit all the required XML metadata files with the correct path references, and hex edit all the .location files with the changed URI and adjust the length byte accordingly. Maybe even a custom eclipse plugin written in Java? Hmmm… But that task lies beyond my time and current programming abilities at present, so I will leave you with that final tantalizing thought.

(maybe some enterprising Eclipse developer will read this and decide to surprise us with a plugin, hint hint ;) )

Flex Builder Tip: Moving an Entire Workspace in One Step Without Importing Anything

Posted in Flex, Workflow, Flex 3, Flex Builder 3 by Joeflash on the November 24th, 2008

I had a situation recently where I had way too many workspaces sitting in my root C: drive folder, so I decided I wanted to move them to a subfolder with a very short name like “_fx” just so all my Flex workspaces are all in the same place, and to make backup archiving easier.

If you’re wondering, I have dozens of workspaces, one for each client and/or writing project, each of which has an average of 20+ projects.

Problem is, the conventional way is slow. Really slow. I’d have to create a new workspaces directory location (C:\_fx in my case), and import every single project into every new workspace. And even with saving preferences, I’d lose things like Subversion site locations in the Subclipse perspective. And with over 20 workspaces,. each with an average of 20 projects… I’d be at it for weeks. So I needed a shortcut.

So I dug around in the workspace metadata files, and eventually found where the directory locations reside for each project in that workspace. Luckily, it’s all in one file, so the hack is relatively simple.

Correction: unfortunately it’s not one file you have to edit, it could be a few XML files. And unfortunately this hack doesn’t work with all workspaces unfortunately. See below.

1. Make a copy of your workspace folder to the new location. Don’t move it, in case anything goes wrong. I found this out the hard way by wiping out the metadata for a workspace with over 30 projects — ouch!

2. Find the .metadata folder for the workspace.

3. Find the following files and open them in a text editor:

{workspace}\.metadata\.plugins\org.eclipse.ui.workbench\workbench.xml

{workspace}\.metadata\.plugins\org.eclipse.ui.workbench\dialog_settings.xml

{workspace}\.metadata\.plugins\org.eclipse.ui.workbench\workingsets.xml

{workspace}\.metadata\.plugins\com.adobe.flexbuilder.editors.common\dialog_settings.xml

4. Find & Replace all instances of the old directory location with the new one.

For example, for my \profx3book workspace, I replaced all instances of “C:\profx3book\” with “C:\_fx\profx3book\“.

5. Save the file, and point Flex Builder to the new workspace. Once you’re sure everything is where it should be, delete the files in the old location.

Et voila!

PS: Yes, I know, the above lists five steps, not one — but really it’s only one step: replacing the location string in the workbench.xml file.

PPS: Important Caveat: Search for all .location files in the workspace .metadata folder. If there any files found, this technique might not work, since the directory location for that project is stored in .location files as binary data, and cannot simply be edited with a text editor. So use this technique at your own risk.

Flash-Flex Integration: Editing Flash Code in Flex Builder (free article)

Posted in Flash, Flex, Flash CS3, Flex Builder 3 by Joeflash on the June 25th, 2008

The latest in the Flash-Flex Integration series on Community MX, this tutorial shows you how to use Flex Builder as an ActionScript 3.0 editor for Flash-compiled projects. It also delves into techniques, best practises and caveats in using Flash and Flex Builder together in the same editing workflow.

This one was just too good to keep to ourselves, so we made this tutorial available free to the community. You can read the tutorial and download the PDF and all source files here.

The Flash CS3-Flex Builder 3 workflow
The Flash CS3-Flex Builder 3 Workflow

Actions panel vs Flex Builder
Flash Actions panel or Flex Builder: for code editing, there is no contest.

Flash-Flex Series on CMX: Flash S9 Skinning for a Flex DragPanel Component

Posted in Flash, Flex, Community MX, Flex Builder 2, Flex 3, Flex 2, Flash CS3, Flex Builder 3 by Joeflash on the June 25th, 2008

In part 3, part 4, and part 5 of the Flash-Flex Integration Series on Community MX, we show you how to build a scale-9 skin in Flash, apply it to a custom Flex component, and build a draggable, resizable “panel” component application in Flex. You can see the finished demo for this tutorial trilogy below.

This movie requires Flash Player 9

The skin was designed in Flash CS3, and implemented in Flex Builder 3. To find out how this was done, you can purchase these tutorials at the links below.

Flash-Flex Integration - Part 3: Flex Component Skinning with Scale-9
Flash-Flex Integration - Part 4: Skinning the Scale-9 Flex Component
Flash-Flex Integration - Part 5: Building the DragPanel Component

Flex Builder 3 Startup JVM Termination Error

Posted in Flex Builder 2, Flex Builder 3, Eclipse by Joeflash on the March 26th, 2008

So I just installed a new version of my firewall software, and now neither FB 2 or FB 3 will start. I get a JVM termination error popup, that’s it. As fortune would have it, Neil Webb had blogged about the same problem just today. So I looked up the issue on the Adobe bugbase, and there I found the answer after a little investigation.

JVM termination error dialog

Turns out I had some JVM performance tuning set in my shortcut.

-refresh -clean -vmargs -Xms512m -Xmx1024m

…and apparently it was too high. The moment I ran FlexBuilder.exe directly or the shortcut with a lower max mem at -Xmx768m , it worked, no problem. I found I could push it all the way up to 958m, but no more. At 959m, it crashes, just as before.

No idea why installing new software would affect the maximum memory allocation for the JVM, or why a max of 958. But at least it’s working now.

\*replaces hair torn out of scalp\*

Update 02-04-2008: logged an official bug with the Adobe JIRA bugbase

Flex Powertools: Explorers article on Community MX

Posted in Flex, Tools, Community MX, Flex Builder 2, Flex 3, Flex 2, Flex Builder 3 by Joeflash on the March 17th, 2008

I’ve a new article on Community MX entitled Flex Powertools: Explorers, in which I review over 20 of my favourite Flex 2 and 3 explorer utilities and resources, which includes component explorers, styling & skinning explorers and resources, visual effects explorers and benchmark explorers.