For My Own Amusement » Software

Flex ActionScript Component Development Cheat Sheet

Timothy Churchward — Tue, 30 Jun 2009 00:56:17 +0000

Recently at work I ran our developers through basic construction of building Flex ActionScript Components.

Feel free to download the attached Cheat Sheet for your own reference when building components.

Download Flex ActionScript Component Development Cheat Sheet

Building ActionScript Components

Aim: To make building custom ActionScript components the first option when developing in Flexlandia.

Naming

Don’t describe its appearance – eg. RedButton, RoundedBorderedWindow.

Do describe its function or UI element type – eg. ActionBarButton, InspectorWindow, NewElementFormPanel

Extending

Extend UIComponent or as high up the inheritance tree as possible. Loc8 is massive so we want to make sure each component is taking up as little memory as possible.

Avoid extending HBox or VBox! – custom layout is easy!!

Property Names

Keep in mind re-use for the data model:

use generic terms like dataProvider – not assetData, label – not workOrderLabel

Multiple Components

Don’t try and implement everything in the one component. Break it down further. Generalise!

The benefit is it makes it easier to extend and reuse in multiple situations.

It also allows it to become a style target for simple CSS styling.

MX Source Code

TextMate with the mx sdk source is your best friend.

ActionScript Component Cheat Sheet

Component Children

Child Components

private var _icon:SuperImage;

note: an improvement here would to have the icon type to be an interface ie. ILoadedImage

Create Children

Create child objects of the component.

overrider protected function createChildren():void

{

super.createChildren();

if(!_icon)

{

this._icon = new SuperImage();

this.addChild(this._icon);

}

Updated Display List – where you lay it all out

Draws the object and/or sizes and positions its children.

override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void

{

super.updatedDisplayList(unscaledWidth, unscaledHeight);

this._icon.x = 0;

this._icon.y = 2;

this._icon.width = 16;

this._icon.height = 16;

}

Measure – helps the component know minimum sizes and measurements

Calculates the default size, and optionally the default minimum size, of the component.

override protected function measure():void

{

super.measure();

measuredWidth += 16;

}

Component Properties

Property Setup

private var _iconSource:String;

private var _iconSourceChanged:Boolean = false;

[Bindable(‘iconChanged’)]

public function set iconSource(source:String):void

{

if(this._iconSource == source) return;

this._iconSource = source;

this._iconSourceChanged = true;

this.invalidateProperties();

}

public function get iconSource():String

{

return this._iconSource;

}

Commit Properties

Processes the properties set on the component.

override protected function commitProperties():void

{

super.commitProperties();

if(this._iconSourceChanged)

{

this._icon.source = this._iconSource;

this._iconSourceChanged = false;

this.invalidateDisplayList();

}

Component Events

Meta Data – defining lets FlexBuilder MXML auto-complete – happy compiler

[Event(name=‘iconClick’, type=’mx.events.MouseEvent’)]

Event Notes

Minimise internal event handlers – where possible override event handlers from parent component. eg. override protected function mouseClickHandler(event:MouseEvent):void

Apple Breaks Dvorak in Carbon

Timothy Churchward — Wed, 18 Mar 2009 09:33:29 +0000

What the crap is going on with Dvorak in Carbon apps like Flex Builder and Eclipse :’( very very sad.

It seems that when apps utilise Carbon in Mac OS X 10.5.6 the keyboard mapping reverts to QWERTY instead of dvorak. However, this seems to be only for some keys.

Command+S is still Save
Command+W still closes a window
Command+Q still quits

However, copy and paste are totally screwed.

LittleSnapper Review

Timothy Churchward — Sun, 08 Feb 2009 21:46:53 +0000

LittleSnapper – a fantastic way to Snap, Organise, Edit and Share screenshots, designs and other images.

http://www.realmacsoftware.com/littlesnapper/

Snap – Capturing
This all works great. There’s a fantastic Toolbar Menu item for mouse-driven snapping. Mac OS already has great capturing built in for capturing: Full Screen, Area and Window. LittleSnapper adds Web Snappshots. It will grab an entire web page even if it’s out of view.

No ‘New from Clipboard’

My biggest gripe with the “Snap” part of LittleSnapper is that there is no pasting an image in to the Library or (similar to Preview.app’s ability) New from Clipboard.

The only way to get images in to LittleSnapper is by either dragging them or taking a “snap” using their capture tools.

Organise

This is done quite well. Definitely could be better, but is relatively smooth. I’m loving anything these days with easy tagging ability. Unfortunately tags currently do not auto-complete to pre-existing tags.

It has all the usual ways of filing: Folders, Collections and Smart Folders.

Folders – can contain Folders, Collections and Smart Collections.
Collections – can only contain Snapshots.
Smart Collections – can only contain Snapshots based on the rules below.

Edit

This is one the best bits. The actual controls are quite clunky, however, the end product is fantastic. I love that you can draw outside the border of images. This is fantastic for when you’ve got a smaller screen shot that you still want to mark up with arrows, highlights, text etc. I sure hope better control is coming here.

This is probably where I find the most problems (other than some UI things I’d love to see tweaked). Don’t get me wrong Realmac Software have done a fantastic job at in integrating LittleSnapper with their QuickSnapper website, Flickr and the ability to upload to FTP or SFTP.

Sharing Annoyances

My problem comes more from how I use LittleSnapper. I work with a software development company where I take screen shots for inspiration, records of current work and in particular letting the developers know how I want something to look.

LittleSnapper is fantastic for taking a screen and marking it up … but then all I want to do is email it or or save the file.

Now, you can Export the image, you can also drag an image out of the main Icon View, however the exported image does not include any visual mark-up that exceeds the border of the original image. So if you’ve got a smaller image and created a Text box and an arrow pointing to an element you loose it all except the bit that overlaps the existing image.

Furthermore, sharing by email means exporting the image to say the desktop and then dragging it to mail. Even though the Edit menu has Cut, Copy and Paste in the Icon view they do not work for sucking an image in to the Clipboard for pasting in documents or email.

Summary

Overall, as a Version 1 it’s fantastic. It’s instantly become an “Open at Login” item on my mac. Some things in the UI bug me (at some stage I hope to write about them) but overall it’s a great concept and quite well implemented. I was initially put off by the cost … but after trying it for 20mins I just had to have it.

Apologies for no images … weird stuff with the latest WebKit nightly build and WP. (trying ecto shortly)