Issues with DataGrid Column Visibility

A friend of mine passed along an interesting problem regarding DataGrids. They had the need to hide certain columns and then dynamically load the data. When doing this as expected, such as dataGridName.dataProvider = yourArrayName, the hidden columns would not stay hidden. The workaround to this issue is to track the visibility of each DataGridColumn, set the column to visible, and then override it with the visibility status we stored.

View the example here and download the code here.

Definately not optimal, but it works... ;-)

Form Validation

Paul Rangel from Wheeler Street Design put together a simple form validator that works quite well. The only thing that you have to be aware of is the fact that you need to initialize the validators property after your form fields are added if you're using states.

Internal Build Error

I recently ran into an issue with Flex Builder where I was getting the "An internal build error has occurred. Please check the Error Log." error when trying to debug my project. Absolutely nothing worked including all the normal practices such as cleaning the project, recreating the workspace, manually deleting the bin folder, reinstalling Flex Builder, etc.

After performing all of these tasks I was still getting "Uncaught exception in compiler" in the error log, which by the way is the .log file in the .metadata folder of your workspace. After further analysis, I tied the issue back to a missing semi-colon after a variable declaration in my class such as:

public class SomeClass
{
      public var blah:Object
}

If you ever find yourself in this situation, start rolling back code and begin to do a detailed analysis for syntax errors that normally do not pose any problems.

Flex tree's with a context menu

Recently on the flexcoders list a question was posed regarding how to get the item that was 'right-clicked on' when dealing with a tree. There are a few steps to follow if you plan to implement a context menu that is dynamic based on individual tree items.

First, you need to use the itemRollOver event of the <mx:Tree> component to track the last item that was rolled over, and save it to a variable for later use. Then when the ContextMenuEvent.MENU_SELECT event is triggered, you will refer back to this variable as it holds a reference to the itemRenderer and therefore the data you need access to.

You can view an example here and view the code here...

Updated Flex Style Explorer v2.0.1

I just realized that Adobe Consulting released a new version of the Flex Style Explorer. The style explorer is great if you want to see what you can do with CSS in flex. It's also a good way to start working with styles, although you must keep in mind that this is just the beginning of how you can tweak the look and feel of your flex applications.

http://examples.adobe.com/flex2/consulting/styleexplorer/Flex2StyleExplorer.html

Flex Performance

Brandon Purcell from Adobe put together a great article discussing flex performance and optimization. This articles includes many tips and tricks, along with general best practices to increase client performance.

http://www.adobe.com/devnet/flex/articles/client_perf_print.html

Where's the problem?

I recently ran into an issue with Flex Builder where the Problems tab wasn't accurately reporting information. It would show me the error, but it would simply show the project name under the resource column.

All the normal attempts to resolve the issue didn't work including cleaning the project, recreating the project, and even reinstalling Flex Builder (w/2.0.1). Finally, the only thing that resolved it was deleting all of the files and rebuilding my source code from SVN.

More on Flash Activation

Continuing with my last post, SWFObject is another script that can be used to automatically activate a flash movie. I prefer this as it's a bit more flexible when dealing with menus that can hover above flash movies.

http://blog.deconcept.com/swfobject/

Activating Flex Apps and Flash Movies

It amazes me how many flex and flash apps that I run into that don't account for the ActiveX Activation Issue in IE. To prevent making a user click on the flash movie to activate it, and then interact with it, you can include a simple JavaScript file to automatically activate all flash movies upon load.

Learn more and download the necessary files from http://www.sitepoint.com/article/activex-activation-issue-ie. Then go ahead and add the following line to your application:

<script type="text/javascript" src="objectSwap.js"> </script>

Organizing your flex apps with code behind

As your flex apps get bigger and bigger, you may notice that many of your mxml files keep growing at an astonishing rate. First you just have a few component calls, then a couple of events, next thing you know it's ballooned to an mxml page with hundreds of lines of code. While this might not necessary be a bad thing, it can make it more difficult for other members of your team.

The following article describes how you can use code behind to help structure and organize your flex apps, all in a very simple and convenient way.

http://www.adobe.com/devnet/flex/quickstart/building_components_using_code_behind/

Cairngorm Diagram Explorer

This flash move allows you to navigate through all the events, dispatches, commands, etc, of a Flex application built upon the Cairngorm framework. It definately presents the in's and out's of the Cairngorm framework in a very interesting way.

http://www.cairngormdocs.org/tools/CairngormDiagramExplorer.swf

Is Cairngorm right for you and your next project? Find out here...

Making your flex apps more responsive

Most of these tips come from a MAX presentation given by David George from Adobe. His topic was "Tips and Tricks for Delivering More Responsive Flex Applications" and during the creation of Flex 1.5/2, he apparently spent quite a bit of time tuning Flex from Adobe's side of things, these tips will help you tune Flex from your side of the equation.

http://admin.adobe.acrobat.com/_a300965365/p71169528/

Deferred Creation
- Delay object creation until it's needed
- Built into the Accordion, TabNavigator and ViewStack.
- Can be subclassed, but doing it with the ViewStack is the easiest.

Ordered Creation
- For container creation, such as a panel, use 'creationPolicy="queued". This won't actually make the application load faster, but you'll be able to see certain sections of your app first and the others will show up when they are ready. This is better than waiting until the ENTIRE app is loaded, and then showing everything at one time, which occurs by default.

Use <mx:repeater> Carefully
- You're better off using a List with itemRenderer instead of using a VBox with a Repeater. This one is huge, more or less the is a no no. The repeater scolls more smoothly, so this should be the deciding factor on how you implement this.

Measurement/Layout: Definition
- #1 - Reduce container nesting
- Try to use HBox and VBox instead of a Grid
- Avoid nesting VBox inside of a Panel or Application
- The root of an XMSL component doesn't need to be a container
- * Use Canvas with constraints - Biggest increase here
- Look for containers that have one item, these are normally unnecessary
- #2 - Avoid Redundant Measurement/Layout
- Prevent numerous screen layouts when fetching images
- Get data after application has loaded from web services
- Delay requests until creationComplete
- Limit changes when responses are received
- Stagger requests or queue responses

Rendering
- Use control + e in the debugger to determine what sections of your application are being redrawn. This will help you cut down on useless processing.
- Use the cacheAsBitmap so that rendering occurs with an offscreen bitmap, this will limit the amount of redrawing that occurs.
- Another example is during a move event, the entire application could be created as a bitmap, so whatever you are dragging wouldn't force the app to constantly redraw.
- Don't use cached bitmaps when items are being resized often.
- Overall, only use cached bitmaps in particular situations where you can turn it on for a given time, and then turn it off when you're done moving objects, for examples.
- Use Resize.hideChildren when you're resizing regions.
- Filter and glow effects are very proccessing intensive, so use slowly.

Reducing Memory Usage
- Discard usused UI items. for example, use 'removeChild()' or 'removeEventListener()' when they are no longer needed. Event listeners can be very costly when not removed.
- Clear references to unused data such as 'myProperty = null;' or 'myWebService.blah.clearResult();'.

Setting Styles
- Changing a rule set is most expensive, such as StyleManager.styles.Button.setStyle('...').
- For inline styles, setStyle can be expensive if there are a lot of children.
- If a value will change at runtime, create a style for the button and make sure any buttons necessary are already listening for that style. You could also explititly set color information for any objects that will need to change.

URLs
DevNet Articles
- http://www.adobe.com/devnet/flex/deployment.html
Large Number of UI screens:
- http://livedocs.macromedia.com/flex/2/docs/00001523.html
- http://blogs.adobe.com/rgonzalez
Large amounts of data:
- http://weblogs.macromedia.com/mchotin