I am trying to set BackgroundImage of application in flex 4.6 By Creating Skin of Application.
<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">
<!-- host component -->
<fx:Metadata>
[HostComponent("spark.components.Application")]
</fx:Metadata>
<!-- states -->
<s:states>
<s:State name="normal" />
<s:State name="disabled" />
<s:State name="normalWithControlBar" />
<s:State name="disabledWithControlBar" />
</s:states>
<s:Group id="backgroundRect" width="100%" height="100%">
<s:layout>
<s:VerticalLayout gap="0" horizontalAlign="justify" />
</s:layout>
<s:BitmapImage source="#Embed('assets/css/1.jpg')" left="0" right="0" top="0" bottom="0" scaleMode="stretch"/>
</s:Group>
</s:Skin>
It Display Background Image.but if i put any Component/Container in application then that Component/Container not Display on Application. Once i remove skin then only that Component/Container Display on Application.
Your custom skin does not have a Group called "contentGroup"
This is where Flex usually puts in all mxml-added components that should be displayed in a container.
Try adding:
<s:Group id='contentGroup' width='100%' height='100%' />
to your skin.
I think that will do.
In general it's often easier to take a copy of the original skin file and alter things in there rather than writing a new one. This way, you make sure, you don't forget anything important.
Here my app skin with a gradient background:
<?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"
xmlns:mx="library://ns.adobe.com/flex/mx"
alpha.disabledWithControlBar="0.5"
alpha.disabled="0.5">
<fx:Metadata>
<![CDATA[
[HostComponent("spark.components.Application")]
]]>
</fx:Metadata>
<fx:Script fb:purpose="styling">
<![CDATA[
import flash.filters.DropShadowFilter;
private static const W:uint = 700;
private static const H:uint = 525;
private static const COLORS:Array = [0xFFFFFF, 0xFFFFFF];
private static const ALPHAS:Array = [1, 0];
private static const RATIOS:Array = [0, 255];
private static const SHADOW:Array = [new DropShadowFilter(0, 0, 0x000000, 1.0, 12.0, 12.0, 1.0, 3, true)];
private var _matrix:Matrix = new Matrix();
private function drawBG(w:Number, h:Number):void {
_bgShading.graphics.clear();
_matrix.createGradientBox(w * 1.2, h * 2.2, 0, -w * 0.1, -h * 0.8);
_bgShading.graphics.beginGradientFill(GradientType.RADIAL,
COLORS,
ALPHAS,
RATIOS,
_matrix,
SpreadMethod.PAD,
InterpolationMethod.LINEAR_RGB,
0);
_bgShading.graphics.drawRect(0, 0, w, h);
_bgShading.graphics.endFill();
_bgShading.filters = SHADOW;
_bgTexture.graphics.clear();
_bgTexture.graphics.beginFill(0x99CC99);
_bgTexture.graphics.drawRect(0, 0, w, h);
_bgTexture.graphics.endFill();
_bgShading.blendMode = BlendMode.OVERLAY;
}
public function setBackgroundSize(w:uint=W, h:uint=H):void {
var screenRatio:Number = w / h;
var stageRatio:Number = stage.stageWidth / stage.stageHeight;
var ratio:Number = screenRatio / stageRatio;
// ratio > 1 if screen is broader than stage
mainGroup.width = stage.stageWidth * Math.max(1, ratio);
drawBG(mainGroup.width, H);
}
public function showBackground(b:Boolean):void {
_bgTexture.visible = b;
_bgShading.visible = b;
}
]]>
</fx:Script>
<s:states>
<s:State name="normal" />
<s:State name="disabled" />
<s:State name="normalWithControlBar" />
<s:State name="disabledWithControlBar" />
</s:states>
<mx:UIComponent id="_bgTexture" />
<mx:UIComponent id="_bgShading" />
<s:Group id="mainGroup" x="0" y="0" width="700" height="525">
<s:layout>
<s:VerticalLayout gap="0" horizontalAlign="justify" />
</s:layout>
<s:Group id="contentGroup" width="700" height="100%" minWidth="0" minHeight="0" />
<s:Group id="topGroup" minWidth="0" minHeight="0"
includeIn="normalWithControlBar, disabledWithControlBar" >
<s:Rect left="1" right="1" top="1" bottom="1" >
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="#66BBEE" />
<s:GradientEntry color="#3399CC" />
</s:LinearGradient>
</s:fill>
</s:Rect>
<s:Rect left="2" right="2" bottom="0" height="1" alpha="0.5">
<s:fill>
<s:SolidColor color="#333333" />
</s:fill>
</s:Rect>
<s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="1" minWidth="0" minHeight="0">
<s:layout>
<s:HorizontalLayout paddingLeft="6" paddingRight="6" paddingTop="6" paddingBottom="6" gap="10" />
</s:layout>
</s:Group>
</s:Group>
</s:Group>
</s:Skin>
Related
I have a radio button in flex and wanna change background color of its text to some color
but I didn't find any solution for this problem.
EDIT :
NOTICE: I want some ( not all) of radio button with some conditions in a radio button group, have different color
Is there any solution for this?
EDIT :
code of my project
MyItemRenderer.mxml
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" dataChange="onDataChange()" >
<fx:Script><![CDATA[
import avmplus.constantXml;
import ir.fanap.bizint.ui.flex.event.MyAdvancedListEvent;
import ir.fanap.bizint.ui.flex.skin.MyRadioButtonSkin;
import mx.core.UIComponent;
private function onDataChange():void {
changeColorForMultiCube();
}
private function changeColorForMultiCube():void {
if (data['color'] != null ) {
box.setStyle("skinClass","MySkin");
}
else{
box.setStyle("SkinClass","RadioButtonSkin");//default skin for radio button
}
}
]]></fx:Script>
<s:states>
<s:State name="normal" />
<s:State name="hovered" />
<s:State name="selected" />
</s:states>
<s:RadioButton id="box" change="onDataChange()"/>
</s:ItemRenderer>
MySkin.mxml:
<?xml version="1.0" encoding="utf-8"?>
<fx:Metadata>
<![CDATA[
/**
* #copy spark.skins.spark.ApplicationSkin#hostComponent
*/
[HostComponent("spark.components.RadioButton")]
]]>
</fx:Metadata>
<fx:Script fb:purpose="styling">
/* Define the skin elements that should not be colorized.
For button, the graphics are colorized but the label is not. */
static private const exclusions:Array = ["labelDisplay", "dot"];
/**
* #private
*/
override public function get colorizeExclusions():Array {return exclusions;}
/* Define the symbol fill items that should be colored by the "symbolColor" style. */
static private const symbols:Array = ["dotFill"];
/**
* #private
*/
override public function get symbolItems():Array {return symbols};
/**
* #private
*/
override protected function initializationComplete():void
{
useChromeColor = true;
super.initializationComplete();
}
</fx:Script>
<fx:Script>
<![CDATA[
/**
* #private
*/
private static const focusExclusions:Array = ["labelDisplay"];
/**
* #private
*/
override public function get focusSkinExclusions():Array { return focusExclusions;};
]]>
</fx:Script>
<s:states>
<s:State name="up" />
<s:State name="over" stateGroups="overStates" />
<s:State name="down" stateGroups="downStates" />
<s:State name="disabled" stateGroups="disabledStates" />
<s:State name="upAndSelected" stateGroups="selectedStates" />
<s:State name="overAndSelected" stateGroups="overStates, selectedStates" />
<s:State name="downAndSelected" stateGroups="downStates, selectedStates" />
<s:State name="disabledAndSelected" stateGroups="disabledStates, selectedStates" />
</s:states>
<s:Rect width="{labelDisplay.width}" height="{labelDisplay.height}" left="18" right="0" top="3" bottom="3" verticalCenter="2">
<s:fill>
<s:SolidColor color="0xDAC1C3" />
</s:fill>
</s:Rect>
<s:Label id="labelDisplay"
textAlign="start"
verticalAlign="middle"
maxDisplayedLines="1"
left="18" right="0" top="3" bottom="3" verticalCenter="2" />
</s:SparkSkin>
I don't know about Flex 3 but in Flex 4, it can be done in the following way.
1) Create an MXML skin with HostComponent as spark.components.RadioButton.
2)Create a graphics Rect before labelDisplay of radio button, which is of same dimension & position as the labelDisplay is.
<s:Rect width="{labelDisplay.width}" height="{labelDisplay.height}" left="18" right="0" top="3" bottom="3" verticalCenter="2">
<s:fill>
<s:SolidColor color="0xDAC1C3" />
</s:fill>
</s:Rect>
<s:Label id="labelDisplay"
textAlign="start"
verticalAlign="middle"
maxDisplayedLines="1"
left="18" right="0" top="3" bottom="3" verticalCenter="2" />
3) Use this skin in the Spark RadioButton created in Application.
<s:RadioButton id="rdo" label="Programming in Actionscript" fontSize="20" x="100" y="100" skinClass="skinRdoBtn"/>
Here I am posting answer again for your ease. But I will request you to come out of your comfort level and search things. You will find many other important things in the process of finding your answer.
Below are the codes used.
Application.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"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
private var arrSource:Array = [{label:"Button1", color:0xDAC1C3},
{label:"Button2", color:0xDAC1C3},
{label:"Button3"}, {label:"Button4", color:0xDAC1C3}, {label:"Button5", color:0xDAC1C3},
{label:"Button6"}, {label:"Button7", color:0xDAC1C3}, {label:"Button8", color:0xDAC1C3},
{label:"Button9"},{label:"Button10", color:0xDAC1C3},{label:"Button11", color:0xDAC1C3}];
private var arrCol:ArrayCollection = new ArrayCollection(arrSource);
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:List id="lstBtns" dataProvider="{arrCol}" itemRenderer="MyItemRenderer">
</s:List>
</s:Application>
MyItemRenderer.mxml
<?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" dataChange="onDataChange()">
<fx:Script><![CDATA[
import mx.core.UIComponent;
import spark.components.RadioButtonGroup;
import spark.skins.spark.RadioButtonSkin;
private static var rdoBtnGrp:RadioButtonGroup = new RadioButtonGroup();
private function onDataChange():void {
changeColorForMultiCube();
}
private function changeColorForMultiCube():void {
if (data['color'] != null ) {
box.setStyle("skinClass",MySkin2);
}
else{
box.setStyle("SkinClass",RadioButtonSkin);//default skin for radio button
}
}
]]></fx:Script>
<s:states>
<s:State name="normal" />
<s:State name="hovered" />
<s:State name="selected" />
</s:states>
<s:RadioButton id="box" change="onDataChange()" label="{data.label}" group="{rdoBtnGrp}"/>
</s:ItemRenderer>
MySkin2.mxml
Don't Delete anything which is pre-written when you are making skin unless you have specific reason to do so. I have added in this skin only Rect with id="bgColor" before the labelDisplay. The fill color is responsible for radio button's background color. If you want to set this color dynamic then you need to create a class extending RadioButton and define [SkinPart] there. Please see this and this
<!--
ADOBE SYSTEMS INCORPORATED
Copyright 2008 Adobe Systems Incorporated
All Rights Reserved.
NOTICE: Adobe permits you to use, modify, and distribute this file
in accordance with the terms of the license agreement accompanying it.
-->
<!--- The default skin class for a Spark RadioButton component.
#see spark.components.RadioButton
#see spark.components.RadioButtonGroup
#langversion 3.0
#playerversion Flash 10
#playerversion AIR 1.5
#productversion Flex 4
-->
<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" alpha.disabledStates="0.5">
<fx:Metadata>
<![CDATA[
/**
* #copy spark.skins.spark.ApplicationSkin#hostComponent
*/
[HostComponent("spark.components.RadioButton")]
]]>
</fx:Metadata>
<fx:Script fb:purpose="styling">
/* Define the skin elements that should not be colorized.
For button, the graphics are colorized but the label is not. */
static private const exclusions:Array = ["labelDisplay", "dot"];
/**
* #private
*/
override public function get colorizeExclusions():Array {return exclusions;}
/* Define the symbol fill items that should be colored by the "symbolColor" style. */
static private const symbols:Array = ["dotFill"];
/**
* #private
*/
override public function get symbolItems():Array {return symbols};
/**
* #private
*/
override protected function initializationComplete():void
{
useChromeColor = true;
super.initializationComplete();
}
</fx:Script>
<fx:Script>
<![CDATA[
/**
* #private
*/
private static const focusExclusions:Array = ["labelDisplay"];
/**
* #private
*/
override public function get focusSkinExclusions():Array { return focusExclusions;};
]]>
</fx:Script>
<s:states>
<s:State name="up" />
<s:State name="over" stateGroups="overStates" />
<s:State name="down" stateGroups="downStates" />
<s:State name="disabled" stateGroups="disabledStates" />
<s:State name="upAndSelected" stateGroups="selectedStates" />
<s:State name="overAndSelected" stateGroups="overStates, selectedStates" />
<s:State name="downAndSelected" stateGroups="downStates, selectedStates" />
<s:State name="disabledAndSelected" stateGroups="disabledStates, selectedStates" />
</s:states>
<s:Group verticalCenter="0" width="13" height="13">
<!-- drop shadow -->
<s:Ellipse left="-1" top="-1" right="-1" bottom="-1">
<s:stroke>
<s:LinearGradientStroke rotation="90" weight="1">
<s:GradientEntry color="0x000000"
color.downStates="0xFFFFFF"
alpha="0.011"
alpha.downStates="0" />
<s:GradientEntry color="0x000000"
color.downStates="0xFFFFFF"
alpha="0.121"
alpha.downStates="0.57" />
</s:LinearGradientStroke>
</s:stroke>
</s:Ellipse>
<!-- fill -->
<s:Ellipse left="1" top="1" right="1" bottom="1">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0xFFFFFF"
color.overStates="0xBBBDBD"
color.downStates="0xAAAAAA"
alpha="0.85" />
<s:GradientEntry color="0xD8D8D8"
color.overStates="0x9FA0A1"
color.downStates="0x929496"
alpha="0.85" />
</s:LinearGradient>
</s:fill>
</s:Ellipse>
<!-- fill highlight -->
<s:Path data="M 1 6 Q 2 2 6 1 Q 11 2 12 6 h -9">
<s:fill>
<s:SolidColor color="0xFFFFFF" alpha="0.33" />
</s:fill>
</s:Path>
<!-- layer 6: highlight stroke (all states except down) -->
<s:Ellipse left="1" right="1" top="1" bottom="1">
<s:stroke>
<s:LinearGradientStroke rotation="90" weight="1">
<s:GradientEntry color="0xFFFFFF" color.downStates="0x939393" alpha.overStates="0.22" />
<s:GradientEntry color="0xD8D8D8" color.downStates="0xB1B1B1" alpha.overStates="0.22" />
</s:LinearGradientStroke>
</s:stroke>
</s:Ellipse>
<s:Rect left="5" top="1" right="5" height="1">
<s:fill>
<s:SolidColor color="0xFFFFFF"
color.downStates="0x939393"
alpha.overStates="0.22" />
</s:fill>
</s:Rect>
<!-- border - put on top of the fill so it doesn't disappear when scale is less than 1 -->
<s:Ellipse left="0" top="0" right="0" bottom="0">
<s:stroke>
<s:LinearGradientStroke rotation="90" weight="1">
<s:GradientEntry color="0x000000" alpha="0.70" />
<s:GradientEntry color="0x000000" alpha="0.80" />
</s:LinearGradientStroke>
</s:stroke>
</s:Ellipse>
<!-- dot -->
<!--- Defines the appearance of the RadioButton's dot. To customize the appearance of the dot, create a custom RadioButtonSkin class. -->
<s:Path left="4" top="4" includeIn="selectedStates" id="dot" itemCreationPolicy="immediate"
data="M 2.5 0 Q 4.5 0.5 5 2.5 Q 4.5 4.5 2.5 5 Q 0.5 4.5 0 2.5 Q 0.5 0.5 2.5 0">
<s:fill>
<!--- #private
Defines the appearance of the dot's fill. The default color is 0x000000. The default alpha is .9. -->
<s:SolidColor id="dotFill" color="0" alpha="0.9" />
</s:fill>
</s:Path>
<s:Path left="4" top="7" includeIn="selectedStates"
data="M 0 0 Q 0.5 2 2.5 2.0 Q 3.5 2.0 4 0">
<s:stroke>
<s:LinearGradientStroke>
<s:GradientEntry color="0xFFFFFF" alpha="0.3" />
<s:GradientEntry color="0xFFFFFF" alpha="0.7" />
<s:GradientEntry color="0xFFFFFF" alpha="0.3" />
</s:LinearGradientStroke>
</s:stroke>
</s:Path>
</s:Group>
<!-- Label -->
<!--- #copy spark.components.supportClasses.ButtonBase#labelDisplay -->
<s:Rect id="bgColor" left="18" right="0" top="3" bottom="3" verticalCenter="2"
>
<s:fill>
<s:SolidColor color="0xDAC1C3" />
</s:fill>
</s:Rect>
<s:Label id="labelDisplay"
textAlign="start"
verticalAlign="middle"
maxDisplayedLines="1"
left="18" right="0" top="3" bottom="3" verticalCenter="2" />
</s:SparkSkin>
Try like this
myRadBtnId.setStyle("backgroundColor","0x00FF00");
(or)
myRadBtnId.setStyle("backgroundColor", #E8E8E8);
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}"
/>
I'm trying to add a custom skin with a background image to my application that entirely fits the entire screen of any device.
This is the skin:
<?xml version="1.0" encoding="utf-8"?>
<s:Skin name="CustomMainSkin"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
alpha.disabled="0.5" >
<s:states>
<s:State name="normal" />
<s:State name="disabled" />
</s:states>
<fx:Metadata>
<![CDATA[
[HostComponent("spark.components.Application")]
]]>
</fx:Metadata>
<!-- fill -->
<s:BitmapImage id="img"
source="assets/background.jpg"
scaleMode="stretch"
fillMode="scale"
smooth="true"
left="0" right="0"
top="0" bottom="0" />
<s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" minWidth="0" minHeight="0" />
If i set the skin on the application everything looks great, the image resizes to the screen needs, but all componnents dissapear and i am not able to edit any view.
<s:TabbedViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" applicationDPI="240"
xmlns:components="views.*"
creationComplete="removeTab1DefaultView(event)"
skinClass="skins.CustomMainSkin" >
<s:ViewNavigator label="Main view" firstView="views.MainView"/>
<s:ViewNavigator label="Online Rankings" firstView="views.RankingsOnline"/>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
</s:TabbedViewNavigatorApplication>
I tried setting the skin directly in the view using a SkinnableContainer. Components are visible in this way, but the image doesn't resize and is a lot larger than the screen.
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" title="MainView"
actionBarVisible="false"
tabBarVisible="false"
>
<s:SkinnableContainer skinClass="skins.CustomMainSkin" >
<s:NavigatorContent id="gameBoard" >
</s:NavigatorContent>
<s:Group x="27" y="133" width="297" height="388">
<s:Button left="33" right="36" top="39" bottom="281" label="Start Game"
horizontalCenter="-2" verticalCenter="-121" click="button1_clickHandler(event)"/>
<s:Button x="34" y="146" width="228" label="Rankings" click="rankingsAction(event)"/>
<s:Button x="32" y="252" width="228" label="Quit"/>
</s:Group>
</s:SkinnableContainer>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
</s:View>
How can i achieve this? It seems really hard and un-natural.
Thanks
Here is an example for a simple skin with a BG image.
Below, the code to use it.
<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin name="CustomPanelSkin"
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">
<!-- states -->
<s:states>
<s:State name="normal" />
<s:State name="disabled" />
<s:State name="normalWithControlBar" stateGroups="withControls" />
<s:State name="disabledWithControlBar" stateGroups="withControls" />
</s:states>
<fx:Metadata>
[HostComponent("spark.components.Panel")]
</fx:Metadata>
<fx:Script fb:purpose="styling">
<![CDATA[
static private const exclusions:Array = ["background", "titleDisplay", "contentGroup", "controlBarGroup"];
override public function get colorizeExclusions():Array {
return exclusions;
}
override protected function initializationComplete():void {
useChromeColor = true;
super.initializationComplete();
}
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
if (getStyle("borderVisible") == true) {
background.left = background.top = background.right = background.bottom = 1;
contents.left = contents.top = contents.right = contents.bottom = 1;
} else {
background.left = background.top = background.right = background.bottom = 0;
contents.left = contents.top = contents.right = contents.bottom = 0;
}
var cr:Number = getStyle("cornerRadius");
var withControls:Boolean = (currentState == "disabledWithControlBar" || currentState == "normalWithControlBar");
if (cornerRadius != cr) {
cornerRadius = cr;
}
super.updateDisplayList(unscaledWidth, unscaledHeight);
}
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>
<!-- drop shadow can't be hittable so all other graphics go in this group -->
<s:Group left="0" right="0" top="0" bottom="0">
<!-- layer 2: background fill -->
<!--- Defines the appearance of the PanelSkin class's background. -->
<s:Rect id="background"
left="1" top="1" right="1" bottom="1">
<s:fill>
<s:BitmapFill id="backgroundFill" source="#Embed('Images/BG.jpg')" alpha="0.3" fillMode="repeat" />
</s:fill>
</s:Rect>
<!-- layer 3: contents -->
<!--- Contains the vertical stack of titlebar content and controlbar. -->
<s:Group id="contents"
left="1" right="1" top="1" bottom="1">
<s:layout>
<s:VerticalLayout gap="0" horizontalAlign="justify" />
</s:layout>
<s:Group id="contentGroup"
width="100%" height="100%" minWidth="0" minHeight="0">
</s:Group>
</s:Group>
</s:Group>
</s:SparkSkin>
Usage:
<s:Panel id="target"
width="100%" height="100%"
skinClass="WorkspaceSkin">
</s:Panel>
I have the list shown below:
<s:List id="list2" width="100%" height="100%" dataProvider="{ recordingsShown }"
itemRenderer="components.VideoItemRenderer2"
selectedIndex="0" visible="false">
<s:layout>
<s:TileLayout id="tilelayout"
useVirtualLayout="true"
orientation="columns"
columnAlign="justifyUsingWidth" rowAlign="justifyUsingHeight"
requestedColumnCount="3"
requestedRowCount="2"
paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5"
verticalGap="10" horizontalGap="10" />
</s:layout>
</s:List>
which displays in tiles a name, a date and a preview image for each one of the videos contained in the arraycollection recordingsShown given as dataprovider.
The problem is when a new video is added,i save the preview pic in a folder and a node describing it in an xml and i put a new item in the arraycollection with
recordingsShown.addItemAt(newRecording,0);
it is added on stage but the preview image of the last added video is not shown!
How can i redraw the whole list in order to show it?
Here is my itemRenderer:
<?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"
width="400" height="300" autoDrawBackground="true">
<fx:Metadata>
[Event(name="playClicked", type="flash.events.Event")]
</fx:Metadata>
<fx:Script>
<![CDATA[
import flash.filters.GlowFilter;
import mx.controls.Alert;
import mx.events.FlexEvent;
import mx.formatters.DateFormatter;
protected function img_rollOverHandler(evt:MouseEvent):void {
Image(evt.currentTarget).filters = [new GlowFilter(0xf7941d)];
Image(evt.currentTarget).alpha = 0.9;
}
protected function img1_rollOutHandler(evt:MouseEvent):void {
Image(evt.currentTarget).filters = [];
Image(evt.currentTarget).alpha = 1;
}
protected function playClickHandler(event:MouseEvent):void
{
dispatchEvent(new Event("playClicked",true,true));
}
]]>
</fx:Script>
<fx:Declarations>
<s:DateTimeFormatter id="dateTimeFormatter"
dateTimePattern="DD.MM.YYYY HH.NN.SS"/>
</fx:Declarations>
<s:states>
<s:State name="normal" />
<s:State name="hovered" />
<s:State name="selected" />
</s:states>
<s:Rect width="100%" height="100%" radiusX="5" radiusY="5">
<s:filters>
<s:DropShadowFilter alpha="0.32" alpha.hovered="0.5" blurX="5" blurY="5" distance="2" />
</s:filters>
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0x323232" color.selected="black"/>
<s:GradientEntry color="#7f7f7f" color.selected="0x333333"/>
</s:LinearGradient>
</s:fill>
<s:stroke>
<s:SolidColorStroke color="#ffffff" color.hovered="#f7941d" color.selected="#ed7f09" caps="none" weight="2" joints="miter" miterLimit="4"/>
</s:stroke>
</s:Rect>
<s:Label left="10" top="10"
fontStyle="italic"
fontWeight="bold"
color="#f7941d"
text="{dateTimeFormatter.format(data.date)}"/>
<s:Label left="10" top="25"
fontSize="16"
fontWeight="bold"
color="#ffffff"
text="{data.name}"/>
<s:Image id="previewImg" left="10" right="10" bottom="10" top="55" scaleMode="stretch" smooth="true"
source="http://localhost:5080/thumbs/{data.thumb}" />
<!-- source="assets/img.jpg"/> -->
<s:Image source="assets/play.png"
rollOver="img_rollOverHandler(event);"
rollOut="img1_rollOutHandler(event);"
x="136" y="102"
click="playClickHandler(event)"
complete="this.invalidateSize()"/>
</s:ItemRenderer>
I have found that there seems to be a problem with data binding and the Spark Image. Try adding this to the root tag:
dataChange="yourImage.validateNow();
If that doesn't work, set the whole path in dataChange.
If i want check parent node checkbox means below childerns checkbox will select automatic .
this is my code:
<fx:Script>
<![CDATA[
private function init():void {
httpTree.send();
}
]]>
</fx:Script>
<fx:Declarations>
<s:HTTPService id="httpTree" url="Assets/World.xml"
resultFormat="e4x" useProxy="false" />
</fx:Declarations>
<mx:Tree dataProvider="{httpTree.lastResult.department}"
id="treeTree" labelField="#name"
itemRenderer="com.ItemRenderForTree" width="160" height="200" />
itemRenderer file
<fx:Script>
<![CDATA[
protected function checkboxSelectHandler(event:Event):void
{
}
]]>
</fx:Script>
<s:states>
<s:State name="normal" />
<s:State name="hovered" />
<s:State name="selected" />
</s:states>
<s:HGroup left="0" right="0" top="0" bottom="0" verticalAlign="middle">
<s:Rect id="indentationSpacer" width="{treeListData.indent}" percentHeight="100" alpha="0">
<s:fill>
<s:SolidColor color="0xFFFFFF" />
</s:fill>
</s:Rect>
<s:Group id="disclosureGroup">
<s:BitmapImage source="{treeListData.disclosureIcon}" visible="{treeListData.hasChildren}" />
</s:Group>
<s:BitmapImage source="{treeListData.icon}" />
<s:CheckBox change="checkboxSelectHandler(event)" />
<s:Label id="labelField" text="{treeListData.label}" paddingTop="2"/>
</s:HGroup>
any one can help thanks....
Use tree dataDescriptor to access children nodes of clicked parent node. Maybe that could help? Does your three data have a selected property in datamodel?
You're looking for what I've always called a Schrodinger Check Box. Here is a same piece of code, including a working demo and the PNG resources for the checkbox over at adobe.
Schrodinger Check Box