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?
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 have implemented a chromeless windowedapplication in flex 4. But doing so i noticed that all the maximize, minimize and even the ability to drag the window around is gone. I need the ability to drag the window around. I have done a lot of googling and have been unable to come up with anything. Could somebody plz point me in the right direction.
Thanks in advance.
You'll have to create a custom skin for your WindowedApplication. If you look in the code of WindowedApplication, you'll find this:
[SkinPart (required="false")]
public var titleBar:TitleBar;
which means you can add a TitleBar to the skin, but you don't have to. As a matter of fact the default WindowedApplicationSkin doesn't have a titleBar.
Including a TitleBar in the custom skin will automatically give you the dragging behavior you're after. The default TitleBarSkin comes with the regular window buttons (minimize, maximize, close), so you may want to create a custom skin here too. One without the buttons if you don't need them.
Here's a stripped down example.
The custom skin for WindowedApplication (just a white background and a TitleBar):
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" >
<fx:Metadata>[HostComponent("Object")]</fx:Metadata>
<s:states>
<s:State name="normal" />
<s:State name="disabled" />
<s:State name="normalAndInactive" />
<s:State name="disabledAndInactive" />
</s:states>
<s:Rect id="backgroundRect" left="0" right="0" top="0" bottom="0" >
<s:fill>
<s:SolidColor id="backgroundFill" color="0xffffff" />
</s:fill>
</s:Rect>
<s:TitleBar left="0" right="0" top="0" height="24"
skinClass="skin.TitleBarSkin" />
<s:Group id="contentGroup" left="0" right="0" top="25" bottom="0" />
</s:Skin>
The custom skin for your TitleBar (just a gradient background and a close button):
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
minHeight="24" >
<fx:Metadata>
[HostComponent("spark.components.windowClasses.TitleBar")]
</fx:Metadata>
<s:states>
<s:State name="normal" />
<s:State name="disabled" />
<s:State name="normalAndMaximized" />
<s:State name="disabledAndMaximized" />
</s:states>
<s:Rect id="background" left="0" right="0" top="0" bottom="0">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0xFFFFFF" />
<s:GradientEntry color="0xBABABA" />
</s:LinearGradient>
</s:fill>
</s:Rect>
<s:Button id="closeButton" label="close" right="0" verticalCenter="0" />
</s:Skin>
Apparently, the 'closeButton' is required, so you'll have to include it in the skin. But if you still want to get rid of it, just set its 'visible' and 'includeInLayout' properties to 'false'.
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
I have been tasked with creating the equivalent Flex 4 implementation of graphical style of the buttons found on this page:
http://h.dwighthouse.com/temp/UDOP/2011-3-25_themeDevGlowing/
Namely, the animated glowing effect on the buttons. I've gotten what I think is the appropriate programmatic gradient-based skin basis, but I have two problems.
One, I can't get any mouse events to respond in the skin. I can't seem to find others with this problem. In the below code, startAnimation is never getting called when a mouse over occurs, but the event is apparently getting registered. To test this code, simply add skinClass="ButtonSkin" to a button declaration in your main application, the code below being the ButtonSkin.mxml file.
<?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"
initialize="init()"
mouseEnabled="true">
<fx:Metadata>
[HostComponent("spark.components.Button")]
</fx:Metadata>
<fx:Script>
<![CDATA[
import flash.events.Event;
[Bindable]
private var animatedAlpha:Number = 0.8;
private var animationDirection:Number = -1;
private function backAndForth(value:Number, max:Number, min:Number, increment:Number):Number {
value += (animationDirection * increment);
if (value < min || value > max)
{
animationDirection *= -1;
value += (animationDirection * increment * 2);
}
return value;
}
private function startAnimation(e:MouseEvent):void {
animatedAlpha = backAndForth(animatedAlpha, 0.8, 0.3, 0.1); // Or something
systemManager.addEventListener(MouseEvent.MOUSE_OUT, endAnimation);
}
private function endAnimation(e:MouseEvent):void {
animatedAlpha = backAndForth(animatedAlpha, 0.8, 0.3, 0.1); // Or something
systemManager.removeEventListener(MouseEvent.MOUSE_OUT, endAnimation);
}
private function init():void {
parent.mouseChildren = true; // Otherwise mouse events don't fire in the skin
clickableArea.addEventListener(MouseEvent.MOUSE_OVER, startAnimation);
}
]]>
</fx:Script>
<s:states>
<s:State name="up" />
<s:State name="over" />
<s:State name="down" />
<s:State name="disabled" />
</s:states>
<s:Group top="0" bottom="0" left="0" right="0" id="clickableArea">
<s:Rect top="0" bottom="0" left="0" right="0" radiusX="8" radiusY="8">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="#000000" color.down="#bb0000" color.disabled="#3b3b3b" ratio="0" />
<s:GradientEntry color="#353535" color.down="#ff0000" color.disabled="#555555" ratio="1" />
</s:LinearGradient>
</s:fill>
</s:Rect>
<s:Rect top="0" bottom="0" left="0" right="0" radiusX="8" radiusY="8">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color.over="#8f1b1b" alpha="0" ratio="0" />
<s:GradientEntry color.over="#8f1b1b" alpha="0" ratio="0.4" />
<s:GradientEntry color.over="#8f1b1b" alpha="{animatedAlpha}" alpha.down="0" ratio="1" />
</s:LinearGradient>
</s:fill>
</s:Rect>
<s:Rect top="0" bottom="0" left="0" right="0" radiusX="8" radiusY="8">
<s:stroke>
<s:SolidColorStroke color="#000000" color.disabled="#333333" weight="1" />
</s:stroke>
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="#ffffff" color.disabled="#9e9e9e" alpha="0.6" alpha.down="0.7" ratio="0" />
<s:GradientEntry color="#ffffff" color.disabled="#848484" alpha="0.2" alpha.down="0.4" ratio="0.45" />
<s:GradientEntry color="#ffffff" alpha="0" ratio="0.46" />
</s:LinearGradient>
</s:fill>
</s:Rect>
<s:Label id="labelDisplay" color="#ffffff" color.disabled="#aaaaaa" textAlign="center" baseline="center" paddingTop="7" paddingBottom="5" paddingLeft="10" paddingRight="10">
<s:filters>
<s:DropShadowFilter distance="0" angle="45" blurX="5" blurY="5" />
</s:filters>
</s:Label>
</s:Group>
EDIT I found out why mouse events weren't firing. The button apparently has mouseChildren false by default, which specifically prevents events from firing lower than itself. Using parent.mouseChildren = true; in the constructor fixes this issue. On to the next part of the question: continuous animation.
Other than that, I'd appreciate some help or point me in the right direction of calling a function every frame, and the ability to turn said incremental call on and off using mouse events. (If that's not how you animate in Flex, forgive me, I know nothing about Flash-based animation.) Thanks!
Answers to both questions have been found:
Buttons prevent their children (including Skins) from receiving mouse events. By setting parent.mouseChildren = true; in the skin's initializing function, mouse events are received normally.
Turns out you can animate in Flex (Actionscript) the same way you animate in Javascript: setInterval and clearInterval.