InteractionMode in spark VGroup

Hi all!
Does anyone know if it's posible use interactionMode=touch in a s:VGroup like in a s:DataGrid?  (web application)
It works:
<s:DataGrid id="aaa"  interactionMode="touch">
It doesn't work:
<s:VGroup id="aaa" interactionMode="touch" />
Thanks!!

This is a sample application:
<?xml version="1.0" encoding="utf-8"?>
<mx: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" width="100%" height="100%" horizontalAlign="left" verticalAlign="top" layout="absolute" pageTitle="Example" creationPolicy="all" historyManagementEnabled="false" horizontalScrollPolicy="off" verticalScrollPolicy="off">
<fx:Script>
                    <![CDATA[
                              import model.CSensor;
                              import mx.collections.ArrayCollection;
                              [Bindable]
                              public var someSensors:ArrayCollection =  new ArrayCollection();
                              public function init():void{
                                        someSensors = new ArrayCollection();
                                        roSensor.getSensors();
                              public function handleFault(event: Object): void {
  Alert.show(event.fault.faultCode + "\n" + event.fault.faultString, "Error");
                              public function handleResultSensors(event: Object): void {
                                        someSensors = event.result;
                    ]]>
          </fx:Script>
               <mx:VBox left="5" top="5" right="5" bottom="5" verticalGap="5">
                              <s:DataGrid id="dgr_sensors" dataProvider="{someSensors}" width="100%" height="100%"  verticalScrollPolicy="on"                horizontalScrollPolicy="off" rowHeight="80" interactionMode="touch">
                                             <s:columns>
                                                            <s:ArrayList>
                                                                           <s:GridColumn dataField="Name" headerText="Name" width="150"/>
                                                                           <s:GridColumn  dataField="Other" headerText="Other"/>
                                                            </s:ArrayList>
                                             </s:columns>
                              </s:DataGrid>
          </mx:VBox>
          <fx:Declarations>
                         <mx:RemoteObject id="roSensor" destination="sensorService" showBusyCursor="true" fault="handleFault(event)">
                                        <mx:method name="getSensors" result="handleResultSensors(event)" />
                         </mx:RemoteObject>
          </fx:Declarations>
</mx:Canvas>
Thank you very much!!

Similar Messages

  • How Do You Populate A Spark List Control With An Array?

    Hello, all,
    Sorry to come accross so frustrated, but how in the name of God do you populate a Spark list control with the data in an array?  You used to be able to do this with the mx:List control, but the guys developing Flex just had to make things more difficult than they need to be!  I am more of a code purist and prefer doing things the way they have been done for decades, but apparently nothing can ever stay simple!
    I simply want to populate a list control with an array and this shouldn't be rocket science!  I found out that I must use a "collection" element, so I decided that an arrayCollection would be best.  However, after searching Adobe's documentation about arrayCollections, I am lost in a black hole of data binding, extra lines of code just to add a new element, the need to sort it, etc...!
    Here is my code:
    var pendingArray:ArrayCollection = new ArrayCollection();
    for ( var i:int = 0 ; i < queue.length ; i++ )
         var item:UserQueueItem = queue[i] as UserQueueItem ;
         if ( item.status == UserQueueItem.STATUS_PENDING )
         pendingArray.addItem({label:item.descriptor.displayName,descriptor:item.descriptor});
    Here is the relevant MXML:
    <s:VGroup>
         <s:List id="knockingList" width="110" height="100"/>              
    </s:VGroup>
    I'm not getting any errors, but the list is not populating.
    I have seen several examples where the arrayCollection is declared and populated in MXML:
            <mx:ArrayCollection id="myAC">
                <!-- Use an fx:Array tag to associate an id with the array. -->
                <fx:Array id="myArray">
                    <fx:Object label="MI" data="Lansing"/>
                    <fx:Object label="MO" data="Jefferson City"/>
                    <fx:Object label="MA" data="Boston"/>
                    etc...
               </fx:Array>
            </mx:ArrayCollection>
    That may be fine for an example, but I think this is a rare situation.  Most of the time I would image that the arrayCollection would be created and populated on the fly in ActionScript!  How can I do this?
    Thanks in advance for any help or advice anyone can give!
    Matt

    In your post it seemed like you were trying to take care of many considerations at once: optimization, design, architecture.  I would suggest you get something up and running and then worry about everything else.
    If I use data binding, then I will probably have to declare the  arrayCollection as a global variable and then I'll have to write 100 or  so extra lines of code to addItem(), removeItem(), sort(), etc...  It  just seems like too much overhead.
    I believe you may have some misconceptions about databinding in general.  You won't have to make it a global variable and you certainly won't need an extra 100 lines of code.  If you did this forum would be a very , very quiet place.
    I don't want to use data binding because the original array is refreshed  often and there is one function called by an event that re-declares the  arrayCollection each time, populates it with the array, and then sets  it as the list's dataprovider.
    That is the beauty of the ArrayCollection, it can handle the updates to its source Array. I don't know if you need to redeclare the ArrayCollection, resetting the source to the new Array allows everyone involved to keep their references so you don't have to worry about any "spooky" stuff going on.

  • How to get the page numbers in the PrintAdvance Data grid without using Vbox/Vgroup header or footer

    hi
    I want to print the page numbers for the data in Advance Data grid, For printing I am using print advance data grid , but unable to print the page numbers with that.
    actually i tried with Vbox/Vgroup, but when tha data is more because of this it is strucking, and more over imageRenderer in the PrintAdvancedataGrid not printing.
    can any one help in this regard?

    Image Caches hold images you've already loaded so the next time you request them, they can be made available without network latency.  This assume for your DG, that all images you need to print have been loaded by, for example, whatever DG the user was looking at before hitting Print.  This is easy when there are only a few icons used to show status, but won't work if each row has a different image unless you've somehow loaded up all of those images beforehand.
    Spark BitmapImage has an Image cache, but some third party ones are discussed here:
    http://thanksmister.com/2009/01/18/superimage-redux/
    -Alex

  • Throwing null object reference , when focus into the spark textarea ,if it is in the popup

    I added a textarea to vrgoup container and added that vgroup as popup to the application. while i am trying to focus into the textarea , it always throwing me null object reference. to see that you need to have debugger version of flash player installed. please help me if anybody knows the solution.
    here is my code.
    code
    protected function btn_clickHandler(event:MouseEvent):void
    var vgroup:VGroup = new VGroup();
    var ta:TextArea = new TextArea();
    vgroup.percentWidth = 100;
    vgroup.addElement(ta);
    PopUpManager.addPopUp(vgroup, this);
    Following is the error thrown
    TypeError: Error #1009: Cannot access a property or method of a null object reference.
    at spark.components::Scroller/focusInHandler()[E:\dev\hero_private\frameworks\projects\spark \src\spark\components\Scroller.as:1258]
    at flash.display::Stage/set focus()
    at flashx.textLayout.container::ContainerController/http://ns.adobe.com/textLayout/internal/2008::setFocus()[C:\Vellum\branches\v2\2.0\dev\out put\openSource\textLayout\src\flashx\textLayout\container\ContainerController.as:2265]
    at flashx.textLayout.container::ContainerController/mouseDownHandler()[C:\Vellum\branches\v2 \2.0\dev\output\openSource\textLayout\src\flashx\textLayout\container\ContainerController. as:2067]
    at flashx.textLayout.container::TextContainerManager/mouseDownHandler()[C:\Vellum\branches\v 2\2.0\dev\output\openSource\textLayout\src\flashx\textLayout\container\TextContainerManage r.as:1939]
    at spark.components.supportClasses::RichEditableTextContainerManager/mouseDownHandler()[E:\d ev\hero_private\frameworks\projects\spark\src\spark\components\supportClasses\RichEditable TextContainerManager.as:665]
    at flashx.textLayout.container::ContainerController/http://ns.adobe.com/textLayout/internal/2008::requiredMouseDownHandler()[C:\Vellum\branche s\v2\2.0\dev\output\openSource\textLayout\src\flashx\textLayout\container\ContainerControl ler.as:2088]
    at flash.events::EventDispatcher/dispatchEventFunction()
    at flash.events::EventDispatcher/dispatchEvent()
    at mx.core::UIComponent/dispatchEvent()[E:\dev\hero_private\frameworks\projects\framework\sr c\mx\core\UIComponent.as:13128]
    at mx.managers::SystemManager/mouseEventHandler()[E:\dev\hero_private\frameworks\projects\fr amework\src\mx\managers\SystemManager.as:2924]

    The simplest example I could come up with consists of 3 files:
    Main.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"
                      applicationComplete="open()">
         <fx:Script>
              <![CDATA[
                   import mx.managers.PopUpManager;
                   public function open():void {
                        var popUp:CustomComponent = PopUpManager.createPopUp(
                             this, //parent
                             CustomComponent, //class name
                             true //modal
                        ) as CustomComponent;
                        PopUpManager.centerPopUp(popUp);
              ]]>
         </fx:Script>
    </s:Application>
    CustomComponent.as
    package {
         import spark.components.supportClasses.SkinnableComponent;
         public class CustomComponent extends SkinnableComponent {
              public function CustomComponent() {
                   super();
                   setStyle('skinClass', CustomComponentSkin);
    CustomComponentSkin.mxml
    <?xml version="1.0" encoding="utf-8"?>
    <s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
              xmlns:s="library://ns.adobe.com/flex/spark"
              xmlns:mx="library://ns.adobe.com/flex/mx">
         <fx:Metadata>
              [HostComponent("CustomComponent")]
         </fx:Metadata>
         <s:Panel>
              <s:TextArea/>
         </s:Panel>
    </s:Skin>

  • Upgrade to Flex 4, Halo theme, embedded font doesn't work for Spark Label

    I'm upgrading an application to Flex 4 from Flex 3.5 using the Halo theme.  If I include a Spark Label in my application the Spark Label does not render the text using the font I defined in my CSS.  My MX Labels render fine.  Here is an example application that replicates my issue.  So,
    Compile and run using Spark theme.  Both Labels render the text with the correct font.
    Compile and run using Halo theme.  Only MX Label renders the text with the correct font.
    Is it not possible to do what I want?
    Thanks
    <?xml version="1.0" encoding="utf-8"?>
    <mx: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"
                      minWidth="250" minHeight="250">
         <fx:Style>
              @namespace mx "library://ns.adobe.com/flex/mx";
              @namespace s "library://ns.adobe.com/flex/spark";
              @font-face
                   fontFamily: Verdana;
                   fontWeight: normal;
                   fontStyle: normal;
                   src: url("./style/fonts/verdana.ttf");
                   embedAsCFF: false;
              @font-face
                   fontFamily: VerdanaCFF;
                   fontWeight: normal;
                   fontStyle: normal;
                   src: url("./style/fonts/verdana.ttf");
                   embedAsCFF: true;
              mx|Label
                   font-family: Verdana;
              s|Label
                   font-family: VerdanaCFF;
         </fx:Style>
         <fx:Declarations>
              <!-- Place non-visual elements (e.g., services, value objects) here -->
         </fx:Declarations>
         <s:VGroup>
              <mx:Label text="My text" />
              <s:Label text="My text" />          
         </s:VGroup>
    </mx:Application>

    I think you might need to set the fontLookup:
            s|Label
                font-family: VerdanaCFF;
                fontLookup: "embeddedCFF";     

  • Flex Spark Datagrid - Scalable (font size) with No scroll Bars

    I was wondering what would be the most optimized way to scale (increase/decrease) the fonts size in a Spark DataGrid with NO Scroller, so as to make it when the User Resizes the DataGrid, the Fonts inside the Grid would increase/decrease. 
    Is there a way to listen for the size change of the DataGrid? 
    I would probably need to change the font size to increase/decrease as the event gets fired on Datagrid Resize. 
    Any suggestions?

    I've pasted as much code as I can legally can.  What i would like to achieve is that when the the window resizes, the Content & the DataGrid Scales. I am also aware of scalemode on the VBox, though it scale oddly with width more than height (this is internal).
    Else, I tried:
    protected function vgroup1_addedToStageHandler(event:Event):void
                //stage.scaleMode = StageScaleMode.EXACT_FIT;
                stage.scaleMode = StageScaleMode.SHOW_ALL;
                stage.align = StageAlign.TOP_LEFT;
                scaleX = .5;
                scaleY = .5; 
                /* if(stage.stageWidth != (event.currentTarget as VGroup).width || stage.stageHeight != (event.currentTarget as VGroup).height)
                    var scaling:Number = 1;
                    if(width>height)
                        scaling = stage.stageWidth / (event.currentTarget as VGroup).width;
                    else
                        scaling = stage.stageHeight / (event.currentTarget as VGroup).height;
                    scaleX = scaleY = scaling;
    == THIS IS All I can Post ==
    <?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:components="components.*"
         viewSourceURL="srcview/index.html">
        <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
            import mx.events.ResizeEvent;
            import mx.rpc.events.ResultEvent;
            import mx.rpc.xml.SimpleXMLDecoder;
            import mx.utils.ArrayUtil;
            import mx.utils.ObjectUtil;
            import spark.components.ResizeMode;
            import spark.effects.Resize;
            // Skin Colors
            private const ALTERNATING_GRID_COLOR:Array = [ 0xF5F5F0 , 0xE7E4E9 ];
            private const ROLL_OVER_COLOR:int = 0x6D9960;
            private const SELECTION_COLOR:int = 0x668F59;
            private const TEXT_FONT_SIZE:int = 11;
            private const TEXT_COLOR:int = 0x080808;
            private const SUMMARY_TEXT_COLOR:int = 0xFAAFFF;
            // First column width
            private var collectiveFirstColumnWidth:int = 160;
            private var collectiveValuesColumnWidth:int = 50;
            // XML data
            [Bindable] private var portfolioSummary1:XMLList;
            [Bindable] private var reconstructedAC:ArrayCollection;
            private function convertXmlToArrayCollection(file:String):ArrayCollection {
                var xml:XMLDocument = new XMLDocument(file);
                var decoder:SimpleXMLDecoder = new SimpleXMLDecoder();
                var data:Object = decoder.decodeXML(xml);
                var array:Array = ArrayUtil.toArray(data);
                return new ArrayCollection(array);
            private function convertToAC():void {
                var ac1:ArrayCollection = convertXmlToArrayCollection(psr1)
                trace(ObjectUtil.toString(ac1));
                //reStructureAC(ac1);
            private function restructureXMLIntoHierarchicalAC():void {
            private function addProperty(obj:Object, attribute:String, value:String):Object {
                var o:Object = obj;
                o[attribute] = value;
                return o;
            protected function httpservice1_resultHandler(event:ResultEvent):void
                portfolioSummary1 = event.result.Analytics.Side.Analytic as XMLList;
                trace('-----\nSide: Sell' + ObjectUtil.toString(event.result.Analytics.Side.(@name=='Sell')));
                trace('-----\nSide: Buy: Analytic Values : \n' + ObjectUtil.toString(event.result.Analytics.Side.(@name=='Buy').Analytic.@value));
                //dg.dataProvider = new XMLListCollection(portfolioSummary1);
                //dg.requestedRowCount = dg.dataProviderLength;
            protected function vgroup1_addedToStageHandler(event:Event):void
                //stage.scaleMode = StageScaleMode.EXACT_FIT;
                stage.scaleMode = StageScaleMode.SHOW_ALL;
                stage.align = StageAlign.TOP_LEFT;
                scaleX = .5;
                scaleY = .5; 
                /* if(stage.stageWidth != (event.currentTarget as VGroup).width || stage.stageHeight != (event.currentTarget as VGroup).height)
                    var scaling:Number = 1;
                    if(width>height)
                        scaling = stage.stageWidth / (event.currentTarget as VGroup).width;
                    else
                        scaling = stage.stageHeight / (event.currentTarget as VGroup).height;
                    scaleX = scaleY = scaling;
            protected function vgroup1_resizeHandler(event:ResizeEvent):void
                (event.currentTarget as VGroup).resizeMode = ResizeMode.SCALE;
        ]]>
        </fx:Script>
        <fx:Declarations>
            <fx:XML id="psr1" source="data/PortfolioSummaryResponse1.xml" />
            <fx:XML id="psr2" source="data/PortfolioSummaryResponse2.xml" />
            <fx:XML id="psr3" source="data/PortfolioSummaryResponse3.xml" />
            <s:XMLListCollection id="headXMLListCol"
                source="{psr1.children()}" />
            <s:HTTPService id="portfolio_HS" result="httpservice1_resultHandler(event)"
                resultFormat="e4x" url="data/PortfolioSummaryResponse1.xml" />
        </fx:Declarations>
        <s:VGroup id="vbox" width="100%" height="100%" top="0" left="0" bottom="0" gap="0" addedToStage="vgroup1_addedToStageHandler(event)">
            <!-- First DataGrid -->
            <components:ExpandableDataGrid5 id="dg"
                color="{TEXT_COLOR}"
                rollOverColor="{ROLL_OVER_COLOR}"
                alternatingRowColors="{ALTERNATING_GRID_COLOR}"
                selectionColor="{SELECTION_COLOR}"
                skinClass="skins.ResizableDataGridSkin"
                >
                <components:columns>
                    <s:ArrayList>
                        <s:GridColumn id="field1" dataField="dataField1" headerText="Portfolio Summary"
                            itemRenderer="itemRenderers.LeftAlignGridItemRenderer"
                            headerRenderer="itemRenderers.HeaderGridItemRenderer"
                            />
                        <s:GridColumn id="field2" dataField="dataField2" headerText="Buy"
                            itemRenderer="itemRenderers.RightAlignGridItemRenderer"
                            headerRenderer="itemRenderers.RightAlignHeaderGridItemRenderer"
                            />
                        <s:GridColumn id="field3" dataField="dataField3" headerText="Sell"
                            itemRenderer="itemRenderers.RightAlignGridItemRenderer"
                            headerRenderer="itemRenderers.RightAlignHeaderGridItemRenderer"
                            />
                        <s:GridColumn id="field4" dataField="dataField4" headerText="Total"
                            itemRenderer="itemRenderers.RightAlignGridItemRenderer"
                            headerRenderer="itemRenderers.RightAlignHeaderGridItemRenderer"
                            />
                    </s:ArrayList>
                </components:columns>
                <components:dataProvider>
                    <s:ArrayCollection>
                        <fx:Object dataField1="data1" dataField2="data2" dataField3="data2"  dataField4="data16"></fx:Object>
                        <fx:Object dataField1="data2" dataField2="data3" dataField3="data3" dataField4="data17"></fx:Object>
                        <fx:Object dataField1="data3" dataField2="data2" dataField3="data2"  dataField4="data16"></fx:Object>
                        <fx:Object dataField1="data4" dataField2="data3" dataField3="data3" dataField4="data17"></fx:Object>
                        <fx:Object dataField1="data5" dataField2="data2" dataField3="data2"  dataField4="data16"></fx:Object>
                        <fx:Object dataField1="data6" dataField2="data3" dataField3="data3" dataField4="data17"></fx:Object>
                        <fx:Object dataField1="data7" dataField2="data2" dataField3="data2"  dataField4="data16"></fx:Object>
                        <fx:Object dataField1="data8" dataField2="data3" dataField3="data3" dataField4="data17"></fx:Object>
                        <fx:Object dataField1="data9" dataField2="data2" dataField3="data2"  dataField4="data16"></fx:Object>
                        <fx:Object dataField1="data10" dataField2="data3" dataField3="data3" dataField4="data17"></fx:Object>
                        <fx:Object dataField1="data11" dataField2="data2" dataField3="data2"  dataField4="data16"></fx:Object>
                        <fx:Object dataField1="data12" dataField2="data3" dataField3="data3" dataField4="data17"></fx:Object>
                        <fx:Object dataField1="data13" dataField2="data3" dataField3="data3" dataField4="data17"></fx:Object>
                        <fx:Object dataField1="data14" dataField2="data3" dataField3="data3" dataField4="data17"></fx:Object>
                        <fx:Object dataField1="data15" dataField2="data3" dataField3="data3" dataField4="data17"></fx:Object>
                    </s:ArrayCollection>
                </components:dataProvider>
            </components:ExpandableDataGrid5>
            <!-- Summary Totals -->
            <components:SummaryRow >
                <s:Label text="Summary Totals" fontWeight="bold" color="{SUMMARY_TEXT_COLOR}"/>
                <s:Spacer width="100%" />
                <s:ButtonBar click="convertToAC()"> 
                    <mx:ArrayCollection>
                        <fx:String>Convert to AC</fx:String>
                        <fx:String>CPS</fx:String>
                    </mx:ArrayCollection>
                </s:ButtonBar>
                <s:ButtonBar click="restructureXMLIntoHierarchicalAC()"> 
                    <mx:ArrayCollection>
                        <fx:String>Parse XML</fx:String>
                        <fx:String>15% POV</fx:String>
                    </mx:ArrayCollection>
                </s:ButtonBar>
            </components:SummaryRow>
            <!-- Second Datagrid -->
            <components:ExpandableDataGrid5 id="dg2"
                color="{TEXT_COLOR}"
                rollOverColor="{ROLL_OVER_COLOR}"
                selectionColor="{SELECTION_COLOR}"
                alternatingRowColors="{ALTERNATING_GRID_COLOR}"
                skinClass="skins.HeadlessDataGridSkin"
                >
                <components:columns>
                    <s:ArrayList>
                        <s:GridColumn dataField="dataField1"
                            itemRenderer="itemRenderers.LeftAlignGridItemRenderer"
                            />
                        <s:GridColumn dataField="dataField2"
                            itemRenderer="itemRenderers.RightAlignGridItemRenderer"
                            />
                        <s:GridColumn dataField="dataField3"
                            itemRenderer="itemRenderers.RightAlignGridItemRenderer"
                            />
                        <s:GridColumn dataField="dataField4"
                            itemRenderer="itemRenderers.RightAlignGridItemRenderer"
                            />
                    </s:ArrayList>
                </components:columns>
                <s:ArrayList>
                    <fx:Object dataField1="data16" dataField2="data2" dataField3="data2"  dataField4="data16"></fx:Object>
                    <fx:Object dataField1="data17" dataField2="data3" dataField3="data3" dataField4="data17"></fx:Object>
                </s:ArrayList>
            </components:ExpandableDataGrid5>
            <!-- Summary Totals - values -->
            <components:SummaryRow>
                <s:Label text="Summary Totals - Values" width="100%" fontWeight="bold" color="{SUMMARY_TEXT_COLOR}"/>
            </components:SummaryRow>
            <!-- Third Datagrid -->
            <components:ExpandableDataGrid5 id="dg3"
                color="{TEXT_COLOR}"
                rollOverColor="{ROLL_OVER_COLOR}"
                selectionColor="{SELECTION_COLOR}"
                alternatingRowColors="{ALTERNATING_GRID_COLOR}"
                skinClass="skins.HeadlessDataGridSkin"
                >
                <components:columns>
                    <s:ArrayList>
                        <s:GridColumn dataField="dataField1"
                            itemRenderer="itemRenderers.LeftAlignGridItemRenderer"
                            />
                        <s:GridColumn dataField="dataField2"
                            itemRenderer="itemRenderers.ToolTipItemRenderer"
                            />
                        <s:GridColumn dataField="dataField3"
                            itemRenderer="itemRenderers.ToolTipItemRenderer"
                            />
                        <s:GridColumn dataField="dataField4"
                            itemRenderer="itemRenderers.ToolTipItemRenderer"
                            />
                    </s:ArrayList>
                </components:columns>
                <s:ArrayList>
                    <fx:Object dataField1="data18" dataField2="data2" dataField3="data3"  dataField4="data16"></fx:Object>
                    <fx:Object dataField1="data19" dataField2="data3" dataField3="data3" dataField4="data17"></fx:Object>
                </s:ArrayList>
            </components:ExpandableDataGrid5>
            <!-- Percent of Tops -->
            <components:SummaryRow>
                <s:Label text="Percent of Tops" color="{SUMMARY_TEXT_COLOR}" width="100%" fontWeight="bold"/>
            </components:SummaryRow>
            <!-- Fourth DataGrid -->
            <components:ExpandableDataGrid5 id="dg4"
                color="{TEXT_COLOR}"
                rollOverColor="{ROLL_OVER_COLOR}"
                selectionColor="{SELECTION_COLOR}"
                alternatingRowColors="{ALTERNATING_GRID_COLOR}"
                skinClass="skins.HeadlessDataGridSkin"
                >
                <components:columns>
                    <s:ArrayList>
                        <s:GridColumn dataField="dataField1"
                            itemRenderer="itemRenderers.LeftAlignGridItemRenderer"  />
                        <s:GridColumn dataField="dataField2"
                            itemRenderer="itemRenderers.RightAlignGridItemRenderer"
                            />
                        <s:GridColumn dataField="dataField3"
                            itemRenderer="itemRenderers.RightAlignGridItemRenderer"
                            />
                        <s:GridColumn dataField="dataField4"
                            itemRenderer="itemRenderers.RightAlignGridItemRenderer"
                            />
                    </s:ArrayList>
                </components:columns>
                <s:ArrayList>
                    <fx:Object dataField1="data20" dataField2="data1" dataField3="data1" dataField4="data20"></fx:Object>
                    <fx:Object dataField1="data21" dataField2="data2" dataField3="data2" dataField4="data21"></fx:Object>
                    <fx:Object dataField1="data22" dataField2="data3" dataField3="data3" dataField4="data22"></fx:Object>
                </s:ArrayList>
            </components:ExpandableDataGrid5>
        </s:VGroup>
    </s:Application>
    ExpandableDataGrid5.mxml
    <?xml version="1.0" encoding="utf-8"?>
    <s:DataGrid xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:s="library://ns.adobe.com/flex/spark"
                xmlns:mx="library://ns.adobe.com/flex/mx"
                horizontalScrollPolicy="off"
                verticalScrollPolicy="off"
                selectionMode="singleCell"
                variableRowHeight="true"
                requestedColumnCount="4"
                width="100%"
                resizableColumns="false"
                creationComplete="thisDatagrid_creationCompleteHandler(event)"
                >
        <fx:Script>
            <![CDATA[
                 import mx.events.FlexEvent;
                /*import mx.events.ResizeEvent;
                [Bindable] private var oldWidth:int;
                [Bindable] private var oldHeight:int;
                protected function thisDatagrid_resizeHandler(event:ResizeEvent):void
                    oldWidth = event.oldWidth;
                    oldHeight = event.oldHeight;
                    this.invalidateDisplayList();
                override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
                    if (oldWidth < width) {
                        setStyle('fontSize', getStyle('fontSize') + 0.5); // might wanna~ width % height to increase by a certain pt
                        //this.scaleX += .1;
                    } else if (oldWidth > width) {
                        setStyle('fontSize', getStyle('fontSize') - 0.5);
                        //this.scaleX -= .1;
                    trace('unscaledWidth: ' + unscaledWidth);
                    trace('unscaledHeight: ' + unscaledHeight);
                    trace('explicitMinHeight: ' + explicitMinHeight);
                    trace('explicitMinWidth: ' + explicitMinWidth);
                    minHeight = measuredMinHeight;
                    super.updateDisplayList(unscaledWidth, unscaledHeight);
                protected function thisDatagrid_creationCompleteHandler(event:FlexEvent):void
                    requestedRowCount = dataProviderLength;
                    requestedMaxRowCount = dataProviderLength;
                    requestedMinRowCount = dataProviderLength;
                    minHeight = measuredHeight;
                /* protected function datagrid1_addedToStageHandler(event:Event):void
                    stage.scaleMode = StageScaleMode.SHOW_ALL;
                    /*                stage.align = StageAlign.TOP;
                     this.width = stage.stageWidth;
                    this.height = stage.stageHeight;
            ]]>
        </fx:Script>
    </s:DataGrid>
    You can Check other ExpandableDataGrids:
    <?xml version="1.0" encoding="utf-8"?>
    <s:DataGrid xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:s="library://ns.adobe.com/flex/spark"
                xmlns:mx="library://ns.adobe.com/flex/mx"
                resize="thisDatagrid_resizeHandler(event)"
                creationComplete="thisDatagrid_creationCompleteHandler(event)"
                horizontalScrollPolicy="off" verticalScrollPolicy="off"
                selectionMode="singleCell"
                variableRowHeight="true"
                requestedColumnCount="4"
                editable="false"
                width="100%"
                >
        <fx:Script>
            <![CDATA[
                import mx.events.FlexEvent;
                import mx.events.ResizeEvent;
                protected function thisDatagrid_resizeHandler(event:ResizeEvent):void
                    //event.stopImmediatePropagation();
                    if (event.oldWidth < width) {
                        setStyle('fontSize', getStyle('fontSize') + 0.5); // might wanna~ width % height to increase by a certain pt
                        //this.scaleX += .1;
                    } else if (event.oldWidth > width) {
                        setStyle('fontSize', getStyle('fontSize') - 0.5);
                        //this.scaleX -= .1;
                    minWidth = measuredMinWidth;
                protected function thisDatagrid_creationCompleteHandler(event:FlexEvent):void
                    requestedRowCount = dataProviderLength;
                    requestedMaxRowCount = dataProviderLength;
                    requestedMinRowCount = dataProviderLength;
                    minHeight = measuredMinHeight;
            ]]>
        </fx:Script>
    </s:DataGrid>
    OR
    <?xml version="1.0" encoding="utf-8"?>
    <s:DataGrid xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:s="library://ns.adobe.com/flex/spark"
                xmlns:mx="library://ns.adobe.com/flex/mx"
                horizontalScrollPolicy="off"
                verticalScrollPolicy="off"
                selectionMode="singleCell"
                variableRowHeight="true"
                requestedColumnCount="4"
                width="100%"
                resize="thisDatagrid_resizeHandler(event)"
                creationComplete="thisDatagrid_creationCompleteHandler(event)"
                >
        <fx:Script>
            <![CDATA[
                 import mx.events.FlexEvent;
                 import mx.events.ResizeEvent;
                [Bindable] private var oldWidth:int;
                [Bindable] private var oldHeight:int;
                protected function thisDatagrid_resizeHandler(event:ResizeEvent):void
                    oldWidth = event.oldWidth;
                    oldHeight = event.oldHeight;
                    this.invalidateDisplayList();
                override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
                    if (oldWidth < width) {
                        setStyle('fontSize', getStyle('fontSize') + 0.5); // might wanna~ width % height to increase by a certain pt
                        //this.scaleX += .1;
                    } else if (oldWidth > width) {
                        setStyle('fontSize', getStyle('fontSize') - 0.5);
                        //this.scaleX -= .1;
                    trace('unscaledWidth: ' + unscaledWidth);
                    trace('unscaledHeight: ' + unscaledHeight);
                    trace('explicitMinHeight: ' + explicitMinHeight);
                    trace('explicitMinWidth: ' + explicitMinWidth);
                    minHeight = measuredMinHeight;
                    super.updateDisplayList(unscaledWidth, unscaledHeight);
                protected function thisDatagrid_creationCompleteHandler(event:FlexEvent):void
                    requestedRowCount = dataProviderLength;
                    requestedMaxRowCount = dataProviderLength;
                    requestedMinRowCount = dataProviderLength;
                    minHeight = measuredHeight;
            ]]>
        </fx:Script>
    </s:DataGrid>

  • Spark datagrid not behaving properly (maybe states bug)

    I am using this as the renderer in my Spark datagrid, however the modified state is getting set when I hover over the row. I've set breakpoints in the set data funtion to see if this is being called, but it is not,
    the code  currentState = "modified"; is being called out side of the set data function but I have not written that code anywhere !!!
    <?xml version="1.0" encoding="utf-8"?>
    <s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                    xmlns:s="library://ns.adobe.com/flex/spark"
                    xmlns:mx="library://ns.adobe.com/flex/mx"
                     currentState="unmodified">
        <fx:Script>
            <![CDATA[
                override public function set data(value:Object):void
                    super.data = value;
                    if(data){
                        if(this.data.isModifiedClientSide){
                            currentState = "modified";
                        else{
                            currentState = "unmodified";
            ]]>
        </fx:Script>
        <s:states>
            <s:State name="modified"/>
            <s:State name="unmodified"/> 
        </s:states> 
        <s:Rect top="0" left="0" right="0" bottom="0"> 
            <s:fill><s:SolidColor color.modified="0xddddff" color="0xFFffff"  /></s:fill> 
        </s:Rect> 
        <s:Rect left="1" top="1" right="0" bottom="0" includeIn="modified">
            <s:stroke >
            <s:SolidColorStroke color="0x000099" weight="1">
            </s:SolidColorStroke>
            </s:stroke>
        </s:Rect>
        <s:VGroup horizontalAlign="center" verticalAlign="middle" top="0" left="0" right="0" bottom="0">
            <s:Label text="{data.margin}">
            </s:Label>
        </s:VGroup>
    </s:GridItemRenderer>

    Thanks for the reply CodeMata!
    I'm trying to manage the view transitions (whether it slides left or right) based on the current view and which button is pressed.  The below code snippet is the handler for a button who's id is "transactionsButton", and corresponds to the transaction view.  There are three buttons total, the layout is as follows:
    | processTransactionButton | transactionsButton | settingsButton |
    When the user is in the ProcessTransaction view and clicks on the transactionsButton I want it to slide left, but if they are at the Settings view I want it to slide right.
    Here is the handler for the transactionsButton (the commented out line is where I'm having trouble!!!):
    protected function transactionsButtonHandler():void
         if (!(navigator.activeView is views.Transactions))
              if (navigator.activeView is views.ProcessTransaction) {navigator.pushView(views.Transactions);}
              else if (navigator.activeView is views.Settings)
                   navigator.popView();
                   //navigator.pushView(views.Transactions, null, SlideViewTransition("right"));
                   navigator.pushView(views.Transactions);

  • Spark list horizontal scroller doesn't actualize when rows is set lesser than list container

    Hello,
    The size of the Image control is set larger than that of its parent Group  container. By default, the child extends past the boundaries of the parent  container. Rather than allow the child to extend past the boundaries of the  parent container, the Scroller specifies to clip the child to the boundaries and  display scroll bars.
    In the spark list, when I change the list dataProvider and the size of the Image control is set lesser than that of its parent Group  container, the horizontal scroller doesn't actualize.
    thanks.

    <!-- Simple example to demonstrate the Spark List component -->
    <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" applicationComplete="comp()" width="260" height="400">
        <fx:Script>
            <![CDATA[
        import mx.collections.*;
        public var dpArray:Array;
        [Bindable]
        public var dpCol:ArrayCollection;
        public function handleClick():void {
            dpCol.removeAll();
            dpCol.addItem({ label:"spark test" });
            dpCol.addItem({ label:"spark text" });
        public function comp():void {
            dpCol = new ArrayCollection(dpArray);
            dpCol.addItem({ label:"spark list horizontal scroller doesn't actualize when rows is set lesser than list container" });
            dpCol.addItem({ label:"spark test" });
            dpCol.addItem({ label:"spark text" });
             ]]>
        </fx:Script>
        <s:Panel title="List">
            <s:VGroup left="20" right="20" top="20" bottom="20">
                <s:List width="200" id="lis" dataProvider="{dpCol}" height="120"/>
                <s:Button id="button1" label="Click here!" width="100" fontSize="12" click="handleClick();"/>
            </s:VGroup>
        </s:Panel>
    </s:Application>

  • Tabbar spark, states

    In a component that has multiple states, I use a spark TabBar based on a ViewStack
    containing a list of Navigator Content. The number of tabs changes when the component states
    changes.
    The TabBar works, but sometimes there are some bugs: after a state change, it can
    have multiple tabs selected.
    Bug1:
    Select in state three (using the comboBox)
    then I select the last tab
    then I select the state two (using the comboBox).
    Result: the onglet3 and 4 are selected.
    Bug2:
      I want to force the selection of the first tab after a change
    state (idViewStack.selectedIndex = 0;)
    Result: multiple tabs are selected.
    code:
    <?xml version="1.0" encoding="utf-8"?>
    <s:VGroup xmlns:fx="http://ns.adobe.com/mxml/2009"
                  xmlns:s="library://ns.adobe.com/flex/spark"
                  xmlns:ns="library://ns.adobe.com/flex/mx"
                  xmlns:tabbarNavigation="tabbarNavigation.*"
                  xmlns:views="views.*"
                  width="1000" height="800"
                  creationComplete="application1_creationCompleteHandler(event)" xmlns:tabbarNavigation2="tabbarNavigation2.*" xmlns:tabBarNavigation="tabBarNavigation.*">
          <fx:Script>
                <![CDATA[
                      import mx.collections.ArrayCollection;
                      import mx.controls.Alert;
                      import mx.events.FlexEvent;
                      import spark.events.IndexChangeEvent;
                      [Bindable()]
                      public var dataproviderStatesChoise:ArrayCollection = new ArrayCollection();
                      protected function application1_creationCompleteHandler(event:FlexEvent):void
                            dataproviderStatesChoise.addItem("state1");
                            dataproviderStatesChoise.addItem("state2");
                            dataproviderStatesChoise.addItem("state3");
                            statesChoise.selectedIndex=0;
                      protected function changeHandler(event:IndexChangeEvent):void
                            if(event.newIndex==0){
                                 currentState="state1";
                            }else if(event.newIndex==1){
                                 currentState="state2";
                            }else {
                                 currentState="state3";
                ]]>
          </fx:Script>
          <s:states>
                <s:State name="state1"/>
                <s:State name="state2"/>
                <s:State name="state3"/>
          </s:states>
          <s:ComboBox id="statesChoise" dataProvider="{dataproviderStatesChoise}" change="changeHandler(event)"/>
          <s:TabBar dataProvider="{idViewStack}" id="idTabBar"  />
          <ns:ViewStack id="idViewStack" width="95%" height="85%" left="8" y="23" >
                <s:NavigatorContent label="Tab1"  width="100%" height="100%" includeIn="state3">
                      <s:Label text="Tab1" />
                </s:NavigatorContent>
                <s:NavigatorContent label="Tab2"  width="100%" height="100%" includeIn="state2,state3">
                      <s:Label text="Tab2" />
                </s:NavigatorContent>
                <s:NavigatorContent label="Tab3"  width="100%" height="100%" >
                      <s:Label text="Tab3" />
                </s:NavigatorContent>
                <s:NavigatorContent label="tab4 "  width="100%" height="100%">
                      <s:Label text="Tab4" />
                </s:NavigatorContent>
          </ns:ViewStack>
    </s:VGroup>

    It looks like bug1 and bug2 is the same issue.  Here is a reduced test case that demonstrates the bug:
    <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">
        <s:states>
            <s:State name="state1"/>
            <s:State name="state2"/>
            <s:State name="state3"/>
        </s:states>
        <s:controlBarContent>
            <s:Button label="1. go to state2" click="currentState='state2'" />
            <s:Button label="2. go to state3" click="currentState='state3'" />
        </s:controlBarContent>
        <s:TabBar dataProvider="{vs}" />
        <mx:ViewStack id="vs" y="25">
            <s:NavigatorContent label="Tab1" includeIn="state3">
                <s:Label text="Tab1" />
            </s:NavigatorContent>
            <s:NavigatorContent label="Tab2" includeIn="state2,state3">
                <s:Label text="Tab2" />
            </s:NavigatorContent>
            <s:NavigatorContent label="Tab3">
                <s:Label text="Tab3" />
            </s:NavigatorContent>
        </mx:ViewStack>
    </s:Application>
    Steps to reproduce:
    1. Compile and run above MXML
    2. Click "1. go to state2"
    3. Click "2. go to state3"
    4. Notice two tabs show as selected
    Can you please file a bug at http://bugs.adobe.com/flex and post the link here?  Let me know if you would rather that I file it.

  • Spark ComboBox/TextArea focus interaction

    I have a ComboBox set up to change the font size of the text in a TextArea.  If I set the ComboBox to return focus to the TextArea in its change event, it causes the ComboBox to require 2 clicks to make a selection.  Here's a simple application showing the behaviour that I'm seeeing:
    <?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">
         <fx:Script>     <![CDATA[
                   import flashx.textLayout.edit.IEditManager;
                   import flashx.textLayout.formats.TextLayoutFormat;
                   protected function sizeChange():void {
                        var format:TextLayoutFormat = new TextLayoutFormat();
                        format.fontSize = comboBox.selectedItem;
                        IEditManager(textArea.textFlow.interactionManager).applyLeafFormat(format);
                        textArea.setFocus();  //Without this line, the combobox works as expected.  With it, you must click on your selection twice to close the combobox
         ]]>     </fx:Script>
         <s:VGroup>
              <s:TextArea id="textArea" />
              <s:ComboBox id="comboBox" change="sizeChange()">
                   <s:dataProvider>
                        <s:ArrayList>
                             <fx:int>10</fx:int>
                             <fx:int>12</fx:int>
                             <fx:int>14</fx:int>
                             <fx:int>16</fx:int>
                             <fx:int>24</fx:int>
                             <fx:int>32</fx:int>
                        </s:ArrayList>
                   </s:dataProvider>
              </s:ComboBox>
         </s:VGroup>
    </s:Application>

    Looks like an editor interaction.  I wouldn't want the ComboBox to ever get
    focus so I'd skip the setFocus call and just set tabFocusEnabled=false and
    mouseFocusEnabled = false;

  • Flex4 How to set background image in Vgroup..?

    Hi.,
            I have using v flex 4 vgroup to set background image., but image was not display.. any change my code.,
    <fx:Style>
          .backgroundImage
                color:#808080;
                fontWeight:bold;
                fontSize:18;
                fontStyle:italic;
                contentBackgroundColor : #FFFFFF ;
                backgroundImage:Embed("assets/Green Apple.jpeg");
    </fx:Style>
    <s:VGroup paddingBottom="10" width="100%"  height="600" paddingTop="10"  styleName="backgroundImage">
        <s:Label text="hai hai hai">
             </s:Label>
           </s:VGroup>
    any solution to solve this....
    With Regards.,
    LinFlex-

    @Peter
    Yes! This works well now. Now I can get repeating background images directly in the code as well as in my CSS style sheets.  This looks good and helps me a lot as there are lots of occasions for me using this. I've gotten used to having repeating image backgrounds in HTML and missed that in Flex 3. This feature alone makes moving to Flex 4 worthwhile.
    This works fine for me:
    <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">
      <!--make a background for the whole page  -->
        <s:BorderContainer width="100%" height="100%"
             backgroundImage="@Embed('images/bkg/grey_grid.gif')"
             backgroundImageFillMode="repeat" >
      <!--make an inner area with a graphic background  -->
            <s:BitmapImage id="legalPad"
                  source="@Embed('images/bkg/legalPad.gif')"
                  fillMode="repeat"
                  left="40" top="100"
                  width="825" height="200" />
        </s:BorderContainer>
    </s:Application>
    Here are the images I used:
    grey_grid.gif
    legalPad.gif

  • Center label instance inside VGroup in Flex

    Hi all I am trying to center my labels below my image inside my VGroup.
    The labels are align to left now and it seems like HorizontalAlign is not working on spark component.
    Anyone knows how to fix it? Thanks a lot.
    <?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" minWidth="955" minHeight="600">
        <fx:Declarations>
            <!-- Place non-visual elements (e.g., services, value objects) here -->
        </fx:Declarations>
        <s:VGroup width="800">
            <mx:Image source="images/big/city1.jpg"/>
            <s:Label text="test1" horizontalCenter="0" /> //doesn't work....:(
            <s:Label text="test2" />
        </s:VGroup>
    </s:Application>

    horizontalAlign="center"
    <?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"
                   minWidth="955" minHeight="600">   
      <fx:Declarations>       
      <!-- Place non-visual elements (e.g., services, value objects) here -->   
      </fx:Declarations>   
      <s:VGroup horizontalAlign="center" width="100%">       
        <s:Label text="test1"/>
        <s:Label text="test2" />   
      </s:VGroup>
    </s:Application>
    If this post answers your question or helps, please mark it as such.
    Greg Lafrance - Flex 2 and 3 ACE certified
    www.ChikaraDev.com
    Flex Training and Support Services

  • Place spark TabBar on Bottom of ViewStacks (+ rounded corners pointing downwards)

    Why is it so hard to do such a simple thing... I figure also it must be a very common thing.
    <s:VGroup horizontalAlign="center" horizontalCenter="0" verticalCenter="0" gap="0">
        <mx:ViewStack id="view" width="450" height="300" />
        <!-- NavigatorContent dynamically gets added to view on appComplete-->
        <s:TabBar dataProvider="{view}" skinClass="skins.CustomSparkTabBarSkin" />
    </s:VGroup>
    The Custom Skin:
    <s:Skin
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:fb="http://ns.adobe.com/flashbuilder/2009"    
    alpha.disabled="0.5"><fx:Metadata>
        <![CDATA[
        [HostComponent("spark.components.TabBar")]
        ]]>
    </fx:Metadata>
    <fx:Script  fb:purpose="styling" >
        <![CDATA[
        import mx.core.UIComponent;
        /**  Push the cornerRadius style to the item renderers.*/
        override protected function updateDisplayList(unscaledWidth:Number, unscaleHeight:Number):void {
            const numElements:int = dataGroup.numElements;
            const cornerRadius:int = hostComponent.getStyle("cornerRadius");
            for (var i:int = 0; i < numElements; i++) {
                var elt:UIComponent = dataGroup.getElementAt(i) as UIComponent;
                if (elt)
                    elt.setStyle("cornerRadius", cornerRadius);
            super.updateDisplayList(unscaledWidth, unscaledHeight);
        ]]>           
    </fx:Script>
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    </s:states>
    <!--- @copy spark.components.SkinnableDataContainer#dataGroup -->
    <s:DataGroup id="dataGroup" width="100%" height="100%">
    Comes out with this component:
    I would like to place that TabBar at the Bottom of the viewstack, rounded corners pointing outwardly.
    if I add rotation="180" to the TabBar <s:TabBar dataProvider="{view}" skinClass="skins.CustomSparkTabBarSkin" rotation="180"/> will make the matter all the more laughable. I don't understand why is it so hard to create a TabNavigator with the buttons on the bottom?!

    Alright, I solved it by using Flash Catalyst... at least its' a simple way...
    So what I did was, Skinned it in Photoshop, imported it to Catalyst, and did the ncessary (convert to button, and select the label for it) and imported it into Flash Builder 4.
    I added the following component in Main:
    <mx:ViewStack id="view" width="450" height="300"  x="33" y="70"/>
    <s:TabBar id="tabBar" dataProvider="{view}" skinClass="components.CustomSparkTabBarSkin" y="375" x="32"/>
    The component.CustomSparkTabBarSkin
    <s:DataGroup id="dataGroup" width="100%" height="100%">
        <s:layout>
            <s:ButtonBarHorizontalLayout gap="4"/>
        </s:layout>
        <s:itemRenderer>
           <fx:Component>
               <s:ButtonBarButton skinClass="components.TabButton" buttonMode="true"/>
           </fx:Component>
        </s:itemRenderer>
    The components.TabButton (generated by Flash Catalyst)
    <s:Group d:userLabel="Tab Button 1" x="0" y="0">
         <s:BitmapImage smooth="true" source="@Embed('/assets/images/Game Tab Navigator/Buttonec.png')" d:userLabel="Button 99c" x="4" y="0"/>
         <s:RichText alpha="0.95" color="#725b3c" fontFamily="Bebas" fontSize="18" height="20" lineHeight="120%" textAlign="center" d:userLabel="hello" whiteSpaceCollapse="preserve" width="62" x="0" y="24" x.up="0" y.up="14">
              <s:content>
                   <s:p>
                   <s:span>Hello</s:span>
                   <s:span baselineShift="2" fontFamily="Myriad Pro" fontSize="17" fontWeight="bold">¢</s:span>
                   </s:p>
            </s:content>
         </s:RichText>
    </s:Group>
    Now the problem is... When I label my NavigatorContent, and dynamically added to the ViewStack (which is the dataprovider of the TabBar), the TabBar don't show the labels...
    Even though it's hardcoded in the example above to show Hello ... Nothing shows.
    What am I missing?

  • I have a spark textinput, this textinput is stuck and wont disappear when poping or pushing to a new view any idea ?

    i have a spark textinput, this textinput is stuck and wont disappear when popping or pushing to a new view any idea ? also sometime this textinput and when scrolling is stuck in a certain x-y position and do not move with scroll
    below is my code:
    <s:BorderContainer borderVisible="false" backgroundImage="@Embed(source='../assets/BGNotifications.jpg')" backgroundImageFillMode="scale" width="100%" height="100%">
        <s:Scroller id="homeScroller" y="0" pageScrollingEnabled="false" name="homeScroller"  height="100%" width="100%" horizontalScrollPolicy="off" verticalScrollPolicy="on" skinClass="Skins.HMobileScrollbar" >
            <s:VGroup width="100%" horizontalAlign="center" verticalAlign="top"  gap="0">
                <s:VGroup horizontalAlign="center" paddingTop="45" paddingLeft="10" width="85%" height="100%" verticalAlign="top"  gap="0">
                    <s:TextInput id="txtUsername" width="{278 * txtRatio}" height="{40 * txtRatio}" borderVisible="false" color="#575757" focusColor="#C42828" textAlign="left" fontStyle="normal" maxChars="200" styleName="{MystyleAccordingToWidth}TextBox{resourceManager.getString('resources','ImageP ath')}" ></s:TextInput>
                </s:VGroup>
            </s:VGroup>
        </s:Scroller>
    </s:BorderContainer>

    Hi, it sounds like you are running into a known issue with a mobile app using the spark textinput (assuming its mobile as you are referring to piping and pushing views)
    The kind folks over at Flexicious have provided a solution to this problem
    http://blog.flexicious.com/post/Scrolling-Issues-With-TextInput-for-Flex-Air-Mobile-Native -StageText.aspx

  • Extending spark Label

    I'm trying to extend a Spark Label so it always has a border with rounded corners like the code below.
    <s:Graphic>
    <s:filters>
    <s:DropShadowFilter color="0x000000" alpha="0.5" distance="7" />
    </s:filters>
    <s:Group>
    <s:Rect width="100%" height="100%" radiusX="5" radiusY="5">
    <s:fill>
    <mx:SolidColor color="#e0e9f8" />
    </s:fill>
    <s:stroke>
    <s:SolidColorStroke color="#e0e9f8" weight="1"/>
    </s:stroke>
    </s:Rect>
    <s:Label color="#23295D" paddingTop="5" paddingLeft="5" paddingRight="5" paddingBottom="5">
    <s:text>This is a Spark Label control with a border drawn by a Rect.</s:text>
    </s:Label>
    </s:Group>
    </s:Graphic>
    How can I create a MyLabel.as (extending a spark Label) with the above code in it (i tried a few things but haven't quite got it right).
    Or should I be using another component instead of a spark Label.
    Thanks in advance
    Bodrul Haque

    Thanks Alex, I will take a look at SkinnableComponent.
    Alternatively, this also gives the desired result (except component needs to be re-measured....still trying to figure how to do that).
    The objective was to extend a spark Label and make sure MyLabel always has a border and shading .......and few extra things specific to our needs (which  I haven't added yet).
    I've made use of the built in graphics.
    public class MyLabel extends Label
      private var dropShadow:RectangularDropShadow;
      public function MyLabel()
        super();
      override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
          super.updateDisplayList(unscaledWidth, unscaledHeight);
           //background
          var backgroundColor:Number;
          var g:Graphics = graphics;
          g.clear();
          backgroundColor = getStyle("backgroundColor");
          graphics.beginFill(backgroundColor);
          graphics.drawRoundRect(-5, -5, unscaledWidth+10, unscaledHeight+10, 10);
          graphics.endFill();
          // Shadow......is their another way???
          if (!dropShadow)
                 dropShadow = new RectangularDropShadow();
           dropShadow.distance = 7;
           dropShadow.angle = 45;
           dropShadow.color = 0;
           dropShadow.alpha = 0.4;
           dropShadow.tlRadius = 5;
          dropShadow.trRadius = 5; //cornerRadius;
          dropShadow.blRadius = 5; //cornerRadius;
          dropShadow.brRadius = 5;
          dropShadow.drawShadow(graphics, 0, -5, unscaledWidth+5, unscaledHeight+10);
    If I add a couple of these MyLabels into a HGroup (or VGroup) they look squashed. ......so I want to do a invalidateSize() or something

Maybe you are looking for

  • Lightroom disappears after export to Photoshop

    Am working with Lightroom 2.0 on a PowerMac G5, 4 g RAM, ATI Radeon 9800 XT, OS 10.5.4. Each time I send an image out from Lightroom for editing in Photoshop, do a SAVE in PSCS3 and try to return to Lightroom, the browser window is gone and I can't g

  • FCKeditor not working in IE10

    At first the editor wasn't appearing at all on pages where it should have been.  After modifying the fckconfig.js file by changing var sBrowserVersion = navigator.appVersion.match(/MSIE (.\..)/)[1] ; to var sBrowserVersion = navigator.appVersion.matc

  • Sent items in the Email-Client of iOS5.0x

    Under iOS4.3.5 the Mail-App. Usedom to Show under Mailboxes also the Sent-items and the Spams. Under iOS5.xx there is only my inbox. How can i configure Mail to show also Sent items and the SPAM directories?

  • Scenario 2 activation issue

    Hello all, I am getting issue in building and activating my DC, I get  it to fail. I get the following exception whuch is far away to be documented java.lang.StringIndexOutOfBoundsException: String index out of range: -1 Antoine <!LOGHEADER[START]/>

  • I have not used my Itunes in years and I had a large music libary but i can not access my old music

    I have not used my I tunes in years and had a large music libary but I can not access my old music