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.




 
 

 
AIR
myimge

Adobe Flash Builder 4.7 Beta Available !

Recently Adobe released Adobe Flash Builder 4.7 beta which will support Adobe Flash 11.4 and Adobe AIR 3.4. It will also support Apache Flex 4.8 release. This version has improved workflow for iOS application development with s...
by Nouman Naveed
0

 
 
AIR
customize-datatips-for-flex-column-chart

Custom DataTip Renderers for ColumnChart

Flex provides many types of charts which allow raw data to show in meaningful format. ColumnChart component is one of the commonly used chart component in many flex applications. Customization of column chart datatip box is not...
by Nouman Naveed
0

 
 
AIR
flexatom.com adobe certified

Get Adobe Certified

During my recent assignment client was asking many questions on certification process. Sotoday I have decided to add some light on how certification is acquired to make you proud.There are many quality resources already on the ...
by Nouman Naveed
1

 

 
AIR
adobe flex custom event

Using Custom Events in Adobe Flex

Using Flex is very easy and there are many features which will allow you to make communication between custom components easy. And Custom Events capability is one of the great facility of exchanging data between custom componen...
by Nouman Naveed
0

 
 
AIR
adobe flex modules

Using Flex Moduls in your Application

Increasing application performance is very critical for anyone who is building mid-size to large application. It is seen in many applications that everything you have in your application is loaded on start-up. This loading of a...
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 *