Efecto de Tabs en aplicaciones Facebook…

By choka

Pues hemos podido autentificar un cliente, ahora lo interesante sería usar más de un servlet, digamos, uno que maneje nuestra página de bienvenida, otro que maneje algún proceso que hagamos en nuestra aplicación y otro más que maneje invitaciones a instalar nuestra aplicación (solo una idea).

Si tenemos más de un servlet, podemos autentificar el primero, y usar el mismo cliente en los demás, propagándolo como un atributo de sesión; de esta manera los demás servlets pueden hacer uso del cliente y de sus llamadas a la API.

El servlet principal, como el servlet que he puesto en el post anterior, autentifica un objeto del tipo

FacebookXMLRestClient

de la siguiente manera:

FacebookXMLRestclient cliente= new FacebookXmlRestClient(api_key,secret,sessionKey);

Y este se establece como atributo de la sesión de la siguiente manera:

request.getSession().setAttribute( “auth”, client );

De esta manera los demás servets pueden solicitar este atributo y trabajar con él de la siguiente manera

FacebookXmlRestClient client = (FacebookXmlRestClient)request.getSession().getAttribute( “auth” );

Eso es todo el proceso para, una vez autentificado el cliente, ponerlo como atributo en la sesión, y así los demás servlets pueden hacer uso de él; esto permite tener más de un servlet para trabajar con nuestra aplicación.

Para que 2,3 o más servlets se puedan usar/ver de una manera “Facebook-like” dentro de nuestra aplicación, lo mejor o más bonito, es que estos se vean como Tabs dentro de nuestra aplicación, algo como lo siguiente:

Usando tabs en facebook

El ejemplo anterior es de mi aplicación, como ven tiene una página principal, una de búsqueda, etc, etc… El efecto de Tabs se ve bien (yo pienso), dentro de una aplicación. Para lograrlo se usa el siguiente código FBML:


<fb:tabs>
<fb:tab-item href='Principal' title='Principal' selected='true'/>
<fb:tab-item href='Buscar' title='Buscar' />
<fb:tab-item href='Etiquetar' title='Etiquetar' />
<fb:tab-item href='Recomendar' title='Recomendar' />
<fb:tab-item href='Idioma' title='Idioma' />
<fb:tab-item href='Invitar' title='Invitar' />
<fb:tab-item href='Acerca' title='Acerca' />
</fb:tabs>

El código es FBML, <fb:tabs> <fb:tab-item> son etiquetas que permiten la construcción de este tipo de efecto de Tabs, ahora los dos parámetros son:

href: Es la referencia al servlet que se mostrará cuando se haga “click” en el Tab con el título especificado por title (en mi caso el título corresponde con el nombre del servlet, pero pueden ser diferentes).La propiedad selected=’true’, especifica cual de los “tabs” se encuentra coloreado de azul o seleccionado. Si hacemos “click”, por ejemplo en Invitar la aplicación se vería de la siguiente manera:

Tab Invitar

Y el encabezado de este servlet (Invitar) será el siguiente:


<fb:tabs>
<fb:tab-item href='Principal' title='Principal'/>
<fb:tab-item href='Buscar' title='Buscar' />
<fb:tab-item href='Etiquetar' title='Etiquetar' />
<fb:tab-item href='Recomendar' title='Recomendar' />
<fb:tab-item href='Idioma' title='Idioma' />
<fb:tab-item href='Invitar' title='Invitar' selected='true' />
<fb:tab-item href='Acerca' title='Acerca' />
</fb:tabs>

Como se han dado cuenta, es necesario que este encabezado o este fragmento de código se encuentre en todos los servlets para que el efecto se vea completo y bien. Cada que se hace “click” sobre un tab diferente, se carga completamente ese servlet, por lo tanto se recarga la aplicación, mostrando el servlet indicado, no esperen ver un efecto como el de algunas aplicaciones web en las que la barra de “tabs” se mantiene fija mientras el contenido es lo que cambia, acá se refresca TODO, sin embargo el efecto es bueno y hace a nuestra aplicación verse bien

Tags: , , , ,

Leave a Reply