Pages

September 24, 2010

Temporarily Disable a Flex Component

Posted by Jeremy Mitchell
On occassion, you may find the need to temporarily prevent user interaction with a Flex component. A common example includes disabling a form while data is retrieved from the server via HTTPService, WebService or RemoteObject.

The following example demonstrates this functionality minus the specifics of a real world implementation.



View Source is enabled

To replicate this functionality in your own application, use the Flex classes provided in the SWF and do the following:
  1. Register a container with a unique identifier to be temporarily disabled on request
  2. Initiate a request to overlay the container with a UIComponent to "disable" the container
  3. Initiate a request to remove the container's overlay to "re-enable" the container

Register a container with a unique identifier to be temporarily disabled on request


For each container (i.e. VBox, HBox, Form, etc) requiring the need to be temporarily disabled, create an entry in a global registry. This entry will consist of the container and a identifier required to uniquely identify the container. This entry should be part of the container's class definition and should be created as soon as possible in the component's lifecycle. For example, if the container is an ActionScript component, create the entry in the constructor. If the container is an MXML component, a preinitialize event handler should suffice.
private var _progressRegionId:String = [find something unique];

protected function onPreinitialize(event:FlexEvent):void
{
    var progressRegion:ProgressRegion = new ProgressRegion(_progressRegionId, [container to disable]);
    ProgressManager.addProgressRegion(progressRegion);
}

Initiate a request to overlay the container with a UIComponent to "disable" the container


This requires nothing more than a call to the static method ProgressManager.showModal() with a reference to the container you'd like to temporarily disable. The container's reference is the unique identifier chosen during registration of the container. When performing a service call via HTTPService, WebService or RemoteObject, you may want to initiate this action.
ProgressManager.showModal(_progressRegionId);

Initiate a request to remove the container's overlay to "re-enable" the container


Again, using the classes provided, this is pretty simple. Just make a call to another static method, ProgressManager.hideModal(), along with a reference to the container you'd like to re-enable. A great place to do this may be in your service call's result and/or fault handler.
ProgressManager.hideModal(_progressRegionId);
Note: Currently, this modal overlay only works with "containers" that derive from the Container class. I.e. HBox, VBox, etc.
Hope you find this useful.

2 comments:

RichieInOz said...

hey this is awesome!! ive been thinking about something like this for my app, and this is really cool you shared this. Thanks heaps.

Terry Donnelly said...

It's worthwhile noting that if you press re-enable initially (before pressing disable) the modal window eventually becomes stuck. It's probably best to incorporate some variables to make sure the re-enable/disable buttons do nothing if the modal window is already in the right state.