I have a Flex 4 spark Panel I'm popping up through the PopUpManager, but it has a gray portion at the top I can't get rid of. What is that and how can I remove it?
UPDATE: An example Panel is below. I simply call PopUpManager.addPopUp(new TestPanel(), background, true); on it and receive that solid gray bar above the button.
<s:Panel xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fx="http://ns.adobe.com/mxml/2009"
dropShadowVisible="false"
backgroundAlpha="0"
controlBarVisible="false"
borderVisible="false">
<s:VGroup>
<s:Button label="A button" width="150" height="55"/>
</s:VGroup>
</s:Panel>
So, this is how I did it. I made a custom skin: HeaderlessPanelSkin.as
public class HeaderlessPanelSkin extends PanelSkin {
public function HeaderlessPanelSkin() {
super();
topGroup.includeInLayout = false;
}
}
Then, in the panel, I just reference the new skin: skinClass="HeaderlessPanelSkin"
That should do it :)
Create new skin, and in the panel declaration use it... like so
File->New MXML Skin, Host Component is panel.
Edit the Skin properties to change it how you like, in this case the gradient colors on the header.
Sounds like the Panel TitleBar
Create a custom skin and style the title bar how you want it to appear.
Related
I'm trying to make a compact colorPicker with a limited number of colors. I've been able to do most of it but I can't find the property to set the size of the background panel.
Is this exposed to styling or programmatic control?
<fx:Script>
<![CDATA[
[Bindable]
public var simpleDP:Array = ['0x000000', '0xFF0000', '0xFF8800',
'0xFFFF00', '0x88FF00', '0x00FF00', '0xFF00FF', '0xFFFFFF'];
]]>
</fx:Script>
<fx:Style>
.mySwatchPanel {
backgroundColor:#E5E6E7;
columnCount:10;
horizontalGap:0;
previewHeight:20;
previewWidth:20;
swatchGridBackgroundColor:#000000;
swatchGridBorderSize:0;
swatchHeight:20;
swatchWidth:20;
swatchHighlightColor:#FFFFFF;
swatchHighlightSize:1;
textFieldWidth:72;
verticalGap:0;
paddingBottom:0;
}
</fx:Style>
<mx:ColorPicker id="colorPicker"
swatchPanelStyleName="mySwatchPanel"
dataProvider="{simpleDP}"
showTextField="false"
width="40" height="40"/>
You can resize the ColorPicker's SwatchPanel using the default style properties that are defined by the swatchPanelStyleName like this for example :
<fx:Style>
.mySwatchPanel {
backgroundColor:#E5E6E7;
swatchHighlightColor:#FFFFFF;
swatchHighlightSize:0;
swatchGridBorderSize:0;
swatchGridBackgroundColor:#000000;
textFieldWidth:0;
previewHeight:20;
previewWidth:20;
columnCount:3;
swatchHeight:20;
swatchWidth:20;
paddingBottom:2;
paddingTop:2;
paddingLeft:2;
paddingRight:2;
horizontalGap:0;
verticalGap:0;
}
</fx:Style>
this style will give you something like this :
of course you can play with these properties to get the size that you want, but don't forget that the default minimum size of the SwatchPanel is 100x100px.
But to overpass this limitation, you can use mx.core.mx_internal like this for example :
<mx:ColorPicker id="colorPicker" width="40" height="40" dataProvider="{simpleDP}"
showTextField="false" swatchPanelStyleName="mySwatchPanel"
open="colorPicker_openHandler(event)" />
and
protected function colorPicker_openHandler(event:DropdownEvent):void
{
// resize the SwatchPanel once then remove the event listener
colorPicker.mx_internal::dropdown.mx_internal::setUnscaledWidth(62);
colorPicker.mx_internal::dropdown.mx_internal::setUnscaledHeight(85);
ColorPicker(event.target).removeEventListener('open', colorPicker_openHandler);
}
which will give you something like this :
Hope that can help.
See the swatchPanelStyleName style property, it must helps.
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/controls/ColorPicker.html
i have 2 event
one is list change
one is button click
I want to click button but sometimes click list item
how to fix , thanks
image http://img.my.csdn.net/uploads/201112/21/0_1324478869TXbz.gif
<?xml version="1.0" encoding="utf-8"?>
<s:IconItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
labelField="title"
messageField="message"
iconField="ico"
iconWidth="64"
iconHeight="64"
initialize="init()">
<fx:Script>
<![CDATA[
import spark.components.Button;
private var delButton:Button;
private function init():void{
if(!delButton){
delButton=new Button();
delButton.addEventListener(MouseEvent.CLICK,handleClick);
delButton.x=this.parent.width-70;
delButton.y=20;
delButton.height=30;
delButton.width=50;
delButton.label="aa";
this.addChild(delButton);
}
}
private function handleClick(event:MouseEvent):void{
}
]]>
</fx:Script>
</s:IconItemRenderer>
I didn't use flex components and I'm not sure exactly how you add childs to them but the general idea is that you draw transparent rects on the top of the components that are not overlaping and add event listeners to those rects instead of to components directly - that way you won't miss your button.
I want to add scrollbar to the flex tootip. So i created custom tool tip. Below is the code snippet. Problem i am facing is that as soon as i move the mouse on the custom component tooltip, the custom component tooltip disppear. i have alse set the ToolTipManager.hideDelay = Infinity. I want to use the scrollbar of the cutom tool tip.
I do not want the custom tool top to hide till i move the mouse outside the custom tool tip component.Currently it hide itself once i move the mouse outside the label. How to control the destroy of tool tip.
<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="100%"
height="100%"
implements="mx.core.IToolTip">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
private var _bodyText:String = "";
[Bindable]
public function get bodyText():String
{
return _bodyText;
}
public function set bodyText(value:String):void
{
_bodyText = value;
text = value;
}
private var _text:String;
public function get text():String
{
return _text;
}
public function set text(value:String):void
{
_text = value;
}
]]>
</fx:Script>
<s:Scroller width="100%" height="200">
<s:RichEditableText text="{bodyText}" width="100%" height="100%" color="red"/>
</s:Scroller>
</s:Group>
and i add this cutom tooltip on mx:label component on toolTipCreate event.
protected function label1_toolTipCreateHandler(event:ToolTipEvent):void
{
ScrollableToolTip ptt = new ScrollableToolTip();
ptt.bodyText = data.notes;
ptt.height = 300;
ptt.width = 100;
event.toolTip = ptt;
}
Any pointers..
Thanks
Raj
Instead of relying on the flex tooltip, you may want to add a popup on mouse roll over and deal with it that way, ofcoz you have to deal with the positioning of the popup later on, but I think this will give you a lot of flexibility later on.
How do I add effects (shadow, glow) to all letters in the component TextArea (Spark 4)?
I see it is an old question, but since i fell in the same problem today i'm posting my solution.
You can access to the RichEditableText component of the TextArea using textDisplay as stated here:
The RichEditableText can be accessed as textDisplay and the Scroller
as scroller
RichEditableText is extended from UIComponent, so filters, which can be applied to UIComponents ("You can apply filters to any visual component that is derived from UIComponent"), can be applied to it.
In order to apply, for example, a DropShadowFilter to all letters in the component myTextArea:TextArea i have used the following lines of code:
var richTextComponent:UIComponent = myTextArea.textDisplay as UIComponent;
var shadow:spark.filters.DropShadowFilter = new spark.filters.DropShadowFilter;
richTextComponent.filters = [shadow];
Hope this helps someone :-)
I don't think you can do it using Flex (or at least I never have). You would need to do it using AS3
<s:Label id="label1" text="Shadow Me" />
<fx:Script>
<![CDATA[
import flash.filters.*;
private function creationComplete():void{
var dropshadow:DropShadowFilter = new DropShadowFilter( 3,90,0x000000,.5,4,4,3,3 );
this.label1.filters = [ dropshadow ];
}
]]>
</fx:Script>
contentBackgroundAlpha="0" borderVisible="false"
By using Filter class we can apply shadow glow effect for a s:TextArea component. The sample code is:
<s:TextArea contentBackgroundAlpha="0" borderAlpha="0">
<s:filters>
<s:DropShadowFilter distance="5" angle="45" color="#666666"/>
</s:filters>
<s:content>
Testing text area content
</s:content>
</s:TextArea>
Refer the link http://www.roseindia.net/tutorial/flex/flex4/components/filters.html for applying more filters (DropShadowFilter, GlowFilter, BlurFilter and BevelFilter).
Just add a skin to your TextArea component then add a shadow to the RichEditableText inside the skin.
<fx:Declarations>
<s:DropShadowFilter id="shadow2"/>
</fx:Declarations>
<s:RichEditableText id="textDisplay" heightInLines="10" widthInChars="15" filters="{[shadow2]}"/>
It worked for me, you have just to adjust the shadow to have a nice look.
This question is similar to the post:
"Move Button into grid space of a TabNavigator’s tabs in Flex Builder."
Move Button into grid space of a TabNavigator's tabs in Flex Builder
but with a slight difference. I wish to have a button that adds a child (tab) to the TabNavigator in the grid space (simpler with TabBar, but see below), but will not block tabs as they extend towards the button. This functionality can be seen in every web browser that uses tabs.
In addition I would like to have a scroll button appear if too many tabs are opened, and the ability to close tabs. I have tried using Doug McCune's SuperTabNavigator, which offers most of these features, but it does not offer the addChild button that I am looking for.
Is there a way to add this 'addChild' button to the grid space, or to add the features from SuperTabNavigator to TabBar?
This class will do the trick except for scrolling when there are too many tabs.
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="500" height="400">
<mx:HBox width="100%">
<mx:TabBar dataProvider="{viewstack}"/>
<mx:Button label="+" width="35" click="addTab()"/>
</mx:HBox>
<mx:ViewStack height="100%" width="100%" id="viewstack"/>
<mx:Script>
<![CDATA[
import mx.controls.Label;
import mx.containers.Panel;
//add a new container
private function addTab():void
{
var l:Label = new Label();
l.text = "Panel " + (viewstack.numChildren + 1);
var p:Panel = new Panel();
p.label = l.text;
p.addChild(l);
viewstack.addChild(p);
viewstack.selectedChild = p;
}
]]>
</mx:Script>
</mx:VBox>