Paul Robertson's words, punctuated View RSS

No description
Hide details



Leadership and communication for distributed software teams 10 Oct 2013 10:20 AM (12 years ago)

Since I’m a remote employee, I’ve been interested in learning better ways to work in teams that are distributed geographically.

I recently read Scott Berkun’s latest book The Year Without Pants: WordPress.com and the Future of Work. (This one wasn’t even free from the publisher. =)

In the book Berkun (former program manager at Microsoft and now author and leadership consultant) describes how he took a break from consulting and joined Automattic (WordPress.com) as an employee for almost two years. He was brought in as part of their transition from a completely flat organizational structure to an organization of teams. Along with anecdotes about the company, he gives lots of great insights about management in software companies in general, and particularly about working in distributed teams (Automattic is a 100% remote employee company — hence the title of the book).

If you’re interested in those things, I highly recommend the book.

If you don’t have the time to read a book right now, this morning I found an interesting article by William Allen (of Behance): Never Stop Talking: How Small Teams Stay Great When They Grow. Although Allen makes no mention of Berkun’s book and uses examples from his own experience, I found it to be a great cliff-notes summary of some of the most compelling ideas I picked up from the book.

Add post to Blinklist Add post to Blogmarks Add post to del.icio.us Digg this! Add post to My Web 2.0 Add post to Newsvine Add post to Reddit Add post to Simpy Who's linking to this post?

Book review: Microinteractions by Dan Saffer (O'Reilly) 4 Sep 2013 7:07 PM (12 years ago)

I recently read the book Microinteractions by Dan Saffer. I thoroughly enjoyed it, and I think it’s a must-read for anyone involved in Interaction Design, creating user interfaces, or is interested in learning more about those fields.

My favorite part of this book is that it exists at all. That probably sounds weird, so let me explain. When I first started hearing about the book I wasn’t at all sure what it would be about. I wasn’t familiar with the term “Microinteractions” – in fact as far as I can tell Dan invented the term to describe the small-level details of a single interaction. Once I understood what it is about, and the philosophy of interaction design that it promotes, I was hooked.

This book perfectly describes my personal philosophy of what is most important in interaction design. I think the microinteraction level is the most interesting and also the most potentially powerful aspect of interaction design. At the same time, it’s the part of IxD that is unfortunately often ignored in a fast-paced software project schedule. In my experience, too often the budget for interaction design doesn’t allow for much more than working out the flow and layout of screens. Meanwhile, the details of how the interactions actually work is left to whatever UI component or framework is fastest to add to the project. However, I believe that, as Dan points out, the greatest value can be gained from focusing on those small details.

The book provides a thoughtful, grounded framework for how to think about these interactions and how to go about designing them. It also includes lots of great tips and guidelines to follow in the process. It’s full of numerous great (visual) examples to help clarify the ideas being discussed. Many of these, I was pleased to see, come from the excellent site Little Big Details.

My only complaint about the book, which is something I would love to see fixed in a revision or future edition, is related to the examples. (Yes, I did say they were something I liked. =) While the examples themselves are great, it sometimes took some mental effort to work out the connection between the specific examples and the points they were linked to in the book. To be clear, the examples were all valuable – it’s just that for a stretch of a couple of chapters, whenever the book makes a point and then says “see figure x,” the caption that goes with figure x doesn’t give enough detail to make it clear how what that figure shows correlates with the specific point in the text at the point where it says “see figure x.” Sometimes I was able to figure it out, though a number of times it took a fair amount of mental effort to figure out the connection, and sometimes I never did figure it out.

That problem annoyed me enough that I decided to deduct a star from the book rating. However, the book is still very much worth reading, and still very valuable. That’s just the little detail that kept it from being perfect. But you should definitely read it anyway!

Update: Dan Saffer responded (via twitter) to my complaint about the connection between the examples and the text:

@probertson O’Reilly editors added a lot of those unclear/false connections from text to images, over my objections.

— Dan Saffer (@odannyboy) September 5, 2013

@probertson ORA style stupidly doesn’t allow for images without a callout to a paragraph. Some of the images don’t fit neatly like that.

— Dan Saffer (@odannyboy) September 5, 2013

@odannyboy I guess I'll just have to hope that they are willing to change their editorial rules for the next edition :/

— Paul Robertson (@probertson) September 5, 2013

@probertson You and me both. I’m trying to slip some in as “errata” to fix. ;)

— Dan Saffer (@odannyboy) September 5, 2013

Disclosure: I received my copy of this book for free as part of the O’Reilly Blogger Review program

Add post to Blinklist Add post to Blogmarks Add post to del.icio.us Digg this! Add post to My Web 2.0 Add post to Newsvine Add post to Reddit Add post to Simpy Who's linking to this post?

AS3 Concurrency/Workers use cases, best practices, and link roundup 7 Nov 2012 11:31 AM (12 years ago)

Leif Wells responded to my presentation slides on ActionScript 3 Workers/Concurrency with a great question:

Is there a discussion somewhere on practical use cases for AS3 Workers? Best Practices? (Leif Wells on Twitter)

Use cases

I talked some about practical use cases in my presentation. The summary version is this: “any time you find yourself wishing you could make your code run asynchronously, consider putting it in a worker.” In other words, any time you’ve got code that’s doing some sort of work that takes so long that it causes pauses or stuttering in your user interface, that’s a good candidate for a Worker. In particular if the code is something you’d rather do “in the background.” Here are some concrete examples:

Best practices

As for “best practices” that’s basically what I talked about in the section called “caveats” in slides 69-71. (These are also suggested and/or explicitly called out in the documentation.) The main suggestions I would make are:

Links and resources

Leif’s question also made me realize that I’ve shared some links on Twitter about Workers, but it would be nice to compile them into a single post. So here is my collection of recommended links related to AS3 Workers:

Adobe documentation

Examples/Tutorials

Add post to Blinklist Add post to Blogmarks Add post to del.icio.us Digg this! Add post to My Web 2.0 Add post to Newsvine Add post to Reddit Add post to Simpy Who's linking to this post?

Slides and code: Concurrent programming with ActionScript workers 31 Oct 2012 1:21 PM (12 years ago)

Several weeks ago, I gave a presentation to the D-Flex users’ group about the new ActionScript workers features in Flash Player 11.4/AIR 3.4. Although I’m a few weeks behind on this, I wanted to share my slides and code.

Update Nov. 7 2012: On recommendation from Leif Wells, I realized it would be useful to share some links and tips on use cases and best practices for AS3 Workers.

A lot of the presentation involved talking through examples in the slides, but I also showed a “full” code example at the end.

If you’re interested you can view and download the example from GitHub. It’s a simple app that just counts from 0 to 100,000,000 in a loop. The counting happens behind the scenes – it’s not rendered on the screen – but it does have a progress bar and progress status text field that are updated as the counting happens:

Near the start of the presentation I showed a version of the app that does things the “wrong” way (on GitHub this is called the “NonWorkerVersion”). Since the code just counts in a loop, the code blocks in the loop and the UI freezes. (Depending on how busy your machine is and how high the number is, it can trigger a script timeout error.) Of course, the progress bar and the progress status text field don’t update either since they run in the same thread as the loop that’s counting.

This is the loop code, from the main class:

Counting in a loop (non-worker version) NonWorkerDemo.as on GitHub 
1
2
3
4
5
6
7
8
9
10

while (i < targetValue)
{
    i++;
    // only send progress messages every so often
    // to avoid flooding the message channel
    if (i % oneHalfPercent == 0)
    {
        handleProgressMessage(i / onePercent);
    }
}

Toward the end of the presentation I showed the version that does things the right way.

First, the UI thread spawns a worker and sets up the main thread-to-worker communication, then it starts running:

Starting up the Worker WorkerDemo.as on GitHub 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

bgWorker = WorkerDomain.current.createWorker(Workers.BackgroundWorker);

bgWorkerCommandChannel = Worker.current.createMessageChannel(bgWorker);
bgWorker.setSharedProperty("incomingCommandChannel", bgWorkerCommandChannel);

progressChannel = bgWorker.createMessageChannel(Worker.current);
progressChannel.addEventListener(Event.CHANNEL_MESSAGE, handleProgressMessage)
bgWorker.setSharedProperty("progressChannel", progressChannel);

resultChannel = bgWorker.createMessageChannel(Worker.current);
resultChannel.addEventListener(Event.CHANNEL_MESSAGE, handleResultMessage);
bgWorker.setSharedProperty("resultChannel", resultChannel);

bgWorker.addEventListener(Event.WORKER_STATE, handleBGWorkerStateChange);
bgWorker.start();

The worker contains the loop that counts. The worker is still just using a loop (and hence is running in a continuous thread without stopping the entire time). However, it dispatches events to the main thread/worker and it updates the display. This is the code for the worker’s counting loop (from “BackgroundWorker.as”):

Counting in a loop (Worker version) BackgroundWorker.as on GitHub 
1
2
3
4
5
6
7
8
9
10

while (i < targetValue)
{
    i++;
    // only send progress messages every so often
    // to avoid flooding the message channel
    if (i % oneHalfPercent == 0)
    {
        progressChannel.send(i / onePercent);
    }
}

Even though this is just a simple example, it demonstrates how working with workers requires a bit of mind-bending and changing the way we think about coding in ActionScript. I realized as I started using workers that I’m so used to ActionScript’s single-threaded event-driven execution model that I make some assumptions sometimes about code execution. Once I started splitting my code into workers, I had to change my way of thinking.

On one hand, I realized that with the single-threaded model I subconciously made assumptions about certain things already having been processed or finished executing before other blocks of code were run. However, those assumptions aren’t necessarily true when the code is running in parallel, so I had to be more careful in planning my code to accomodate different states of completion at various milestones.

On the other hand, I was able to be more procedural and less event-driven (within my worker code) and just write all the code within a single method that was mostly a loop. This also requires a different way of thinking about the code. I’m so used to splitting code up into lots of event handlers that it’s weird to think that I can just run code in a loop and dispatch events, and know that they will actually be caught and run in the other thread even though the loop/method I’m in hasn’t returned yet.

Once the Worker apis are complete with the Mutex class and the Condition class, this will allow the potential for even more linear/procedural code. It will be possible to pause a thread’s execution, so you could conceivably write an entire worker within a single loop that never exits and just pauses execution until it’s needed. I know that’s normal in some other programming disciplines, but for an ActionScript programmer it’s a bit mind-bending.

Add post to Blinklist Add post to Blogmarks Add post to del.icio.us Digg this! Add post to My Web 2.0 Add post to Newsvine Add post to Reddit Add post to Simpy Who's linking to this post?

...and, I'm back! 5 Jun 2012 5:40 AM (13 years ago)

I’ve been silent on this blog for a long time. There are several reasons for this:

In any case, I didn’t mean for this post to be an excuse for my silence. In fact, the title of the post isn’t actually meant to refer to me being “back” to writing on my blog. (Although I do plan to be doing more of that.)

Two years and a couple of weeks ago, I wrote a nostalgia-filled post about leaving my job at Adobe, moving to Texas, and starting a new job as an AIR application developer. Working for Dedo Interactive has been a very rewarding experience. I’ve gotten to work with some great people, on some of the most interesting projects being done right now (in my opinion of course). My employers have been great about working with me to find opportunities to work on projects that match my interests.

In spite of all that, for a time I’ve been feeling that I’ve achieved the goals I had for myself when I joined Dedo Interactive, and so I’ve been looking for a chance to move in some different directions. Fortunately for me, an opportunity opened up at a company that I know is a great employer, and I was selected for that opportunity.

As of yesterday, I’m now officially an Adobe employee once again. My new job is in the developer relations group, specifically in the team that is in charge of developer-related content such as the Adobe Developer Connection. (I’m in a sibling team to Michelle Yaiser and Brian Rinaldi’s team, and a close cousin to the evangelist’s teams.)

My specific area of focus is on the developer documentation and other instructional content (e.g. code samples, example apps, etc.) for ActionScript. Part of my job is to be one of the people who create that content (write documentation and create code examples). Another part (this is where the “developer relations” comes in) is to work with and in the ActionScript developer community to get and keep a deep understanding of how developers work, then use that understanding to design what content we present and how we present it. The end goal is for Adobe to provide the best and most useful instructional resources for developers.

In part this is similar to what I did with Adobe before. However, since this job is now part of Developer Relations, there is more freedom and flexibility to make significant improvements, and more support for working with real developers in the community, which are some of the things that I really wanted to do but were more difficult to do in the past.

I’m excited for the possibilities that this position offers. I’m excited to be working for Adobe again – they really are a great employer. Most of all I’m excited that I get to continue to work with ActionScript and the great ActionScript developer community, and that it’s an official part of my employment.

Add post to Blinklist Add post to Blogmarks Add post to del.icio.us Digg this! Add post to My Web 2.0 Add post to Newsvine Add post to Reddit Add post to Simpy Who's linking to this post?

Flash Builder 4.5's "Flash Builder" templates 26 Jun 2011 9:00 PM (14 years ago)

I’ve written several articles about Flash Builder 4.5’s code templates feature. However, I got a question by email today that made me realize another aspect of templates that’s potentially confusing.

Specifically, I was asked about the “Flash Builder” template category, and how to access those templates (since they don’t show up in the code hint list).

Unlike the other template types (ActionScript, MXML, and CSS), the Flash Builder templates aren’t templates you invoke directly via the code hint list. Instead, those templates give you a way to customize the code that Flash Builder generates when it creates methods, event handlers, and properties. Flash Builder uses these templates when you use Quick Assist to create a method or event handler, when you use the Generate Getter/Setter command (either from Quick Assist or from the menu), when you use the Override/Implement Methods menu item, or when you create a method override using the override code hint.

For example, by default several of these items have a comment in them that looks something like this:

// TODO Auto-generated method stub

I tolerated this for a while, but last week while preparing my Flash Builder coding productivity presentation I decided I was finally tired of deleting those comments every time, so I edited those templates to remove the comment.

Add post to Blinklist Add post to Blogmarks Add post to del.icio.us Digg this! Add post to My Web 2.0 Add post to Newsvine Add post to Reddit Add post to Simpy Who's linking to this post?

Flash Builder 4.5 tip: easy method override 26 Jun 2011 9:00 PM (14 years ago)

Here’s another trick I use quite often in Flash Builder 4.5. To be honest, this feature may have been in Flash Builder 4 and I just didn’t notice it, but I discovered it with Flash Builder 4.5 (and I’ve enhanced it with templates, which are definitely a FB 4.5 feature =).

If you want to override an inherited method (or get/set accessor):

  1. Type 

    override public function<space>

    or 

    override protected function<space>

  2. Flash Builder pops up a menu showing all the methods that can be overridden. This is also handy just to see what methods are available.

  3. Choose a method name from the code hint list.
  4. Flash Builder creates the method signature complete with parameters and a super.methodname() call.

However, being me, I like to save keystrokes as much as I can. I created a couple of templates to reduce the typing involved in this process:

Using these templates I just type “opf<space>” (or “oprf<space>”) and the code hint list appears. Then I type the first few characters of the name I want and I’m in business.

As a side note, if you want to customize the code that Flash Builder inserts when it generates the override method, it’s the template named “override method” in the Flash Builder templates category.

Add post to Blinklist Add post to Blogmarks Add post to del.icio.us Digg this! Add post to My Web 2.0 Add post to Newsvine Add post to Reddit Add post to Simpy Who's linking to this post?

Coding Productivity Features in Flash Builder 4.5 recording, notes, etc. 22 Jun 2011 9:00 PM (14 years ago)

Yesterday I had the privilege of giving a session as part of Adobe Developer Week 2011, on the topic of “Coding Productivity Features in Flash Builder 4.5.” It’s pretty obvious from my recent posts that this is a topic that is important to me =).

You can now view the session recording (requires Adobe ID).

Many of the features I talked about are the same ones I’ve discussed in recent posts about Flash Builder 4.5, so you’ll find more information in those articles, although the presentation takes a much more hands-on “watch how I really work in the real world” approach.

In addition to the posts, I talk about my Flash Builder templates several times in the presentation. I updated them a few times in the last week in preparation for the session, and the latest version is now available on my GitHub account:

Paul Robertson’s Flash Builder templates on GitHub

Finally, if you’re interested in Flash Builder productivity, you’ll want to check out these articles and links for additional information, especially useful keyboard shortcuts:

Add post to Blinklist Add post to Blogmarks Add post to del.icio.us Digg this! Add post to My Web 2.0 Add post to Newsvine Add post to Reddit Add post to Simpy Who's linking to this post?

Notes from D-Flex "AIR SQLite for the real world" 22 May 2011 9:00 PM (14 years ago)

Last week I presented to D-Flex (the Dallas Flex Users’ Group) on the topic of AIR SQLite for the real world. This is the description of the presentation:

Almost any real application needs to store data, and usually that means using a relational database. In the real world, building an application that uses a database is a complicated, even messy business. Complicated and messy mean slow and inefficient. This presentation is about the libraries, tools, techniques and workflow for developing AIR SQLite applications (learned through lots of trial and error) that help me work faster and better.

I won’t bother posting my slides because for the most part they were reused from my 360|Flex presentation ”AIR SQLite Optimization” (with some updating–mostly trimming content out).

I actually really enjoyed the presentation–I was comfortable enough with the material that I was pretty relaxed. That means I ended up sharing a lot of tips and bits of experience that aren’t reflected in the slides. Hopefully the recording will be available soon; when it is I’ll add a link here and I do encourage you to take some time to watch it if you want to learn some of the lessons I’ve learned about working with SQLite in AIR.

A big part of my presentation was describing (and showing) various libraries and tools that I’ve found useful in my AIR SQLite development. Rather than make everyone write them down, I promised to post them here (I’ve also included a couple that I didn’t mention but that are useful):

Add post to Blinklist Add post to Blogmarks Add post to del.icio.us Digg this! Add post to My Web 2.0 Add post to Newsvine Add post to Reddit Add post to Simpy Who's linking to this post?

Flash Builder 4.5 tip: Supercharge your code hints and code completion 16 May 2011 9:00 PM (14 years ago)

I was a C# programmer for a while and I have to admit, I was spoiled by Visual Studio. Some people don’t like lots of code assistance. I’m not one of those people. Since I moved to mostly ActionScript coding I’ve been hunting for an editor that comes close to the features Visual Studio has, specifically with regards to code hints and code completion.

FlashDevelop is based (conceptually) on Visual Studio (it’s actually based on SharpDevelop, which is modeled after the .NET world) so not surprisingly FlashDevelop has great code hint features. Unfortunately, since I moved to a Mac I haven’t been able to use FlashDevelop. (I’ve tried, but it’s just way too slow to run it in a VM.)

With that in mind, for the Flash Builder 4.5 release I filed several feature requests to hopefully get code hinting and code completion on par with FlashDevelop. Sadly it’s not all the way there yet, but happily they accepted and implemented some of my feature requests (and others are in the “under consideration” bin).

Here’s what’s available today, and at the end I’ll talk about what I hope comes in the future.

Accept code hints with space and other characters

Problem 1: In Flash Builder 4, when you have a code hint and you get to the item you want, you have to hit Enter to accept it. When I’m trying to code quickly, I feel like I’m hitting Enter every third or fourth character. Ugh.

But not anymore! New in Flash Builder 4.5, you can specify a set of characters that serve as keys to “accept” code hints. When a code hint is showing and you hit one of those keys, the code hint is entered and the character is entered as well. So (for example) you can type a few characters from a variable name and hit “.” and the variable name (and the period) are added to the code:

Flash Builder 4.5 Code Completion with custom characters from Paul Robertson on Vimeo.

However, this feature is turned off by default, so you have to turn it on to make it work.

Go to Flash Builder Preferences > Flash Builder > Editors > ActionScript Code. In the bottom of the preferences pane you’ll see a section titled “Code completion”:

Code completion preferences pane

I believe the trigger keys are empty by default, but you can see the set of keys I specify in the screenshot. It’s pretty much every character that is legal in ActionScript but isn’t legal as part of an identifier name. If you want to copy and paste them, here they are:

{}[]().,:;+-*/%&|^!~=<>?#

Note that I also check the box to have the space bar accept a code hint.

I used to include the single and double quote characters but I found that they triggered more false positives than anything, and I couldn’t think of a situation where I’d be typing a variable or method name and the next character would be a quote character (without a space or operator in between). So I removed them, and I’m happy with that choice.

Make code hints appear automatically

Problem 2: You don’t have to hit Enter to accept code hints, but you still have to hit Ctrl+Space every fourth character to open the code hint menu in the first place.

Once again, this is now a problem of the past. Flash Builder 4.5 lets you specify a set of characters that automatically make the code hint menu appear when you type them.

Flash Builder 4.5 Code Assist triggers from Paul Robertson on Vimeo.

In Flash Builder 4.5 Preferences, choose Flash Builder > Editors:

Code assist preferences pane

In the middle of the panel there is a section titled “Code assist.” First of all, to enable this feature you need to check the box “Enable auto-activation of code and template proposals.”

I like my code hints to appear quickly, so as you can see I change the “activate after” time to 10 milliseconds.

Next you need to check the “Use additional custom triggers” checkbox. This is what turns on the magic. By default the set of lowercase letters is in the box. Because I prefix private members with an underscore (_) I add that character to the set as you can see in the screenshot.

As a side note, this set of characters is almost the exact opposite of the characters I specified to accept code hints–in this case it’s all the characters (except “$” and numbers) that are legal in identifiers.

And now for the bad news

Unfortunately, these two settings are great on their own but when you combine them you run into a bit of trouble.

Specifically, since ActionScript keywords like var, new, const, function etc. contain letters, any time you start typing them they will trigger the code hint menu. That’s okay in general, most of the keywords they are unique and once you type enough characters there is no matching code hint so the menu closes.

Unfortunately, some of the keywords do have matching items in code hints. For example, the keyword function is spelled the same as the Function class, so when you type the word “function” the “Function” entry in the code hint is selected. Then, when you get to the end of the word and hit <space>, it’s a trigger to accept the suggestion so “function” gets replaced with “Function.” Ugh.

Function/function is one I run into a lot. Another one I hit a lot is new triggering the NewObjectSampler class. NewObjectSampler? What’s that? Its a class in the flash.sampler package that I’ve never once used, but since it’s a built-in class it’s always available to code hints. (Maybe this is just Flash Builder’s way of telling me that I need to use more dependency injection and factory patterns instead of using new. =)

Depending on what libraries you have imported, other keywords can trigger code hints as well. This is especially troublesome when you’re using libraries that are built around reflection (since they tend to have classes that are named for language features). I run into problems when using FlexUnit and Mockolate, for example.

So, are these new code assist and code completion features useless? Not at all; they’re still very cool, and hopefully in the next release they’ll be perfected. In the mean time there are a few workarounds, although I admit that none of them are ideal for me:

Moving forward

These are unfortunate issues, but the Flash Builder team is aware of them and they’ve told me that they’re anxious to improve things for the next version, which is a good thing.

If you’re interested in having great(er) code hints in Flash Builder, consider voting for these feature requests so we can “encourage” the Flash Builder team to move forward more quickly on these issues:

Add post to Blinklist Add post to Blogmarks Add post to del.icio.us Digg this! Add post to My Web 2.0 Add post to Newsvine Add post to Reddit Add post to Simpy Who's linking to this post?

Flash Builder 4.5 tip: Use code templates 16 May 2011 9:00 PM (14 years ago)

One great feature in Flash Builder 4.5 is the Code Templates feature. I wrote about these a bit when the public beta came out last fall, but I wanted to share more about them.

The templates (also known as “snippets”) feature allows you to define chunks of code that you use repeatedly. The templates show up as code hints, so to access a template just hit Ctrl+Space (or another key that you’ve defined to trigger code hints) and you will see them in the list.

Templates are listed in the code hint menu.

Hit Ctrl+Space again to filter the code hints so that only template code hints show up.

Templates are listed by themselves if you hit Ctrl+space again.

Only the code hints that apply to the context where the cursor is positioned show up in the list–for example, if the cursor is inside a method, you won’t see the template for creating a function, but you will see the template for a for loop (“fori”).

Accept the code hint and the template is inserted:

Select the template and it is inserted in the code.

One of the best things about templates is they really are “templated” as their name suggests. You can define variables in templates, and they show up as outlined areas in the inserted code (as shown in the image above). (See my post on creating templates and using template variables for more on template variables.)

You can hit TAB to jump through the different variable positions. Usually there is also a tab location at the end of the template (sometimes it’s specified as a location within the template) where you can go when you’ve finished building it out.

Add post to Blinklist Add post to Blogmarks Add post to del.icio.us Digg this! Add post to My Web 2.0 Add post to Newsvine Add post to Reddit Add post to Simpy Who's linking to this post?

Flash Builder 4.5 Tip: Customize templates and create your own 16 May 2011 9:00 PM (14 years ago)

I’ve written about using templates in Flash Builder 4.5. However, chances are you’re going to want to edit some of the templates that come with Flash Builder 4.5, and create your own. Admittedly I’ve become a bit addicted to templates, so I have a rule for myself that once I need a particular block of code more than a couple of times, I stop and turn it into a template.

Here’s an example of editing one of the pre-installed code templates. This is one of the first changes I made, editing the “fori” template (which creates a for loop) to use a variable for the array’s length instead of referencing the Array.length property:

  1. open Flash Builder preferences
  2. expand the Flash Builder > Editors > Code Templates section

  3. choose the category for the template you want to edit (“ActionScript” in this case)

  4. Scroll the list and select the “fori” template. Click the “Edit” button.

  5. Replace the code block with the following code:

    for (var ${index}:int = 0, len:int = ${array}.length; ${index} < len; ${index}++)
{
    ${line_selection}${cursor}
}
  6. Choose “OK” and the template is updated.

Adding a template variable

In this case the code in the for loop just declares a variable named len that stores the array’s length value. If you want to customize the name of the variable that stores the length property, you can use a template variable in place of the hardcoded len.

Template variables are specified using the following syntax:

${variable_name}

In this example, if you use the same variable name in both places where len appears in the template then when you’re using the template you will only have to change it once to have it change everywhere in the template. For example, to make the len variable a template variable, use this code:

for (var ${index}:int = 0, ${len}:int = ${array}.length; ${index} < ${len}; ${index}++)
{
    ${line_selection}${cursor}
}

The name you give to the variable (the text between the curly braces) is the default text that’s inserted into the template.

Special template variables

In addition to your own custom template variables, there are also several built-in template variables that have special values. Some of these are “constant” values for a given file–for example, the ${enclosing_type} variable inserts the name of the current class. Others use the code model to populate a list of choices. For instance, the ${field} variable gives you a list of all the class-level variables and the ${local_var} variable gives you a list of all the variables that are in-scope in the current method.

To see the list of built-in template variables, click the “Insert Variable…” button or just type “$” and a code-hint menu will appear.

Once you’ve created your own templates, make sure to share your templates with others so we can steal benefit from your ideas.

Add post to Blinklist Add post to Blogmarks Add post to del.icio.us Digg this! Add post to My Web 2.0 Add post to Newsvine Add post to Reddit Add post to Simpy Who's linking to this post?

Flash Builder 4.5 tip: Share code templates 16 May 2011 9:00 PM (14 years ago)

Last fall when the Flash Builder “Burrito” beta was released at MAX, I shared several templates that I created.

It’s easy to share templates with others, which is great for teams or just for helping others so they don’t have to re-invent the wheel. Templates (like other settings) are not persisted between workspaces by default, so if you use multiple workspaces in Flash Builder, this is a way you can get your templates in your workspaces too.

Importing templates

To add a template to Flash Builder 4.5 (such as one of the ones I’ve shared):

  1. open Flash Builder preferences
  2. expand the Flash Builder > Editors > Code Templates section

  3. choose the category for the templates you’re importing (ActionScript, CSS, Flash Builder, or MXML)

  4. Click the “Import” button and browse to the file containing the templates you want to import (an XML file).
  5. Choose “Open” and the templates are imported into Flash Builder.

Exporting templates

To share your own templates with others:

  1. open Flash Builder preferences
  2. expand the Flash Builder > Editors > Code Templates section
  3. choose the category for the templates you’re importing (ActionScript, CSS, Flash Builder, or MXML)
  4. select the template(s) you want to export. (If you select more than one, they are exported into a single XML file.)
  5. Click the “Export” button and browse to the location where you want to save the template XML file.
  6. Choose “Save” and the template XML file is saved.

Add post to Blinklist Add post to Blogmarks Add post to del.icio.us Digg this! Add post to My Web 2.0 Add post to Newsvine Add post to Reddit Add post to Simpy Who's linking to this post?

Flash Builder 4.5 Tip: Using "selection" templates 16 May 2011 9:00 PM (14 years ago)

I’ve already written about how to use the code templates feature in Flash Builder 4.5. One less-obvious aspect of templates is that some templates behave differently if you have some characters or lines selected.

For example, suppose you have one or more lines of code you’ve entered, and now you realize you want them to be wrapped in an if statement.

First select the line(s) you want to wrap:

A line of code selected in the editor.

Next hit Ctrl+Space to trigger the code hint menu, then again to switch to the template code hints:

Open the template code hints.

Choose the template name with the mouse, by using the arrow keys, or by typing the name of the template. (Sometimes it looks like the characters you’re typing replace the selected code, but don’t worry–your selection will reappear once you choose the template.)

Type to choose the template.

Accept the code hint, and the template appears with your selection in its proper place:

The template is entered in the editor.

If you want to create your own templates that support selections, there are two template variables you can use. Use the ${line_selection} variable for one or more lines of code. For example, I created this template to wrap any lines of code in curly braces:

{
    ${line_selection}
}

This also works with MXML. For example, here is a template I created to wrap a block selection in an MXML tag:

<${tag_name}>
    ${line_selection}
</${tag_name}>

You can use the ${word_selection} variable in the same way if you want a template for surround a selection that is only part of a line of code. However, the ${word_selection} variable currently isn’t as useful as it could be, because templates with the ${word_selection} variable only show up in the code hints at the first character of a line.

Add post to Blinklist Add post to Blogmarks Add post to del.icio.us Digg this! Add post to My Web 2.0 Add post to Newsvine Add post to Reddit Add post to Simpy Who's linking to this post?

Flash Builder 4.5 tip: Use Block Selection mode 15 May 2011 9:00 PM (14 years ago)

One new feature in Flash Builder 4.5 that’s small but incredibly useful is the new block selection mode. (Sometimes known as multi-line selection mode.)

This feature allows you to edit the same position in a block of lines at once. This is very useful when you’re copying and pasting a block of code and you only need to change one thing, like a variable name, in several lines of code. The video below demonstrates this much more clearly than I could explain it in text.

To toggle block selection mode, click this toolbar button (it’s close to the “Mark Occurrences” highlighter button):

Block Selection mode icon in Flash Builder 4.5

You can also use the keyboard shortcut Ctrl/Cmd+Alt+A.

As promised, here’s a video demo I put together showing a couple of my most common uses for Block Selection mode. (You’ll obviously want to watch it in full screen, or at least at a larger size on the video’s Vimeo page.)

Block Selection Mode in Flash Builder 4.5 from Paul Robertson on Vimeo.

Add post to Blinklist Add post to Blogmarks Add post to del.icio.us Digg this! Add post to My Web 2.0 Add post to Newsvine Add post to Reddit Add post to Simpy Who's linking to this post?

Flash Builder 4.5 tip: Quick fixes for external classes and interfaces 5 May 2011 9:00 PM (14 years ago)

The public beta of Flash Builder “Burrito” that was released at MAX included several “quick fix” features. For example, if you typed the name of a property or method that didn’t exist in the current class, you could hit Ctrl/Cmd+1 and create the missing item.

The final release of Flash Builder takes this much farther. Here are some of the additional quick fixes that I like the best:

Create class or interface

If you want to use a class that you haven’t created yet, there’s no need to break your train of thought. Go ahead and type in the class name:

var myObj:MyNewClass;

Also new since the MAX build, you’ll see yellow squigglies show up warning you that something’s wrong:

Flash Builder 4.5 showing a warning about a possible syntax error (an unrecognized class).

Move the cursor to the warning and hit Ctrl/Cmd+1 to see the new quick fix options:

Flash Builder 4.5 shows a menu of available.

If you choose “Create new Class” or “Create new Interface” the new class/new interface wizard appears, just as if you had chosen it from the menu.

Create property or method in external class

You can also now create properties (instance variables) and methods in an external class the same way:

myObj.someValue = 12;
myObj.doStuff();
Flash Builder 4.5 Create Class dialog box.

Just as with the class name, move the cursor to the relevant place and hit Ctrl/Cmd+1:

Flash Builder 4.5 quick fix for creating a method in an external class.

Hit Enter (or double-click) to create the new method. You don’t jump to the class automatically, but you can navigate to it in the usual ways to see the new class with the generated code:

The generated class with its generated property and method.

Unfortunately this doesn’t work for creating properties and methods in an interface. (The quick fix appears, but it just creates the method in the current class rather than in the interface.) Vote for the bug Generate from usage doesn’t generate interface methods so we can get it in the next version.

Add post to Blinklist Add post to Blogmarks Add post to del.icio.us Digg this! Add post to My Web 2.0 Add post to Newsvine Add post to Reddit Add post to Simpy Who's linking to this post?

Flash Builder 4.5 tip: Use a custom FlexUnit framework 2 May 2011 9:00 PM (14 years ago)

I’ve been getting into unit testing and test-driven development a lot lately. Flash Builder has pretty nice support for FlexUnit, which I find to be the easiest way to include testing in my development workflow.

However, one problem is that Flash Builder ships on a different schedule than FlexUnit, so when a new FlexUnit version comes out Flash Builder doesn’t include it until at least the next major release. This has turned out to be a problem for me. Flash Builder 4.5 includes FlexUnit 4. However, FlexUnit 4 has a bug that makes it so you can’t run more than a certain number of tests. (I can’t remember how many exactly, and it probably varies a bit, but it’s something like 25 or 30.) If you’re doing TDD you’re going to hit that limit. This bug is fixed in FlexUnit 4.1…but of course since FlexUnit 4.1 is still a “release candidate” it isn’t included with Flash Builder 4.5.

Fortunately, the Flash Builder team realized that they can’t depend on being in sync with FlexUnit for every release. There’s a new feature in Flash Builder 4.5 that lets you specify an alternate FlexUnit framework to use instead of the one that’s bundled with Flash Builder.

To specify your alternative FlexUnit is easy:

  1. Open Flash Builder Preferences > Flash Builder > FlexUnit
  2. In the “Alternative Framework Settings” section check the “Use alternative framework” box
  3. In the “Framework directory” field browse to the folder where you put your alternative FlexUnit sdk

The trick is knowing how to set up your FlexUnit framework folder. Flash Builder expects certain SWCs to be in certain places. Unfortunately the names and setup of the built-in framework folder in Flash Builder don’t match the download from the FlexUnit site, so you have to do a little manual rearranging.

Here’s how to lay out your FlexUnit framework directory:

  1. Create the top-level directory

  2. Inside that directory, create three subdirectories with the following names:

    • ASProject
    • FlexProject
    • Common
  3. Browse to the FlexUnit download page
  4. Download the “full project download” “4.1 SDK” version
  5. Unzip the download and open the folder
  6. Copy the FlexUnit AS3 SWC (currently “flexunit-4.1.0-8-as3_4.1.0.16076.swc”) into the “ASProject” folder in your FlexUnit framework directory.
  7. Copy the FlexUnit Flex SWC (currently “flexunit-4.1.0-8-flex_4.1.0.16076.swc”) into the “FlexProject” folder you created.
  8. Copy the “turnkey/libs/hamcrest-as3-flex-1.1.3.swc” file into the “Common” folder you created.

  9. If you use other extensions with FlexUnit, copy those SWCs into the “Common” folder also.

    For example, I use Mockolate with some of my tests, so I downloaded Mockolate and put the SWC (currently “mockolate-0.10.0.swc”) in the “Common” folder.

    Update: Mockolate has now been updated to version 0.11.0, and in the new download it has separate “as3” and “flex” SWCs. Since there are separate SWCs it’s probably best to put them in their respective folders instead of the “Common” folder, but I haven’t had a chance to test this and verify it.

  10. Tell Flash Builder to use your FlexUnit framework instead of the built-in one, as described above.

I think it’s great that Flash Builder lets you specify your own FlexUnit framework now. The biggest problem I ran into was just confusion on how to set up the custom framework folder, especially the question of which SWCs go where. I’ve talked to Adobe and to Mike Labriola (representing FlexUnit) about this and they have said they definitely want to make things easier. Ideally (from my perspective at least) they’ll make a drop-in “Flash Builder” download bundle that’s all set up for use in Flash Builder.

Add post to Blinklist Add post to Blogmarks Add post to del.icio.us Digg this! Add post to My Web 2.0 Add post to Newsvine Add post to Reddit Add post to Simpy Who's linking to this post?

Sample and links from "PlayBook App Development Hands-on" 10 Apr 2011 9:00 PM (14 years ago)

Yesterday I presented a hands-on training session at 360|Flex on developing AIR applications for the BlackBerry PlayBook. The session focused on two major areas: getting the tools set up for development, and using the QNX UI components and framework. (I hardly talked about Flex development for PlayBook at all, since that’s fairly similar to Flex for Android etc.)

As part of the session we walked through building a PlayBook application. The app was adapted from an example created by Renaun Erickson – big thanks to Renaun for sharing that.

Here are the application files:

During the presentation I also showed and talked about a few other open-source examples and projects that are useful for developing with the QNX UI framework. Here are links to those resources:

Add post to Blinklist Add post to Blogmarks Add post to del.icio.us Digg this! Add post to My Web 2.0 Add post to Newsvine Add post to Reddit Add post to Simpy Who's linking to this post?

360|Flex Denver ride sharing 23 Mar 2011 9:00 PM (14 years ago)

Update April 4, 2011: In response to this post, Super Shuttle contacted me directly and offered to set up a group discount rate for 360|Flex. The biggest benefit of the group rate over doing a ride share is you don’t have to worry about coordinating with others (and waiting around, if you’re the first in your group to arrive). The discount price is about the same as what you’d get if you are able to get 3 people sharing a ride together both ways–so it’s not unbeatable but it’s pretty good. I’ll still leave the survey up but you’re probably just as well off by signing up for the discounted rate with Super Shuttle.

Last year I organized ride-sharing between the airport and the 360|Flex DC conference. It worked out pretty well and I at least thought it was convenient, so I’ve decided to do the same thing again this year for the 360|Flex Denver conference (April 10-13, 2011).

Here’s how it works:

  1. Fill out the 360|Flex Denver ride-sharing survey to tell me when you’re flying into and leaving Denver
  2. I’ll find people who are arriving and leaving about the same time and I’ll send you an email so you can get together and coordinate a ride. (One email for your “arrival” group and one for your “departure” group.)
  3. You can arrange the ride however you want, but I generally recommend using Super Shuttle. I’ve used them before and had good success. A ride from the Denver airport to the conference should be about $33 for the first person plus $9 for each additional person. (So you can see there’s a big benefit in getting together with other people if you split the total cost evenly.)

That’s it! I look forward to seeing you at the conference!

Add post to Blinklist Add post to Blogmarks Add post to del.icio.us Digg this! Add post to My Web 2.0 Add post to Newsvine Add post to Reddit Add post to Simpy Who's linking to this post?

"Wrap selection" - more "Burrito" template goodness 11 Nov 2010 9:00 PM (14 years ago)

I already mentioned that I really like the new templates feature in Flash Builder “Burrito.” Last night I discovered another nice feature in the templates.

I was looking through the template variables and noticed one called ${line_selection}. This variable allows you to select some lines of code and then choose a template to “wrap” around the selected code. A couple of the pre-defined templates make use of this, and I quickly added it to others where it makes sense.

For example, one pretty common refactor is to have a line of code* and decide that you need to wrap it in an if statement.

To wrap a line of code in an if statement:

  1. Start by selecting the code you want to wrap:

  2. Important: My instinct at this point is to type the name of the template (e.g. if) before hitting Ctrl+space. Don’t do it! You’ll just replace the selection with what you type. Unfortunately you can’t type the name of the template in this process. Instead do this:

    Hit Ctrl+space to open code hints. Tip: Hit Ctrl+space again to filter the code hints so only templates are shown. Flash Builder is smart enough to recognize that you have lines selected and only shows templates that include the ${line_selection} variable:

  3. Use the arrow keys or mouse to choose the template you want.

    I love that Flash Builder shows the tooltip with the template output preview:

    (Yes, the indentation in the preview is a bit wonky – hopefully that will be fixed for the final release.)

  4. Hit <Enter> to accept the template, and you’re ready to go. Just like with any template, you can tab between fields (just one in this case) to change other variable data:

Notes

* The code example I’m using here comes from the ”Bowling Game Kata” by “Uncle” Bob Martin

Add post to Blinklist Add post to Blogmarks Add post to del.icio.us Digg this! Add post to My Web 2.0 Add post to Newsvine Add post to Reddit Add post to Simpy Who's linking to this post?