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
Related
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>
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 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.
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.
I'm trying to copy/modify the spark skin for the default button, but not sure how to find that skin. When I hover over <s:Button and Ctrl + Click it, it takes me to the Button class, but there isn't any skin information there.
The default button skin is in spark/skins/spark/ButtonSkin and subclasses Skin.
Not sure why you would want to edit that way.
You can make a Skin Class out of a mxml file and reference it with the skinClass
<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"
minWidth="21" minHeight="21">
<fx:Metadata>
[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 left="0" right="0" top="0" bottom="0" width="69" height="20" radiusX="2" radiusY="2">
<s:stroke>
<s:SolidColorStroke color="0x000000" weight="1"/>
</s:stroke>
</s:Rect>
<s:Label id="labelDisplay"
alpha.up="1"
alpha.down=".5"
alpha.over=".25"
horizontalCenter="0" verticalCenter="1"
left="10" right="10" top="2" bottom="2">
</s:Label>
</s:Skin>
and in your main application
<s:Button label="Alpha Change" skinClass="mySkins.AlphaButtonSkin"/>