Air 2.0 Conexión IMAP mediante SecureSocket
Una de las nuevas características de Adobe Air 2.0 es la conexión a servidores mediante sockets encriptados (SSL).
Uno de los servicios mas comunes que utiliza una conexión encriptado son los proveedores de correo usando IMAP.
Para este ejemplo vamos a conectarnos al servidor IMAP de Gmail y obtener el numero de mensajes nuevos y mensajes en total que existen en nuestra cuenta.
Para fines prácticos de este ejemplo necesitamos:
- Una cuenta de Gmail, con IMAP habilitado
- FlashBuilder
- Adobe AIR 2.0
Lo primero es crear una interfaz sencilla en donde se pueda insertar el nombre de usuario, la contraseña, campos de output y un boton para iniciar el proceso.
<s:Label x="10" y="17" text="Gmail username:"/> <s:Label x="10" y="45" text="Gmail password:"/> <s:TextInput y="10" id="username_txt" change="_username = username_txt.text" right="10" left="120"/> <s:TextInput y="40" id="password_txt" change="_password = password_txt.text" displayAsPassword="true" right="10" left="120"/> <s:Button y="70" label="Tell me!!" click="start()" right="10"/> <s:Label x="10" y="100" width="280" id="result_txt"/> <s:TextArea id="out_txt" editable="false" right="10" bottom="10" top="130" left="10"/>
jBuzz a Google Buzz Widget – jQuery Plugin
jBuzz Google Buzz Widget es un plugin de jQuery que te permite agregar tu stream de Google Buzz en tu sitio web.
jBuzz Google Buzz Widget es un plugin “cross browser” que funciona en los principales navegadores y es muy fácil de implementar en tu sitio web. Puedes cambiar su apariencia mediante CSS y personalizar cuantos buzz mostrar utilizando las opciones de configuración.
jBuzz Google Buzz Widget utiliza el API liberada por Google, obteniendo los buzz mediante ATOM y los muestra en el contenedor de tu sitio web, para evitar problemas de permisos de “cross-domain” jBuzz utiliza un proxy creado en php para evitar este problema.
Modo de uso:
- Incluir jQuery, el archivo js del plugin y los CSS.
- Crear un DIV contenedor con ID en el cual se creara el Widget
- Inicializar el plugin indicando el usuario y cuantos buzz quieres mostrar.
Aquí esta el ejemplo del código en una pagina simple.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>jBuzz jQuery Plugin by Tmeister</title>
<link rel="stylesheet" href="jBuzz/jBuzz.min.css" type="text/css" media="screen" title="jBuzz" charset="utf-8">
<style type="text/css" media="screen">
#jBuzz
{
width: 250px;
}
</style>
<script type="text/javascript" charset="utf-8" src="jquery-1.4.1.min.js" ></script>
<script type="text/javascript" charset="utf-8" src="jBuzz/jquery.jBuzz.min.js" ></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function()
{
$('#jBuzz').jBuzz
({
user:"tmeister",
count:5
});
});
</script>
</head>
<body id="index">
<div id="jBuzz"></div>
</body>
</html>
English
jBuzz Google Buzz Widget is a jQuery plugin that allows you to add your Google stream Buzz on your website, is “cross browser” runs on all major browsers and is very easy to implement in your website. You can change its appearance using CSS and customize as many buzz display using the configuration options.
Use the API released by Google, getting the buzz through ATOM and displays them in the container of your website, to avoid problems with permissions of “cross-domain” jBuzz uses a proxy set up php to avoid this problem.
Descarga disponible tambien desde http://github.com/Tmeister/jBuzz
Descarga
Obtener tweets usando PHP & Flex 4 (Gumbo)
En este ejemplo, ya no muy básico, les mostrare como obtener los últimos tweets de un usuario y mostrarlos en Flex 4 (Gumbo) para ello haremos uso de PHP como gateway, con PHP obtendremos los tweets por medio del API de Twitter y los desplegaremos en forma de XML para poder leerlos en Flex.
Ejemplo
Lo primero que necesitamos es crear el script en PHP para poder conectarnos al API de Twitter, obtener los tweets y desplegarlos en XML.
PHP
<?php
/**
* get_user_tweets()
*
* @param mixed $username
* @param integer $count
* @return array $out
*/
function get_user_tweets($username, $count = 10)
{
/**
* URL para obtener los tweets en formato JSON
* Utilizaremos curl para hacer la conexion al API de Twitter
* */
$url = 'http://twitter.com/statuses/user_timeline/'.$username.'.json?count='.$count;
$curl = curl_init();
/**
* Iniciamos CURL pasando que URL vamos a cargar
* */
curl_setopt($curl, CURLOPT_URL, $url);
/**
* Indicamos que querremos el output de regreso
* */
curl_setopt ($curl, CURLOPT_RETURNTRANSFER, 1);
/**
* Ponemos un TimeOut al script
*/
curl_setopt ($curl, CURLOPT_CONNECTTIMEOUT, 10);
/**
* Ejecutamos CURL
*/
$json = curl_exec($curl);
/**
* Cerramos la conexion
*/
curl_close($curl);
/**
* Tomanos el resultado (JSON) y lo parseamos en PHP
*/
$tweets = json_decode($json);
$out;
/**
* Por ultimo por cada tweet tomanos el contenido y lo metemos en un Array
*/
foreach($tweets as $tweet)
{
$out[] = $tweet->text;
}
return $out;
}
/**
* Con la informacion obtenida del API construimos un XML y lo mostramos
*/
$out = '<?xml version="1.0" encoding="utf8"?>';
$out .= "<tweets>";
$tweets = get_user_tweets('tmeister', 10);
foreach($tweets as $tweet)
{
$out .= "<tweet>$tweet</tweet>";
}
$out .= "</tweets>";
header ("content-type: text/xml");
echo $out;
?>
El resultado del script lo puedes ver en http://klr20mg.com/flex/gumbo/last-tweet/last.php
MXML
Una vez que tenemos el XML solo falta mostrar su contenido en Flex.
<?xml version="1.0" encoding="utf-8"?>
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo"
width="100%"
height="100%"
creationComplete="{service.send()}"
viewSourceURL="http://klr20mg.com/flex/gumbo/last-tweet/srcview/index.html"
>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.controls.Alert;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
[Bindable]
private var _tweets:ArrayCollection;
protected function service_resultHandler(event:ResultEvent):void
{
_tweets = new ArrayCollection();
for each( var tweet:String in event.result.tweet )
{
_tweets.addItem(tweet);
}
}
protected function service_faultHandler(event:FaultEvent):void
{
Alert.show(event.fault.faultString, "Error");
}
]]>
</fx:Script>
<fx:Declarations>
<s:HTTPService
id="service"
result="service_resultHandler(event)"
fault="service_faultHandler(event)"
url="http://klr20mg.com/flex/gumbo/last-tweet/last.php"
showBusyCursor="true"
resultFormat="e4x"
>
</s:HTTPService>
</fx:Declarations>
<mx:VBox verticalCenter="0" horizontalCenter="0">
<mx:Repeater id="rep" dataProvider="{_tweets}">
<s:Label text="{rep.currentItem}" />
<mx:HRule width="100%" />
</mx:Repeater>
</mx:VBox>
</s:Application>
Con esto ya podemos mostrar los últimos tweets de un timeline sin necesidad de usar librerias ni de PHP o de ActionScript.
Cambiando el symbolColor en el “Spark CheckBox”
Este es una entrada de la serie de ejemplos basicos de Flex 4 (Gumbo)
En el siguiente ejemplo les mostrare como pueden cambiar el color de la marca de seleccion de un Spark Checkbox en Flex 4, asi como el basecolor de fondo y el texto del label.
Ejemplo
Para ello usaremos las propiedades
- symbolColor
- baseColor
- color
MXML
<?xml version="1.0" encoding="utf-8"?>
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo"
width="100%" height="100%"
>
<mx:ApplicationControlBar width="100%" cornerRadius="0">
<s:Label text="baseColor:" />
<mx:ColorPicker id="colorPickerBase" selectedColor="#cccccc" />
<s:Label text="symbolColor:" />
<mx:ColorPicker id="colorPickerSymbol" selectedColor="#000000" />
<s:Label text="textColor:" />
<mx:ColorPicker id="colorPickerText" selectedColor="#000000" />
</mx:ApplicationControlBar>
<s:CheckBox
label="Spark CheckBox"
selected="true"
baseColor="{colorPickerBase.selectedColor}"
symbolColor="{colorPickerSymbol.selectedColor}"
color="{colorPickerText.selectedColor}"
horizontalCenter="0" verticalCenter="0"
/>
</s:Application>
Cambiando el color de fondo del “Spark Button”
Con este post comenzare una serie de ejemplos básicos para irnos metiendo a lo nuevo de Flex 4 (aka Gumbo), su nuevo modelo de componentes y nuevas características.
En este primer ejemplo mostrare como se puede cambiar el “baseColor” o background del componente Spark Button.
Ejemplo
Hay 3 maneras como podemos cambiar el baseColor, usando MXML, Actionscript o CSS.
MXML
Este es el source del ejemplo anterior.
<?xml version="1.0" encoding="utf-8"?>
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo"
width="100%" height="100%"
>
<mx:ApplicationControlBar width="100%">
<s:Label text="baseColor: " />
<mx:ColorPicker id="colorSelector" selectedColor="#cccccc" />
</mx:ApplicationControlBar>
<s:Button
id="button"
baseColor="{colorSelector.selectedColor}"
horizontalCenter="0"
verticalCenter="0"
label="baseColor"
/>
</s:Application>
