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 24x7 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:
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
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
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)
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)
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
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
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.
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