2 Replies Latest reply on Jan 16, 2008 12:46 PM by RTCXi

    Help with Flex based popup windows and data population.

    RTCXi
      Hello, I need a bit of help with Flex popups. I have a flex application that uses a popup window when you click on a button and displays information about the image above the button the user clicked. I have about 4 images and I need to be able to display information about each of them through the popup window when users click on the buttons below the image.

      At this time, I am trying to do this from somewhat of a "static" point of view because I do not believe my hosting company supports Flex Data services. You will find my code below.


      First File.

      <?xml version="1.0" encoding="utf-8"?>
      <!--Application Initialization -->
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute" width="850" height="750"
      cornerRadius="10" borderColor="#000000" backgroundGradientColors="[#1b3434, #000000]">

      <!-- Popup-->
      <mx:Script>
      <![CDATA[
      import mx.managers.PopUpManager;

      [Bindable]
      private var win:IMSAI;

      private function init():void{}

      private function createPopup():void{
      win=IMSAI(PopUpManager.createPopUp(this,IMSAI,true));
      win.title = 'IMSAI.Net';
      win.x = -500;
      win.y = 0;
      customMove.end();
      customMove.play();



      }
      ]]>

      </mx:Script>
      <mx:Style>
      TitleWindow {
      borderStyle:solid;
      borderThickness:2;
      }
      </mx:Style>

      <mx:Parallel id="customMove" target="{win}">
      <mx:Move duration="2000" xTo="{(stage.width - win.width) / 2}" yTo="{(stage.height - win.height) / 2}" />
      <mx:WipeDown duration="2000" />
      </mx:Parallel>

      This is the code to trigger the popup when a user clicks on the button. The code below is the code for the popup.

      <?xml version="1.0" encoding="utf-8"?>
      <mx:TitleWindow xmlns:mx=" http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="init()"
      close="PopUpManager.removePopUp(this)" showCloseButton="true" alpha=".8"
      headerColors="[#000000,#1F3F62]" color="#FFFFFF" minHeight="200" minWidth="300"
      backgroundColor="#000000" title="IMSAI.net" width="520" height="394" verticalAlign="middle" horizontalAlign="center">
      <mx:Script>
      <![CDATA[
      import mx.managers.PopUpManager;

      private function init():void{}

      ]]>
      </mx:Script>
      <mx:Canvas width="470" height="338">
      <mx:Image x="10" y="10" width="140" height="103">
      <mx:source>file:///C|/ColdFusion8/wwwroot/IMSAI/Web-App/Site_Images/IMSAI Final Movie.swf</mx:source>
      </mx:Image>
      <mx:Text x="10" y="121" text="Description:" width="75" height="25" fontWeight="bold" color="#ff0000"/>
      <mx:Text x="158" y="10" text="Client:" width="52" height="28" fontWeight="bold" color="#ff0000"/>
      <mx:Text x="196" y="10" text="IMSAI Microcomputers &amp; Fischer-Freitas Company" width="252" height="39"/>
      <mx:Text x="159" y="46" text="Industry:" fontWeight="bold" color="#ff0000"/>
      <mx:Text x="216" y="46" text="Computer &amp; Microcontroller Manufacturing." width="232" height="35"/>
      <mx:Text x="83" y="121" text="IMSAI.net is the front-end web application for IMSAI Computer " width="355"/>
      <mx:Text x="10" y="136" text="manufacturing, customer support, and order processing. Driven by a Microsoft database back-end, this application includes rich flash forms, site search capabilities, and flash content. Currently under phase II of a three phase development plan, the e-commerce logic and processing capabilities are under development. Once finished, this application will be able to process orders provide customers with instant order confirmation numbers, shipment dates, and payment processing." width="428"/>
      <mx:Text x="10" y="244" text="Technologies:" fontWeight="bold" color="#ff0000"/>
      <mx:Image x="100" y="244" width="50" height="50">
      <mx:source>file:///C|/ColdFusion8/wwwroot/Sapphire Development/content/cf8icon.jpg</mx:source>
      </mx:Image>
      <mx:Image x="244" y="244" width="50" height="50">
      <mx:source>file:///C|/ColdFusion8/wwwroot/Sapphire Development/content/flashlogo.jpg</mx:source>
      </mx:Image>
      <mx:Text x="53" y="290" text="Coldfusion 8 Enterprise" height="30"/>
      <mx:Text x="230" y="290" text="Adobe Flash 8"/>

      </mx:Canvas>

      What I want to do is either be able to create a popup file for each button and photo, or find a way to pass a name like a button ID that corresponds to a XML data structure and then provides the appropriate data for the photo. I have tried altering the first page of code with the "public" declaration to allow for a second popup file for each button and image, but the IDE won't allow me to do such because it creates errors stating I can only have one public declaration of the kind and function above per application. Help resolving this would be greatly appreciated. Thank you.
        • 1. Re: Help with Flex based popup windows and data population.
          peterent Level 2
          I think you already know how to do what you want, so perhaps I don't understand your question. But here goes.

          Give your pop-up window class some bindable public variables and then bind those variables to controls in your pop-up. For example, let's say I have a Text control in my pop-up that I want to set. I would do this in the pop-up MXML file:

          [Bindable] public var note:String;
          ...
          <mx:Text text="{note}" />

          Then I set the note variable when I created the pop-up:

          win = PopUpManager.createPopUp( this, MyPopUp ) as MyPopUp;
          win.note = "This is what I want to say";

          • 2. Re: Help with Flex based popup windows and data population.
            RTCXi Level 1
            I have an idea of what I want to do. I am just having difficulty articulating how to go about such. I know I want to find a way so that if a user clicks on button 1, button 1 will send some kind of variable. For example, a user clicks Btn1 under a picture. Btn1 sends some kind of variable or binding to a data structure which returns the picture's description, price, etc. and calls the popup to display that data in a form like manner. Then the user click Btn2 which does the same thing. The only purpose of the popup is to display the data.

            Do I create a data structure with a related name to say a button name so when the btn is clicked, the a variable title btn1 will prepend itself to the data structure like
            {btn1.imagename}
            {btn1.price}
            {btn1.description}.

            I want each btn to call a different set of data about each picture because right now, the code I have is allowing me multiple buttons, but is just displays the popup. Is there a way to create a separate popup window for each button? Thats seems as though it would be easier. Thank you for your help.