Communications between two Local Flex Apps - Comicacion entre dos Apps de Flex Locales

Translation:

• Spanish
• English

Algunas veces queremos comunicar dos aplicaciones de Flex o Flash que se encuentran en la misma página, y no vemos la manera de hacerlo.

ActionScript tiene una clase, que nos permite hacer esto sin mucho esfuerzo. Esta clase está ubicada en flash.net. LocalConnection.

Como todo principio de Cliente servidor, una aplicación tiene que escuchar y la otra tiene que ver si hay alguien escuchando.

Veamos el primer código donde vemos la aplicación que escucha, le colocaremos un nombre a la conexión llamada myConnection:

Sometimes we want to communicate two Flex or Flash applications that are on the same page, and do not see how.

ActionScript has a class, allowing us to do so without much effort. This class is located at flash.net. LocalConnection.

The idea is like a client server connection, an application needs to listen and the other has to see if anyone is listening.

Let us first see the application code where you hear, we will place a name to the connection called myConnection:

view plainprint?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"   
3.       xmlns:s="library://ns.adobe.com/flex/spark"   
4.       xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="500" minHeight="300"  
5.       applicationComplete="applicationCompleteHandler(event)" viewSourceURL="srcview/index.html">  
6.    
7.   
8.    
9.  <fx:Script>  
10.   <![CDATA[ 
11.    import mx.collections.ArrayCollection; 
12.    import mx.controls.Alert; 
13.    import mx.events.FlexEvent; 
14.     
15.    private const connection:LocalConnection = new LocalConnection(); 
16. [Bindable] private var   data:ArrayCollection = new ArrayCollection(); 
17.     
18.    protected function applicationCompleteHandler(event:FlexEvent):void 
19.    { 
20.     // TODO Auto-generated method stub 
21.     data.addItem("Application Complete Handler"); 
22.     connection.client = this; 
23.     connection.connect("myConnection"); 
24.     data.addItem("The Client es THE APP, The name is myConnection"); 
25.    } 
26.     
27.    public function colorBackground(sendedColor:uint):void 
28.    { 
29.     data.addItem("colorBackground Function"); 
30.     try 
31.     { 
32.      remoteColor.setStyle("backgroundColor",sendedColor); 
33.      data.addItem("Recived Color in UInt -> "+ sendedColor); 
34.     } 
35.     catch (error:ArgumentError) 
36.     { 
37.      Alert.show("Error trying to connect to LocalConnection."); 
38.     } 
39.    }  
40.     
41.   ]]>  
42.  </fx:Script>  
43.    
44.  <fx:Declarations>  
45.   <!-- Place non-visual elements (e.g., services, value objects) here -->  
46.  </fx:Declarations>  
47.    
48.  <s:VGroup height="100%" width="100%"   
49.      x="0" y="0"   
50.      paddingLeft="20" paddingRight="20" paddingTop="20" paddingBottom="20"   
51.      horizontalAlign="center">  
52.   <s:Panel id="remoteColor"   
53.      width="250" height="100"   
54.      title="Remote Background Color" >  
55.   </s:Panel>  
56.   <s:Panel width="100%" height="100%"   
57.      title="Console">  
58.    <s:List id="console"   
59.      width="100%" height="100%"   
60.      x="0" y="0"  
61.      dataProvider="{data}"></s:List>  
62.   </s:Panel>  
63.  </s:VGroup>  
64. </s:Application>  

<?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="500" minHeight="300"
      applicationComplete="applicationCompleteHandler(event)" viewSourceURL="srcview/index.html">
 

 
 <fx:Script>
  <![CDATA[
   import mx.collections.ArrayCollection;
   import mx.controls.Alert;
   import mx.events.FlexEvent;
   
   private const connection:LocalConnection = new LocalConnection();
[Bindable] private var   data:ArrayCollection = new ArrayCollection();
   
   protected function applicationCompleteHandler(event:FlexEvent):void
   {
    // TODO Auto-generated method stub
    data.addItem("Application Complete Handler");
    connection.client = this;
    connection.connect("myConnection");
    data.addItem("The Client es THE APP, The name is myConnection");
   }
   
   public function colorBackground(sendedColor:uint):void
   {
    data.addItem("colorBackground Function");
    try
    {
     remoteColor.setStyle("backgroundColor",sendedColor);
     data.addItem("Recived Color in UInt -> "+ sendedColor);
    }
    catch (error:ArgumentError)
    {
     Alert.show("Error trying to connect to LocalConnection.");
    }
   } 
   
  ]]>
 </fx:Script>
 
 <fx:Declarations>
  <!-- Place non-visual elements (e.g., services, value objects) here -->
 </fx:Declarations>
 
 <s:VGroup height="100%" width="100%" 
     x="0" y="0" 
     paddingLeft="20" paddingRight="20" paddingTop="20" paddingBottom="20" 
     horizontalAlign="center">
  <s:Panel id="remoteColor" 
     width="250" height="100" 
     title="Remote Background Color" >
  </s:Panel>
  <s:Panel width="100%" height="100%" 
     title="Console">
   <s:List id="console" 
     width="100%" height="100%" 
     x="0" y="0"
     dataProvider="{data}"></s:List>
  </s:Panel>
 </s:VGroup>
</s:Application>

Ahora veamos la segundo aplicación la cual envía un mensaje a myConnection buscando una función llamada colorBackground y le pasa como parámetro el Color Seleccionado:

Now for the second application which sends a message looking for a function called myConnection colorBackground and passes as parameters the Selected Color:

view plainprint?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"   
3.       xmlns:s="library://ns.adobe.com/flex/spark"   
4.       xmlns:mx="library://ns.adobe.com/flex/mx"   
5.       minWidth="500" minHeight="300"  
6.       applicationComplete="applicationCompleteHandler(event)" viewSourceURL="srcview/index.html">  
7.    
8.  <fx:Script>  
9.   <![CDATA[ 
10.    import mx.collections.ArrayCollection; 
11.    import mx.controls.Alert; 
12.    import mx.events.ColorPickerEvent; 
13.    import mx.events.FlexEvent; 
14.     
15.    private const connection:LocalConnection = new LocalConnection(); 
16. [Bindable] private var   data:ArrayCollection = new ArrayCollection(); 
17.    protected function applicationCompleteHandler(event:FlexEvent):void 
18.    { 
19.     // TODO Auto-generated method stub 
20.     data.addItem("Application Complete Handler"); 
21.     connection.addEventListener(StatusEvent.STATUS, connectionStatusHandler); 
22.     data.addItem("Add Listener Status to the Connection"); 
23.    } 
24.     
25.    private function connectionStatusHandler(event:StatusEvent):void 
26.    { 
27.     data.addItem("Connection Status Handler"); 
28.     switch (event.level) 
29.     { 
30.      case "status": 
31.       trace("Use of LocalConnection.send() succeeded"); 
32.       break; 
33.      case "error": 
34.       Alert.show( 
35.        "The LocalConnection.send() call failed: " 
36.        + event.code + "\n" 
37.        + event.toString() ); 
38.       break; 
39.     } 
40.     data.addItem("Status -> "+ event.level ); 
41.    } 
42.     
43.    protected function sendColorHandler(event:ColorPickerEvent):void 
44.    { 
45.     // TODO Auto-generated method stub 
46.     data.addItem("Send Color Handler"); 
47.     connection.send("myConnection", "colorBackground", event.color); 
48.     data.addItem("Color Sending in UInt -> " + event.color); 
49.    } 
50.   ]]>  
51.  </fx:Script>  
52.    
53.  <fx:Declarations>  
54.   <!-- Place non-visual elements (e.g., services, value objects) here -->  
55.  </fx:Declarations>  
56.  <s:VGroup x="0" y="0"   
57.      width="100%" height="100%"   
58.      paddingLeft="20" paddingRight="20" paddingTop="20" paddingBottom="20"   
59.      horizontalAlign="center">  
60.   <mx:ColorPicker change="sendColorHandler(event)"/>  
61.   <s:Panel width="100%" height="100%"   
62.      title="Console">  
63.    <s:List id="console"   
64.      x="0" y="0"   
65.      width="100%" height="100%"  
66.      dataProvider="{data}"></s:List>  
67.   </s:Panel>  
68.  </s:VGroup>  
69. </s:Application>  

<?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="500" minHeight="300"
      applicationComplete="applicationCompleteHandler(event)" viewSourceURL="srcview/index.html">
 
 <fx:Script>
  <![CDATA[
   import mx.collections.ArrayCollection;
   import mx.controls.Alert;
   import mx.events.ColorPickerEvent;
   import mx.events.FlexEvent;
   
   private const connection:LocalConnection = new LocalConnection();
[Bindable] private var   data:ArrayCollection = new ArrayCollection();
   protected function applicationCompleteHandler(event:FlexEvent):void
   {
    // TODO Auto-generated method stub
    data.addItem("Application Complete Handler");
    connection.addEventListener(StatusEvent.STATUS, connectionStatusHandler);
    data.addItem("Add Listener Status to the Connection");
   }
   
   private function connectionStatusHandler(event:StatusEvent):void
   {
    data.addItem("Connection Status Handler");
    switch (event.level)
    {
     case "status":
      trace("Use of LocalConnection.send() succeeded");
      break;
     case "error":
      Alert.show(
       "The LocalConnection.send() call failed: "
       + event.code + "\n"
       + event.toString() );
      break;
    }
    data.addItem("Status -> "+ event.level );
   }
   
   protected function sendColorHandler(event:ColorPickerEvent):void
   {
    // TODO Auto-generated method stub
    data.addItem("Send Color Handler");
    connection.send("myConnection", "colorBackground", event.color);
    data.addItem("Color Sending in UInt -> " + event.color);
   }
  ]]>
 </fx:Script>
 
 <fx:Declarations>
  <!-- Place non-visual elements (e.g., services, value objects) here -->
 </fx:Declarations>
 <s:VGroup x="0" y="0" 
     width="100%" height="100%" 
     paddingLeft="20" paddingRight="20" paddingTop="20" paddingBottom="20" 
     horizontalAlign="center">
  <mx:ColorPicker change="sendColorHandler(event)"/>
  <s:Panel width="100%" height="100%" 
     title="Console">
   <s:List id="console" 
     x="0" y="0" 
     width="100%" height="100%"
     dataProvider="{data}"></s:List>
  </s:Panel>
 </s:VGroup>
</s:Application>

Los archivos pueden Descargarlos arriba de cada ejemplo.

The files can be downloaded above each example.

Ejemplo Uno - Recive el mensaje:

Example One - The message receiver:

Ver y Descargar Archivo del App 1:

• Archivos - Descargar.
  

View Source and Download Files of the App 1:

• Download Source.
  

Ejemplo Dos - Envia el Mensaje:

Example Two - Sends the Message:

Ver y Descargar Archivo del App 2:

• Archivos - Descargar.
  

View Source and Download Files of the App 2:

• Download Source.