Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Temporarily Disable a Flex Component

DZone's Guide to

Temporarily Disable a Flex Component

· Web Dev Zone ·
Free Resource

Deploy code to production now. Release to users when ready. Learn how to separate code deployment from user-facing feature releases with LaunchDarkly.

More Flex posts by Jeremy Mitchell can be found on blog.flexdevelopers.com


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.

Deploy code to production now. Release to users when ready. Learn how to separate code deployment from user-facing feature releases with LaunchDarkly.

Topics:

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}