1 Reply Latest reply on Oct 12, 2010 1:11 AM by Alex Uhlmann

    Creating a Popup in ActionScript vs Creating a Popup in MXML

    John_Mattos Level 1

      Hello there

       

      I think I need a little help with a  couple of items. I'm using the Popup Library version 1.11 and I'm trying  to open up a Popup (with an associated presentation model) which I have  defined as follows.

       

      view.popup.EditSection.mxml

      view.popup.EditSectionPM.as

       

      the  view that opens the popup class (EditSection)  dows the following in  MXML, and it looks right, but it gives me limited access to the  reference of the popup window. With MXML it looks like this  http://grab.by/6Oaf

       

              <popup:PopUpFactory id="editSectionPopup" reuse="true" modal="true">
                   <fx:Component>
                       <popupWindows:EditSection/>
                   </fx:Component>
                   <popup:behaviors>
                       <spark:ZoomAndFadeBehavior duration="1000"/>
                       <behavior:KeepCenteredBehavior/>
                       <behavior:CenterBehavior/>
                       <popup:AddPopUpToParsleyContext />
                   </popup:behaviors>
               </popup:PopUpFactory>

       

      instead of  this, I've cobbled together the following ActionScript, but the popups  look VASTLY different when they open. Here is the ActionScript.. the  creationComplete runs the initializePopup() and the button click runs  the openPopup().. this version looks like http://grab.by/6Oaz when  opened.

       

      It doesnt seem to honor the height, width, etc  of the Class defining the popup, and when I click the different states,  I get errors indicating that no such states exist... though they exist  in the class

       

      question: Why might Cairngorm be opening up the wrong (generic?) TitleWindow? What am i doing wrong here?

       

          <fx:Script>
               <![CDATA[
                   import com.adobe.cairngorm.popup.PopUpFactory;
                   import com.adobe.cairngorm.popup.PopUpWrapper;
                   import com.adobe.cairngorm.popup.behavior.CenterBehavior;
                   import com.adobe.cairngorm.popup.behavior.KeepCenteredBehavior;
                   import com.adobe.cairngorm.popup.behavior.spark.ZoomAndFadeBehavior;
                   import com.company.psa.docbuilder.adhoc.view.editsection.EditSection;
                  
                   import mx.collections.ArrayCollection;
                   import mx.controls.Alert;
                  
                   private var wrapper:PopUpWrapper;
                   private var factory:PopUpFactory;
                   private var zoomAndFadeBehavior = new ZoomAndFadeBehavior();
                  
                   public function initializePopup():void
                   {       
                       var myEditSectionPopup:EditSection;
                       var myBehaviors:Array = new Array();
                       var myZAF = new ZoomAndFadeBehavior();
                       myBehaviors[0] = myZAF; // How do I set the duration?
                       myBehaviors[1] = new CenterBehavior()
                       myBehaviors[2] = new KeepCenteredBehavior();
                       factory = new PopUpFactory();
                       factory.popup = new ClassFactory(EditSection);
                       factory.reuse = false;
                       factory.modal = true;
                       factory.behaviors=myBehaviors;
                       // How do I reference the opened window?
                   }
                  
                   public function openPopup () :void
                   {
                       factory.open = true;
                   }
               ]]>
           </fx:Script>

       

      Here is the definition of the EditSection.mxml

       

      <?xml version="1.0" encoding="utf-8"?>


      <s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009"
                      xmlns:s="library://ns.adobe.com/flex/spark"
                      xmlns:spicefactory="http://www.spicefactory.org/parsley"
                      xmlns:mx="library://ns.adobe.com/flex/mx"
                      enabled="true"
                      width.EditSectionState="500"
                      height.EditSectionState="350"
                      width.YesNoCancelState="320"
                      height.YesNoCancelState="200"
                      width.YesNoState="320"
                      height.YesNoState="200"
                      title="{pm.windowTitle}"
                      currentState="{pm.viewState}"
                      creationComplete="init()">


          <fx:Metadata>
               [Event(name="close", type="mx.events.CloseEvent")]
           </fx:Metadata>


          <fx:Script>
               <![CDATA[
                   import mx.binding.utils.BindingUtils;
                   import mx.controls.Alert;
                   import mx.core.mx_internal;
                   import mx.events.CloseEvent;


                  [Inject]
                   [Bindable]
                   public var pm:EditSectionPM;


                  protected function closeHandler(event:CloseEvent):void
                   {
                       pm.closeHandler(event);
                       trace("EditSection is closing");
                   }


                  public function init():void
                   {


                  }
               ]]>
           </fx:Script>
           <s:states>
               <s:State name="EditSectionState"/>
               <s:State name="YesNoCancelState"/>
               <s:State name="YesNoState"/>
           </s:states>


          <fx:Declarations>
               <spicefactory:Configure/>
           </fx:Declarations>


          <!-- Define the transition to animate the change of view state. -->
           <s:transitions>
               <s:Transition fromState="EditSectionState">
                   <s:Parallel>
                       <mx:Resize target="{this}"
                                  duration="500"/>
                   </s:Parallel>
               </s:Transition>
               <s:Transition fromState="YesNoCancelState">
                   <s:Sequence>
                       <mx:Resize target="{this}"
                                  duration="500"/>
                   </s:Sequence>
               </s:Transition>
               <s:Transition fromState="YesNoState">
                   <s:Sequence>
                       <mx:Resize target="{this}"
                                  duration="500"/>
                   </s:Sequence>
               </s:Transition>
           </s:transitions>


          <s:Label text="Hello There World"
                    left="10"
                    right="10"
                    top="10"
                    verticalAlign="middle"
                    textAlign="center"
                    click="pm.labelClickHandler(event)"/>


          <mx:ControlBar width="50%"
                          left="10"
                          bottom="10"
                          height="40"
                          horizontalAlign="left"
                          verticalAlign="middle">
               <mx:Button label="Cancel"
                          width="120"
                          click="dispatchEvent( new CloseEvent( CloseEvent.CLOSE ) )"
                          includeIn="EditSectionState"/>
               <mx:Button label="Reset to Default"
                          width="140"
                          click="dispatchEvent( new CloseEvent( CloseEvent.CLOSE ) )"
                          includeIn="EditSectionState"/>
           </mx:ControlBar>
           <mx:ControlBar width="50%"
                          right="10"
                          bottom="10"
                          height="40"
                          horizontalAlign="right"
                          verticalAlign="middle">
               <mx:Button label="Save"
                          width="140"
                          click="dispatchEvent( new CloseEvent( CloseEvent.CLOSE ) )"
                          includeIn="EditSectionState"/>
               <mx:Button id="yesButton"
                          label="Yes"
                          width="60"
                          click="dispatchEvent( new CloseEvent( CloseEvent.CLOSE ) )"
                          includeIn="YesNoCancelState,YesNoState"/>
               <mx:Button id="noButton"
                          label="No"
                          width="60"
                          click="dispatchEvent( new CloseEvent( CloseEvent.CLOSE ) )"
                          includeIn="YesNoCancelState,YesNoState"/>
               <mx:Button id="cancelButton"
                          label="Cancel"
                          width="60"
                          click="dispatchEvent( new CloseEvent( CloseEvent.CLOSE ) )"
                          includeIn="YesNoCancelState"/>
           </mx:ControlBar>
           <s:RadioButton id="editSectionsCheckbox"
                          y="30"
                          label="Edit Sections"
                          selected="true"
                          click="pm.editSectionStateClickHandler(event)"
                          y.YesNoCancelState="24"
                          y.YesNoState="24"
                          width.YesNoState="99"
                          horizontalCenter.EditSectionState="-2"
                          y.EditSectionState="30"
                          width.EditSectionState="95"
                          horizontalCenter.YesNoCancelState="-7"
                          horizontalCenter.YesNoState="-3"/>
           <s:RadioButton id="yesNoCancelCheckbox"
                          y="56"
                          label="Yes/No/Cancel"
                          click="pm.yesNoCancelStateClickHandler(event)"
                          y.YesNoCancelState="50"
                          y.YesNoState="50"
                          horizontalCenter.EditSectionState="-1"
                          y.EditSectionState="56"
                          horizontalCenter.YesNoCancelState="-3"
                          horizontalCenter.YesNoState="-3"/>
           <s:RadioButton id="yesNoCheckbox"
                          y="76"
                          label="Yes/No"
                          click="pm.yesNoStateClickHandler(event)"
                          width="99"
                          y.EditSectionState="83"
                          horizontalCenter.EditSectionState="-1"
                          horizontalCenter.YesNoCancelState="-3"
                          horizontalCenter.YesNoState="-3"/>


      </s:TitleWindow>

       

      Here is the definition of EditSectionPM.as

       

      /*----------------------------------------------------------------------------*/
      /*                                                                            */
      /*   Copyright 2010                                                           */
      /*   All rights reserved.                                                     */
      /*                                                                            */
      /*----------------------------------------------------------------------------*/


      package com.company.psa.docbuilder.adhoc.view.editsection
      {
           import com.company.psa.docbuilder.adhoc.business.IDocumentConfigurationReceiver;
           import com.company.psa.docbuilder.core.business.DocumentConfiguration;
          
           import flash.events.MouseEvent;
          
           import mx.controls.Alert;
           import mx.events.CloseEvent;
          
           public class EditSectionPM implements IDocumentConfigurationReceiver
           {


              [Bindable]
               public var height:int=300;


              [Bindable]
               public var message:String="Spark Popup";


              [Bindable]
               public var viewState:String="EditSectionState";


              [Bindable]
               public var width:int=400;
              
               [Bindable]
               public var windowTitle:String="Edit: ";
              
               [Bindable]
               public var documentConfiguration:DocumentConfiguration;
              
               public var isDirty:Boolean=false;
               public var cancelVisible:Boolean=false;
              
               // Implementing the notifier receiver design pattern
               public function setDocumentConfiguration(argDocumentConfiguration:DocumentConfiguration):void
               {
                   this.documentConfiguration=argDocumentConfiguration;
               }
              
               public function closeHandler(event:CloseEvent):void
               {
                   trace("Close was clicked");
               }
              
               public function cancelHandler(event:CloseEvent):void
               {
                   trace("Cancel was clicked");
               }
              
               public function resetHandler(event:CloseEvent):void
               {
                   trace("Reset was clicked");
               }
              
               public function yesHandler(event:CloseEvent):void
               {
                   trace("Yes was clicked");
               }
              
               public function noHandler(event:CloseEvent):void
               {
                   trace("No was clicked");
               }
              
               public function editSectionStateClickHandler(event:MouseEvent):void
               {
                   trace("Edit Section state selected (setting this in the PM)");
                   this.viewState="EditSectionState";   
               }
              
               public function yesNoCancelStateClickHandler(event:MouseEvent):void
               {
                   trace("Yes/No/Cancel state selected (setting this in the PM)");
                   this.viewState="YesNoCancelState";
               }
              
               public function yesNoStateClickHandler(event:MouseEvent):void
               {
                   trace("Yes/No/Cancel state selected (setting this in the PM)");
                   this.viewState="YesNoState";   
               }
              
               public function labelClickHandler(event:MouseEvent):void
               {
                   trace("Label was clicked");
                   Alert.show("The Label"+event.toString() ,"You Clicked");
               }
           }
      }

        • 1. Re: Creating a Popup in ActionScript vs Creating a Popup in MXML
          Alex Uhlmann Level 3

          Hi John,

           

          If you're using Flex 4, the PopUpFactory isn't needed anymore, you can use the PopUpWrapper for everything. More info here: https://sourceforge.net/adobe/cairngorm/wiki/HowToUseCairngormPopup/

           

          What's the reason you need a reference to the popup window? I ask because one very common reason is that users want to open and close it from elsewhere (i.e. a Presentation Model). For that, the popup library offers bindable property open, so all your behaviour object needs to do is to bind a Boolean to it and you don't need an extra view reference of the actual popup window. However, you could also get that if you listen to one of the open/close type events; inside each event object there's a popup property that points to the actual popup window. Regarding your AS usage, I didn't see anything wrong at first sight but maybe compare it the AS sample in the PopupTest project? But first, check if you really need to do it in AS as the MXML examples in PopupTest and on the how-to wiki read simpler IMHO.But also, let us know if it does'nt satisfy your use case.

           

          Alex