Bueno esta vez, los datos y como cargarlos y una pequeña animación. Y donde entra todo esto dentro del proyecto? pues lo meteremos en la pantalla principal, es decir, donde veremos los usuarios conectados y la tipica frasecilla que cada uno pone a su lado.

Veamos el código

<?xml version=“1.0″ encoding=“UTF-8″ ?>

<canvas bgcolor=“#D5E9B9″ height=”100%” width=”100%” >

<resource name=“manzanas” src=“../../img/manzana_verde.jpg” />

<resource name=“animar” src=“../../img/manzana.jpg” />

 

<dataset name=“input”><usuarios>

<usuario><nick><![CDATA[Acid]]></nick><estado><![CDATA[1]]></estado><mensaje><![CDATA[Las manzanas molan]]></mensaje></usuario>

<usuario><nick><![CDATA[chupentin]]></nick><estado><![CDATA[2]]></estado><mensaje><![CDATA[Que viva la cerveza Mitxelada!]]></mensaje></usuario>

<usuario><nick><![CDATA[Sr. Wilson]]></nick><estado><![CDATA[1]]></estado><mensaje><![CDATA[Soy un friki, que pasa]]></mensaje></usuario>

<usuario><nick><![CDATA[vecca]]></nick><estado><![CDATA[1]]></estado><mensaje><![CDATA[Me gusta el basket]]></mensaje></usuario>

<usuario><nick><![CDATA[Joste]]></nick><estado><![CDATA[3]]></estado><mensaje><![CDATA[visita MYAKU]]></mensaje></usuario>

</usuarios></dataset>

<view id=“fondo” height=”100%” width=”100%” opacity=“0.8″ resource=“manzanas” tretches=“both” />

<text id=“titulo” x=”${screen.x}” y=”3%” fontsize=“16″ fontstyle=“bold”>ISLA MANZANA, THE MESSENGER</text>

<view id=“users” x=”${screen.x}” y=”10%” width=”${screen.width}” datapath=“input:/usuarios” bgcolor=“#FFFFFF” opacity=“0.7″>

<simplelayout axis=“y” inset=“7″ spacing=“5″ />

<view datapath=“usuario”>

<method name=“ver”>

if (this.message.getAttribute(‘visible’)==false) {

this.message.setAttribute(‘visible’,true);

} else{

this.message.setAttribute(‘visible’,false);

}

</method>

<simplelayout axis=“x” spacing=“5″ />

<text fontstyle=“bold” datapath=“nick/text()” onclick=”parent.ver()”></text>

<text name=“message” datapath=“mensaje/text()” visible=“false”></text>

</view>

</view>

<text id=“screen” height=”20%” width=”80%” fontsize=“12″

multiline=“true” bgcolor=“#FFFFFF” opacity=“0.7″ x=”10%” y=”${users.y + users.height + 5}”>

Visita nuestro blog! Isla manzana Rules! Yeaaaah!

Y si tienes tiempo, también puedes entrar en el

<b><a href=“http://fanzinemyaku.blogspot.com”>BLOG DE MYAKU</a></b>

</text>

<view id=“entrada” height=”10%” width=”80%”

x=”10%” y=”${screen.y + screen.height + 5}” onclick=”animate()”>

<method name=‘animate’>

if (this.iconoBailarin.x == 0) {

this.iconoBailarin.veDerechaManzana.doStart();

}else{

this.iconoBailarin.veIzquierdaManzana.doStart();

}

</method>

<view name=“iconoBailarin” height=”50″ width=”50″ resource=“animar” stretches=“both” x=”0″>

<animator name=“veDerechaManzana” attribute=“x” from=“0″ to=“${entrada.width – 50}” motion=“easeout” duration=“1000″ start=“false” />

<animator name=“veIzquierdaManzana” attribute=“x” from=“${entrada.width – 50}” to=“0″ motion=“easeout” duration=“1000″ start=“false” />

</view>

</view>

</canvas>

Bueno, veamos como va esto:

Primero definimos dos resources, dos imágenes que utilizaremos como fondo de pantalla y el otro como icono para animarlo dentro del objeto canvas.

Después viene el dataset. Los dataset son datos, conjuntos de datos en xml cuyo origen puede estar directamente en la funte como en este caso (se ha escrito la información xml a pelo), en un archivo en el sistema de directorios (se referenciaria algo así como <dataset name=“input” src=“resources/files/text.txt” /> ) o a través de una fuente activa como un servlet, sitio web, jsp… lo que sea mediante una llamada mas o menos así <dataset name=“input” src=“resources/jsps/formularioIn.jsp” request=“true” type=“http”/>donde request es un booleano que indica si hay que pedir los datos al cargar la pagina (en este caso si) y type es el tipo de llamada, en este caso http.Nosotros, para simplificar hemos puesto la información a pelo en la fuente.

Más adelante, tenemos unas vistas parecidas a las del anterior tutorial: fondos, textos… lo interesante viene en la vista de usuarios. Dentro de esta vista hemos puesto:

<simplelayout axis=“y” inset=“7″ spacing=“5″ /> que significa espaciar el eje y con una distancia de 5 pixels por línea y un ofset inicial de 7 pixels. es decir, las vistas que estén a este nivel van a estar espaciadas 5 pixels y la primera 7 pixels respecto al comienzo. Hay varios tipos de layout, pero este es el más sencillo.A un nivel superior hemos puesto datapath=“input:/usuarios”  y a un nivel inferior <view datapath=“usuario”> que significa que va a hacer una vista con los datos de la fuente identificada con el id=”inputs” y a partir del tag “usuarios”. Después se va a hacer una vista por cada tag “usuario” que encontremos. Es decir, cuando aparece el datapath, se busca en los datos, en el xml de datos, y se hace un bucle por los tags que coincidan con el valor del datapath.Nosotros tendremos una vista por cada usuario del fichero xml. Por cada usuario hemos definido un método llamado ver que nos va a ocultar o mostrar la información interna del usuario, en nuestro caso el texto asociado al usuario.

Hemos espaciado en el eje x la info a mostrar y mostramos el nombre y el texto asociados a los tags nick y mensaje

En resumen, cada usuario vendrá en una línea, separado 5 pixeles del siguiente usuario. Dentro de ese objeto usuario, hay una función “ver” que oculta o muestra información pinchando sobre el texto. la información será el nick y una descripción y estarán separados en el eje X 5 pixels.

Una vez realizado el bucle de los usuarios creando las vistas y subvistas adecuadas, tenemos un screen que no es más complejo que lo ya descrito en el anterior tutorial.

Luego viene la animación. en la vista “entrada” tenemos definido un método que anima una vista, una animación. Las animaciones se definen con el tag “animator”, siendo el doStart el evento que lanza la acción de la animación. Como veis, solo hemos hecho que el icono se mueva de izquierda a derecha y viceversa, pero se pueden modificar todas las propiedades del bojeto tanto de tamaño, color, longitud como de posición.

Fijaos en la forma de referenciar los objetos. Es lo que más me ha chocado de openlaszlo. Al final tienes que ir escalando para atras o adelante si referencias de forma relativa o a traves de los ids y names si lo haces de forma absoluta.

No se si os he asustado mucho… cualquier duda, en los comentarios.

Pinchad aquí para bajaros el código y el flash compilado.

Desarrollo de Software, LZX, Manuales, Mira que he aprendido hoy!!, Openlaszlo, RIA, Software, Uncategorized