My Flex 4.5 application has many users from Russia and Ukraine with poor internet connections and Socket connections often interrupt and have to be reconnected.
Currently I set currentState to "offline" on IOErrorEvent.IO_ERROR and Event.CLOSE events and display just 1 component in that state:
<mx:ProgressBar indeterminate="true"
horizontalCenter="0" verticalCenter="0"
label="Reconnecting..." labelPlacement="center"
includeIn="offline" />
but this is not the best way - because the users are suddenly presented by the white screen and the progress bar, while the background disappears.
(Actually it is not an application, but a card game - so the users could at least study their cards while being reconnected).
So I wonder, if there is a way to blur and disable background in Flex - similar to mx.controls.Alert, but without an OK-button and being dismissable when the Socket connection is restored?
UPDATE:
I've used a PopUpManager as suggested by Chris, but the indeterminate ProgressBar is not animated for some reason. How can I "kick start" it?
MyApp.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"
width="700" height="525"
backgroundColor="#CCFFCC"
initialize="systemManager.stage.scaleMode=StageScaleMode.SHOW_ALL"
applicationComplete="init()">
<fx:Script>
<![CDATA[
import mx.managers.PopUpManager;
import mx.controls.ProgressBar;
private function init():void {
var bar:Connecting = PopUpManager.createPopUp(this, Connecting, true) as Connecting;
PopUpManager.centerPopUp(bar);
}
private function fullScreen(event:MouseEvent):void {
stage.displayState =
stage.displayState == StageDisplayState.NORMAL ?
StageDisplayState.FULL_SCREEN :
StageDisplayState.NORMAL;
}
]]>
</fx:Script>
<s:states>
<s:State name="normal" />
<s:State name="connected" />
</s:states>
<s:CheckBox right="10" bottom="10"
label="Full screen"
click="fullScreen(event)" />
</s:Application>
Loading.mxml:
<?xml version="1.0" encoding="utf-8"?>
<mx:ProgressBar
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
indeterminate="true" fontWeight="normal"
label="Connecting..." labelPlacement="center">
</mx:ProgressBar>
UPDATE 2:
Solved that by embedding ProgressBar in a Group
When the connection is lost, set the enabled property of your Application (or the top level component you want to blur) to false and back to true when the connection is reestablished.
'Application' defines a skin state disabled which automatically becomes the currentState when the components 'enabled' property is set to 'false'. This means you can create a skin like this:
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" >
<fx:Metadata>[HostComponent("spark.components.Application")]</fx:Metadata>
<s:states>
<s:State name="normal" />
<s:State name="disabled" />
</s:states>
<s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" />
<s:filters.disabled>
<s:BlurFilter />
</s:filters.disabled>
</s:Skin>
This will include the 'BlurFilter' only in the 'disabled' state. And setting the 'enabled' property to 'false' will automatically block all user interaction with the component.
When you are using Alert what is really happening is that a popup component is displayed on top of your app. You can achieve the same effect using the PopUpManager to blur the background while displaying a small message to the user(maybe a custom component using Canvas).
Related
I have an ItemRenderer in which the selected state should be disabled (I'm using the renderer states and I don't have a selected state).
The problem is that the list (spark) resets the item renderer state upon click even though I don't have a "selected" state.
I want to fully prevent this behavior but I don't know how.
My renderer has autoDrawBackground set to false but it has to be enabled (although enabled=false fixes this issue)
Also, the renderer has several children including a list of its own.
Setting mouseEnabled="false" on the renderer fixes the renderer itself but not its children, and I need some of the children to be mouse enabled.
Edit:
Following is an excerpt from my item renderer:
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
width="100%" autoDrawBackground="false">
<s:states>
<s:State name="normal" />
<s:State name="suitable" />
<s:State name="mine" />
<s:State name="deleted" />
</s:states>
<s:Rect id="rect" top="0" right="0" bottom="0" left="0">
<s:fill>
<s:SolidColor id="background"
alpha=".8" alpha.deleted=".4"
color="0xff0000" color.suitable="0x00ff00" color.mine="0x0000ff" />
</s:fill>
</s:Rect>
<s:Label id="name" left="4" top="4" right="40" />
<s:List id="myList" left="4" top="40" right="4"
contentBackgroundAlpha="0" borderVisible="false" horizontalScrollPolicy="off">
<s:layout>
<s:VerticalLayout gap="3" paddingBottom="4" requestedMinRowCount="2" />
</s:layout>
</s:List>
</s:ItemRenderer>
Second Edit:
I had the same problem with the mouse hover state but that seems to have a workaround:
override protected function set hovered(value:Boolean) : void
{
// do nothing (prevent current state from changing to "hovered" state)
}
I'm unclear if you want to prevent an item from being selected; or just prevent the visual properties that go along with an item being selected.
To handle the visual aspects; I'd try to override the getCurrentRendererState() method. Something like this:
override protected function getCurrentRendererState():String{
if (selected && hasState("selected"))){
return "normal"; // or whatever state you want it to be
}
if (selected && down && hasState("downAndSelected")){
return "normal"; // or whatever state you want it to be
}
super.getCurrentRendererState()
}
In theory, this should prevent your renderer from ever going into a selected state.
how to I pass in a uicomponent to a mxml custom component?
ex: I want to pass in any number of buttons, and I want my custom component to lay them out in a certain order.
MainApp.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" xmlns:local="*"
>
<local:myComp >
<s:Button label='Button1' />
<s:Button label='Button2' />
<!--I want to add anything else here -->
</local:myComp>
myComp.mxml:
<?xml version="1.0" encoding="utf-8"?>
<s:Group 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()"
width="400" height="300"
>
<fx:Script>
<![CDATA[
private function init():void {
// how do I access the added components and place them where I want?
// do I use removeChildren and AddChildren?
// addItemsHere.addchild(nextButton);
]]>
</fx:Script>
<s:HGroup id='addItemsHere' />
As your component extends Group, you shall use addElement instead of addChild (and for all other methods with 'child' in their name it shall be replaced with 'element'. So, access to all elements will be like that:
for(var i:int =0; i < numElements; i++){
var button:Button = Button(getElementAt(i));
doWhatIWantWithMyButton(button);
}
It is also better to override createChildren method of your component if you know what to add at the creation moment.
If you don't need very specific button placement, you can set layout property of your component to any desired layout (like VerticalLayout, for example), and those layouts are tunable.
You seem to be trying to recreate functionality that already exists in the SDK. This is wat SkinnableContainer is for.
Depending on your use case, there are two ways to use it:
You only need to add some custom graphic elements to you custom component, but no additional behaviour
In this scenario, you would simple reuse SkinnableContainer and assign it a custom skin, like so:
<s:SkinnableContainer skinClass="MySkin">
<s:Button label='Button1' />
<s:Button label='Button2' />
</s:SkinnableContainer>
With MySkin.mxml perhaps something like:
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Metadata>
[HostComponent("spark.components.SkinnableContainer")]
</fx:Metadata>
<s:states>
<s:State name="normal" />
<s:State name="disabled" />
</s:states>
<s:layout>
<s:VerticalLayout/>
</s:layout>
<s:Label text="I'm a SkinnableContainer"/>
<s:Group id="contentGroup" width="100%" height="100%">
</s:SkinnableContainer>
Your Buttons will now automatically be added to the contentGroup; the SkinnableContainer class handles this for you. Note that this Group must have exactly that id; it's a required SkinPart.
You want to add some behaviour to you component
The procedure is the same, but you would now subclass SkinnableContainer (this is usually done in pure ActionScript), write some behaviour in there, and assign the skin to an instance of this class.
public class MyComp extends SkinnableContainer {
//additional behaviour goes here
}
Usage:
<local:MyComp skinClass="MySkin">
<s:Button label='Button1' />
<s:Button label='Button2' />
</local:MyComp>
I need to develop a flex application which is similar to match the following layout.
From the list I need to drag and drop items into a panel. I need to visualize wired connections between the items in the panel.
Moreover if i click one item in the panel, the rest all the items should glow with a plus sign indicating connections can be made. Once connection has been made it has to show negative sign.
Any help on doing this.
i don't know how to directly solve this problem but i a have solution which gives the same result wanted by you
here it is the code:
<s:GridItemRenderer currentState="normal" >
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
protected function state1_enterStateHandler(event:FlexEvent):void{
bc.setStyle("backgroundColor",0xff0018);
}
]]>
</fx:Script>
<s:states>
<s:State name="normal"/>
<s:State enterState="state1_enterStateHandler(event)" name="myState"/>
<s:State name="selected"/>
</s:states>
<s:BorderContainer id="bc" left="0" right="0" height="{this.height}"/>
<s:Button click="this.currentState = 'prova'"/>
I just cannot understand why mouseEnabledWhereTransparent does not work on this skin.
The Skin this creates is basically a Button with a transparent background and a little triangle to the left side, like so: >ButtonText But the empty space around the Triangle does not receive mouse events.
I've tried wrapping another group around the triangle path and i've tried wrapping it into a Graphic Object, also without success. I could create a Rect with 0 alpha below everything, but isn't that exactly what mouseEnabledWhereTransparent should be doing for me?
<?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:fb="http://ns.adobe.com/flashbuilder/2009" minWidth="21" minHeight="21" alpha.disabled="0.5"
mouseEnabledWhereTransparent="true">
<!-- host component -->
<fx:Metadata>
<![CDATA[
[HostComponent("spark.components.Button")]
]]>
</fx:Metadata>
<!-- states -->
<s:states>
<s:State name="up" />
<s:State name="over" />
<s:State name="down" />
<s:State name="disabled" />
</s:states>
<!-- triangle tip -->
<s:Path data="M 0 0 L 0 14 L 10 7 L 0 0" bottom="5">
<s:fill>
<s:SolidColor color="0xFFFFFF" />
</s:fill>
</s:Path>
<!-- text -->
<s:Label id="labelDisplay"
textAlign="center"
verticalAlign="bottom"
maxDisplayedLines="1"
left="14" right="10" top="2" bottom="2" color="0x000000" fontSize="14">
</s:Label>
</s:SparkSkin>
Yo, what you need is to add a rectangle before that path to act as a hit area, this works:
<s:Rect left="0" right="0" top="0" bottom="0" >
<s:fill>
<s:SolidColor alpha="0" />
</s:fill>
</s:Rect>
This guy here has a good example of making custom buttons (minus the label)
mouseEnabledWhereTransparent has no effect if there are no mouse event listeners on the Group it is set on. In your example the Button object has a click event listener, but the Button's skin object (SparkSkin) does not.
From the ASDoc for GroupBase.mouseEnabledWhereTransparent:
"This property only goes in to effect if mouse, touch, or flash player gesture events are added to this instance."
A workaround for you would be to add a mouse event listener to the skin that won't do anything, for example:
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
mouseEnabledWhereTransparent="true" click="doNothing()">
<fx:Script>
<![CDATA[
protected function doNothing():void {
trace('doNothing');
}
]]>
</fx:Script>
...
</s:SparkSkin>
The main use case for this property has been adding click events directly to a Group, but it is interesting to think about the case you bring up. It might be reasonable to file an enhancement request along the lines of "Setting mouseEnabledWhereTransparent on a skin should have an effect if the hostComponent has mouse listeners attached".
I have spark skin a button with up, down, over, and disable states in a button component to create a modular. Is there a way when the user press and hold a key, the button will remain in 'down' state?
The button component include skinclass:
<?xml version="1.0" encoding="utf-8"?>
<s:Button xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
skinClass="wfm.keyBtn">
</s:Button>
Spark 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"
<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 width="18" height="80" height.down="83" radiusX="1">
<s:stroke>
<s:SolidColorStroke color="0xaaaaaa" weight="1"/>
</s:stroke>
<s:filters>
<s:BevelFilter
distance="0"
angle="5" angle.down="5"
highlightColor="0xbbbbbb" highlightColor.down="0xaaaaaa"
highlightAlpha="1" highlightAlpha.down="1"
shadowColor="0xaaaaaa" shadowColor.down="0xffffff"
shadowAlpha="1" shadowAlpha.down="1"
blurX="5" blurX.down="6"
blurY="5" blurY.down="6"
strength="2" strength.down="2"
type="inner"
/>
</s:filters>
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0xf3f3f3" color.down="0xfff963" />
</s:LinearGradient>
</s:fill>
</s:Rect>
</s:SparkSkin>
Create a subclass of Button and tell the skin to be in the down state whenever the key you care about is down. Also, whenever you detect the key is down (or no longer down), invalidate the skin state so the skin knows to check what state it should be in:
package mypackage
{
import spark.components.Button;
public class MyButton extends Button
{
private var _isKeyDown:Boolean = false;
private function get isKeyDown():Boolean {
return _isKeyDown;
}
private function set isKeyDown(b:Boolean):void {
_isKeyDown = b;
this.invalidateSkinState();
}
// Add handlers in here to set isKeyDown to true/false appropriately
override protected function getCurrentSkinState():String {
if (isKeyDown)
return "down";
else
return super.getCurrentSkinState();
}
}
}