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).