Over a million developers have joined DZone.

Using Flex 4 Skins & States to Disable a Component

· Web Dev Zone

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

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

In a previous post entitled Temporarily Disable a Flex Component, I utilized a handful of classes to disable and enable a Flex component as needed. In short, the technique involved adding or removing a modal overlay to a container on demand. With the Flex 4 skinning architecture, the process of "disabling" a component is simplified.

I will start by creating an MXML component (Editor.mxml) that extends the Panel class.

Next, I will create an MXML skin for the Editor class by selecting New > MXML Skin, naming the skin "EditorSkin" and selecting "Editor" as the host component. I will leave checked the checkbox entitled "Create as copy of: spark.skins.spark.Panel" and choose "Remove ActionScript styling code". Now, I have a skin class that serves as a starting point for my component.

I need to map the skin class to the host component (Editor) so I will add the skinClass property and the appropriate value to the host component's root tag.

Since I want to "disable" my component while it is in a specific state, I'll add a new state to my skin class. I'll name this new state "loading".

With my new "loading" state defined, I'll create a Group to hold a "modal overlay" that will be turned on when the loading state is active thus "disabling" the component. I'll place this new Group next to the contentGroup but inside of a new Group used to enforce absolute positioning. Notice that the "loading" Group is defined below the contentGroup's MXML declaration allowing it to lay on top of the component and serve as a "modal overlay".

Notice the "includeIn" property? This limits the inclusion of the "loading Group" to the loading state ONLY.

Next, I will define the skin states that the host component (Editor) will utilize to disable or enable itself. These skin states need to be defined as Metadata in the Editor class.

I will also create a couple of public methods designed to toggle a property that "invalidates" the skin state and turns the loading state on and off. Here is my new Editor class:

Finally, I'll add a couple of buttons to the main Application file required to toggle the state of the Editor component.The result is a Flex component (Editor.mxml) with a skin (EditorSkin.mxml) that can be disabled or enabled on demand. The following application represents the final component with a few extra features, a fancier loading image and some best practices in place (view source is enabled).

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.


Published at DZone with permission of Jeremy Mitchell, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}