ControlBar equivalent in Spark Panel?

Is there a way to include buttons or other content at the bottom of a spark panel the way there was for a halo panel? Or do I need to use a Halo panel?
Also, even when I try to use a Halo panel (mx:Panel) it looks just like a Spark panel, and I cannot style it with css the way I normally would with a panel in Flex 3.

Handycam,
I believe in order to use a control bar, you would need to create a custom Panel skin and add your controls there. For more information see the "Spark replacement for mx.controls.ApplicationControlBar?" thread at http://forums.adobe.com/message/2010361.
Peter

Similar Messages

[svn:fx-trunk] 5019: ASDoc updates to indicate that some Halo containers do not work with the Spark equiv (ControlBar does not work with Spark Panel/ AppControlBar does not work with Spark Application), and indicate that Canvas, Box, Tile, Panel have Spa

Revision: 5019
Author: [email protected]
Date: 2009-02-19 13:17:21 -0800 (Thu, 19 Feb 2009)
Log Message:
ASDoc updates to indicate that some Halo containers do not work with the Spark equiv (ControlBar does not work with Spark Panel/AppControlBar does not work with Spark Application), and indicate that Canvas, Box, Tile, Panel have Spark equivs
QE Notes: None
Doc Notes: None
Bugs: -
Modified Paths:
flex/sdk/trunk/frameworks/projects/framework/src/mx/containers/Accordion.as
flex/sdk/trunk/frameworks/projects/framework/src/mx/containers/ApplicationControlBar.as
flex/sdk/trunk/frameworks/projects/framework/src/mx/containers/Box.as
flex/sdk/trunk/frameworks/projects/framework/src/mx/containers/Canvas.as
flex/sdk/trunk/frameworks/projects/framework/src/mx/containers/ControlBar.as
flex/sdk/trunk/frameworks/projects/framework/src/mx/containers/HBox.as
flex/sdk/trunk/frameworks/projects/framework/src/mx/containers/Panel.as
flex/sdk/trunk/frameworks/projects/framework/src/mx/containers/TabNavigator.as
flex/sdk/trunk/frameworks/projects/framework/src/mx/containers/Tile.as
flex/sdk/trunk/frameworks/projects/framework/src/mx/containers/VBox.as
flex/sdk/trunk/frameworks/projects/framework/src/mx/containers/ViewStack.as

Hi DST
This is a great effort and gesture. thank you on behalf of all the newbies.
PJ

Can you move an object in a spark panel?

I have an empty spark panel that I add two object to. After I add them, I want to perform a move operation to split them apart over a duration. It seems that my move operation has no effect.
My panel declration is as follows:
<s:Panel id="nodeExplorer" backgroundColor="0xFFFFFF" creationComplete="hidePanelHeader(event)" height="100%">
          <s:layout>
               <s:VerticalLayout>
                    <s:verticalAlign>middle</s:verticalAlign>
                    <s:gap>0</s:gap>
               </s:VerticalLayout>
          </s:layout>
          <s:Group id="explorerGroup">
          </s:Group>
     </s:Panel>
My add and move function look like the following:
public function exploreNode(image:Image):void {
     image.parent.removeChild(image);
     var topImage:BitmapImage = new BitmapImage();
     topImage.source=(new P7TopImage() as Bitmap).bitmapData;
     var bottomImage:BitmapImage = new BitmapImage();
     bottomImage.source=(new P7BottomImage() as Bitmap).bitmapData;
     nodeExplorer.addElement(topImage);
     nodeExplorer.addElement(bottomImage);
     var parallelMove:Parallel = new Parallel();
     var topMove:Move = new Move(topImage);
     topMove.yBy=-50;
     var bottomMove:Move = new Move(bottomImage);
     bottomMove.yBy=50;
     parallelMove.children = [topMove,bottomMove];
     parallelMove.duration = 4000;
     parallelMove.play();
Any idea on how I can make those images move?

I would guess the layout of the panel is forcing them back
try it with basic layout
Most definitly.
I assumed he was adding to the Group without a layout. I guess I should learn to read more carefully.

SDK trunk build 11499 breaks spark panel.

SDK trunk build 11499
breaks spark panel when skinned with a skin that has no titleDisplay label
I think it’s because;
the changehange doesnt take into account the fact that titleDisplay isnt a required skinPart
I may be wrong here tho, thats why i havent posted a bug on jira yet

Hi Peter,
The last time I did a build of the sdk was on the code just before you had the mini-freeze and all was perfect, When I first set up the work space there was a netmon error, When I pointed to netmon.swc I got a spark.swc warning so I removed netmon.
As mentioned in another post the co-ordinates for a component are correctly stored just not used for the design mode canvas, I was going to d/l the nightly build but I see that it has caused others the same problem.
Anyway I suppose its a bit irrelevant, as this beta has now expired.
David.

Spark panel title height?

How do you read the height of the title bar in a Spark panel?
I expect this example to work, but it doesn't.
http://blog.flexexamples.com/2010/07/25/setting-the-header-height-on-a-spark-panel-contain er-in-flex-4/
The panel.titleDisplay does not have a height property.

Use Viewport and Id VGroup:
<s:VScrollBar id="bar" viewport="{exmp}" height="100%"/>

Modifying default spark panel skin's id=contentGroup not working

Hello,
I'm modifying the default "spark.skins.spark.PanelSkin" and then applying this tailored Panel skin to my panel component. I want to be able to create a left, right, and bottom constraint of 10px to the "contentGroup" --this is all.
However, I am finding this task near impossible. I'm changing:
<s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0">
            </s:Group>
To:
<s:Group id="contentGroup" left="10" right="10" top="10" bottom="10" width="100%" height="100%" minWidth="0" minHeight="0">
            </s:Group>
However, this does NOT work. Alternatively, modifying it's "contentGroup"s parent... "contents"... from:
<s:Group id="contents">
To:
<s:Group left="10" right="10" left="10" top="10" bottom="10" id="contents">
does NOT work either.
Can someone please tell me how to make the "contentGroup" have a 10px padding around WITHOUT changing the title bar?? Thanks in advance

I believe your first attempt isn't working because you are defining both a width/height size and top/left/right/bottom constraints (the width/height take precendence)
Your second attempt isn't working because the "contents" Group is in a VerticalLayout which doesn't respect top/left/bottom/right constraints.
EDIT:
Actually setting the left/right/top/bottom on "contents" doesn't have any effect because at the top of the skin file the override of updateDisplayList() sets them to zero. If you change those two lines from 0 to 10 it should have an effect, but not the one you are looking for. I suggest this approach:
Try wrapping the contentGroup in another Group that has width/height of 100% and set the top/left/right/bottom on the contentGroup:
            
            <s:Group id="padding" width="100%" height="100%">
                <s:Group id="contentGroup" top="10" left="10" right="10" bottom="10" minWidth="0" minHeight="0">
                </s:Group>
            </s:Group>
Message was edited by: Shongrunden

GetCharIndexAtPoint() equivalent in Spark RichEditableText

I want to find a way to get the character index in a Spark based RichEditableText based on mouse x, y position.
The mx.controls.TextArea has a protected getCharIndexAtPoint() method but I can't find an equivalent of this in the Spark RichEditableText which is disappointing.
Any ideas or recommendations?

There is a tlf_internal function you can use to do this. If you can get the textFlow (I think this is the RichEditableText.content), you can call:
import flashx.textLayout.edit.SelectionManager;
import flashx.textLayout.tlf_internal;
use namespace tlf_internal;
SelectionManager.computeSelectionIndex(textFlow:TextFlow, target:Object, currentTarget:Object, localX:Number,localY:Number)
- robin

Spark Panel close button best practice ?

Hello,
I would like to know what is the best practice to add a close button to a Panel and be able to skin it through CSS file ?
If I add a [SkinPart(required="true")] meta data in the extended Panel for the button created in the Skin file, titleField becomes "null" (it is never created in partAdded() ).
Many thanks,

If you're using the beta 1 build, it could be you're running into http://bugs.adobe.com/jira/browse/SDK-21484? If so, try swapping in the mxmlc.jar attached to that bug.
Steve

GetCharBoundaries equivalent in spark text components

Is there an easy way in the new text components to do what getCharBoundaries (in flex.TextField) does? (i.e. get the position of a particular character within a text field)
So far, all I've come across is getAtomBounds in the TextLine class. But I'm not sure how to make use of this from the starting position of a TextArea or other spark component. Before I go delving into this further, is there an obvious way to do this that I've missed. And if not, can anyone give me a lead on how to make use of getAtomBounds from a RichText or other component.
Any help greatly appreciated.

dave,
Good catch! Can you please file a bug at http://bugs.adobe.com/flex/ and include a simple test case (actually, I was able to repro with the test case below if you want to use that code)? (and then post the bug number here so I can subscribe and assign to the correct person).
You can see from the code below that the flowComposer seems to be null by default, but if you edit the code you will get a flowComposer object back.
<?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/halo">
    <s:layout>
        <s:VerticalLayout paddingLeft="20" paddingTop="20" />
    </s:layout>
    <fx:Script>
        <![CDATA[
            import mx.utils.ObjectUtil;
            private function init():void {
                debug.text = ObjectUtil.toString(richEdTxt.textFlow.flowComposer);
                btn.enabled = false;
        ]]>
    </fx:Script>
    <s:RichEditableText id="richEdTxt" change="btn.enabled = true;">
        <s:textFlow>
            <s:TextFlow>
                <s:p>The quick brown <s:span fontWeight="bold">fox jumps over</s:span> the lazy dog</s:p>
            </s:TextFlow>
        </s:textFlow>
    </s:RichEditableText>
    <s:Button id="btn" label="get flowComposer" click="init();" />
    <s:TextArea id="debug" width="550" height="300" />
</s:Application>
Thanks,
Peter

How to round bottom corners of a spark panel?

Title says it all!

FlexExamples - invaluable source - should help you: http://blog.flexexamples.com/2010/04/27/setting-the-corner-radius-on-the-spark-titlewindow -container-in-flex-4/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+FlexExamp les+%28Flex+Examples%29
Read the comments.
Once again, thank you, Peter.
FTQuest

FLEX panel header gradient

Does anyone know how to apply a header gradient to a Panel container?
The only info I have found about this is here:
http://stackoverflow.com/questions/1215433
^ And I do not see a solution? I know some of the themes apply gradients to panel headers, but is there a way to do this in CSS?

I am looking at the GraphiteGraphical PanelSkin. I no longer use this theme in my application, BUT, it did produce gradients on the panel headers (as desired).
Here is the PanelSkin definition:
<?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:fb="http://ns.adobe.com/flashbuilder/2009" blendMode="normal" mouseEnabled="false"
    minWidth="131" minHeight="127" alpha.disabled="0.5" alpha.disabledWithControlBar="0.5">
    <fx:Metadata>
        <![CDATA[
        * @copy spark.skins.spark.ApplicationSkin#hostComponent
        [HostComponent("spark.components.Panel")]
        ]]>
    </fx:Metadata>
    <fx:Script fb:purpose="styling">
         * @private
        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
            if (getStyle("borderVisible") == true)
                border.visible = true;
                background.left = background.top = background.right = background.bottom = 1;
                contents.left = contents.top = contents.right = contents.bottom = 1;
            else
                border.visible = false;
                background.left = background.top = background.right = background.bottom = 0;
                contents.left = contents.top = contents.right = contents.bottom = 0;
            dropShadow.visible = getStyle("dropShadowVisible");
            var cr:Number = getStyle("cornerRadius");
            if (cornerRadius != cr)
                cornerRadius = cr;
                var withControls:Boolean =
                    (currentState == "disabledWithControlBar" ||
                     currentState == "normalWithControlBar");
                dropShadow.tlRadius = cornerRadius;
                dropShadow.trRadius = cornerRadius;
                dropShadow.blRadius = withControls ? cornerRadius : 0;
                dropShadow.brRadius = withControls ? cornerRadius : 0;
                setPartCornerRadii(topMaskRect, withControls);
                setPartCornerRadii(border, withControls);
                setPartCornerRadii(background, withControls);
            if (bottomMaskRect) setPartCornerRadii(bottomMaskRect, withControls);
            borderStroke.color = getStyle("borderColor");
            borderStroke.alpha = getStyle("borderAlpha");
            backgroundFill.color = getStyle("backgroundColor");
            backgroundFill.alpha = getStyle("backgroundAlpha");
            super.updateDisplayList(unscaledWidth, unscaledHeight);
         * @private
        private function setPartCornerRadii(target:Rect, includeBottom:Boolean):void
            target.topLeftRadiusX = cornerRadius;
            target.topRightRadiusX = cornerRadius;
            target.bottomLeftRadiusX = includeBottom ? cornerRadius : 0;
            target.bottomRightRadiusX = includeBottom ? cornerRadius : 0;
        private var cornerRadius:Number;
    </fx:Script>
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
        <s:State name="normalWithControlBar" stateGroups="withControls" />
        <s:State name="disabledWithControlBar" stateGroups="withControls" />
    </s:states>
    
    <s:RectangularDropShadow id="dropShadow" blurX="20" blurY="20" alpha="0.32" distance="11"
                             angle="90" color="#000000" left="0" top="0" right="0" bottom="0"/>
    
    <s:Group left="0" right="0" top="0" bottom="0">
        
        <s:Group left="3" top="3" right="3" bottom="3" id="topGroupMask" >
            <s:Rect id="topMaskRect" left="0" top="0" right="0" bottom="0">
                <s:fill>
                    <s:SolidColor alpha="1"/>
                </s:fill>
            </s:Rect>
        </s:Group>
        
        <s:Group left="0" top="0" right="0" bottom="0" id="bottomGroupMask"
                 includeIn="normalWithControlBar, disabledWithControlBar">
            <s:Rect id="bottomMaskRect" left="0" top="0" right="0" bottom="0">
                <s:fill>
                    <s:SolidColor alpha="1"/>
                 </s:fill>
            </s:Rect>
        </s:Group>
        
        <s:Rect id="border" left="0" right="0" top="0" bottom="0" >
            <s:stroke>
                <s:SolidColorStroke id="borderStroke" weight="1" />
            </s:stroke>
        </s:Rect>
        
        
        <s:Rect id="background" left="1" top="1" right="1" bottom="1">
            <s:fill>
                
                <s:SolidColor id="backgroundFill" />
            </s:fill>
        </s:Rect>
        
        
        <s:Group left="1" right="1" top="1" bottom="1" id="contents">
            <s:layout>
                <s:VerticalLayout gap="0" horizontalAlign="justify" />
            </s:layout>
            <s:Group id="topGroup" mask="{topGroupMask}">
                
                <s:Rect id="tbFill" left="0" right="0" top="0" bottom="0">
                    <s:fill>
                        <s:LinearGradient rotation="90">
                            <s:GradientEntry color="0x696a69" />
                            <s:GradientEntry color="0x282828" />
                        </s:LinearGradient>
                    </s:fill>
                </s:Rect>
                
                
                <s:Label id="titleDisplay" maxDisplayedLines="1"
                         left="9" right="3" top="1" bottom="0" minHeight="30"
                         verticalAlign="middle" fontWeight="bold">
                </s:Label>
            </s:Group>
            
            <s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0">
            </s:Group>
            <s:Group id="bottomGroup" minWidth="0" minHeight="0"
                     includeIn="normalWithControlBar, disabledWithControlBar" >
                <s:Group left="0" right="0" top="0" bottom="0" mask="{bottomGroupMask}">
                    
                    <s:Rect left="0" right="0" top="0" height="1" alpha="0.22">
                        <s:fill>
                            <s:SolidColor color="0x000000" />
                        </s:fill>
                    </s:Rect>
                    
                    <s:Rect left="0" right="0" top="1" bottom="0">
                        <s:stroke>
                            <s:SolidColorStroke color="0x282828" />
                        </s:stroke>
                    </s:Rect>
                    
                    <s:Rect left="1" right="1" top="2" bottom="1">
                        <s:fill>
                            <s:SolidColor color="0x696a69" />
                        </s:fill>
                    </s:Rect>
                </s:Group>
                
                <s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="1" minWidth="0" minHeight="0">
                    <s:layout>
                        <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="7" paddingBottom="7" gap="10" />
                    </s:layout>
                </s:Group>
            </s:Group>
        </s:Group>
    </s:Group>
</s:Skin>
^ Where is the gradient being applied to the Panel? I dont really see it?

Building a Spark Component

I'm making a spark component and I've defined my own skinpart which doesn't show up in Flash Builder's design view. When I run the app it works fine. I'm basically using Panel and PanelSkin as a guide. For debug purposes... I just took the panelskin and renamed the controlbar to header, but it still doesn't show up in design view Anyone have any suggestions?
I'm posting code below... but this forum kinda killed all my code formatting
Console.as
package
     import flash.utils.describeType;
     import mx.core.mx_internal;
     import mx.utils.BitFlagUtil;
     import spark.components.Button;
     import spark.components.Group;
     import spark.components.SkinnableContainer;
     import spark.components.supportClasses.SkinnableComponent;
     import spark.layouts.supportClasses.LayoutBase;
     use namespace mx_internal;
     public class Console extends SkinnableContainer
          protected const CONSOLE_HEADER:String = 'consoleHeader';
          protected static const HEADER_PROPERTY_FLAG:uint = 1 << 0;
          protected static const LAYOUT_PROPERTY_FLAG:uint = 1 << 1;
          protected static const VISIBLE_PROPERTY_FLAG:uint = 1 << 2;
          [SkinPart(required="false")]
          public var headerGroup:Group;
          mx_internal var headerGroupProperties:Object = { visible: true };
          [ArrayElementType("mx.core.IVisualElement")]
          public function get headerContent():Array
               if (headerGroup)
                    return headerGroup.getMXMLContent();
               else
                    return headerGroupProperties.headerContent;
          public function set headerContent(value:Array):void
               if (headerGroup)
                    headerGroup.mxmlContent = value;
                    headerGroupProperties = BitFlagUtil.update(headerGroupProperties as uint,
                         HEADER_PROPERTY_FLAG, value != null);
               else
                    headerGroupProperties.headerContent = value;
               invalidateSkinState();
          public function get headerLayout():LayoutBase
               return (headerGroup)
               ? headerGroup.layout
                    : headerGroupProperties.layout;
          public function set headerLayout(value:LayoutBase):void
               if (headerGroup)
                    headerGroup.layout = value;
                    headerGroupProperties = BitFlagUtil.update(headerGroupProperties as uint,
                         LAYOUT_PROPERTY_FLAG, true);
               else
                    headerGroupProperties.layout = value;
          public function get headerVisible():Boolean
               return (headerGroup)
               ? headerGroup.visible
                    : headerGroupProperties.visible;
          public function set headerVisible(value:Boolean):void
               if (headerGroup)
                    headerGroup.visible = value;
                    headerGroupProperties = BitFlagUtil.update(headerGroupProperties as uint,
                         VISIBLE_PROPERTY_FLAG, value);
               else
                    headerGroupProperties.visible = value;
               invalidateSkinState();
               if (skin)
                    skin.invalidateSize();
          override protected function partAdded(partName:String, instance:Object):void
               super.partAdded(partName, instance);
               if (instance == headerGroup)
                    // copy proxied values from headerGroupProperties (if set) to headerGroup
                    var newHeaderGroupProperties:uint = 0;
                    if (headerGroupProperties.headerContent !== undefined)
                         headerGroup.mxmlContent = headerGroupProperties.headerContent;
                         newHeaderGroupProperties = BitFlagUtil.update(newHeaderGroupProperties,
                              HEADER_PROPERTY_FLAG, true);
                    if (headerGroupProperties.visible !== undefined)
                         headerGroup.visible = headerGroupProperties.visible;
                         newHeaderGroupProperties = BitFlagUtil.update(newHeaderGroupProperties,
                              VISIBLE_PROPERTY_FLAG, true);
                    headerGroupProperties = newHeaderGroupProperties;
          override protected function partRemoved(partName:String, instance:Object):void
               super.partRemoved(partName, instance);
          override protected function getCurrentSkinState():String
               var state:String = enabled ? "normal" : "disabled";
               if (headerGroup)
                    if (BitFlagUtil.isSet(headerGroupProperties as uint, HEADER_PROPERTY_FLAG) &&
                         BitFlagUtil.isSet(headerGroupProperties as uint, VISIBLE_PROPERTY_FLAG))
                         state += "WithHeader";
               else
                    if (headerGroupProperties.headerContent &&
                         headerGroupProperties.visible)
                         state += "WithHeader";
               return state;
ConsoleSkin
<?xml version="1.0" encoding="utf-8"?>


<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
                xmlns:fb="http://ns.adobe.com/flashbuilder/2009" blendMode="normal" mouseEnabled="false"
                minWidth="131" minHeight="127" alpha.disabled="0.5" alpha.disabledWithHeader="0.5">
     <fx:Metadata>
          <![CDATA[
          * @copy spark.skins.spark.ApplicationSkin#hostComponent
          [HostComponent("com.vmware.vmc.view.components.VMConsole")]
          ]]>
     </fx:Metadata>
     <fx:Script fb:purpose="styling">
          /* Define the skin elements that should not be colorized.
          For panel, border and title background are skinned, but the content area and title text are not. */
          static private const exclusions:Array = ["background", "titleDisplay", "contentGroup", "headerGroup"];
           * @private
          override public function get colorizeExclusions():Array {return exclusions;}
           * @private
          override protected function initializationComplete():void
               useChromeColor = true;
               super.initializationComplete();
           * @private
          override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
               if (getStyle("borderVisible") == true)
                    border.visible = true;
                    background.left = background.top = background.right = background.bottom = 1;
                    contents.left = contents.top = contents.right = contents.bottom = 1;
               else
                    border.visible = false;
                    background.left = background.top = background.right = background.bottom = 0;
                    contents.left = contents.top = contents.right = contents.bottom = 0;
               dropShadow.visible = getStyle("dropShadowVisible");
               var cr:Number = getStyle("cornerRadius");
               var withHeader:Boolean =
                    (currentState == "disabledWithheader" ||
                         currentState == "normalWithheader");
               if (cornerRadius != cr)
                    cornerRadius = cr;
                    dropShadow.tlRadius = cornerRadius;
                    dropShadow.trRadius = cornerRadius;
                    dropShadow.blRadius = withHeader ? cornerRadius : 0;
                    dropShadow.brRadius = withHeader ? cornerRadius : 0;
                    setPartCornerRadii(topMaskRect, withHeader);
                    setPartCornerRadii(border, withHeader);
                    setPartCornerRadii(background, withHeader);
               if (bottomMaskRect) setPartCornerRadii(bottomMaskRect, withHeader);
               borderStroke.color = getStyle("borderColor");
               borderStroke.alpha = getStyle("borderAlpha");
               backgroundFill.color = getStyle("backgroundColor");
               backgroundFill.alpha = getStyle("backgroundAlpha");
               super.updateDisplayList(unscaledWidth, unscaledHeight);
           * @private
          private function setPartCornerRadii(target:Rect, includeBottom:Boolean):void
               target.topLeftRadiusX = cornerRadius;
               target.topRightRadiusX = cornerRadius;
               target.bottomLeftRadiusX = includeBottom ? cornerRadius : 0;
               target.bottomRightRadiusX = includeBottom ? cornerRadius : 0;
          private var cornerRadius:Number;
     </fx:Script>
     <s:states>
          <s:State name="normal" />
          <s:State name="disabled" />
          <s:State name="normalWithHeader" stateGroups="withHeader" />
          <s:State name="disabledWithHeader" stateGroups="withHeader" />
     </s:states>
     
     
     <s:RectangularDropShadow id="dropShadow" blurX="20" blurY="20" alpha="0.32" distance="11"
                                    angle="90" color="#000000" left="0" top="0" right="0" bottom="0"/>
     
     <s:Group left="0" right="0" top="0" bottom="0">
          
          
          <s:Group left="1" top="1" right="1" bottom="1" id="topGroupMask" >
               
               <s:Rect id="topMaskRect" left="0" top="0" right="0" bottom="0">
                    <s:fill>
                         <s:SolidColor alpha="0"/>
                    </s:fill>
               </s:Rect>
          </s:Group>
          
          
          <s:Group left="1" top="1" right="1" bottom="1" id="bottomGroupMask"
                     includeIn="normalWithHeader, disabledWithHeader">
               
               <s:Rect id="bottomMaskRect" left="0" top="0" right="0" bottom="0">
                    <s:fill>
                         <s:SolidColor alpha="0"/>
                    </s:fill>
               </s:Rect>
          </s:Group>
          
          
          <s:Rect id="border" left="0" right="0" top="0" bottom="0" >
               <s:stroke>
                    
                    <s:SolidColorStroke id="borderStroke" weight="1" />
               </s:stroke>
          </s:Rect>
          
          
          <s:Rect id="background" left="1" top="1" right="1" bottom="1">
               <s:fill>
                    
                    <s:SolidColor id="backgroundFill" color="#FFFFFF"/>
               </s:fill>
          </s:Rect>
          
          
          <s:Group left="1" right="1" top="1" bottom="1" id="contents">
               <s:layout>
                    <s:VerticalLayout gap="0" horizontalAlign="justify" />
               </s:layout>
               
               <s:Group id="topGroup" mask="{topGroupMask}">
                    
                    
                    <s:Rect id="tbFill" left="0" right="0" top="0" bottom="1">
                         <s:fill>
                              <s:LinearGradient rotation="90">
                                   <s:GradientEntry color="0xE2E2E2" />
                                   <s:GradientEntry color="0xD9D9D9" />
                              </s:LinearGradient>
                         </s:fill>
                    </s:Rect>
                    
                    
                    <s:Rect id="tbHilite" left="0" right="0" top="0" bottom="0">
                         <s:stroke>
                              <s:LinearGradientStroke rotation="90" weight="1">
                                   <s:GradientEntry color="0xEAEAEA" />
                                   <s:GradientEntry color="0xD9D9D9" />
                              </s:LinearGradientStroke>
                         </s:stroke>
                    </s:Rect>
                    
                    
                    <s:Rect id="tbDiv" left="0" right="0" height="1" bottom="0">
                         <s:fill>
                              <s:SolidColor color="0xC0C0C0" />
                         </s:fill>
                    </s:Rect>
                    
                    
                    <s:Label id="titleDisplay" maxDisplayedLines="1"
                               left="9" right="3" top="1" bottom="0" minHeight="30"
                               verticalAlign="middle" fontWeight="bold">
                    </s:Label>
               </s:Group>
               
               
               <s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0">
               </s:Group>
               
               <s:Group id="bottomGroup" minWidth="0" minHeight="0"
                          includeIn="normalWithHeader, disabledWithHeader" >
                    <s:Group left="0" right="0" top="0" bottom="0" mask="{bottomGroupMask}">
                         
                         <s:Rect left="0" right="0" top="0" height="1" alpha="0.22">
                              <s:fill>
                                   <s:SolidColor color="0x000000" />
                              </s:fill>
                         </s:Rect>
                         
                         <s:Rect left="0" right="0" top="1" bottom="0">
                              <s:stroke>
                                   <s:LinearGradientStroke rotation="90" weight="1">
                                        <s:GradientEntry color="0xE5E5E5" />
                                        <s:GradientEntry color="0xD8D8D8" />
                                   </s:LinearGradientStroke>
                              </s:stroke>
                         </s:Rect>
                         
                         <s:Rect left="1" right="1" top="2" bottom="1">
                              <s:fill>
                                   <s:LinearGradient rotation="90">
                                        <s:GradientEntry color="0xDADADA" />
                                        <s:GradientEntry color="0xC5C5C5" />
                                   </s:LinearGradient>
                              </s:fill>
                         </s:Rect>
                    </s:Group>
                    
                    
                    <s:Group id="headerGroup" left="0" right="0" top="1" bottom="1" minWidth="0" minHeight="0">
                         <s:layout>
                              <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="7" paddingBottom="7" gap="10" />
                         </s:layout>
                    </s:Group>
               </s:Group>
          </s:Group>
     </s:Group>
</s:SparkSkin>

New forum: http://forums.adobe.com/community/flash_builder

Extend spark dropdownlist button to the longest item in dataprovider ?

Hi,
simple as stated in the thread's title : I cannot figure out a way to have my spark DropDownLists (no particular skin) extend their width to their longest item width ??
For instance the following :
<s:DropDownList id="aglist" width="100%" requireSelection="false"
dataProvider="{model.userAssignedAgents}" labelFunction="agentLabel"
change="aglist_changeHandler(event)" open="{aglist.selectedIndex = -1}"/>
when layed on a simple spark panel gets the standard DDList button width, about 50px whatever its content, though its items are much longer than that. So when the button is clicked, the dropdown menu shows some ugly scrollbars.
Do you have any clue ? I've been stuck for hours trying to do what sounds like the very-standard-way-of-setting-dropdownlist-width to me !
Thanks
Matt

Good point.
The main problem I had with the ComboBox is that I don't want to allow "creation" of new elements, so if the typed text doesn't match any element, instead of selectedIndex of -3 it should just keep the old selection. Plus a few other things.
Thinking about it, this is probably my best choice, and if I were to extend a class it should probably be this one.

Flex 4 Beta 2 and Halo Panels

Hi all.
I'm banging my head against a wall here, and wondered if someone else could help me out!
I'm working on a project which utilises a 3rd party open source control based on Halo Panels. It would take quite a bit of time to re-write this control to be Spark based.
As part of the project spec, the application must be dynamically skinnable to allow easy customisation. This means the look and feel has been done mostly using embedded images within a CSS file, setting background images and other styles that support images. These can be loaded at runtime, and everyone was happy.
Attached is a screenshot called Flex3Screenshot. This shows the look that was desired in the app : "Glossy" panel headers and a light border around the panel.
Then, it was decided that we should be using Flex 4 Beta 2, not the previous 3.4 SDK. (The version I'm using is the standard vanilla 4.0.0.10485)
Mostly, the transition has been OK. I've changed many controls from Halo to Spark as appropriate, but this wasn't possible with the Goozo controls, so we've had to stick with Halo panels as the containers.
I'm now trying to bring back the old "dark" look and feel, and this is where I'm having trouble!
I've attached a massively cut-down FlexBuilder project with a simple style sheet, a single glossy title bar image, and an MXML app with a panel in it.
No matter what I do, I can't get the CSS to work in the same way, because the panel always has a 2 pixel wide border underneath its header. This border is made up of the panels base header colour which has the bitmap put over the top, leaving a small gap.
I can "remove" this, by setting the baseColor property to black, but the baseColor property seems to override the borderColor property, so I don't have borders any more, which "Isn't What We Want"(tm).
Setting the headerColors doesn't seem to work in Flex 4 (I've checked, and it works fine in Flex 3, and if it worked, I could spoof the glossy look by just setting a white to black gradient in the header colours), or set the header colour to black and overlay the image.
I can use the nasty kludge of -theme=${flexlib}/themes/Halo/halo.swc in the command line properties, but that's like admitting defeat! (and I can't guarantee that it will always work!)
Does anyone have any ideas? As far as I'm aware, I should be able to create an MXML skin component (as per http://blog.flexexamples.com/2009/05/02/changing-the-title-bar-background-fill-on-a-spark- panel-container-in-flex-gumbo/), but as far as I know, I won't then be able to dynamically skin it with a CSS file.
Many thanks.
Pete

Hi,
Unfortunately this doesn't have anything to do with the FlexUnit code itself. These are bugs inside of the Flash Builder plugin. You may want to post on their forum as well to try to get some support.
The only advice I can offer, is that things seem to work much better if I consistently use the Execute FlexUnit Tests, which can be found under the run button. They work much less well if I right click and tell it to execute tests.
Mike

Squiggly_p4, problem with Spark Container

Hi,
Environment: Flex SDK 4.5 Hero, Win7 64 bit, Flash Builder 4
Code snippet
<s:Panel>
<mx:TextArea id="myTextArea" width="300" height="200" />
</s:Panel>
<s:TitleWindow>
<mx:TextArea id="myTextArea" width="300" height="200" />
</s:TitleWindow>
Result:
There are no suggestions for thos Halo TextArea if it belongs to Spark Container.
Maybe: ContextMenu is not initialized or not intialized properly.
Thanks,
Jing

This is a known issue with spark panels. Please refer to http://forums.adobe.com/thread/706416?tstart=0
Thanks,
Ravi

ControlBar equivalent in Spark Panel?

Similar Messages

Maybe you are looking for