Flex SDK, Air SDK, FlashDevelop

aKcro — Wed, 26 May 2010 04:53:49 +0000

Hoy voy a comentar sobre herramientas interesantes para programar aplicaciones flex-air de adobe.

Adobe pone a disposición Kits de desarrollo gratuitos como son Adobe Flex SDK, Adobe Air SDK. Lo que no es gratuito es obtener Adobe Flash builder (flex builder), que es un editor gráfico y de código para el desarrollo de este tipo de aplicaciones flash. Aún así adobe pone a disposición licencias para estudiantes y versiones de prueba de 2 meses de duración.

Lo primero que se debe hacer es descargar y descomprimir los SDK:

Adobe Flex SDK

Adobe Air SDK

Además debemos bajarnos el runtime de Adobe Air si queremos compilar nuestra aplicación para escritorio:

Adobe Air Runtime

Para los que no gustan de versiones de prueba para un entorno de desarrollo existe FlashDevelop un editor opensource para el desarrollo de aplicaciones en flash, por lo que trae soporte para ActionScript y mxml que es el formato en que trabaja flex y air.

La desventaja de FlashDevelop es que no posee ninguna opción para trabajar directamente con un control de versiones por lo que deberemos buscar algún otro tipo de svn si debemos usarlo en grupos de trabajo, FlashDevelop nos recomienda Tortoise pero por supuesto eso dependerá de nuestro gusto.

Descargar FlashDevelop

La configuración no la detallaré, pero al crear un nuevo proyecto e intentar hacer build nos pedirá configurar As3 donde pondremos la carpeta donde descomprimimos Flex.

Finalmente lo que falta es un editor visual, no sé si FlashDevelop soporta algún plugin de diseño gráfico, ya que me quede con uno bastante interesante que pille en la nube y lo pueden ver en el siguiente enlace:

DesignView

Finalmente solo comentar para los que usan eclipse que existe un plugin gratuito llamado Air Gear pero no tiene la potencia de FlashDevelop, no resalta código, no autocompleta, etc. Aun así podemos configurar todo tipo de compilaciones.

Saludos.

Como imprimir open flash chart desde gxt-gwt

aKcro — Sun, 09 May 2010 22:57:37 +0000

Muchos de los que programan utilizando librerías gxt de www.extjs.com utilizan open flash chart para desplegar gráficos en pantalla, el problema es manejar la impresión desde la web, ya que por medio de los navegadores no tenemos control sobre el hardware.

En general siempre utilizamos javascript para imprimir utilizando el clásico window.print(); y lo que haremos para poder captar los gráficos como objetos flash desde gxt sera utilizar funciones nativas de javascript para generar un html e imprimirlo.

Vamos al código:

Chart nuevoGrafico = new Chart();

Vamos a generar ese gráfico, no entraremos en detalles de como se generará o como se desplegará o en que contenedor irá, aquí la finalidad es imprimir, por lo que asumiremos que todos han creado gráficos. De todas maneras se puede ver una lista de ejemplos desde Aquí.

Button btnPrint = new Button(“Imprimir”);

btnPrint.addSelectionListener(new SelectionListener() {

public void componentSelected(ButtonEvent ce) {

String img1 = getImage(nuevoGrafico.getSwfId());

String myHtml=”";

myHtml += “”; }

printHtml(myHtml);

}

});

Lo que haremos sera generar una imagen en base 64 a partir de nuestro objeto flash utilizando la función getImage(String id), luego generar el código html que mostrará la imagen en pantalla, finalmente imprimirlo. Notar que prefiero generar el html en esta sección debido a que pueden existir más gráficos o algo en particular que nos gustaría mostrar para imprimir en nuestro html.

Vamos a las funciones:

/*

* Retorna la imagen en base 64

*/

public static String getImage(String id) {

return getImageData(id);

}

private static native String getImageData(String id)

/*-{

var swf = $doc.getElementById(id);

var data = swf.get_img_binary();

return data;

}-*/;

Con esto obtenemos la imagen en base 64 ahora solo necesitamos imprimir nuestro html.

/**

* Imprime el codigo html.

* @param x Codigo html que se mostrara en una ventana popup

*/

public static native void printHtml(String x)

/*-{

img_win=window.open(”,’name’,'height=800,width=800,scrollbars=yes’);

var tmp = img_win.document;

tmp.writeln(‘Imprimir Graficos<\/title><\/head>’);</p> <p><span style="white-space: pre;"> </span>tmp.writeln(‘<body>’);</p> <p><span style="white-space: pre;"> </span>tmp.writeln(x);</p> <p><span style="white-space: pre;"> </span>tmp.writeln(‘<\/body><\/html>’);</p> <p><span style="white-space: pre;"> </span>tmp.close();</p> <p><span style="white-space: pre;"> </span>img_win.print();</p> <p><span style="white-space: pre;"> </span></p> <p><span style="white-space: pre;"> </span>}-*/;</p></blockquote> <p>Eso es todo amigos. Saludos.</p> </article> <article> <h1>RiP! : A remix manifesto</h1> <p>hypn — Sun, 29 Nov 2009 18:00:59 +0000</p> <p>Eran las 3 a.m. más o menos y hacía zapping en el cable cuando me topé con un documental en el i-Sat que se llamaba “<a title="RiP!: A Remix Manifesto" rel="homepage" href="http://ripremix.com">RiP! : A remix manifesto</a>“. Comencé a verlo porque había un dj haciendo remixes muy buenos (su nombre es “<a title="Girl Talk" rel="homepage" href="http://en.wikipedia.org/wiki/Girl_Talk_%28musician%29" target="_blank">Girl Talk</a>“) y hablaban de algo que está muy de moda hoy en nuestro Chilito: “<strong>Los derechos de autor</strong>“.</p> <p>Este documental está tan bien hecho que a medida que lo vas viendo te vas dando cuenta que el problema global está centralizado en unas pocas personas y empresas, (Spoiler alert…) por ejemplo sale <abbr title="mejor lo tacho sino me puede demandar"><span style="text-decoration: line-through;">Lars</span></abbr> el batero de Metallica despotricando en contra de <a title="Napster" rel="wikipedia" href="http://en.wikipedia.org/wiki/Napster">Napster</a> y quienes descargamos música de Internet, hay una mención a Walt Disney donde lo muestran como un copión (remixer), entre otras cosas bien interesantes.</p> <p>Si quieren ver la realidad del sistema en que nos encontramos les recomiendo sin dudas este documental, y si sienten las ganas de hacer remix del documental pueden hacerlo sin sentirse criminales.</p> <h2>Links relacionados</h2> <ul> <li><a href="http://www.youtube.com/watch?v=zdwN6rRU0Xk" target="_blank">Documental en youtube (parte 1)</a> (son 9 partes y van apareciendo en el player)</li> <li><a href="http://www.myspace.com/girltalk" target="_blank">MySpace de Girl Talk</a></li> </ul> <p style="text-align: center;"><p><a href="http://www.elkcro.net/2009/11/rip-a-remix-manifesto/"><em>Pinche aquí para ver el vídeo</em></a></p></p> </article> <article> <h1>Lo malo de los sistemas GNU/Linux es una de sus ventajas</h1> <p>carloselias — Sat, 26 Sep 2009 05:12:03 +0000</p> <p>Ya he experimentado suficiente en <a class="zem_slink" title="Linux" rel="wikipedia" href="http://en.wikipedia.org/wiki/Linux">GNU/Linux</a>, desde mis inicios con una versión añeja de <a class="zem_slink" title="Red Hat" rel="homepage" href="http://www.redhat.com">RedHat</a> que venía en una revista <a title="Me siento viejo" href="http://editorial.ysi.net/creacion_contenidos/img/hot_shareware.jpg">HOT Shareware</a>, pasando por <a class="zem_slink" title="Slackware" rel="wikipedia" href="http://en.wikipedia.org/wiki/Slackware">Slackware</a>, <a class="zem_slink" title="Debian" rel="wikipedia" href="http://en.wikipedia.org/wiki/Debian">Debian</a>, <a class="zem_slink" title="Fedora (operating system)" rel="wikipedia" href="http://en.wikipedia.org/wiki/Fedora_%28operating_system%29">Fedora</a> y Ubuntu, usando el viejo conocido nomo (Gnome). Desde siempre quise hacer un cambio de usabilidad en Gnome, sobre todo con esos insufribles diálogos para guardar un archivo, pero en esta ocasión daré una opinión explicativa del “por qué” encuentro que lo malo se convierte en beneficio:</p> <p><span id="more-590"></span></p> <p style="text-align: center;"></p> <p><strong>La acción “Guardar Como” simplemente debería ofrecerte:</strong></p> <ul> <li><strong>Nombre</strong> para guardar el archivo</li> <li><strong>Extensión del archivo</strong> (es mejor ofrecerle un valor por defecto al usuario que dejarlo solo con la opción, si fuimos capaces de crear un Mega-hiper-ozom-ambilibabol software, no nos cuesta nada darle la mejor opción de guardado que tenga nuestro software)</li> <li><strong>El lugar de destino</strong>, he visto a muy poca gente usar los accesos directos que tiene ya sea a su /home/Documentos o a Mis Documentos, una practica muy común es que tengan un directorio con su nombre en el escritorio donde van guardando todo, el síndrome de “este PC es mio y estos son MIS archivos”, prefieren asegurarse e ir directorio por directorio por eso ofrecerles la ultima ruta donde guardaron por defecto me parece buena practica, pero es bien sabido que el botón mas usado del Navegador es el Atrás (Back), es su oportunidad de “empezar de nuevo” por eso solo basta, en el caso de GNU/Linux, con el enlace al /home y de ahí que hagan lo que les plazca</li> <li><strong>Opciónes avanzadas</strong>, lo que sospechaban, ningún mortal las usa. una buena analogía sería la siguiente : “si entiendes una de las licencias <a class="zem_slink" title="Creative Commons" rel="homepage" href="http://creativecommons.org/">Creative Commons</a> eres un usuario normal, si alguna ves quisiste o tuviste la intención de ver la licencia completa eres Geek o usuario avanzado.” ¿mate a varios no?</li> </ul> <p>Pero tiempo después me di cuenta que el problema no es sólo el desorden que hay en ciertas ventanas de dialogo, ni tampoco la poca <abbr title="como odio esa palabra! pero es la que me da que comer ;)">usabilidad.</abbr></p> <p>Luego de una reflexión casi digna de un <abbr title="y lo calvo la yo tengo">Monje Tibetano</abbr>, descubrí cuál era la mejor ventaja de <a class="zem_slink" title="Mac OS X" rel="wikipedia" href="http://en.wikipedia.org/wiki/Mac_OS_X">Mac OS X</a> y Windows sobre este tema, y la verdad es cruda. La unificación del desarrollo de sus aplicaciónes, en el caso de Mac por ejemplo, donde los desarroladores tienen a su disposición una <a title="Apple Human Interface Guidelines" href="http://developer.apple.com/mac/library/documentation/UserExperience/Conceptual/AppleHIGuidelines/XHIGIntro/XHIGIntro.html">infinidad de manuales y normas gráficas</a>, así como también librerias que lo hacen posible (léase <a title="Cocoa" href="http://developer.apple.com/cocoa/">Cocoa</a>, <a title="Carbon" href="http://developer.apple.com/carbon/index.html">Carbon</a>); en Windows pasa algo similar.</p> <p>El problema de Gnome, <a class="zem_slink" title="KDE" rel="wikipedia" href="http://en.wikipedia.org/wiki/KDE">KDE</a>, y otros, es que ambos disponen de MILES de formas de desarrollo, donde los desarrolladores pueden usar tanto <a class="zem_slink" title="GTK+" rel="wikipedia" href="http://en.wikipedia.org/wiki/GTK%2B">GTK</a>, QT, TCL/TK, Python, Mono, etc… (GLADE es un muy buen RAD, pero no para los que quieren empezar) para el desarrollo dentro de cualquier gestor de ventanas (<a title="Dymamic Window Manager" href="http://blog.zerial.org/linux/dymamic-window-manager-dwm-mi-nuevo-gestor-de-ventanas/">claro los que usa Zerial no cuentan en este post</a>) y es esa capacidad lo que lo convierte en la mejor ventaja, la <strong>DIVERSIDAD</strong>.</p> <blockquote><p>diversidad.</p> <p>(Del lat. diversĭtas, -ātis).</p> <p>1. f. Variedad, desemejanza, diferencia.</p> <p>2. f. Abundancia, gran cantidad de varias cosas distintas.</p></blockquote> <p>Tomando esta última acepción es donde esta el fuerte de GNU/Linux y toda su gama de soluciones, es cosa de visitar <a title="KDE-apps" href="http://www.kde-apps.org/">KDE-apps</a> ó <a title="GTK-Apps" href="www.gtk-apps.org/">GTK-apps</a> ningún otro sistema operativo puede alardear de tantas soluciones. Pero ojo, tengo en la mira una distro en especial que quizó realmente hacer las cosas bien Moblin, los que de la audiencia tengan un netbook denle una oportunidad. ¿Qué prefieren ustedes? ¿Cantidad o Calidad?</p> <p>N. del Autor: Quiero agradecer a hypn por la oportunidad de generar polimica y un saludo para mi mamá que no me esta viendo.</p> <div class="zemanta-pixie"><span class="zem-script more-related pretty-attribution"><script src="http://static.zemanta.com/readside/loader.js" type="text/javascript"></script></span></div> </article> <article> <h1>Video de Symantec demuestra el peligro de las URL recortadas</h1> <p>hypn — Sat, 26 Sep 2009 03:37:49 +0000</p> <p>Muchos quienes usamos <a class="zem_slink" title="Twitter" rel="homepage" href="http://twitter.com">Twitter</a> sabemos que es muy útil recortar las URL para que alcance más información en lo que queremos compartir. Sin embargo, <a class="zem_slink" title="Symantec" rel="homepage" href="http://www.symantec.com">Symantec</a> ha detectado que puede ser peligroso para los usuarios el ir a una “<em>Shorten-URL</em> ” ya que pueden tratarse de enlaces directos a troyanos, o más aún, ser sitios <a class="zem_slink" title="Phishing" rel="wikipedia" href="http://en.wikipedia.org/wiki/Phishing">phishing</a>.</p> <p>El siguiente video, publicado por Symantec, entrega un ejemplo de como nos podríamos infectar con troyanos haciendo click donde no sabemos.</p> <p style="text-align: center;"><span id="more-586"></span><p><a href="http://www.elkcro.net/2009/09/video-de-symantec-demuestra-el-peligro-de-las-url-recortadas/"><em>Pinche aquí para ver el vídeo</em></a></p></p> <p>Si bien lo que nos muestra Symantec es real, ya que hay muchos usuarios que hacen click en cualquier parte (y que usan IExplorer por cierto), no podemos dejar de recordar que existen algunas herramientas que nos ayudan a descubrir donde es que van estas direcciones.</p> <p>Por suerte, y para quienes usamos <a title="Mozilla Firefox" rel="geolocation" href="http://maps.google.com/maps?ll=45.1238,-123.1138&spn=1.0,1.0&q=45.1238,-123.1138%20%28Mozilla%20Firefox%29&t=h">Firefox</a>, les recomiendo usar un plugin para que nos facilita el trabajo de descubrir las direcciones, me refiero a <a href="http://www.longurlplease.com/">Long URL Please</a>, que aparte de soportar 73 servicios de acortamiento de direcciones también nos ofrece una API para poder desarrollar usando el servicio de esta fabulosa herramienta.</p> <p>Via: <a href="http://lifehacker.com/5367862/video-demonstrates-the-danger-of-shortened-urls" target="_blank">LifeHacker</a></p> <div class="zemanta-pixie"><span class="zem-script more-related pretty-attribution"><script src="http://static.zemanta.com/readside/loader.js" type="text/javascript"></script></span></div> </article> <article> <h1>Crea tus páginas en flash fácilmente con wix</h1> <p>aKcro — Thu, 24 Sep 2009 13:05:17 +0000</p> <p style="text-align: left;">Son de antaño los tiempos en que tenías que editar tus páginas web con un simple editor de textos y revisar todo el código a mano, conseguir hostings gratuitos en tripod, geocities, personales, u otros servicios donde se proporcionaba un simple editor de html y con gran publicidad.</p> <p><span id="more-581"></span></p> <p>Actualmente existen gran cantidad de sistemas prediseñados, buenos hostings y baratos. Dentro de los sistemas mas usados por supuesto <a href="http://blogspot.com" target="_blank">blogspot</a>, sistemas <a href="http://es.wordpress.com" target="_blank">wordpress</a>, <a href="http://www.joomlaspanish.org/" target="_blank">joomla</a>, por mencionar algunos, que aprovechan la potencia de php y de los gestores de base de datos.</p> <p>Pero ahora mencionaremos a <strong>wix</strong>, que es un sistema que te proporciona una interfaz online para crear páginas personales en flash, por supuesto proporcionando hosting, y con una publicidad muy poco invasiva. Lo probé y trae varias cosas interesantes para el diseño, intergración con google maps, animaciones, botones, etc. siendo muy fácil de utilizar y el registro toma 2 minutos. Personalmente lo recomiendo para la creación de páginas personales, ya que también trae unas bases bastante interesantes de modelos prediseñados para comenzar.</p> <p style="text-align: center;"><a href="http://www.elkcro.net/wp-content/uploads/2009/09/wix.png"></a></p> <p> </p> <p>Pueden registrarse y probar desde <a href="http://www.wix.com" target="_self">Aquí!</a>.</p> <p><em>Gracias a mi compañero Fernando Moreno por la info.</em></p> </article> <article> <h1>LXDE + Ubuntu : Lubuntu</h1> <p>hypn — Fri, 04 Sep 2009 01:55:15 +0000</p> <p>Según nos cuenta el blog de <a class="zem_slink" title="LXDE" rel="homepage" href="http://www.lxde.org">LXDE</a>, ya está lista la primera ISO de prueba del nuevo Lubuntu, versión de Ubuntu que se habia conversado por el mes de febrero entre el team de LXDE y <a class="zem_slink" title="Mark Shuttleworth" rel="wikipedia" href="http://en.wikipedia.org/wiki/Mark_Shuttleworth">Mark Shuttleworth</a>.</p> <p>LXDE es una wm para equipos de bajo rendimiento, es más una opción al conocido <a class="zem_slink" title="Xfce" rel="homepage" href="http://www.xfce.org/projects/mousepad/">XFCE</a>. Cuenta con una interfaz lite que es muy parecida a lo que es KDE.</p> <p><a href="http://www.flickr.com/photos/29711987@N00/3508764792"></a></p> <p>Una buena noticia para quienes quieran utilizar Ubuntu y no tienen los suficientes recursos a nivel de computador.</p> <p>Via: <a href="http://blog.lxde.org/?p=514" target="_blank">Blog LXDE</a></p> <div class="zemanta-pixie"><span class="zem-script more-related pretty-attribution"><script src="http://static.zemanta.com/readside/loader.js" type="text/javascript"></script></span></div> </article> <article> <h1>Primer sitio oficial de Chile</h1> <p>Daniel Z — Wed, 26 Aug 2009 11:54:22 +0000</p> <p>Hoy revisando noticias me encontré con esto, ya tenemos un sitio oficial para chile. Un extracto tomado de la misma página se muestra a continuación:</p> <blockquote><p><em>“La Presidenta Michelle Bachelet encabezó este lunes el lanzamiento del portal oficial de Chile en Internet EstoesChile.cl, que cuenta también con una versión en inglés en ThisisChile.cl y cuyo objetivo es promover la imagen del país a nivel internacional.”</em></p></blockquote> <p><em><span id="more-539"></span></em>Por supuesto los invito a visitar la página oficial donde hay información sobre turismo, estudios, negocios y más.</p> <p style="text-align: center;"><a href="http://www.elkcro.net/wp-content/uploads/2009/08/chile.png"></a></p> <p>Pueden visitar la página oficial desde <a href="http://www.estoeschile.cl/" target="_blank">Aquí.</a></p> <p>Saludos!</p> <div class="zemanta-pixie"><span class="zem-script more-related pretty-attribution"><script src="http://static.zemanta.com/readside/loader.js" type="text/javascript"></script></span></div> </article> <article> <h1>Efecto Tilt-Shift en fotografías</h1> <p>hypn — Mon, 03 Aug 2009 20:25:00 +0000</p> <p>El tilt-shift es una técnica que relaciona la inclinación con el desplazamiento del lente, y genera un efecto de miniaturas en las fotografías.</p> <p>Actualmente, no solo con lentes especiales se puede generar este efecto, hay tutoriales de photoshop que ayudan a generar este tipo de fotografias e inclusive aplicaciones web.</p> <p><span id="more-524"></span>Esta la hice con Photoshop, es una fotografía en Valparaíso (Cerro Concepción) tomada por mi novia:</p> <p></p> <p>Si no tienen experiencia con Photoshop, con <a href="http://tiltshiftmaker.com/" target="_blank">TiltShiftMaker</a> pueden hacer las suyas.</p> <p>Más info con nuestros amigos de <a href="http://en.wikipedia.org/wiki/Tilt-shift_photography" target="_blank">Wikipedia</a>.</p> <div class="zemanta-pixie"><span class="zem-script more-related pretty-attribution"><script src="http://static.zemanta.com/readside/loader.js" type="text/javascript"></script></span></div> </article> <article> <h1>Conformal Mapping</h1> <p>aKcro — Mon, 03 Aug 2009 19:36:02 +0000</p> <p>Estaba leyendo sobre efectos en fotografía, y definitivamente este se lleva toda la atención, ya que produce unas fotos bastante locas e interesantes. Tiene una base matemática en el dominio de los números complejos, que la verdad no es tan trivial de entender, pero por si alguien quiere analizarlo, podemos ir a nuestro amigo<a href="http://en.wikipedia.org/wiki/Conformal_mapping" target="_blank"><strong> Wikipedia</strong></a>.</p> <p>A continuación les dejo un par de ejemplos de lo que se puede lograr:</p> <p><span id="more-516"></span></p> <p><a href="http://www.elkcro.net/wp-content/uploads/2009/08/cm1.png"></a></p> <p><a href="http://www.elkcro.net/wp-content/uploads/2009/08/cm2.jpg"></a></p> <p><a href="http://www.elkcro.net/wp-content/uploads/2009/08/cm3.png"></a></p> <p>Pueden buscar mas imágenes e información buscando en google: “conformal mapping” o “conformal pictures”.</p> <p>Saludos.</p> </article> </main></body></html>

eLKcro Team » Featured

Flex SDK, Air SDK, FlashDevelop

Como imprimir open flash chart desde gxt-gwt