Dev Harbor: flex

This great article from Todd Prekaski details how you can create Flex and AIR apps from the same code. It includes some very neat techniques.

Update: The original article has disappeared but it's still available on the Web Archive here.

16 December 2008

Next Generation Flex/Flash Design

The Flash Catalyst project (formerly Thermo) promises an incredible boost to UI design in Flash and Flex.

15 December 2008

Creating LiveDocs-style Documentation for Your Flex App

One powerful -- and hidden -- tool that ships with Flex Builder (and I think the SDK) is the ASDoc documentation utility, found here,

C:\Program Files\Adobe\Flex Builder 3\sdks\3.2.0\bin\ASDoc.exe

You need to use the special code comments (/** */ and ), otherwise ASDoc will ignore them. So a sample code block looks like this,

/**
* Boolean indicating visibility of the Submit button.
*/
public function get SubmitVisible():Boolean {
 return _submitVisible;
}

You can read more about ASDoc and its switches on the Adobe Using ASDoc page. When you're ready to generate your documentation, you call the ASDoc utility from the command prompt with some switches. The parameters ("switches") tell ASDoc what to parse and where to put the output, among other options. One quick way to see the options is to run asdoc -help at the command line. Here's one sample call to ASDoc,

asdoc -library-path C:\FlexProjects\MyApp\lib -source-path C:\FlexProjects\MyApp\src\ -doc-sources C:\FlexProjects\MyAp\sr\MyApp.mxml -output doc-folder

The above call tells the ASDoc tool to

Use the SWC files (if any) in the lib folder; these are often used for third-party components.
Generate documentation for the MXML file. In my case, I had a lot of ActionScript in the MXML and wanted it pulled.
And place the output in a folder called doc-folder.

09 December 2008

New Article for Adobe Developer Connection

Please check out my new Flex article on the Adobe Developer Connection.

Update: You can write articles for Adobe by checking out their Author Guidelines page.

08 December 2008

ActionScript Cookie Utility

Handle cookies directly in Flex or Flash using this cool library.

Adobe Text Layout Framework

Adobe has built a very powerful Text Layout Framework for the Flash Player 10. Of course you can use the framework in Flex, as well.

Check out the demo. The features include,

Bidirectional text, vertical text and over 30 writing systems including Arabic, Hebrew, Chinese, Japanese, Korean, Thai, Lao, the major writing systems of India, and others.
Selection, editing and flowing text across multiple columns and linked containers, and around inline images
Vertical text, Tate-Chu-Yoko (horizontal within vertical text) and justifier for East Asian typography
Rich typographical controls, including kerning, ligatures, typographic case, digit case, digit width and discretionary hyphens
Cut, copy, paste, undo and standard keyboard and mouse gestures for editing
Rich developer APIs to manipulate text content, layout, markup and create custom text components.

You can download the beta and play around with it. As you work with the product, please be kind and provide feedback to Adobe at the framework's forum. Thanks.

04 December 2008

Some Cool Tools for Your Flex Apps, Part II

Here are a few more cool components and utilities for your Flex apps,

Generate GUID's directly in Flex
MySQL admin from Flex
Google Picasa API
Read/write Excel from Flex

Display HTML File in Flex TextArea

For a current project, I needed to have a help file for a Flex app that anyone with some HTML knowledge could update. One solution was described by PeterD on his great FlexExamples.com blog post. You can even apply a stylesheet to the HTML. Some big caveats: Because the Flex TextArea is based on the the underlying Flash API's flash.text.TextField object, it only allows a very limited number of HTML tags; the LiveDocs have a list of the allowed tags. And anything but very basic CSS is ignored.

29 November 2008

Some Cool Tools for Your Flex Apps, Part I

Came across a few cool tools for Flex/Flash,

06 November 2008

Degrafa for Flex Enables Control of Background Images

If you've ever wrestled with background images for Flex components, there's a powerful library to make your life easier: Declarative Graphics Framework (Degrafa). I'd implemented a paging mechanism for an AdvancedDataGrid; then I added a background image to the Application container,

<mx:Style>
Application {
 background-image: Embed("global/media/flower.png");
}
</mx:Style>

The height property on the AdvancedDataGrid was set to 100% and the variableRowHeight="true"; however, this was giving me grief: For whatever reason, the record at the bottom of the grid was cut off. And the scrollbar stopped a few steps before it could completely reach it. After some trial-and-error, two solutions emerged:

Take the height property off completely and keep variableRowHeight="true".
Or set the rowHeight to some value and set variableRowHeight="false". The trouble was, this meant all the rows would be the same height. Not very aesthetically pleasing.

I opted for the first solution. But with this choice, it caused the grid to expand and contract as you paged through the records (the rows have different height values depending on their content). Not a big issue for the grid to resize vertically; but it was also causing the application's background image to grow and shrink as you paged the records. Again, not very pretty.

Some research led me to this great blog by Brendon Wildbore. The solution was to use his code example along with the Degrafa SWC file in the project's lib folder. Instructions on downloading and installing the SWC can be found on the Degrafa web site. Following Brendon's example, I changed the CSS to look like this,

<mx:Style>
Application {
 background-image: Embed("global/media/flowers.png");
 background-repeat: repeat;
 background-position: center;
 background-blend: normal;
 borderSkin: ClassReference("com.degrafa.skins.CSSSkin");
}
</mx:Style>

And the problem disappeared. The image now stays the same size. However, the image was too dark; a check of the values and it was clear that the background-blend: multiply; was the culprit. Changed it to normal and all is well.

The Degrafa library allows for much more than this. Check out their site to see the capabilities.

22 October 2008

Refresh a Flex DataGrid

To force a Flex DataGrid to refresh its data (say, after you've updated it), you can call the invalidateDisplayList() method. This causes Flex to in turn execute the component's updateDisplayList() method. This came in handy while writing an image-upload app; after the image is uploaded, I needed the DataGrid's selectedItem to show the image it was associated with; in the overridden set data() method of the itemRenderer, there's code to do a load() of the image from the server.

21 October 2008

Variable row height in Flex DataGrid

Here's an easy way to have your DataGrid's rows adjust to fit the height of each row's contents:

<mx:DataGrid id="myGrid" variableRowHeight="true"
wordWrap="true">....</mx:DataGrid>

You need to use the variableRowHeight and wordWrap properties to get the job done.

14 October 2008

Emerging Technologies Conference at UNC?

Hi, all. How do you feel about having an "Emerging Technologies" conference at UNC? Please post comments here and vote on the poll on the left. Some topics to get us started in the discussion include,

Rich Internet App tools/tech (AJAX, Flex, Curl, JavaFX, JBoss Seam)
Cloud computing (providing technology-enabled services over the Internet -- "in the cloud")
Mobile devices: Web access, development, etc.
Web 2.0 (social networking sites, blogs, wikis) -- though many of these are already established tech and not so much "emerging" anymore
Semantic search technology

Who would we contact to have such a conference? Are there companies and organizations that can help?