AIR

July 23rd, 2012

Using [inspectable] metatag

More articles by »
Written by: Nouman Naveed
Tags:
flex-inspectable-metatag1

Every experienced Flex developer knows about [Bindable] & [Event] metatags. However, I was surprised to know that some developers don’t know the purpose of [inspectable] metatag. Here I am going to discuss purpose of [inspectable] metatag. The purpose of this metatag is to display code hints while writing the code in Design / Source mode of Flex editor. I will be explaining this concept by taking a simple example which will allow you to implement similar concept in your real-time projects.

When you build reusable code you have to think about how the other developers will be utilizing your custom components. The [inspectable] metatag is used with the custom components. If you want to expose the possible values for a particular property of your custom component then writing [inspectable] metatag could be useful. It will allow other developers who are using your custom component to understand what are the possible values for selected property. There will not be any need to study complete documentation built by custom component developer to understand what are the possible values for each property of custom component.

Assuming the above code in a custom component, the developer is exposing the possible values for property called country. So, whenever you try to set property values in source mode you will be getting code hinting about possible values.

As you can see the possible values for country is pre-populated when you try to do coding for personalDetails custom MXML component. Its not just about seeing the possible values for any property in code hinting but also in Properties panel of Flash Builder. You can decide the category by setting first parameter of [inspectable] metatag. Possible values for category of [inspectable] are “Common”, “Effects”, “Events”, “Layout Constraints”, “Size”, “Styles”, or “Other”. Once the category is set to one of the listed one, you can you find the custom component property listed in category view of  Flash Builder Properties panel. However, you might need to change from Standard View to Category View.

Finally, we have come to know the purpose of [inspectable] metatag. It is just to display possible values of any public property of Custom MXML components. For more information on [inspectable] metatag I recommend you to checkout the help page available on Adobe help http://livedocs.adobe.com/flex/3/html/help.html?content=metadata_3.html

Complete Example Code goes below:

Application.mxml

<?xml version=”1.0″ encoding=”utf-8″?>
<s:Application xmlns:fx=”http://ns.adobe.com/mxml/2009″
               xmlns:s=”library://ns.adobe.com/flex/spark”
               xmlns:mx=”library://ns.adobe.com/flex/mx”
               xmlns:ns1=”*”
               minWidth=”955″ minHeight=”600″>
    <fx:Declarations>
        <!– Place non-visual elements (e.g., services, value objects) here –>
    </fx:Declarations>
    <ns1:personalDetails x=”10″ y=”10″ country=””>
    </ns1:personalDetails>
</s:Application>

peronalDetails.mxml

<?xml version=”1.0″ encoding=”utf-8″?>
<s:Group xmlns:fx=”http://ns.adobe.com/mxml/2009″
         xmlns:s=”library://ns.adobe.com/flex/spark”
         xmlns:mx=”library://ns.adobe.com/flex/mx” width=”400″ height=”300″>
    <fx:Declarations>
        <!– Place non-visual elements (e.g., services, value objects) here –>
    </fx:Declarations>
    <s:layout>
        <s:VerticalLayout/>
    </s:layout>
    <fx:Style>
        @namespace s “library://ns.adobe.com/flex/spark”;
        @namespace mx “library://ns.adobe.com/flex/mx”;
        .boldText{
            fontWeight:bold;
        }
    </fx:Style>
    <fx:Script>
        <![CDATA[
            [Bindable]
            public var firstname:String;
            
            [Bindable]
            public var lastname:String;;
            
            [Bindable][Inspectable(category=”Common”,enumeration=”male,female,unknown”,defaultValue=”male”)]
            public var gender:String;
            
            [Bindable] [Inspectable(category=”Common”,enumeration=”true,false”,defaultValue=”false”)]
            public var employed:Boolean;
            
            [Bindable] [Inspectable(category=”Common”,enumeration=”USA,UK,INDIA”,defaultValue=”INDIA”)]
            public var country:String;
     
        ]]>
    </fx:Script>
    
    <s:Label text=”Details Given are as follows:” styleName=”boldText”/>
    <s:Label text=”Your name is {firstname} {lastname}”/>
    <s:Label text=”Your gender is {gender}”/>
    <s:Label text=”Your employment status is {employed}”/>
    <s:Label text=”Your Contry is {country}”/>
</s:Group>


About the Author

Nouman Naveed
My name is Mohammed Nouman Naveed. I work and play with Flash Platform technologies and has experience of 11 years. Consulting and Training is part of my job. I am Adobe Certified Instructor, Adobe User Group Manager, Adobe Certified Expert and Adobe Community Champion.




 
 

 
CQ5
adobe aem56 dam logo

Setting Images in DAM

All images are loaded into the DAM (Digital Assets Management). To upload an image, you’ll need to use your Activator login. From the tree, click +Digital Assets Find the way to the tree to suitable folder (AAFP, images, ANN,...
by Nouman Naveed
0

 
 
 

Apache Flex 4.10.0 Available

Here comes Apache Flex 4.10. This project, the all-volunteer group of developers, and stakeholders in the development framework, today announced the release of Apache Flex 4.10.0. This release makes some important improvements ...
by Nouman Naveed
0

 
 
CQ5
aem 5.6.1 features pic

Many New Features in AEM 5.6.1

AEM 5.6.1 is a easy to use, unified experience management collection for marketers in the digital sphere to use in creating, managing, and delivering unique online experiences that are brand-entered and increase demand across d...
by Nouman Naveed
0

 

 
CQ5
Adobe CQ5 WEM, SOCO, Tagging, DAM

What’s New in CQ 5.6

1: It’s called AEM (Adobe Experience Manager) now Though I guess not that essential, it’s going to be exciting if the name is going to attach – there were other occasions where Adobe tried to rename this result and at the...
by Nouman Naveed
0

 
 
CQ5
content management for web and mobile

Content Management for Web & Mobile

Adobe CQ is a WCM and gives a better browser-based user interface. It is best suitable for business and IT for creating interactive, multimedia rich, multichannel consumer understanding to make an engaging digital existence, ma...
by Nouman Naveed
0

 




0 Comments


Be the first to comment!


Leave a Reply

Your email address will not be published. Required fields are marked *