I am trying to set corner and weight for a rectangle
<fx:Script>
<![CDATA[
protected function weight_changeHandler(event:Event):void
{
borderStroke.weight = wght.value;
}
protected function corner_changeHandler(event:Event):void
{
border.topLeftRadiusX= border.bottomLeftRadiusX =border.topRightRadiusX=border.bottomRightRadiusX=corner.value;
}
]]>
</fx:Script>
<s:layout >
<s:VerticalLayout paddingLeft="50" paddingTop="50"/>
</s:layout>
<s:Rect horizontalCenter="0" verticalCenter="0" height="300" width="300" id="border">
<s:stroke>
<s:SolidColorStroke id="borderStroke" color="#000000" caps="square" weight="1" alpha="1"/>
</s:stroke>
</s:Rect>
<s:NumericStepper id="wght" change="weight_changeHandler(event)" maximum="100"/>
<s:NumericStepper id="corner" change="corner_changeHandler(event)" maximum="100"/>
when I am increasing the weight, the rect corner also changing. I am getting like this
Anybody can tell me what I missed? what is my mistake?
You have just to set the JointStyle (the joints parameter) to JointStyle.MITER (miter):
<s:SolidColorStroke id="borderStroke" color="#000000" caps="square" joints="miter" weight="1" alpha="1"/>
Hope that can help.
Related
Using the Rect primitive you can define a fill using bitmap data like so.
<!-- Draw rectangle that is filled with a repeating bitmap. -->
<s:Rect height="100" width="200">
<s:stroke>
<s:SolidColorStroke color="0x000000" weight="2"/>
</s:stroke>
<s:fill>
<s:BitmapFill
source="#Embed('../assets/AirIcon12x12.gif')"
fillMode="repeat"/>
</s:fill>
</s:Rect>
That looks like this:
Is there a way to set define a bitmap fill for the border stroke (and the center is transparent)?
Answer based on suggestions. Since I was trying to create dashed border there are a few additions:
<?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"
mouseMove="application1_mouseMoveHandler(event)"
click="application1_clickHandler(event)">
<fx:Script>
<![CDATA[
protected function application1_mouseMoveHandler(event:MouseEvent):void
{
if (resize) {
mainGroupRect.width = event.stageX - mainGroup.x;
mainGroupRect.height= event.stageY - mainGroup.y;
}
}
protected function application1_clickHandler(event:MouseEvent):void
{
resize = !resize;
application1_mouseMoveHandler(event);
}
public var resize:Boolean;
]]>
</fx:Script>
<s:Button id="button" label="hello" width="100%" height="100%" visible="true" />
<s:Group id="mainGroup" verticalCenter="0" horizontalCenter="0" maskType="alpha" mask="{rectMask.displayObject}">
<s:Rect id="mainGroupRect" height="100" width="200" >
<s:fill>
<s:BitmapFill source="#Embed('checker.png')"
fillMode="repeat" />
</s:fill>
</s:Rect>
<s:Rect id="rectMask" top="0" left="0" right="1" bottom="1"
alwaysCreateDisplayObject="true" alpha=".9999999">
<s:stroke>
<s:SolidColorStroke color="0xFF0000" pixelHinting="true"/>
</s:stroke>
</s:Rect>
<s:Rect id="rightEdge" height="100%" width="1" right="1" bottom="1">
<s:fill>
<s:BitmapFill source="#Embed('checker.png')"
fillMode="repeat" />
</s:fill>
</s:Rect>
<s:Rect id="bottomEdge" height="1" width="100%" right="1" bottom="1">
<s:fill>
<s:BitmapFill source="#Embed('checker.png')"
fillMode="repeat" />
</s:fill>
</s:Rect>
</s:Group>
</s:Application>
The fill image is shown below (it appears as a dot. It's a 4x4 image png with transparency on half the image. So additional fills are used on those.
This creates a dashed border. Since there are transparent pixels it does not fill in the image on the right or bottom sides at times. So there are two extra fills that run along the right and bottom edges.
In the example above, click on the stage and you can resize the fill.
You can also wrap the rectMask in a group and then you can just set the mask="{rectMask}"
Try as I may, I am not able to skin a spark Button, when I place the button within a spark dataGrid. I am constrained to using the halo theme.
I have created the button renderer in a separate mxml file; I have separate buttons outside the dataGrid that show the skin correctly, so I am sure that there is nothing wrong with the skin. The whole point of this is to use the same skin inside the dataGrid as outside
The following code shows the same behavior that I am seeing; in this case the renderer is created in line. It seems like the skinClass is not respected. Or is there another way to do it.
<s:DataGrid id="dg" width="500" dataProvider="{employees2}">
<s:columns>
<s:ArrayList>
<s:GridColumn dataField="name" headerText="Name">
<s:itemRenderer>
<fx:Component>
<s:GridItemRenderer>
<s:Button label="Press Me"
top="0" bottom="0" left="0" right="0"
skinClass="MyButtonSkin" />
</s:GridItemRenderer>
</fx:Component>
</s:itemRenderer>
</GridColumn>
</s:ArrayList>
</s:columns>
</s:DataGrid>
In file MyButtonSkin.mxml
<?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="0.5">
<fx:Metadata>
<![CDATA[
/**
* #copy spark.skins.spark.ApplicationSkin#hostComponent
*/
[HostComponent("spark.components.Button")]
]]>
</fx:Metadata>
<fx:Script fb:purpose="styling">
<![CDATA[
/* 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"];
/**
* #private
*/
override public function get colorizeExclusions():Array {return exclusions;}
/**
* #private
*/
override protected function initializationComplete():void
{
useChromeColor = true;
super.initializationComplete();
}
]]>
</fx:Script>
<!-- states -->
<s:states>
<s:State name="up" />
<s:State name="over" />
<s:State name="down" />
<s:State name="disabled" />
</s:states>
<!-- layer 2: fill -->
<!--- #private -->
<s:Rect id="fill" left="1" right="1" top="1" bottom="1" radiusX="10">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0xFAFAFA"
color.over="0xBBBDBD"
color.down="0xAAAAAA"
alpha="0.85" />
<s:GradientEntry color="0x808080"
color.over="0x9FA0A1"
color.down="0x929496"
alpha="0.85" />
</s:LinearGradient>
</s:fill>
</s:Rect>
<!-- layer 8: text -->
<!--- #copy spark.components.supportClasses.ButtonBase#labelDisplay -->
<s:Label id="labelDisplay"
textAlign="center"
maxDisplayedLines="1"
horizontalCenter="0" verticalCenter="1" verticalAlign="middle">
</s:Label>
</s:SparkButtonSkin>
It appears that scaling the button to the size of the grid item does not size the corner radius.
I ended up with a button 200x200 pixels with a corner radius of 6 pixels; it just couldn't be seen. I upped the value to 25 and now I can see it
I have a Flex application in which I draw a rectangle using:
<s:Rect height="20" width="115" top="1" id="myRect">
<s:stroke>
<s:SolidColorStroke color="#FF0000" weight="2" alpha="0"/>
</s:stroke>
</s:Rect>
I want to set the value of alpha for myRect dynamically. Is it possible to set alpha using Actionscript? If so, how to access the alpha property?
I thought something like this would work, but I'm getting error Access of undefined property SolidColorStroke:
searchRect.stroke.SolidColorStroke.alpha=1;
Give the s:SolidColorStroke an id, as in:
<s:SolidColorStroke id="stroke"
Then you can set alpha such as:
stroke.alpha = 0.5;
This example updates the alpha based on a slider:
<?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">
<s:layout>
<s:VerticalLayout />
</s:layout>
<s:Rect height="20"
width="115"
top="1"
id="myRect">
<s:stroke>
<s:SolidColorStroke id="stroke"
color="#FF0000"
weight="2"
alpha="0" />
</s:stroke>
</s:Rect>
<s:HSlider id="slider"
valueCommit="{stroke.alpha = slider.value}"
value="0.5"
minimum="0"
maximum="1"
stepSize="0.1"
snapInterval="0.1" />
</s:Application>
I have a photo in a Flex project:
<s:Image source="#Embed('images/photo.png')" />
But now I'm wondering if I can make this image as the image below, in Flex (4 / 4.5 / 4.6) (in MXML and/or ActionScript 3):
Is this possible?
Here's a feathering mask tutorial in flash that you should be able to port to Flex.
Yes it is possible, first you need to create a mask layer for the rounder corners and inner shadow using AI or PS
Create a mask in Photoshop or AI. If you're using PS, it must be a vector mask.
Import it to Flash catalyst. If you're using PS, you must chose "Shape Layers > Keep Editable" in the import dialog.
In the layers panel, you'll see a Group with your masked content inside of it. Anything that goes inside that group will be masked.
Add the one image inside the masked group and copy the masked code in code view of Flash catalyst. (FC)
Now create one skin class for the spark image and add the mask code above the imageDisplay (BitmapImage).
MaskedImageSkin.mxml
<?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"
alpha.disabled="0.5">
<s:states>
<s:State name="uninitialized" />
<s:State name="loading"/>
<s:State name="ready" />
<s:State name="invalid" />
<s:State name="disabled" />
</s:states>
<fx:Script fb:purpose="styling">
<![CDATA[
/**
* #private
*/
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void
{
// Push backgroundColor and backgroundAlpha directly.
// Handle undefined backgroundColor by hiding the background object.
if (isNaN(getStyle("backgroundColor")))
{
background.visible = false;
background.includeInLayout = false;
}
else
{
background.visible = true;
background.includeInLayout = true;
bgFill.color = getStyle("backgroundColor");
bgFill.alpha = getStyle("backgroundAlpha");
}
super.updateDisplayList(unscaledWidth, unscaledHeight);
}
]]>
</fx:Script>
<!-- host component -->
<fx:Metadata>
<![CDATA[
/**
* #copy spark.skins.spark.ApplicationSkin#hostComponent
*/
[HostComponent("spark.components.Image")]
]]>
</fx:Metadata>
<!--- Defines the appearance of the image background. -->
<s:Rect id="background" left="0" right="0" top="0" bottom="0">
<s:fill>
<!-- #private -->
<s:SolidColor id="bgFill"/>
</s:fill>
</s:Rect>
<s:Group x="0" y="0">
<s:filters>
<s:DropShadowFilter color="#FFFFFF" inner="true" blurX="10" blurY="10" quality="5" alpha="0.85" angle="45" distance="10" />
<s:DropShadowFilter color="#FFFFFF" inner="true" blurX="10" blurY="10" quality="5" alpha="0.85" angle="90" distance="10"/>
<s:DropShadowFilter color="#FFFFFF" inner="true" blurX="10" blurY="10" quality="5" alpha="0.85" angle="-45" distance="10" />
<s:DropShadowFilter color="#FFFFFF" inner="true" blurX="10" blurY="10" quality="5" alpha="0.85" angle="-90" distance="10"/>
</s:filters>
<s:mask>
<s:Group x="0" y="0" width="280" height="180" >
<s:Rect left="0" right="0" top="0" bottom="0" radiusX="10" radiusY="10">
<s:fill>
<s:SolidColor color="#FFFFFF"/>
</s:fill>
</s:Rect>
</s:Group>
</s:mask>
<!--- Primary image display skin part. -->
<s:BitmapImage id="imageDisplay" left="0" top="0" right="0" bottom="0"/>
</s:Group>
<!--- Progress indicator skin part. -->
<s:Range id="progressIndicator" skinClass="spark.skins.spark.ImageLoadingSkin" verticalCenter="0" horizontalCenter="0" includeIn="loading" layoutDirection="ltr" />
<!--- Icon that appears in place of the image when an invalid image is loaded. -->
<s:BitmapImage id="brokenImageIcon" includeIn="invalid" source="#Embed(source='Assets.swf',symbol='__brokenImage')" verticalCenter="0" horizontalCenter="0"/>
</s:Skin>
Apply this skin class for spark image
<s:Image source="#Embed('assets/maskImg.png')" skinClass="MaskedImageSkin" width="200" height="200"/>
The above code is just an example of masking image, create your own mask using rounded rectangle. This will solve your issue.
Happy skinning ...
I try to have a specific window skin according operating system.
See below my skin.
<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:Layout="skin.Layout.*"
alpha.disabledGroup="0.5"
creationComplete="sparkskin1_creationCompleteHandler(event)">
<fx:Metadata>
[HostComponent("fr.inter.ui.windowSkin.wCustomWindow")]
</fx:Metadata>
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
protected function btResize_mouseDownHandler(event:MouseEvent):void
{
btResize.addEventListener( MouseEvent.MOUSE_UP, btResize_mouseUpHandler );
stage.nativeWindow.startResize();
}
protected function btResize_mouseOutHandler(event:MouseEvent):void
{
btResize.removeEventListener( MouseEvent.MOUSE_OUT, btResize_mouseOutHandler );
}
protected function btResize_mouseUpHandler(event:MouseEvent):void
{
btResize.removeEventListener( MouseEvent.MOUSE_UP, btResize_mouseUpHandler );
}
protected function sparkskin1_creationCompleteHandler(event:FlexEvent):void
{
if (NativeApplication.supportsDockIcon)
{
this.currentState = "supportsDockIcon";//mac
}
else
{
this.currentState = "supportsSystemTray";
}
}
]]>
</fx:Script>
<s:states>
<s:State name="disabledAndInactive" stateGroups="disabledGroup, inactiveGroup" />
<s:State name="maximizedGroup"/>
<s:State name="normal" />
<s:State name="disabled" stateGroups="disabledGroup" />
<s:State name="normalAndInactive" stateGroups="inactiveGroup" />
<s:State name="supportsDockIcon" />
<s:State name="supportsSystemTray"/>
</s:states>
<s:Rect id="backgroundRect"
left="0"
right="0"
top="0"
bottom="0"
alpha="0"
>
<s:fill>
<s:SolidColor alpha="0"/>
</s:fill>
</s:Rect>
<s:Group bottom="0" left="0" right="0"
top="0"
>
<!--Fond de la fenetre-->
<s:Rect bottom="0" left="0" right="0"
top="0"
radiusX="8" radiusY="8" >
<s:fill>
<s:SolidColor color="#656565" alpha=".7" />
</s:fill>
<s:stroke>
<s:SolidColorStroke color="#666666" />
</s:stroke>
</s:Rect>
<s:Group height="38" id="moveArea"
left="0" right="0" >
<!--Barre bleu avec filet-->
<s:Rect height="25" left="10" right="10" top="10">
<s:fill>
<s:SolidColor color="#055a90" />
</s:fill>
<s:stroke>
<s:SolidColorStroke color="#666666" />
</s:stroke>
</s:Rect>
<s:BitmapImage id="icon"
left.supportsSystemTray="5" right.supportsDockIcon="5"
verticalCenter="0" />
<s:Label id="titleDisplay"
styleName="swindowTitle"
left.supportsSystemTray="60" left.supportsDockIcon="{this.width/2}"
top="18" verticalAlign="middle" horizontalCenter="0"
/>
<!--Zone de bouton-->
<s:HGroup right.supportsSystemTray="12" left.supportsDockIcon="12" verticalCenter="0">
<s:Button id="btMinimize" buttonMode="true"
skinClass.supportsSystemTray="skin.components.MinimizeButtonSkin"
skinClass.supportsDockIcon="skin.components.MinimizeButtonSkinM"
verticalCenter="0"/>
<s:Button id="btMaximize" buttonMode="true"
skinClass.supportsSystemTray="skin.components.MaximizeButtonSkin"
skinClass.supportsDockIcon="skin.components.MaximizeButtonSkinM"
verticalCenter="0"/>
<s:Button id="closeButton" buttonMode="true"
skinClass.supportsSystemTray="skin.components.CloseButtonSkin"
skinClass.supportsDockIcon="skin.components.CloseButtonSkinM"
verticalCenter="0"/>
</s:HGroup>
</s:Group>
<!--Fond de la zone principale-->
<s:Rect id="background" left="10" top="35" right="10" bottom="10">
<s:fill>
<s:LinearGradient rotation="-90">
<s:GradientEntry color="#edf0f7"/>
<s:GradientEntry color="#fcfbfb" />
</s:LinearGradient>
</s:fill>
<s:stroke>
<s:SolidColorStroke color="#666666" />
</s:stroke>
</s:Rect>
<!--Zone dans laquelle les elements vont se positionner-->
<s:Group id="contentGroup" left="15" right="15" top="43" bottom="15" minWidth="0"
minHeight="0" width="100%" height="100%">
</s:Group>
</s:Group>
<s:Button height="15" id="btResize" width="15"
bottom="0" right="0"
skinClass="spark.skins.spark.windowChrome.GripperSkin"
mouseDown="btResize_mouseDownHandler(event)"
buttonMode="true"/>
When windows is loading firt, buttons appear well.
But if window is desactivate and after activate, MacOs and Windows buttons appear.
I don't know how to solve that, could you help me?
Thanks
You're not supposed to set the Skin's currentState directly from within the Skin because the hostComponent should take care of that. When you deactivate and re-activate the Window, the hostComponent will set the Skin state back to one of its original states (e.g. normal) and hence disregards your two custom states.
If you want to set the Skin's state based on certain conditions you should override the getCurrentSkinState() method of the hostComponent. But in this particular case I don't think that would be the right approach, because it would be too complicated.
The easiest solution here I think would be to override the Skin's updateDisplayList() method to position your elements. This is the method that takes care of correctly displaying all the elements in your Skin.
<fx:Script>
<![CDATA[
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
super.updateDisplayList(unscaledWidth, unscaledHeight);
if (NativeApplication.supportsDockIcon) {
titleDisplay.left = width / 2;
//position other elements for mac
}
else {
titleDisplay.left = 60;
//position other elements for win
}
}
]]>
</fx:Script>
Another - perhaps even better - approach would be to create two separate Skin's (one for Mac, one for Windows) and apply the correct Skin to your Windows. This would rid us of the continous if/else checking for capabilities.