jQuery: The force be with you!… Mis razones de uso

Hace unos cuanto meses estamos utilizando jQuery como nuestro querido framework de Javascript de cabecera… en casi todos nuestros proyectos web. Y hoy di con esta noticia y tambien por el post "jQuery, Microsoft y tú” (by Jose M. Aguilar), algo que como bien dice estabamos esperando…

Acaban de anunciar que jQuery será la plataforma oficial de Javascript ofrecida por Microsoft para sus desarrolladores, incluso esta con soporte 24×7 para cualquier consulta basada en su PPS (Program Support Service)

“…Microsoft is going to make jQuery part of the official dev platform. JQuery will come with Visual Studio in the long term, and in the short term it’ll ship with ASP.NET MVC. We’ll also ship a version includes Intellisense in Visual Studio….”

Mis pensamientos (no tan profundos) de jQuery

Aqui mis experiencia y las razones en su utilizacion:

  • Porque lo estamos utilizando en nuestros proyectos actuales 🙂
    Hay que tener en cuenta que algo que nos puede costar es “ampliar” un proyecto, con esta libreria es muy pero muy facil introducirla a proyectos actuales.
    Y como ya lo venimos utilizando, esta noticia nos viene muy bien
  • Por que es muy sencillo.
    Hace honor a su slogan: Write Less, Do More…
  • Del punto anterior quiero destacar los selectores,…
    Poder ubicar un elemento/control dentro del nuestra pagina con la potencia que nos brinda las expresiones de seleccion de jQuery. Desde seleccionar por una clase CSS o simplemente accediendo con una consulta al DOM del XHTML a traves de tag/atributos/valores de tipo/jeraquia de hijos, etc, etc (ver +)
  • Encadenamiento
    Poder ir estableciendo las acciones en cadena… muy “objetoso” 🙂
    Ejemplo de cabezara (en la pagina principal): $(”p.surprise”).addClass(”ohmy”).show(”slow”);
  • Soportado a traves de Google Engine por la AJAX Library API
    El desarrollador no se tiene que preocupar mas por cache, o descargar al ultima version, o en multiples aplicaciones web utlizar el mismo arhivo js, etc etc… Google nos brinda esto(ver +)
    No lo utilizo, pero desde Mayo 2008 esta disponible. Pero tener esta potencia me gusto, ademas de que empresas fuertes lo apoyen (ver +)
  • Podemos escribir codigo no intrusivo
    No es necesario escribir en nuestro control la llamada a una funcion por ejemplo, la podemos asignar desde afuera, es decir injecta codigo 🙂
  • Podemos escirbir nuestro propia funcionalidad: plugins
    Antes de ponerse a armar algo hay que investigar si existe un plugins (un un conjunto de plugins) que nos puede ayudar.
    Esta extensibilidad es formidable. Podemos “agregar” nuestras funciones, y por supuesto compartilas..(ver como crear +)(listado de plugins
  • Y de lo ultimo se desprende: La Comunidad
    Como todo los elementos de tecnologia que lo utilicen masivamente existe una comunidad detras que apoya tanto en perfeccion como en mentoring a lo que recien comienzan. Como asi tambien proveyendo actualizaciones/nuevas funcionalidades a traves de su potencial para extenderlo
    No estamos solos… 🙂

 

Intellisense jQuery en VS2008

Que seria de nosotros sin el intellisense? Aqui la forma de tenerlo en VS2008 sin esperar la descargar by Microsoft

Enlaces:

ActionScript: Comunicacion este Javascript y Flash (ExternalInterface vs fsCommand)

Un amigo diseñador grafico necesitaba comunicar desde una funcion JS hacia Flash, y aquí mi respuesta, pero quise dejar sentado como era (hace un tiempo con versiones anteriores) y hoy con la nueva ExternalInterface.
Sobre una pregunta que me dio nostalgia, ya que hace un par de años dictaba cursos de Flash/Dreamweaver/ASP Clasico (etc, etc) (hay que ganarse la vida), y hoy por falta de tiempo (y de ofrecimientos) solo damos cursos de NET 🙂
Pero por que escribo por aqui sobre esto? Porque con ExternalInterface es al manera actual de comunicarse entre Flash y algun contenedor como un winform en .NET si queremos embeberlo, cuando tenga algun tiempo libre escribire sobre ello, aunque con el potencial de WPF ya no lo deseemos. 
Sincrona? Porque podriamos comunicarnos con Flash mediante Webservices, pero eso tambien es otro tema 🙂

 

UPDATE: 01/10/2008 (testado en IE7, FF3, Chrome, Safari) 
Gracias al comentario de Rover que detecto que en Firefox (3.0) no funcionaba, y alli tambien lo teste en Chrome y tampoco se comunicaba desde JS hacia Flash.
Problema:
       Esta linea

var flashObject = document.getElementById('ExternalInterfaceDEMO');

No detectaba/encontraba el objecto en el DOM de la pagina

Como utilizaba AC_RunActiveContent.js (el script de Adobe para el antiguo problema de IE que bloqueaba los activex en las paginas objecto object/embed)

Solucion:

Utilizar el conocido SWFObject.js

Para hacerlo simplemente hay que descargarse el script y linkearlo en nuestra pagina   

<script type="text/javascript" src="/js/SWFObject/swfobject.js"><!--     // //--></script> 

Luego para insertar la pelicula hay que realizar

<script type="text/javascript">
   1:  
   2:     var flashvars = {};   
   3:     var params = {};
   4:     params.wmode = "transparent";
   5:     params.bgcolor = "#FFFFFF";
   6:     var attributes = {};
   7:     swfobject.embedSWF("ExternalInterfaceDEMO.swf", "ExternalInterfaceDEMO", "550", "400", "8", "/js/swfobject/expressInstall.swf", flashvars, params, attributes);
   8:    

</script>

<div id="ExternalInterfaceDEMO">
<strong>Ud. necesita actualizar su reproductor de Flash</strong>
<a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Descargar Adobe Flash Player" /></a>
</div>

Como pueden ver el contenedor tiene el ID “ExternalIntefaceDEMO”, y es el que tomara el obejecto incrustado y alli su funcionara

var flashObject = document.getElementById('ExternalInterfaceDEMO');


Esta actualizado el archivo para la descarga.

 

 

Un poco de historia…

Hasta Flash 7 la forma de comunicación entre Flash —> Javascript era con el simple getURL y/o fsCommand (todo esto es Actionscript)… en este ultimo para probar habia que acordarse de cambiar algunas cosas.

Para la comunicacion entre Javascript —> Flash era con SetVariable (una ardua tarea, creanme)


Ejemplo:

getURL('j a v a s c r i p t:miFuncionJS('+mensaje+')');

tambien…
fscommand('miFuncionJS', mensaje);

No viene al caso ver como hacer funcionar estas dos ejemplos.. ya que mi comentario es sobre ExternalInterface.

 

Utilizando ExternalInterface

 

  • Flash –> Javascript

En la pelicula tendriamos algo asi (a modo de ejemplo) llamamos a un funcion desde Actionscript hacia Javascript llamada Mensaje

Antes que nada importamos la clase: flash.external.ExternalInterface

 image

En la pagina HTML tenemos

<script type="text/javascript" language="javascript">
    function Mensaje(texto) {
        var txtMensajeHTML = document.getElementById('txtMensajeHTML');
        txtMensajeHTML.value = texto;
    }
</script>

Desde Flash llamamos a la funcion en en el click (release) del boton.

Si quieres puedes descargar el ejemplo (ver mas abajo)

image


  • Javascript –> Flash

En el mismo ejemplo…vamos a comunicarnos desde js hacia flash. Aqui en Javascript tenemos:

function ParaFlash(msj){
        var flashObject = document.getElementById('ExternalInterfaceDEMO');
        if (flashObject != null) {
            flashObject.MensajeHaciaFlash(msj);
        }        else {
            alert("Error. No se ha podido comunicar con Flash. Verifique");
        }
    }
Por si estas mirando el codigo de arriba veras que accesamos al ID de la pelicula flash, es decir “debe tener un ID”

El id del tag object debe ser el mismo que el name del tag embebed  Actualizacion: Ahora utilice SWFObject (Ver mas arriba)

image
Idem si utilizamos SWFObject o AC_RunActiveContent que nos ayudan a escribir la pelicula en nuestras paginas. A tenerlo en cuenta

Actualizacion: Ahora utilice SWFObject (Ver mas arriba)

 

En ActionScript

image

en el HTML llamamos a la funcion:

<textarea id="txtMensajeHTML" cols="40" name="S1" rows="6"></textarea>
<br />        
<input id="btnVerMensajeParaFlash" type="button" value="Mensaje Hacia Flash" 
   onclick="ParaFlash(txtMensajeHTML.value);"  /></p>

 

 

 

NOTA: Esto se testea en un servidor web, no pruebes de forma local, para hacerlo de forma local deberias cambiar el parametro allowScriptAccess al valor “always” (por razones de seguridad). Pero tambien deberias configurar tu reproductor flash (ver video).

<param name="allowScriptAccess" value="sameDomain" />

Por

<param name="allowScriptAccess" value="always" />

Tambien configurar el reproductor (ver video)

 

 

Limitaciones para utililizar ExternalInterface

ExternalInterface funciona en:

  • Version de Flash 8 o superior…
  • Navegadores como:

    Windows Internet Explorer 5.0 o superior,

    Firefox 1.0 o superior

    Mozilla 1.7.5 o superior

    Netscape 8.0 o superior

    Safari 1.3 o superior.

    Opera 9 o superior.

    y cualquier broser que soporte NPRuntime API
  • Puedes preguntar si esta disponible para utilizar con la propiedad ExternalInterface.available

 

Lo testee en IE7, FF3, Chrome y Safari

 
image

 

Descargar ejemplo

Actualizada al 01/10/2008: con SWFObject

 

Que tiene esta interfaz sencilla donde podras enviar tanto desde flash hacia js como desde js hacia flash un texto.

image

 

 

UPDATE: 01/10/2008

Como Flash cuando arma el HTML para testear la pelicula lo realiza con el script AC_RunActiveContent.js, que era la solucion de Adobe para el problema del bendito IE que bloqueaba los objectos object/embeb

Mas arriba ya explique el problema y la solucion con SWFObject

<script language="javascript" type="text/javascript">
    if (AC_FL_RunContent == 0) {
        alert("This page requires AC_RunActiveContent.js.");
    } else {
        AC_FL_RunContent(
            'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0',
            'width', '550',
            'height', '400',
            'src', 'ExternalInterfaceDEMO',
            'quality', 'high',
            'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
            'align', 'middle',
            'play', 'true',
            'loop', 'true',
            'scale', 'showall',
            'wmode', 'window',
            'devicefont', 'false',
            'id', 'ExternalInterfaceDEMO',
            'bgcolor', '#ffffff',
            'name', 'ExternalInterfaceDEMO',
            'menu', 'true',
            'allowFullScreen', 'false',
            'allowScriptAccess', 'sameDomain',
            'movie', 'ExternalInterfaceDEMO',
            'salign', ''
            ); //end AC code
    }
</script>

 

 

 

Enlaces