Flex states in an inherited component : MXML inheriting base properties

2 04 2008

Problem: I have some component that I’ve created and I want to extend it. However, in the subclass, I’d like to use states with MXML.

Version: Flex 3

Issue: Flex tells you that <mx:states> must belong to the base of the component. The nifty little “lowercase property” feature (I’ve dubbed it thusly) that allows you to define some property of a component in MXML terms doesn’t seem to pickup inherited properties.

For example:

say BasePanel.mxml is my generic panel across my Application

<mx:Panel xmlns:mx=”http://www.adobe.com/2006/mxml” width=”400” height=”300>

</mx:Panel>

Then in PanelResults.mxml I will extend this panel, but I want to declare states using MXML

<jjm:BasePanel xmlns:mx=”http://www.adobe.com/2006/mxml” xmlns:jjm=”com.justinjmoses.examples.mxmlproperties.*>

<mx:states>

</mx:states>

</jjm:BasePanel>

This will not compile.

The states property that is inherited from Panel will not be detected using the MXML namespace. This is the same for all properties you want to inherit and define using MXML (like transitions, transform, etc).

SolN: Use the same xml namespace as your base component to load up the property, even though it is inherited.
PanelResults.mxml

<jjm:BasePanel xmlns:mx=”http://www.adobe.com/2006/mxml” xmlns:jjm=”com.justinjmoses.examples.mxmlproperties.*>

<jjm:states>

</jjm:states>

</jjm:BasePanel>

Advertisements




Flex Effects in Actionscript

13 02 2008

Ok, so there are a few things to keep in mind with applying events in ActionScript.

Firstly, when you want to add an effect to a custom component, you need to attach it to an Event. You’ll need the Event and the Effect metatags.

<mx:Metadata>
    //Handle the step event
[
Event(name=“step”, type=“flash.events.Event”)]
[
Effect(name=“stepEffect”, event=“step”)]
</mx:Metadata>

By dispatching the event, you will call the effect also.

Secondly, and which is somewhat unintuitive, is to set an effect with Actionscript, you set it like a style.

myComponent.setStyle(“addedEffect”,getStyle(“stepEffect”));

So, in the example above, we are inside our custom component, passing-on a custom effect to the built-in effect “addedEffect”.