Flex Formatter Plugin

Code formatting is the reason for many a jihad between developers all over, and spending any time at all discussing it is a waste of time.  (So should I stop writing here?  No!  There is an answer!  Press on…)  Unfortunately this is one issue where it’s impossible to make everyone happy, so you have to settle for making everyone equally UNhappy.

A really painless way to do make everyone equally unhappy is to automate the formatting, and that’s where the amazing little gadget, the Flex Formatter plugin for Flex and Flash Builder comes in.

The plugin adds a few buttons to the toolbar area of Flex Builder.  These buttons are:

  • Generate ASDoc Comments – For your whole file!  In one click!
  • Generate ASDoc Comment – For one item (also in one click!)
  • Format Flex Code – Formats your entire MXML file (or selected lines) ….with one click
  • Indent Flex Code – Not sure why you’d use this and not just the previous button, it seems to do the same thing
  • Rearrange AS Code – Same as Format Flex Code, but for your AS files

To install it, go to “Help, Software Updates, Find and Install” and install from the new remote site:

http://flexformatter.googlecode.com/svn/trunk/FlexFormatter/FlexPrettyPrintCommandUpdateSite/

Grant Skinner has a nice post on this, as well as a settings file that he has exported for use: http://www.gskinner.com/blog/archives/2009/12/indispensable_p.html

New Features of Flash CS5 IDE

Today I came across a really nice walkthrough by Lee Brimelow (@leebrimelow) of the Flash CS5 IDE:

http://gotoandlearn.com/play?id=118

He demos and discusses the features with some detail, or you can read my cliffs notes version below:

  • Major upgrades to video support in the IDE
    • Create cuepoints in the IDE
    • Play the video while its on the stage
    • Manipulate the video on the stage while its playing
    • More video player skins
    • Live video player skin switching
  • Font Embedding Improvements
    • New Panel UI
    • Embedded fonts are globally managed through the new panel
  • XFL Format
    • Replaces FLA format
    • FLA data is contained in multiple XML source files
    • Can version control XML files rather than binary FLAs
  • SWF File size History is tracked
  • Code Snippets included to implement simple functionality quickly
  • Editor now has code hinting and completion for all imported classes (just like Flash Builder)
  • Selecting an error in the Compiler Errors brings you to the source
  • Tight integration for code editing with Flash Builder
  • New brushes for Deco tool (Designers will love these)
  • SWFObject2 used as default embedding method (just like Flash Builder)
  • TLF (Text Layout Framework) gives you tons of options for doing awesome things with text
    • flow text between multiple TextFields, TextAreas
    • Multi-column text fields
    • Possibly automatically scrollable
    • Easier Internationalization, including right to left (Arabic) and vertical (Japanese)
    • Highlighting conforms to customized text flow

And a bonus!  Here is a walkthrough of how to export your ActionScript project as a native iPhone application!  http://gotoandlearn.com/play?id=116

FlexPMD

You probably haven’t heard about FlexPMD.  It’s an open source plugin from Adobe for Flex or Flash Builder.  You run it against your source code and it alerts you to “bad smells,” or potential bad practices, in your code.  These types of tools, from FlexPMD’s older brother, PMD from the Java world, and “Lint” from the C world have been around for a long time, checking over the shoulders of developers, and frustrating computer science students who are required to compile with no lint warnings.  (All my programming homework in college had this requirement, ugh!)

I ran FlexPMD against the source code for brandondement.com and was really impressed with the results.  Some of the results were of the “I don’t care about that” variety, but Flex PMD can be configured to ignore those, and many more were in the “Oh really?  You’re right!” category.  I’ve only just begun to use it, but even then I would highly recommend it for anyone who’s committed to becoming a better programmer.  More information about installation and use can be found at:

http://opensource.adobe.com/wiki/display/flexpmd/FlexPMD+Eclipse+plugin

Love Thy Flex Builder Keyboard Shortcuts

It never ceases to amaze me how after all the time I spend using Adobe’s tools, they always have a few more features that I’m not using but should be. So every now and then I go brush up on the keyboard shortcuts in Flex Builder, so here are a few highlights (Command = CTRL if you’re on Windows):

  • CTRL + 0 (even on Mac) – Quick Outline.  Hit this, then start typing to jump right to any variable or method definition in the class
  • Shift + Command + R – Open Resource.  Hit this, then start typing any file name to open it.  Works on all file types in your project
  • Command + L – Go To Line.  Opens a dialog where you type in a line number
  • Shift + Command + C – Puts a block comment around the selected text

Strangely there doesn’t seem to be a definitive guide to shortcuts in FB, even the LiveDocs look rather incomplete:

http://livedocs.adobe.com/flex/3/html/help.html?content=code_editor_9.html

But a search for “flex builder keyboard shortcuts” returns results from tons of blogs.  Here are a few more gems that weren’t in the LiveDocs:

  • Command + D – Deletes a line
  • Command + / – Comment/Uncomment a line
  • Shift + Command + D – Inserts an ASDoc-style comment, including parameter and return declarations!
  • Shift + Command + L – Opens an outline of all the keyboard shortcuts available

Also, if any of these don’t suit you, you can always go change them!  In the main menu, click Flex Builder -> Preferences -> General -> Keys (or just type “Keys” in the filter).  Coincidentally, this is the most definitive list I could find.

What keyboard shortcuts do you use that you can’t live without?

#FollowFriday Flash Edition

Twitter has quickly become the best source of up to date information about our beloved technology, Flash. If you’re on Twitter already, here are a few things you might be interested in. If you’re not on Twitter, here are a few links that should be enough to convince you why you should be!

If you have any more suggestions, please share in the comments!

https://twitter.com/InsideRIA
InsideRIA.com is a community site from O’Reilly and Adobe for Rich Internet Application development and design.

https://twitter.com/CreativeTweet
A prolific tweeter who posts random but useful tips, tutorials, and links relevant to Flash and the rest of the Adobe Creative Suite

http://listorious.com/Adobe/adobe-evangelists
A list of Adobe Flash Platform Evangelists, most post great links and info

http://listorious.com/pixelhandler/flash
A hand-picked list of people who post about Flash, overlaps somewhat with the evangelists list

https://twitter.com/adobeflash
The PR face of Flash. Rarely posts about tech stuff, but if you want to ask a question or have a comment, they’re a good starting place

https://twitter.com/gskinner
Probably the most well known Flash developer in the world. Ranked “Most Influential” in the ActionScript category by http://wefollow.com/twitter/actionscript

https://twitter.com/fwa
Cutting edge website award news, inspiration, latest trends and more from FWA (Favourite Website Awards) founder, Rob Ford.

Flash Player 10.1 Beta Released

Adobe has released betas for both Flash Player 10.1 and AIR 2.0 today! With this release, the Flash platform now fully supports the Open Screen Project. Earlier this year Adobe announced that they were working with TV manufacturers to get the Flash Player onto a chip that will be embedded in the next generation of TVs, and with this release of the Flash player, they’re addressing the needs of mobile devices. Here are some highlights:

  • H.264 hardware acceleration
  • Multi-touch
  • Gestural and other mobile input models
  • Accelerometer, Screen Orientation, Sleep Mode, and other common mobile device feature support

The best read for the details are the Release Notes, which cut through the marketing fluff and get right to the point
http://labs.adobe.com/technologies/flashplayer10/releasenotes.pdf

Official Release Page
http://labs.adobe.com/technologies/flashplayer10/

Fluffy Marketing Press Release:
http://www.adobe.com/aboutadobe/pressroom/pressreleases/200910/100509AFPforMobileDevicesandPCs.html

The Developer’s Cycle: Code, Test, Refactor

Most developers code, test until the code works, and then continue coding, happy that they’re so good and successful at their job.  When working this way, the split between coding and testing is roughly 50/50 for more junior developers, and trending towards 75/25 for more seasoned pros.  But when working this way, you lose the most valuable opportunity you have to better yourself and your work. Would you turn in a paper without proof reading it first?  Of course not!  When I work, I try to allocate 20% of the time I’m given for an assignment to planning and architecture, 60% for actually writing and testing code, and the final 20% to cleaning up the huge mess I made along the way, aka refactoring.  That’s it kids, the word of the day is “re-fac-tor-ing.”

Refactoring means taking a chunk of already working code, and making it “better.” It’s vitally important that the code already works, otherwise you’re still developing.  “Better” can mean lots of things, from more efficient to more readable, but when talking about refactoring, we’re mostly talking about more readable, which has trickle down effects making it more efficient.  The important thing is that you take the time to read what you just wrote. Like taking notes in class, if you can’t even read what you wrote the day before, how is anyone else supposed to?  Most of the time developers can read what they wrote, but not what anyone else wrote, which is the biggest problem that refactoring attempts to solve.

When refactoring, you should look for ways to simplify your code, making it more readable and maintainable.  Here are a few questions to ask yourself:

Is this code still used?

If it’s not, don’t comment it out, delete it! Version control can always resurrect it if needed, and you’ll be removing one potential point of confusion for someone maintaining your code down the line.

Is my code documented?

At a minimum you should have inline comments that provide a narrative of what the code block below is doing.  That’s usually enough for leaf classes that aren’t meant to be subclassed and are used sparingly.  As code becomes more reused, eventually becoming a library, it should have more complete documentation, like ASDocs.

Do my package, class, function, constant, and variable names still make sense?

This is huge. Names should have an instantly understandable and useful meaning to the human who’s reading your code.  Don’t be afraid to have names that are long, but look for ways to shorten the really, really long ones too.  Use that vocabulary, smart guy!  Flex Builder has a very nice feature called “Rename” that’s in the “Refactor” menu when you right click a name that is effective at making renaming a trivial task.

Is my code well formatted?

Telling developers where to put whitespace and line breaks is probably the most surefire way to make them secretly hate you.  But you, as a developer, should take pride in your craft and make an effort in making your code at least consistent.  If you write a function with 30 unbroken lines of code, it makes it difficult for someone else to scan what’s going on.  Sprinkle some line breaks and inline comments in there to logically chunk it up, and you’ve instantly saved your company time and money in the future.  By the way, Adobe publishes coding standards that their developers are supposed to follow when writing code for the Flex SDKs.  Does every line of the latest SDK conform to those standards?  No way!  But you can see that the developers make an attempt to make their code readable.

And finally…

Is there a simpler way to do this?  Is there a better algorithm?  Is there a function or library for this already?  Are my objects properly encapsulated and loosely coupled?  The answers to these questions will get easier for you to answer in time, but the fact that you’re asking them of yourself has already put you on the right path.

Enforcing Abstract Classes in AS3

One of the most common criticisms of ActionScript is that it doesn’t include some of the more advance features of other object-oriented languages. For example, Abstract classes. Abstract classes are similar to Interfaces in that they provide a common API for: implementers of the interface or subclasses of the Abstract class. At the same time, Interfaces and Abstract classes guarantee this common API for classes from other packages to work against. The Abstract class takes it one step beyond the Interface in that it also adds real functionality to the base class which can reused in its subclasses.

So if ActionScript doesn’t enforce the Abstract class, how can you guarantee that someone down the line doesn’t start abusing it? A passable answer to this question is the seldom-used “self” keyword, as seen here:

public function AbstractClass(self:AbstractClass)
{
	if(self != this)
	{
		throw new Error("Whoa!  You can't instantiate AbstractClass directly suckah!");
	}
}

The drawback to this method is that it’s not enforced at compile-time. Instead, the error will be thrown at runtime and alert the developer that they did something wrong. Further, there’s nothing stopping the developer from then catching the error and ignoring it. Ruh roh. So there is no real solution that guarantees the Abstract nature of the class is respected, but at least this little warning will deter all but the most irresponsible of programmers.

AS3 Reference on Your iPhone

This has flown under my radar since January, but now that I know it exists, its a must-have! I’ve played with it only briefly so far and noticed that it only includes the class references, more obscure things like keywords aren’t included, but it’s still super handy nonetheless.

Because all the data is stored locally, you can use it while you’re on the go without connectivity, and searching is super fast, even faster than opening a browser and searching if you have your phone handy.

http://www.mikechambers.com/blog/2009/01/26/actionscript-3-reference-for-iphone/

AS3 Reference for iPhone

Flash Camp Atlanta

I just signed up for Flash Camp Atlanta! It’s been a while since my last conference, the Adobe onAir Tour, so I’m very excited to spend another day geeking out with fellow Flash developers. Although I’d like to see more Adobe employees, the guests, speakers, and sessions do look like they’ll be interesting.

The networking opportunities are what’s really gotten me excited though. Most of the people I work with are all much more experienced than I am and have been around the block a few times, so they know all the names around the interactive industry in Atlanta. I want to put some faces with those names, as well as spread my own around a bit.

Flash Camp Atlanta Badge
FlashCampAtlanta.com