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.

Este ejemplo esta hecho con Flash Builder 4 Beta 2 y necesita el FlashPlayer 10 para poder visualizarlo correctamente

Ejemplo

[SWF]http://tmeister.net/flex/gumbo/last-tweet/tweets.swf,600,350[/SWF]

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] <?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;
?>

[/php]

El resultado del script lo puedes ver en http://tmeister.net/flex/gumbo/last-tweet/last.php

MXML

Una vez que tenemos el XML solo falta mostrar su contenido en Flex.

[xml] <?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://tmeister.net/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://tmeister.net/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>

[/xml]

Con esto ya podemos mostrar los últimos tweets de un timeline sin necesidad de usar librerias ni de PHP o de ActionScript.

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.

Este ejemplo esta hecho con Flash Builder 4 Beta 2 y necesita el FlashPlayer 10 para poder visualizarlo correctamente

Ejemplo

[SWF]http://tmeister.net/flex/gumbo/checkbox/checkBox.swf,600,200[/SWF]

Para ello usaremos las propiedades

MXML

[xml] <?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>
[/xml]

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.

Antes de continuar cabe resaltar que estos ejemplo estan hechos con Flash Builder 4 Beta 2 y se necesita el FlashPlayer 10 para poder visualizarlos correctamente

Ejemplo

[SWF]http://tmeister.net/flex/gumbo/basecolor/baseColor.swf,600,200[/SWF]

Hay 3 maneras como podemos cambiar el baseColor, usando MXML, Actionscript o CSS.

MXML

Este es el source del ejemplo anterior.

[xml] <?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>
[/xml]

Follow me through my day

Send requests or questions about my products, find out on what I'm working and stay tune with my updates or just say hello ;)

Array

@Tmeister

active