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>Descargar Videos de youtube facilmente</h1> <p>aKcro — Thu, 21 Jan 2010 21:18:52 +0000</p> <p>Leyendo artículos por internet encontré uno que hacía referencia a una web bastante interesante de donde podrás descargar el video que quieras desde youtube en formato ‘mp4′ o ‘flv’ de forma muy sencilla, sin descargar ningún tipo de programa. Los pasos son los siguiente:</p> <p>1.) Buscas tu video que tendrá una dirección como la siguiente:</p> <blockquote><p><a href="http://www.youtube.com/watch?v=-f1cwycSWq0">http://www.youtube.com/watch?v=-f1cwycSWq0</a></p> <p><span id="more-666"></span></p></blockquote> <p>2.) Reemplazas la ‘<strong>y</strong>‘ que viene luego de www por un 3, es decir debe quedarte una dirección como la siguiente:</p> <blockquote><p>http://www.3outube.com/watch/?v=-f1cwycSWq0</p></blockquote> <p style="text-align: left;">Deberás ver algo como esto:</p> <p style="text-align: left;"><a href="http://www.elkcro.net/wp-content/uploads/2010/01/3tube.png"><br /> </a></p> <p style="text-align: left;"><strong>NOTA: </strong>No funciona desde google chrome.</p> <p style="text-align: left;">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>Firma twitter para foros IPB con PHP + GD + SimplePie</h1> <p>hypn — Mon, 23 Nov 2009 20:20:09 +0000</p> <p>Hace mucho tiempo que circulo por foros de internet, el que más visito es <a href="http://tarreo.com/foro" target="_blank">Tarreo</a> y como usa <a href="http://www.invisionpower.com/" target="_blank">Invision Power Board</a>, no puedo poner una firma con imágenes dinámicas. Es por esto que tuve que acudir a una solución, hacer una imágen dinámica que pudiera ser vista en cualquier foro invision protegido.</p> <p>Para lograr este objetivo necesitaremos los siguientes <strong>ingredientes</strong>:</p> <ul> <li>Tener cuenta <a href="http://twitter.com" target="_blank">Twitter</a> (publica, con protección de twitts no sirve)</li> <li>Saber <a class="zem_slink" title="PHP" rel="homepage" href="http://www.php.net/">PHP</a></li> <li>Conocer la librería GD (para PHP)</li> <li>SimplePie</li> <li>Servidor para hostear la imagen (con soporte curl)</li> <li>Conocer de .htaccess</li> </ul> <p><span id="more-648"></span>La idea es utilizar <a href="http://simplepie.org/" target="_blank">SimplePie</a> para que se lea el <a class="zem_slink" title="RSS" rel="wikipedia" href="http://en.wikipedia.org/wiki/RSS">RSS</a> de mi cuenta para que con PHP + GD se genere una imagen dinámica, luego con el .htaccess se redireccionan todos los archivos .jpg a.php (esta es la joda para tinelli)</p> <p><strong>Preparación</strong>:</p> <ol> <li>Descargar el amigable <a href="http://github.com/rmccue/simplepie/downloads" target="_blank">SimplePie</a> de su sitio web (vamos a utilizar el archivo <strong>simplepie.inc.php</strong> solamente)</li> <li>Creamos el archivo twitter.php (con vim, gedit, eclipse, textmate o lo que se les ocurra) con el siguiente código: <pre class="brush: php;"><?php require 'simplepie.inc.php'; // Configuraciones $feed_url = "http://twitter.com/statuses/user_timeline/MI_RSS_DEL_TIMELINE.rss"; $feed = new SimplePie($feed_url); // Configuraciones de la imagen $im = imagecreatetruecolor(320, 60); $text_color = imagecolorallocate($im, 0, 0, 0); $tw_color = imagecolorallocate($im, 56, 204, 255); $bg_color = imagecolorallocate($im, 255, 255, 255); // Despliegue imagefilledrectangle($im, 1, 1, 318, 58, $bg_color); imagestring($im, 2, 5, 5, 'Twitter', $tw_color); // Me traigo el ultimo tweet foreach ($feed->get_items(0, 1) as $item) { $twitt = $item->get_title(); } // Lo corto y le hago wordwrap $twitt = wordwrap($twitt, 58, '\n'); $twitt_texts = explode('\n', $twitt); foreach ($twitt_texts as $i =>; $t) { imagestring($im, 1, 55, 14*($i+1), $t, $text_color); } // Muestro la imagen header('Content-type: image/jpeg'); imagejpeg($im, NULL, 100); imagedestroy($im); ?></pre> </li> <li>Luego, debemos redireccionar los request a archivos JPG a PHP utilizando un .htaccess <pre>RewriteEngine On RewriteRule ^(.*\.jpg(/.*)?)$ twitter.php [L,QSA]</pre> </li> <li>Ahora lo subes a tu servidor y lo revisas, deberia ser algo como:<br /> </li> </ol> <p>Deje cocinar a fuego lento.<br /> Sirva acompañado con galletas de salvado.</p> <p>Claramente podemos aplicarnos mucho más en el código, pero esto salio de improviso y fue relativamente rápido.</p> <div class="zemanta-pixie" style="margin-top: 10px; height: 15px;"><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>Regalamos 5 Invitaciones para Google Wave</h1> <p>hypn — Mon, 23 Nov 2009 01:04:40 +0000</p> <p>En eLKcro.net tenemos 5 invitaciones para compartir con quienes nos leen por rss o por el sitio.<br /> Lo único que debes hacer para ganártela es seguirnos por twitter y dejar un comentario en este post confirmando tu nombre de usuario twitter.</p> <p>Los resultados los subiremos en este mismo articulo!</p> </article> <article> <h1>Ubuntu 9.10 Karmic Koala</h1> <p>hypn — Thu, 29 Oct 2009 19:33:25 +0000</p> <p>Asi es amigos, ya ha sido liberada la nueva versión 9.10 de Ubuntu llamada Karmic Koala.</p> <p>Esta versión viene con <a href="http://www.ubuntu.com/products/whatisubuntu/910features" target="_blank">muchas novedades</a>, que pueden leer en el sitio de <a href="http://www.ubuntu.com" target="_blank">Ubuntu</a>.</p> <p style="text-align: center;"></p> <p>Pero la razón de este articulo no es solamente avisarles de la salida, sino también es ofrecerles por tiempo limitado un lugar más de descarga, que está ubicado en nuestros servidores:</p> <p style="text-align: center;"><a title="Ubuntu 9.10 Karmic Koala" href="http://www.elkcro.net/ubuntu/ubuntu-9.10-desktop-i386.iso" target="_self">Descargar ISO Ubuntu 9.10 Desktop i386</a></p> <p style="text-align: left;">Esperamos que lo disfruten!</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>Velocidad, costos banda ancha por país.</h1> <p>aKcro — Wed, 28 Oct 2009 00:36:40 +0000</p> <p>Sin duda no es una gran sorpresa, pero si producto de envidia ya que tenemos por ejemplo en primer lugar a japon con un promedio de velocidad de <strong>61 mbps</strong>, con un costo mensual de $0,27 usd por 1mbp de conexión, es decir aproximadamente pagan $16,47 usd por esa conexión, aproximadamente 9 mil pesos chilenos.</p> <p><span id="more-631"></span></p> <p>Por supuesto que no es de extrañar que no estemos en la lista de los top ten de conexiones aquí en Chile como se aprecia en la imagen a continuación:</p> <p style="text-align: center;"><a href="http://www.elkcro.net/wp-content/uploads/2009/10/precioinet.jpg"></a></p> <p> </p> <p>Saludos.!</p> </article> <article> <h1>Linus apoya Windows 7?</h1> <p>aKcro — Mon, 26 Oct 2009 16:53:20 +0000</p> <p style="text-align: center;"><a href="http://www.elkcro.net/wp-content/uploads/2009/10/linus.jpg"></a></p> <p>Claramente es una ironía de parte de linus o no?</p> <p>Saludos.</p> </article> <article> <h1>Fun theory – hazlo divertido</h1> <p>aKcro — Fri, 23 Oct 2009 19:25:49 +0000</p> <p>He encontrado un concepto que creo puede ayudar mucho a la sociedad, y perfectamente aplicable a nuestras ciudades, ya que su implementacion requiere de poca tecnología, ayudando en temas como por ejemplo el reciclaje donde se produce un gran incremento en la participación de la gente.</p> <p><span id="more-625"></span></p> <p> Creo que es un concepto bastante innovador, que permite dar mayor utilización a cosas que generalmente evitamos utilizar.</p> <p>Sin mas palabras vean el video:</p> <p><a href="http://www.elkcro.net/2009/10/fun-theory-hazlo-divertido/"><em>Pinche aquí para ver el vídeo</em></a></p> <p>Más videos pueden encontrarlos vía: <a href="http://thefuntheory.com/" target="_blank">Funtheory</a></p> </article> </main></body></html>

eLKcro Team

Flex SDK, Air SDK, FlashDevelop

Como imprimir open flash chart desde gxt-gwt