Invocar funciones JavaScirpt desde Flex (ExternalInterface)

Posteado por Héctor Fuente Pérez
2 febrero, 2010

En el siguiente artículo vamos a ver como invocar funciones JavaScript desde Flex. Esto nos será de gran utilidad en muchas ocasiones.

Un ejemplo lo podeis encontrar en http://code.google.com/p/flex-iframe/. La librería Flex-iframe permite embeber una pagina html dentro de una aplicación Flex. Esto lo consigue insertando un iframe mediante html.

Para poder ejecutar JavaScritp vamos a utilizar la clase ExternalInterface y el método estático ExtenalInterface.call().

Primero vamos a ver el código ActionScript:

       
           
            private function holaMundoJavaScript():void {
                ExternalInterface.call("holaMundo");
            }
        ]]>

Ahora insertamos la función JavaScript holaMundo(), añadimos el siguiente código entre las etiquetas <head> </head> y :

function holaMundo() {
       alert("Hola Mundo desde JavaScript");
}

Si estáis utilizando Flex Builder recordar que debéis introducir este código en \html-template\index.template.htm. Vamos a probar el ejemplo:

Sencillo verdad. Ahora vamos a ver como se pasan parámetros a la función JavaScript y como la función JavaScript retorna parámetros a Flex. Este es el código AS·:


         
        	import mx.controls.Alert;
                private function showMessageJavaScript():void {
                 	var ncaracteres: Number;
                        ncaracteres  = ExternalInterface.call("showMessage", mensaje.text);
                        Alert.show("Numero Caracteres contados por JavaScript: " + ncaracteres);
               }
        ]]>

Y creamos la función JavaScript showMessage() a la cual, se le pasa un parámetro y nos retorna numero de caracteres del parámetro de entrada.

function showMessage(mensaje) {
    	alert(mensaje);
    	return mensaje.length;
}

Aquí tenemos el ejemplo.

El siguiente ejemplo muestra como ejecutar código JavaScritpt definido directamente en ActionScript, además de recuperar variables JavaScript desde Flex. Este es el código ActionScript:


        
        	import mx.controls.Alert;

                private function mostrarAlert():void {
                	var ncaracteres: Number;
                        ExternalInterface.call(" function holaMundo() {alert('Hola Mundo');}");
                }

                private function recuperarUserAgent(): void{
                	var userAgent:String = ExternalInterface.call("navigator.userAgent.toString");
                        Alert.show(userAgent, "navigator.userAgent:");
               }
              ]]>

Aquí podeis probar el código anterior.

Pulsar aquí para descargaros el código completo

Información y enlaces

Participa comentando, viendo lo que otros tienen que decir, o enlazandolo desde tu blog.

Información: febrero 2nd, 2010; 2 Comentarios

Feeds y enlaces: Comment Feed; De este autor; Del.icio.us; Digg; Technorati

Categorías y Tags: Adobe Flex

Otros Posts: Manual de OpenSTA (Introducción); Crear Release con Flex Builder (propiedad viewSourceURL)

Comentarios leidos

Numero de Comentario:: 1
Escrito por:: David
Posteado en:: 20 septiembre, 2010 at 8:39 pm

Muy util gracias

Numero de Comentario:: 2
Escrito por:: Obtener parametros de la URL en Adobe Flex (HTML Wrapper) :: Héctor Fuente Pérez
Posteado en:: 13 octubre, 2011 at 1:22 pm

[...] utilizo, es la propuesta por Abdul Qabiz. Es una clase ActionScript la cual echa mano de la clase ExternalInterface para obtener la URL mediante JavaScript, una vez recuperada realiza un parseo para obtener los [...]

Héctor Fuente Pérez