States, Transitions, and Effects

CaseyBentz — Fri, 27 Aug 2010 14:11:47 GMT

I am having some trouble making things work for a custom titleWindow. I want to be able to minimize, maximize, and use an effect on create and close. I can get it all to work except for the close. And it does work except that when the state is collapsed, it expands then fades away. Any help would be much appreciated.

Casey Bentz

<?xml version="1.0" encoding="utf-8"?>
<utils:TitleButtonWindow  xmlns:utils = "com.utils.*" 
   xmlns:mx = "http://www.adobe.com/2006/mxml"
   width = "{Model.instance.stageWidth * .99}" 
   height = "{Model.instance.stageHeight * .99}"
   backgroundAlpha = "0"
   title = "{permit.FILE_NAME}"
   titleIcon = "@Embed('com/assets/icons/i_permit3.png')"
   horizontalScrollPolicy= "off" 
   verticalScrollPolicy = "off"
   titleBtnClick= "changeState();"
   creationCompleteEffect= "{addEffect}"
   addedEffect= "{addEffect}"
   removedEffect= "{removeEffect}"
   showCloseButton= "true"
   close= "this.closePopUp();">
 <mx:Script>
  <![CDATA[
   import mx.core.Application;
   import mx.managers.PopUpManager;
   import com.model.Model;
   
   private var _isVisible : Boolean = false;
   
   private var _permit : Object;
   
   [Bindable]
   public function get permit():Object{
    return _permit;
   }
   public function set permit(value:Object):void{
    _permit = value;
   }   
   public function showPopUp():void
   {
    if (!this._isVisible)
    {
     PopUpManager.addPopUp( this, mx.core.Application.application.mainView );
     PopUpManager.centerPopUp( this );
     this._isVisible = true;
    }
   }
   public function closePopUp():void
   {
    this._isVisible = false;
    PopUpManager.removePopUp( this );
   }    
   private function changeState():void
   {
    switch( currentState )
    {
     case "":
     case null:
      currentState = "collapsedState";
      break;
     case "collapsedState":
      currentState = "";
      break;  
    }
   }
  ]]>
 </mx:Script>
 <!-- States -->
 <utils:states>
        <mx:State name="collapsedState">
            <mx:SetProperty name="height" value="38"/>
         </mx:State>
    </utils:states>
    <utils:transitions>
  <mx:Transition fromState="*" toState="collapsedState">
   <mx:Sequence targets="{ [this] }">
    <mx:Resize target="{this}" duration="500"/>
   </mx:Sequence>
  </mx:Transition>
  <mx:Transition fromState="collapsedState" toState="*">
   <mx:Resize target="{this}" duration="500"/>
  </mx:Transition>
 </utils:transitions>
  
 <!-- Effects -->
 <mx:Fade id="addEffect" duration="1000" alphaFrom="0" alphaTo="1"/>
 <mx:Fade id="removeEffect" duration="1000" alphaFrom="1" alphaTo="0"/>
 <mx:VBox width="100%" height="100%" styleName="panelBox">
  <mx:Label text="{}"
 </mx:VBox>
</utils:TitleButtonWindow>

Custom Title Window

package com.utils
{
 import com.events.TitleButtonClickEvent;
 
 import flash.events.MouseEvent;
 import flash.filters.GlowFilter;
 
 import mx.containers.HBox;
 import mx.containers.TitleWindow;
 import mx.controls.Image;
 
 [Event(name="titleBtnClick", type="flash.events.MouseEvent")]
 
 public class TitleButtonWindow extends TitleWindow
 {
  private var _titleBtn:HBox = new HBox();
  public var _source:String = "";
  
  public function TitleButtonWindow()
  {
   super();
  }
  override protected function createChildren():void{
   super.createChildren();
   _titleBtn.visible = false;
   _titleBtn.height = 22;
   _titleBtn.width = 22;
   _titleBtn.useHandCursor = true;
   _titleBtn.buttonMode = true;
   _titleBtn.mouseChildren = false;
   _titleBtn.addEventListener(MouseEvent.CLICK, handleTitleBtnClick);
   
   var img:Image = new Image();
   img.source = _source;
   img.height = 20;
   img.width = 20;
   
   var filter:GlowFilter = new GlowFilter(0x000000, .5,8,8);
   var arr:Array = [filter];
   img.filters = arr;
   
   _titleBtn.addChild(img); 
   
   titleBar.addChild(_titleBtn);
  }
  override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{
   super.updateDisplayList(unscaledWidth, unscaledHeight);
   var y:int = 4;
   var x:int = this.width - _titleBtn.width - 32;
   _titleBtn.move(x,y);
  }
  private function handleTitleBtnClick(e:MouseEvent):void{
   var event:TitleButtonClickEvent = new TitleButtonClickEvent('titleBtnClick', e);
   dispatchEvent(event);
  }
 }
}

Re: States, Transitions, and Effects

Drew — Fri, 27 Aug 2010 16:31:02 GMT

I tried to create a copy of the component and ran into too many issues to assist.
The event TitleButtonClickEvent is missing along with a lot of embedded resources & classes (com.model.Model).

I would suggest posting a complete project as an attachment to get further assistance.

Drew

topic States, Transitions, and Effects in ArcGIS API for Flex Questions

States, Transitions, and Effects

Re: States, Transitions, and Effects