I have trying to skin TabBar and NavigatorContent.
Please see image for explanation - All tabs are transparent (alpha 0.6) and also their borders.
How can I remove top border from NavigatorContent under selected buttonTab ?
How its must be:
Trying to use BlendMode.ERASE:
Application code:
...
<s:SkinnableContainer blendMode="layer" ... skinClass="skins.TabBorder">
<mx:ViewStack ...>
<s:NavigatorContent label="Search" skinClass="skins.TabSkin" />
<s:NavigatorContent label="Customer Info" skinClass="skins.TabSkin" />
</mx:ViewStack>
<s:TabBar dataProvider="{myViewStack}" ... />
</s:SkinnableContainer>
...
skins.TabBorder:
<s:Rect left="0" right="0" top="25" bottom="0" radiusX="6" topLeftRadiusX="0">
<s:stroke>
<s:SolidColorStroke color="#ffffff" alpha="0.3" />
</s:stroke>
</s:Rect>
skins.TabBarButtunSkin:
<!-- its black rect which clears all under -->
<s:Rect blendMode="erase" top="0" left="0" right="0" bottom="-2" topLeftRadiusX="6" topRightRadiusX="6" includeIn="selectedStates, overStates">
<s:fill>
<s:SolidColor color="#000000" />
</s:fill>
</s:Rect>
Perhaps there is an easier way?
<... borderSides=”left bottom right” borderStyle=”solid” borderThickness=”1″ ...>
also you can write your own skin
or extend the component itself
Related
I have a skinnableContainer that acts as a container for other drag and droppable items. This container's drop functionality is added from it's parent at the same moment the container is added.
This all works fine until I add a skin class to the skinnableContainer, now none of the draggable items can drop into the container as it did before.
I assume that the Group component wrapping the content from within the skin is acting as a block somehow, but I'm not sure how to allow the drop functionality through it?
Any ideas?
EDIT skin code below:
<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:s="library://ns.adobe.com/flex/spark" alpha.disabled="0.5">
<fx:Metadata>
[HostComponent("spark.components.SkinnableContainer")]
</fx:Metadata>
<s:states>
<s:State name="normal" />
<s:State name="disabled" />
</s:states>
<!-- layer 1: border -->
<s:Rect left="0" right="0" top="0" bottom="0" radiusX="5" radiusY="5">
<s:stroke>
<s:SolidColorStroke color="0" alpha="0.50" weight="1" />
</s:stroke>
</s:Rect>
<s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" >
<s:layout>
<s:VerticalLayout/>
</s:layout>
</s:Group>
</s:Skin>
Your custom skin has no background fill, hence it's completely transparent except for the border. Because of this there is no "hitzone" to drop your items on (right now you will probably be able to drop them if you target exactly that 1px border).
The solution - obviously - is to give it a fill. No worries, if you want it to look transparent, just set its alpha to 0.
<s:Rect left="0" right="0" top="0" bottom="0" radiusX="5" radiusY="5">
<s:fill>
<s:SolidColor alpha="0" />
</s:fill>
<s:stroke>
<s:SolidColorStroke alpha="0.50" />
</s:stroke>
</s:Rect>
I attempted to build a Flex 4 skin for a Spark button, typical practice. I adjusted the colors and other styles to my liking, including using dot selectors to specify alternate colors and such during different states. However, these are all ignored when the button is disabled. Regardless of what I do, in the disabled state, my button always has the wrong color and is alpha'd to 0.5 (even if I specifically state that alpha.disabled="1"). All the other skin states work as expected. What is going on here?
This is my custom skin. If it were working correctly, it would appear to have no shadow or highlight, and would be a gradient grey color. Instead, it appears as a 50% alpha version of the up state (shiny green).
<?xml version="1.0" encoding="utf-8"?>
<s:SparkButtonSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
minWidth="21" minHeight="21" alpha.disabled="1">
<fx:Metadata>
<![CDATA[
[HostComponent("spark.components.Button")]
]]>
</fx:Metadata>
<s:states>
<s:State name="up" />
<s:State name="over" />
<s:State name="down" />
<s:State name="disabled" />
</s:states>
<s:Rect id="backgroundAndShadow" left="0" right="0" top="0" bottom="0" radiusX="5" radiusY="5">
<s:filters>
<s:DropShadowFilter blurX="5" blurY="5" blurX.down="3" blurY.down="3" alpha="0.5" distance="1" distance.down="0" angle="90" excludeFrom="disabled" />
</s:filters>
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color.up="#00AD00" color="#007A00" color.disabled="#cccccc" />
<s:GradientEntry color.up="#29FF29" color="#00F500" color.disabled="#bbbbbb" />
</s:LinearGradient>
</s:fill>
</s:Rect>
<s:Rect id="highlight" left="1" right="1" top="1" height="50%" topLeftRadiusX="4" topLeftRadiusY="4" topRightRadiusX="4" topRightRadiusY="4" excludeFrom="disabled">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="#ffffff" alpha="0.8" />
<s:GradientEntry color="#ffffff" alpha="0.3" />
</s:LinearGradient>
</s:fill>
</s:Rect>
<s:Label id="labelDisplay"
textAlign="center"
horizontalCenter="0" verticalCenter="1" verticalAlign="middle"
color="#ffffff" color.disabled="#555555"
fontWeight="bold"
left="2" right="2" top="2" bottom="2">
<s:filters>
<s:DropShadowFilter blurX="3" blurY="3" alpha="0.5" distance="1" distance.down="0" angle="90" excludeFrom="disabled" />
</s:filters>
</s:Label>
</s:SparkButtonSkin>
I also did this with an automatically generated skin for the Button using Flash Builder's skin creation wizard/dialog. Even then, specifically setting the alpha to 1 in disabled mode had no effect.
Edit
This is the code used to create and then disable the button:
_action1Button = new Action1Button();
view.actionGroup.addElement(_action1Button);
_action1Button.enabled = false;
The error was that _action1Button is not the actual button, rather, it's the container of the button. Doh! Switching it to _action1Button.actionButton.enabled = false; fixed the issue.
Your skin works fine for me. I get a green button in the enabled state then a grey gradient without drop shadow when enabled is false. I tested it like this (where TestSkin is your skin posted above):
<s:Button skinClass="TestSkin" enabled="false" />
I assume the problem has to do with how you are using the skin. Can you post the code where the button itself is defined?
I'm a Flex newbie and am porting a pure Flash/AS3 application to Flex 4.5.
In my original Flash/AS3 application I had a Sprite acting as a background. I put it underneath all other DisplayObjects and fill it with a linear gradient of random color. It looked good and seemed to work well with Flash Components (Buttons, Checkboxes, TexFields), because they are transparent.
So in my new Flex program (with BasicLayout), I've tried creating a Rect too:
<s:Rect left="0" top="0" right="0" bottom="0">
<s:stroke>
<s:LinearGradientStroke id="_bgcolor" rotation="90" weight="1">
<s:GradientEntry color="0x33FFFF" alpha="0.55" />
<s:GradientEntry color="0x99FFFF" alpha="0.2475" />
</s:LinearGradientStroke>
</s:stroke>
</s:Rect>
But this doesn't work well, the Rect is obscured by the other Flex components:
Is there a quick way of adding a backround gradient to a Flex application (something as simple as backgroundColor="#CCCCCC") or do I have to study "skinning docs" (and will skinning of an Application help here, since the problem seems to be that the Flex components are opaque?)
Looks like the default white background overlays your custom Rect.
Try adding contentBackgroundAlpha="0" to hide the component background without messing with skins.
You used <stroke> instead of <fill>
<s:Rect left="0" top="0" right="0" bottom="0">
<s:fill>
<s:LinearGradient id="_bgcolor" rotation="90">
<s:GradientEntry color="0x33FFFF" alpha="0.55" />
<s:GradientEntry color="0x99FFFF" alpha="0.2475" />
</s:LinearGradient>
</s:fill>
</s:Rect>
You're missing content group
<s:Group id="chrome" left="0" right="0" top="0" bottom="0" visible.closedGroup="false">
<s:Rect left="0" top="0" right="0" bottom="0">
<s:fill>
<s:LinearGradient id="_bgcolor" rotation="90">
<s:GradientEntry color="0x33FFFF" alpha="0.55" />
<s:GradientEntry color="0x99FFFF" alpha="0.2475" />
</s:LinearGradient>
</s:fill>
</s:Rect>
<s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" minWidth="0" minHeight="0">
<s:layout>
<s:BasicLayout/>
</s:layout>
</s:Group>
</s:Group>
I need to round at only the top or bottom of a border container not all four corners, is their some CSS that I can use or do I have to create two new skins. I was reading their used to be a property for this for HBox back in the old days, is their not a property for BorderContainer now?
With BorderContainer you can't. However, the visual effect you want to achieve can easily be created with SkinnableContainer and a custom skin. In fact BorderContainer is just a specific form of SkinnableContainer.
So instead of BorferContainer create a SkinnableContainer with property 'skinClass':
<s:SkinnableContainer left="0" right="0" top="0" bottom="0"
skinClass="my.app.skins.TopRoundedCornerSkin">
<!--- your components go here --->
</s:SkinnableContainer>
Then create the skin class TopRoundedCornerSkin.mxml like so:
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Metadata>
[HostComponent("spark.components.SkinnableContainer")]
</fx:Metadata>
<s:states>
<s:State name="normal" />
<s:State name="disabled" />
</s:states>
<s:Rect id="background" left="0" right="0" top="0" bottom="0"
topLeftRadiusX="10" topLeftRadiusY="10"
topRightRadiusX="10" topRightRadiusY="10">
<s:fill>
<s:SolidColor color="0xffffff" />
</s:fill>
<s:stroke>
<s:SolidColorStroke color="0x000000" />
</s:stroke>
</s:Rect>
<s:Group id="contentGroup" left="10" right="10" top="10" bottom="10"
minWidth="0" minHeight="0" />
</s:Skin>
On the background rectangle, we set 4 radius properties to create the rounded corner you need.
I'm trying to implement PrintDataGrid in my application and I'm encountering a peculiar problem. The printout is skipping last several rows in the printout of each page.
I have narrowed down to what's causing this issue. My application-level custom skin provides Flex scrolling capability to the entire application. Presence of this scrollbar in the custom skin is causing PrintDataGrid to skip last rows. In fact, number of rows skipped depends on the height of the browser. If you reduce the browser height, you skip more rows!
Is this a bug PrintDataGrid or a restriction (cannot have PrintDataGrid within Scroller) or I'm missing something?
Please help as I'm struggling with this for several days!
Here is simple code to reproduce the issue:
Main Application:
Application custom skin class:ApplicationSkinCustom.mxml
============================================
#see spark.components.Application
#langversion 3.0
#playerversion Flash 10
#playerversion AIR 1.5
#productversion Flex 4
-->
<fx:Metadata>
<![CDATA[
/**
* A strongly typed property that references the component to which this skin is applied.
*/
[HostComponent("spark.components.Application")]
]]>
</fx:Metadata>
<fx:Script fb:purpose="styling">
<![CDATA[
/**
* #private
*/
override protected function updateDisplayList(unscaledWidth:Number,
unscaledHeight:Number) : void
{
bgRectFill.color = getStyle('backgroundColor');
super.updateDisplayList(unscaledWidth, unscaledHeight);
}
]]>
</fx:Script>
<s:states>
<s:State name="normal" />
<s:State name="disabled" />
<s:State name="normalWithControlBar" />
<s:State name="disabledWithControlBar" />
</s:states>
<!-- fill -->
<!---
A rectangle with a solid color fill that forms the background of the application.
The color of the fill is set to the Application's backgroundColor property.
-->
<s:Rect id="backgroundRect" left="0" right="0" top="0" bottom="0" >
<s:fill>
<s:SolidColor id="bgRectFill" color="#FFFFFF"/>
</s:fill>
</s:Rect>
<s:Scroller left="1" top="1" right="1" bottom="1" id="scroller">
<s:Group left="0" right="0" top="0" bottom="0">
<s:layout>
<s:VerticalLayout gap="0" horizontalAlign="justify" />
</s:layout>
<!---
#private
Application Control Bar
-->
<s:Group
id="topGroup"
minWidth="0"
minHeight="0"
includeIn="normalWithControlBar, disabledWithControlBar"
>
<!-- layer 0: control bar highlight -->
<s:Rect left="0" right="0" top="0" bottom="1" >
<s:stroke>
<s:LinearGradientStroke rotation="90" weight="1">
<s:GradientEntry color="0xFFFFFF" />
<s:GradientEntry color="0xD8D8D8" />
</s:LinearGradientStroke>
</s:stroke>
</s:Rect>
<!-- layer 1: control bar fill -->
<s:Rect left="1" right="1" top="1" bottom="2" >
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0xEDEDED" />
<s:GradientEntry color="0xCDCDCD" />
</s:LinearGradient>
</s:fill>
</s:Rect>
<!-- layer 2: control bar divider line -->
<s:Rect left="0" right="0" bottom="0" height="1" alpha="0.55">
<s:fill>
<s:SolidColor color="0x000000" />
</s:fill>
</s:Rect>
<!-- layer 3: control bar -->
<!--- #copy spark.components.Application#controlBarGroup -->
<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>
<!--- #copy spark.components.SkinnableContainer#contentGroup -->
<!--<s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0" />-->
<s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" />
</s:Group>
</s:Scroller>
This is apparently a known bug with the Flex printing library and Scroller controls. You can read about my discussions on this here:
http://forums.adobe.com/message/3626759
The first thing I would try is getting rid of the custom skin, processing your print job, and then re-applying the custom skin. This might do the trick. If that does work, but doesn't look the way you want, then you can work on creating a variant of your custom application skin that doesn't have a scroller. You would apply that before starting the print job, and then restore the original custom application skin after the print job completes.
The user may briefly see the "alternate" version of your app when they click the print button, but it should only be for a split second at most.
-Josh