I have these two components (large callout and small callout) and they can both
be displayed on the main stage at the same time via clicking a marker. If you
click on a blue marker you get a large callout. If you click on a red marker
you get a small callout. Should be fairly simple , right?
Well, what is happening is that if I have either type of callout open small or
large, having clicked on a marker, and I click any other marker, blue or red,
nothing happens. The new callout won't show up. Sometimes it shows up as a dot,
like it started to be placed on screen and other times nothing at all appears.
But as soon as I close the first callout, which is already opened, the second
callout appears on the stage.
What is interesting is if I take out everything out of bigbox (inside
largecallout) and everything out of smallbox (inside smallcallout) then this
delay doesn't happen.
----------- LargeCallout -------------------------
<?xml version="1.0" encoding="utf-8"?>
<fig:CalloutContainer
xmlns:fig="com.adobe.wheelerstreet.fig.callout.*"
xmlns="http://ns.adobe.com/mxml/2009";
xmlns:mx="http://ns.adobe.com/mxml/2009";
xmlns:gumbo="library:adobe/flex/gumbo"
mouseOver="handleMouseRollOver(event)"
mouseDown="stopProp(event)"
mouseMove="stopProp(event)"
creationComplete="init()"
xmlns:components="com.company.networkmap.view.components.*">
<mx:Script>
<![CDATA[
import mx.messaging.AbstractConsumer;
import figit.vis.data.NodeSprite;
import mx.events.FlexEvent;
import mx.collections.ArrayCollection;
import com.company.networkmap.view.components.Sparkline;
import com.flexcapacitor.controls.HTML;
import com.wrapper.base.application.*;
[Bindable]
private var _origWidth:Number = 300;
[Bindable]
private var _origHeight:Number =170;
[Bindable]
private var _maxedWidth:Number = 600;
[Bindable]
private var _maxedHeight:Number = 450;
[Bindable]
private var _showMinMaxButtons:Boolean = true;
/* AUTOCLOSE -- if set to true (default) clicking x
will remove
this instance from its parent */
public var autoClose:Boolean = true;
public var device:String;
public var node:NodeSprite;
// BINDABLE VARIABLES
--------------------------------------------------------------------
[Bindable]
private var _title:String = "title";
[Bindable]
private var
_nodeMinFirstLevelDataObject:ArrayCollection;
// 2nd level data is only available/shown for
networking devices.
[Bindable]
private var
_nodeMaxSecondLevelDataObject:ArrayCollection;
// PUBLIC CONST
--------------------------------------------------------------------------
public static const SUPER_DETAILS_CLOSED:String
= "superDetailClosed";
public static const SUPER_DETAILS_OPENED:String
= "superDetailOpened";
public static const SUPER_DETAILS_MINIMIZED:String
= "superDetailMinimized";
public static const SUPER_DETAILS_MAXIMIZED:String
= "superDetailMaximized";
public static const SUPER_DETAILS_MOUSED_OVER:String
= "superDetailsMousedOver";
private function init():void
{
trace('SuperDetailcallout created');
}
public function get title() : String
{
return _title;
}
public function set title( str:String ) : void
{
_title = str;
}
public function set
nodeMinFirstLevelDataObject(vo:ArrayCollection) : void
{
_nodeMinFirstLevelDataObject = vo;
}
public function set
nodeMaxSecondLevelDataObject(vo:ArrayCollection) : void
{
_nodeMaxSecondLevelDataObject = vo;
}
public function set showMinMaxButtons(b:Boolean) : void
{
_showMinMaxButtons = b;
}
public function set origWidth(n:Number) : void
{
_origWidth = n;
}
public function set origHeight(n:Number) : void
{
_origHeight = n;
}
public function set maxedWidth(n:Number) : void
{
_maxedWidth = n;
}
public function set maxedHeight(n:Number) : void
{
_maxedHeight = n;
}
private function stopProp( event:MouseEvent ) : void
{
event.stopPropagation();
}
private function superDetailsOpened( ) : void
{
trace( 'super detials created' );
dispatchEvent( new Event( SUPER_DETAILS_OPENED,
true, false ) );
}
private function superDetailsMinimized( event:FlexEvent
) : void
{
trace(event);
event.stopPropagation();
dispatchEvent( new Event(
SUPER_DETAILS_MINIMIZED, true, false ) );
}
private function superDetailsMaximized( event:FlexEvent
) : void
{
trace(event);
event.stopPropagation();
dispatchEvent( new Event(
SUPER_DETAILS_MAXIMIZED, true, false ) );
}
private function dispatchThenCloseNodeDetails(
event:MouseEvent ) : void
{
event.stopImmediatePropagation();
//removeSuperDetails();
dispatchEvent( new Event( SUPER_DETAILS_CLOSED,
true, false ) );
}
private function handleMouseRollOver(e:MouseEvent) :
void
{
this.dispatchEvent( new MouseEvent(
SUPER_DETAILS_MOUSED_OVER, true, false ) );
}
private function createHTML():void {
}
]]>
</mx:Script>
<fig:states>
<State name="minState" exitState="superDetailsMaximized(event)"
/>
<State name="maxState" basedOn="minState"
exitState="superDetailsMinimized(event)" />
</fig:states>
<fig:transitions>
<mx:Transition fromState="*" toState="maxState">
<mx:Sequence>
<mx:Resize target="{ bigbox }" duration="200"/>
</mx:Sequence>
</mx:Transition>
<mx:Transition fromState="maxState" toState="*">
<mx:Sequence>
<mx:Resize target="{ bigbox }" duration="150"/>
</mx:Sequence>
</mx:Transition>
</fig:transitions>
<mx:Canvas id="main" includeIn="minState, maxState">
<Label id="nameLabel" styleName="callOutHeader"
text="Greg"
truncateToFit="true"
left="5" width="100"
/>
<mx:Button
id="closeButton"
styleName="CalloutCloseButton"
right="0"
width="14" height="14"
click="{dispatchThenCloseNodeDetails( event )}"
/>
<mx:Button
id="expandButton"
enabled="{_showMinMaxButtons}"
includeInLayout="{_showMinMaxButtons}"
visible="_showMinMaxButtons{}"
styleName="CalloutExpandButton"
right="{closeButton.width + 2}"
width="14" height="14"
click.minState="currentState='maxState'"
click.maxState="currentState='minState'"
/>
<mx:VBox id="titleBar"
top="18"
>
<Canvas id="detailsHolder"
borderStyle="solid"
cornerRadius="10"
backgroundColor="0xFFFFFF"
>
<Canvas id="bigbox"
width.minState="{_origWidth}"
height.minState="{_origHeight}"
width.maxState="{_maxedWidth}"
height.maxState="{_maxedHeight}"
>
<!--<components:Sparkline id="sparkline" width="100%"
includeIn="minState"/>-->
<components:MinSuperDetailViewComp width="100%"
height="100%" includeIn="minState"/>
<components:MaxSuperDetailViewComp width="100%"
height="100%" includeIn="maxState"/>
</Canvas>
</Canvas>
</mx:VBox>
</mx:Canvas>
</fig:CalloutContainer>
------------ SmallCallout ------------------------
<?xml version="1.0" encoding="utf-8"?>
<fig:CalloutContainer
xmlns:fig="com.adobe.wheelerstreet.fig.callout.*"
xmlns="http://ns.adobe.com/mxml/2009";
xmlns:mx="http://ns.adobe.com/mxml/2009";
xmlns:gumbo="library:adobe/flex/gumbo"
xmlns:components="com.company.project.view.components.*"
borderStyle="topRightCallout"
mouseDown="stopProp(event)"
mouseMove="stopProp(event)"
mouseOver="handleMouseOver(event)"
>
<mx:Script>
<![CDATA[
import figit.vis.data.EdgeSprite;
import mx.events.FlexEvent;
import com.company.project.view.components.Sparkline;
[Bindable]
private var _origWidth:Number = 180;
[Bindable]
private var _origHeight:Number = 30;
[Bindable]
private var _maxedWidth:Number = 100;
[Bindable]
private var _maxedHeight:Number = 50;
[Bindable]
private var _showMinMaxButtons:Boolean = true;
[Bindable]
public var bgArray:Array;
private var _usage:Number;
/* AUTOCLOSE -- if set to true (default) clicking x
will remove
this instance from its parent */
public var autoClose:Boolean = true;
public var device:String;
public var edge:EdgeSprite;
[Bindable]
public var title:String = "title";
[Bindable]
public var line1:String = "line1";
[Bindable]
public var line2:String = "line2";
public static const SUPER_EDGE_DETAILS_CLOSED:String
= "superEdgeDetailClosed";
public static const SUPER_EDGE_DETAILS_OPENED:String
= "superEdgeDetailOpened";
public static const SUPER_EDGE_DETAILS_MINIMIZED:String
= "superEdgeDetailMinimized";
public static const SUPER_EDGE_DETAILS_MAXIMIZED:String
= "superEdgeDetailMaximized";
public static const
SUPER_EDGE_DETAILS_MOUSED_OVER:String = "superEdgeDetailsMousedOver";
public function set usage(perc:Number) : void
{
if(perc < .5){
bgArray = [0xffEFEFEF,
0xffBFBFBF];
}else if(perc > .5 && perc < .7){
bgArray = [0xffFFF4BF,
0xffFFE56F];
}else{
bgArray = [0xffFFBFBF,
0xffFF7F7F];
}
this.setStyle( 'backgroundGradientColors',
bgArray);
this.invalidateDisplayList();
this.invalidateProperties();
/* if(bgArray != null){
this.setStyle(
'backgroundGradientColors', bgArray);
this.invalidateDisplayList();
this.invalidateProperties();
} */
}
public function set showMinMaxButtons(b:Boolean) : void
{
_showMinMaxButtons = b;
}
public function set origWidth(n:Number) : void
{
_origWidth = n;
}
public function set origHeight(n:Number) : void
{
_origHeight = n;
}
public function set maxedWidth(n:Number) : void
{
_maxedWidth = n;
}
public function set maxedHeight(n:Number) : void
{
_maxedHeight = n;
}
private function stopProp( event:MouseEvent ) : void
{
event.stopPropagation();
}
private function handleMouseOver( event:Event ) : void
{
dispatchEvent( new Event(
SUPER_EDGE_DETAILS_MOUSED_OVER, true, false ) );
}
private function superEdgeDetailsOpened( ) : void
{
trace( 'super detials created' );
dispatchEvent( new Event(
SUPER_EDGE_DETAILS_OPENED, true, false ) );
}
private function superEdgeDetailsMinimized(
event:FlexEvent ) : void
{
trace(event);
event.stopPropagation();
dispatchEvent( new Event(
SUPER_EDGE_DETAILS_MINIMIZED, true, false ) );
}
private function superEdgeDetailsMaximized(
event:FlexEvent ) : void
{
trace(event);
event.stopPropagation();
dispatchEvent( new Event(
SUPER_EDGE_DETAILS_MAXIMIZED, true, false ) );
}
private function dispatchThenCloseEdgeDetails(
event:MouseEvent ) : void
{
event.stopImmediatePropagation();
dispatchEvent( new Event(
SUPER_EDGE_DETAILS_CLOSED, true, false ) );
removeEdgeSuperDetails();
}
public function removeEdgeSuperDetails() : void
{
if(autoClose){ this.parent.removeChild( this )
};
}
]]>
</mx:Script>
<mx:Canvas id="contentVBox" >
<Label id="nameLabel" styleName="callOutHeader"
text="Bandwidth Usage"
truncateToFit="true"
left="5" width="150"
/>
<mx:Button
id="closeButton"
styleName="CalloutCloseButton"
right="0"
width="14" height="14"
click="{dispatchThenCloseEdgeDetails( event )}"
/>
<mx:VBox id="titleBar"
top="18"
>
<Canvas
id="smallbox"
borderStyle="solid"
cornerRadius="5"
backgroundColor="0xFFFFFF">
<mx:HBox top="5" id="bigbox" width="{_origWidth}"
height="{_origHeight}" >
<components:Sparkline id="sparkline"
width="100%" />
</mx:HBox>
</Canvas>
</mx:VBox>
</mx:Canvas>
</fig:CalloutContainer>
