Can some one give me the code for an itemRenderer for a ColumnSeries currently my best effort is as follows...
Defining the itemRenderer
columnSeries.setStyle("itemRenderer","comp.EmptyBox");
comp.EmptyBox
<?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"
focusEnabled="true">
<s:Rect id="lblData" top="0" left="0" right="0" bottom="0">
<s:fill>
<s:SolidColor color="0xFFFFCC" />
</s:fill>
<s:stroke>
<s:SolidColorStroke color="0x660099" weight="2" />
</s:stroke>
</s:Rect>
And currently my error is a type cohersion due to a badly constructed itemRenderer.
Try this:
columnSeries.setStyle("itemRenderer", new ClassFactory(comp.EmptyBox));
Related
I have a small issue related to my web App developed in Flex 4.6.
I have an app which has 800 x 600 px and in some screens, not all the content is shown and no scroll appear in the browser.
How can I setup the app to be able to show the y-scroll in the browser?
Regards.
I had similar problem - with a card game as Flex 4 web app 700 x 525 px - played mostly by older folks and they often have fonts/webpage zoomed (for example by using CTRL and + keys in browser) - which caused the UI be offset (like PopUpWindow not centered) etc.
My solution has been to use a custom app skin.
Here some excerpts of my code:
MyApp.mxml:
<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"
width="700" height="525"
initialize="systemManager.stage.scaleMode=StageScaleMode.SHOW_ALL"
skinClass="MySkin">
...
MySkin.mxml: (even works in full screen mode)
<?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">
<fx:Metadata>
<![CDATA[
[HostComponent("spark.components.Application")]
]]>
</fx:Metadata>
<fx:Script fb:purpose="styling">
<![CDATA[
....
]]>
</fx:Script>
<s:states>
<s:State name="normal" />
<s:State name="disabled" />
<s:State name="normalWithControlBar" />
<s:State name="disabledWithControlBar" />
</s:states>
<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>
You need to add an Scroller to the components that you want to scroll and make sure you have set verticalScrollPolicy to "auto".
http://help.adobe.com/en_US/flex/using/WSb04c7610c3432839-13869d09121418556f1-7ffc.html
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>
So I'm loading a really big pic in this mx:Image manteinAspectRatio enabled with a height constraint and as usual it doesn't work (Flex is definitely not for me):
<?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:Rect top="0" right="0" bottom="0" left="0">
<s:fill>
<mx:SolidColor color="#000000"/>
</s:fill>
</s:Rect>
<s:VGroup id="a" top="0" right="0" bottom="0" left="0" horizontalAlign="center" verticalAlign="middle">
<s:Group id="b">
<s:Rect id="c" top="0" right="0" bottom="0" left="0" radiusX="10" radiusY="10">
<s:fill>
<mx:SolidColor color="#cccccc"/>
</s:fill>
</s:Rect>
<s:VGroup id="d" paddingTop="10" paddingRight="10" paddingBottom="10" paddingLeft="10">
<mx:Image id="e" source="big.jpg" maxHeight="300" maintainAspectRatio="true" />
</s:VGroup>
</s:Group>
</s:VGroup>
</s:Application>
The big.jpg has more width than height so when it's resized the wrapping containers get the correct new height but they still have the old width.
I've tried to call validateNow() on every element, invalidate, callLater(), resize event, compete event... I'm a noob getting tired of AS 3.0
UPDATE:
Reading J_A_X answer I ended up with this:
<?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">
<fx:Script>
<![CDATA[
import flash.events.Event;
import mx.controls.Image;
private function fix(event:Event):void {
var img:Image = event.target as Image;
var h:uint = 300;
img.width *= h / img.height;
img.height = h;
img.removeEventListener("updateComplete", fix);
}
]]>
</fx:Script>
<s:Rect top="0" right="0" bottom="0" left="0">
<s:fill>
<mx:SolidColor color="#000000"/>
</s:fill>
</s:Rect>
<s:VGroup top="0" right="0" bottom="0" left="0" horizontalAlign="center" verticalAlign="middle">
<s:Group>
<s:Rect top="0" right="0" bottom="0" left="0" radiusX="10" radiusY="10">
<s:fill>
<mx:SolidColor color="#cccccc"/>
</s:fill>
</s:Rect>
<s:VGroup paddingTop="10" paddingRight="10" paddingBottom="10" paddingLeft="10">
<mx:Image source="big.jpg" maintainAspectRatio="false" updateComplete="fix(event)" />
</s:VGroup>
</s:Group>
</s:VGroup>
</s:Application>
I hope that helps another one dealing with Flex.
After looking at Image, it seems that it needs explicit height/width or else it won't scale down properly. It's a bit stupid not to scale to the maxHeight, but you could always use Flex 4.5 Image class instead or just create your own to handle max height/width.
I'm trying to create a simple skin for the flex progressbar control. Both the track and the bar should have rounded corners, and the bar should fill the track completely in the parts where it is being shown.
Here is the bar skin I've created based off this example:
<?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:Script>
<![CDATA[
override protected function initializationComplete():void {
useChromeColor = true;
super.initializationComplete();
}
]]>
</fx:Script>
<s:Rect radiusX="5" radiusY="5" top="0" left="0" right="0" bottom="0">
<s:fill>
<s:SolidColor color="#bb0203" />
</s:fill>
</s:Rect>
</s:SparkSkin>
Here is the progress bar declaration:
<mx:ProgressBar id="progressBar" name="progressBar" top="40" left="10" width="480" height="25"
label="" labelWidth="0"
trackSkin="Skins.ProgressBar.TrackSkin"
barSkin="Skins.ProgressBar.BarSkin" />
And here is the track skin:
<?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"
minHeight="25">
<fx:Script>
<![CDATA[
override protected function initializationComplete():void {
useChromeColor = true;
super.initializationComplete();
}
]]>
</fx:Script>
<s:Rect width="100%" height="100%" radiusX="5" radiusY="5">
<s:fill>
<s:SolidColor color="#d1d3d4" />
</s:fill>
</s:Rect>
</s:SparkSkin>
Unfortunately, it doesn't have quite the desired effect:
Instead of the bar being flush with the track, there's a margin, and the rounded border gets cut off.
How do I fix this?
In addition to setting the barSkin property, set the maskSkin property to the same value as barSkin:
You can assign this skin the same way as others in your code:
<mx:ProgressBar id="progressBar" name="progressBar" top="40" left="10" width="480" height="25"
label="" labelWidth="0"
trackSkin="Skins.ProgressBar.TrackSkin"
maskSkin="Skins.ProgressBar.BarSkin"
barSkin="Skins.ProgressBar.BarSkin" />
I'm having trouble setting up a Graphic object (a solid filled rectangle) to be masked with an image that gets loaded at runtime. I've managed to get it to work with the following code:
<?xml version="1.0"?>
<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"
creationComplete="init()"
>
<fx:Script>
<![CDATA[
import spark.core.MaskType;
public function init():void {
rect.mask = circle;
}
]]>
</fx:Script>
<s:Graphic id="rect" maskType="{MaskType.ALPHA}" cacheAsBitmap="true">
<s:Rect width="500" height="500">
<s:fill>
<s:SolidColor color="0xDDAAAA" />
</s:fill>
</s:Rect>
</s:Graphic>
<mx:Image
id="circle"
source="http://example.com/someimage.png" cacheAsBitmap="true" />
</s:Application>
What I don't understand is why it does not work with this other snippet, modified slightly from the O'Reilly Flex 4 Cookbook (Chapter 4 - Apply Bitmap Data to a Graphic Element as a Mask):
<?xml version="1.0"?>
<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"
>
<fx:Script>
<![CDATA[
import spark.core.MaskType;
]]>
</fx:Script>
<s:Graphic id="rect" maskType="{MaskType.ALPHA}" cacheAsBitmap="true">
<s:Rect width="500" height="500">
<s:fill>
<s:SolidColor color="0xDDAAAA" />
</s:fill>
</s:Rect>
<s:mask>
<mx:Image
id="circle"
source="http://example.com/someimage.png" cacheAsBitmap="true" />
</s:mask>
</s:Graphic>
</s:Application>
Setting the PNG inside the <s:mask> makes the stage render nothing, while adding the mask programatically in the init() method causes correct behaviour.
It took me quite a while to figure this out and I'd like to understand what it is that I'm doing incorrectly in the MXML approach, as that seems to be what is being done in the Cookbook (other than me using an Image and the example using a Group wrapped BitmapImage).
Thanks
Figured it out finally... The <mx:Image> in the <s:mask> needs to be wrapped in a <s:Group> (like the original code from the Cookbook indicated for the BitmapImage). I originally thought the Image did not require the Group tag because of what is mentioned earlier:
Likewise, any DisplayObject-based element, including the visual elements from the MX set, can be applied as a mask source for a Graphic element.
The final code looks like this:
<?xml version="1.0"?>
<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"
>
<fx:Script>
<![CDATA[
import spark.core.MaskType;
]]>
</fx:Script>
<s:Graphic id="rect" maskType="{MaskType.ALPHA}" cacheAsBitmap="true">
<s:Rect width="200" height="200">
<s:fill>
<s:SolidColor color="0xDDAAAA" />
</s:fill>
</s:Rect>
<s:mask>
<s:Group>
<mx:Image
id="circle"
source="http://example.com/triangle.png" cacheAsBitmap="true" />
</s:Group>
</s:mask>
</s:Graphic>
</s:Application>