I am using a Skin for my buttons in Flex 4. The skinned buttons are displayed correctly.
Now I want the label of the buttons to respond as such:
Font Weight should be Bold when "RollOver" or "MouseOver" over the buttons.
I tried doing it in the mxml below by including the rollOver property to the Label on this button, but it doesnt seem to work.
Am I doing it at the right place, that is in the Skin mxml file? Or should I do it for each button in the Application itself?
Skin Code:
<?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:mx="library://ns.adobe.com/flex/mx">
<fx:Metadata>
<![CDATA[
[HostComponent("spark.components.Button")]
]]>
</fx:Metadata>
<fx:Script>
<![CDATA[
protected function labelDisplay_rollOverHandler(event:MouseEvent):void
{
FontWeight.BOLD;
FontStyle.ITALIC;
}
]]>
</fx:Script>
<s:states>
<s:State name="up" />
<s:State name="over" />
<s:State name="down" />
<s:State name="disabled" />
</s:states>
<s:BitmapImage includeIn="up" source="{getStyle('upSkin')}" width="100%" height="100%"/>
<s:BitmapImage includeIn="over" source="{getStyle('overSkin')}" width="100%" height="100%"/>
<s:BitmapImage includeIn="down" source="{getStyle('downSkin')}" width="100%" height="100%"/>
<s:BitmapImage includeIn="disabled" source="{getStyle('disabledSkin')}" width="100%" height="100%"/>
<s:Label id="labelDisplay" textAlign="right" maxDisplayedLines="1" horizontalCenter="1"
verticalAlign="middle" verticalCenter="1" left="10" right="10" rollOver="labelDisplay_rollOverHandler(event)" />
</s:SparkSkin>
You can do this easily by changing the fontWeight style for the "over" state. You can do this in MXML by specifying the style followed by the state you want that style to be applied to, like so:
<s:Label id="labelDisplay" fontWeight.over="bold" textAlign="right" maxDisplayedLines="1" horizontalCenter="1"
verticalAlign="middle" verticalCenter="1" left="10" right="10" />
Hope that helps.
Related
I have a Windowed application with a custom skin and the skin contains Title bar which too uses a custom skin. Now the problem is that I need to hide the minimize and maximize button dynamically if the window is set to full-screen. Please help...
my title bar skin code
<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" xmlns:mx="library://ns.adobe.com/flex/mx"
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" stateGroups="maximizedGroup" />
<s:State name="disabledAndMaximized" stateGroups="maximizedGroup" />
</s:states>
<!-- fill -->
<!--- Defines the background color of the skin. -->
<s:Rect id="background"
left="0" right="0" top="0" bottom="0">
<s:fill>
<s:LinearGradient>
<s:GradientEntry color="#2ecbd8"/>
<s:GradientEntry color="white" ratio="0.45"/>
<s:GradientEntry color="white" ratio="0.55"/>
<s:GradientEntry color="#2ecbd8"/>
</s:LinearGradient>
</s:fill>
</s:Rect>
<s:Group
id="contentGroup"
minHeight="24"
width="100%"
height="100%"
left="10"
right="10" >
<s:layout>
<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" gap="5" />
</s:layout>
<s:BitmapImage id="titleIconImage" minWidth="0" fillMode="clip"/>
<s:Label id="titleText" text="{hostComponent.title}" minWidth="0" fontSize="9" color="#585858" maxDisplayedLines="1" width="100%" />
<s:Button id="minimizeButton"
skinClass="spark.skins.spark.windowChrome.MinimizeButtonSkin"
top="2" bottom="2" verticalCenter="0"
/>
<s:Button id="maximizeButton"
skinClass="spark.skins.spark.windowChrome.MaximizeButtonSkin"
top="2" bottom="2" verticalCenter="0"
/>
<s:Button id="closeButton"
skinClass="spark.skins.spark.windowChrome.CloseButtonSkin"
verticalCenter="0" />
<fx:Script>
<![CDATA[
import spark.skins.spark.windowChrome.MaximizeButtonSkin;
]]>
</fx:Script>
</s:Group>
</s:SparkSkin>
my windowed application skin code
<?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"
xmlns:ui="com.youspin.components.ui.*"
depth="-10">
<!-- host component -->
<fx:Metadata>
[HostComponent("spark.components.WindowedApplication")]
</fx:Metadata>
<!-- states -->
<s:states>
<s:State name="disabledAndInactive" />
<s:State name="normalAndInactive" />
<s:State name="disabled" />
<s:State name="normal" />
</s:states>
<s:TitleBar left="0" right="0" top="1"
title="YouSpin"
height="{0.067*height}"
skinClass="skins.titleSkin"/>
<s:Group id="contentGroup" left="0" top="0" right="0" bottom="0" />
</s:Skin>
this is my application
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication 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="fullScreen()"
width="910" height="728"
skinClass="skins.uiskin">
<fx:Declarations>
</fx:Declarations>
<fx:Script>
<![CDATA[
public function fullscreen():void{
stage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE;
//hide button from here but how??
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
</s:WindowedApplication>
try making a bindable boolean somewhere, where you store the fullscreenstate. then minimizebutton should have attributes includeinLayout and visible binded to it. (and maximize would be the opposite:
<s:Button id="minimizeButton"
skinClass="spark.skins.spark.windowChrome.MinimizeButtonSkin"
top="2" bottom="2" verticalCenter="0"
visible="{!isFullScreen}"
/>
In my code, I have a list made up of items from a dataprovider. The itemRenderer for the list consists of a BorderContainer with text in it. I'm mimicking a row of buttons on a scrolling list. I'd like the cursor to change to the hand cursor as it passes over the "button", but the pointer only changes in the part of the BorderContainer that isn't covered by the text.
I've set the buttonMode to true for the list, the BorderContainer, and the text, so why isn't the cursor changing when passing over the text?
This is the list code
<s:List id="listProject" width="100%" height="100%" horizontalScrollPolicy="off" allowMultipleSelection="false"
click="listProject_clickHandler(event)" itemRenderer="ProjectRenderer"
dataProvider="{listProjects}" creationComplete="listProject_creationCompleteHandler(event)" buttonMode="true">
And this is the renderer
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
autoDrawBackground="true">
<!--<s:Label text="{data.header}"/>-->
<s:states>
<s:State name="normal"/>
<s:State name="hovered"/>
<s:State name="selected"/>
</s:states>
<!--<s:Image source.normal="{data.image1}" source.hovered="{data.image2}"/>-->
<s:BorderContainer width="200" height="50" backgroundColor="{data.color}"
borderColor.selected="#FFFFFF" borderVisible.normal="false"
borderVisible.selected="true" borderWeight.selected="4" borderStyle.selected="inset" buttonMode="true">
<s:layout>
<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center"/>
</s:layout>
<mx:Text width="200" text="{data.header}" selectable="false"
color="#FFFFFF" fontSize="15" fontWeight="bold" leading="0" textAlign="center" buttonMode="true" useHandCursor="true"/>
</s:BorderContainer>
</s:ItemRenderer>
Just use a Spark Label instead of mx:Text and you'll be fine.
Also, there's some redundancy in your code. I took the liberty of trimming it down a little:
<s:BorderContainer width="200" height="50" backgroundColor="{data.color}"
borderColor.selected="#FFFFFF" borderVisible.normal="false"
borderVisible.selected="true" borderWeight.selected="4"
borderStyle.selected="inset" buttonMode="true">
<s:Label text="{data.label}" color="#FFFFFF" fontSize="15" fontWeight="bold"
horizontalCenter="0" verticalCenter="0"/>
</s:BorderContainer>
This will also fix that nasty jumpiness of the text when hovered or selected.
As soon as you do not need interaction with mx:Text, you can set mouseChildren property of its parent to false. It will fix the problem. Here is a short example:
<s:ItemRenderer>
<s:BorderContainer width="200" buttonMode="true" useHandCursor="true" mouseChildren="false">
<mx:Text text="No many text" selectable="false" />
</s:BorderContainer>
</s:ItemRenderer>
I have a small problem with rollover effects. First time after loading everything's fine. But after clicking the button twice (= going to studyState and then coming back to Sate1) the rollover effect on the bordercontainer stops working.
I don't have a clue what the reason could be. Please give me a hint.
<?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>
<s:AnimateColor id="animateColorON" colorPropertyName="backgroundColor" colorFrom="#FFFFFF" colorTo="#e7eae4" duration="300"/>
<s:AnimateColor id="animateColorOFF" colorPropertyName="backgroundColor" colorFrom="#e7eae4" colorTo="#FFFFFF" duration="600"/>
</fx:Declarations>
<s:transitions>
<s:Transition id="t1" autoReverse="true">
<s:CrossFade
target="{this}"
duration="1500" />
</s:Transition>
</s:transitions>
<s:states>
<s:State name="State1" />
<s:State name="studyState" />
</s:states>
<s:VGroup id="globalGroup" includeIn="State1" width="100%">
<s:Button label="State1 to studyState" click="this.currentState = 'studyState'" />
<s:BorderContainer width="100%" height="30" cornerRadius="4" borderVisible="false" buttonMode="true" rollOverEffect="animateColorON" rollOutEffect="animateColorOFF">
<s:HGroup width="100%" height="30" verticalAlign="middle" paddingLeft="5" paddingRight="5">
<s:Label id="p_dob_label" text="text" width="55%"/>
<s:Label id="p_dob_value" text="text" width="40%" verticalAlign="top" textAlign="right" color="#8DA576"/>
</s:HGroup>
</s:BorderContainer>
</s:VGroup>
<s:VGroup id="studyGroup" includeIn="studyState" width="100%">
<s:Button label="studyState to State1" click="this.currentState = 'State1'" />
</s:VGroup>
</s:Application>
Here is a fix. add an event listener for when the state changes. I use the currentStateChangeevent:
<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" currentStateChange="application1_currentStateChangeHandler(event)">
In the listener, manually set the rollOverEffect and rollOutEffect effects:
<fx:Script>
<![CDATA[
import mx.events.StateChangeEvent;
protected function application1_currentStateChangeHandler(event:StateChangeEvent):void
{
// TODO Auto-generated method stub
if(bc){
bc.setStyle('rollOverEffect',animateColorON);
bc.setStyle('rollOutEffect',animateColorOFF);
}
}
]]>
</fx:Script>
Be sure to give the BorderContainer an ID. I used bc:
<s:BorderContainer id="bc" width="100%" height="30" cornerRadius="4" borderVisible="false" buttonMode="true" rollOverEffect="animateColorON" rollOutEffect="animateColorOFF" >
I'm not sure why those effects are lost. My best theory is that this has something to do with how the ActionScript is generated behind the scenes. Even though the rollOverEffect and rollOutEffect appear to be properties on the component, they are actually implemented behind the scenes as styles. I bet, for some reason, when switching states the 'effect' styles are not reset. You'd have to look at the generated ActionScript to know for sure, though.
How on earth do you put a simple gradient with css in the buttons of a buttonbar?
I've been looking everywhere and I'm not interested in skinning at all it seems weird having all that dirty code to have just a simple gradient.
This is my css
.my_ButtonBar{
buttonStyleName: "buttonBarButton";
firstButtonStyleName: "firstButtonBarButton";
lastButtonStyleName: "lastButtonBarButton";
}
.buttonBarButton
{
fillColors: red, red;
}
And this is my mxml
<s:ButtonBar dataProvider="{viewstack}" width="200" top="0" left="0" styleName="main_ButtonBar">
<s:layout>
<s:TileLayout columnWidth="200" rowHeight="50"
horizontalGap="-1" verticalGap="-1" />
</s:layout>
</s:ButtonBar>
After user700284's response I created a new skinclass based on the buttonbar class.
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
alpha.disabled="0.5">
<fx:Metadata>
<![CDATA[
/**
* #copy spark.skins.spark.ApplicationSkin#hostComponent
*/
[HostComponent("spark.components.ButtonBar")]
]]>
</fx:Metadata>
<s:states>
<s:State name="normal" />
<s:State name="disabled" />
</s:states>
<fx:Declarations>
<fx:Component id="firstButton">
<s:ButtonBarButton skinClass="spark.skins.spark.ButtonBarFirstButtonSkin" />
</fx:Component>
<fx:Component id="middleButton" >
<s:ButtonBarButton skinClass="spark.skins.spark.ButtonBarMiddleButtonSkin" />
</fx:Component>
<fx:Component id="lastButton" >
<s:ButtonBarButton skinClass="spark.skins.spark.ButtonBarLastButtonSkin" />
</fx:Component>
</fx:Declarations>
<s:DataGroup id="dataGroup" width="100%" height="100%">
<s:layout>
<s:TileLayout columnWidth="200" rowHeight="50"
horizontalGap="-1" verticalGap="-1" />
</s:layout>
</s:DataGroup>
</s:Skin>
If I add a rect fill it will fill up the entire buttonbar instead of each button individually. How can I just put a simple gradient on the buttons?????
I do not think you will be able to control the fillColors through a CSS because spark Button does not support fillColors style.Check the following link:
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/Button.html#commonstyleSummary
So you might have to resort to creating skins for buttons. :(
There is a Spark style 'chromeColor' that modifies the default colors.
FTQuest
How do I wordwrap in a spark list w/ an itemrenderer? This posting at http://blog.flexexamples.com/2009/10/27/setting-word-wrapping-on-a-spark-list-control-in-flex-4/ works 100% but when I try to set a separate item renderer, I can't get the word wrapping...instead, I get an ugly horizontal scroll bar. HEre is my 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" width="100%"
height="100%"
xmlns:mx="library://ns.adobe.com/flex/mx">
<s:List id="lst"
useVirtualLayout="false"
width="200"
horizontalCenter="0" verticalCenter="0"
itemRenderer="testRenderer"
>
<s:dataProvider>
<s:ArrayList>
<fx:Object />
</s:ArrayList>
</s:dataProvider>
</s:List>
</s:Application>
here is my testRenderer ------------>
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer name="testRenderer"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
autoDrawBackground="true"
creationComplete="makeLabel(event);">
<s:states>
<s:State name="normal" />
<s:State name="hovered" />
<s:State name="selected" />
</s:states>
<s:layout>
<s:VerticalLayout gap="0" horizontalAlign="justify" />
</s:layout>
<fx:Script>
<![CDATA[
protected function makeLabel(evt:Event):void {
test.text = "this is just a really long line of text that I want to wrap and just look normal";
}
]]>
</fx:Script>
<s:HGroup>
<s:Label id="test" color="black" />
</s:HGroup>
</s:ItemRenderer>
try giving your Label (id="test") a width