Invocar funciones JavaScirpt desde Flex (ExternalInterface)


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
February 2nd, 2010
Sin 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)

Escriba un comentario

Tomate un momento para comentar y contar lo que piensas sobre el post. Puedes usar un HTML b´sico para formatear.

Comentarios leidos

¡Eres el primero en dejar un comentario!