Mi Cuaderno Android - controles de selección

Al igual que en otros frameworks Android dispone de diversos controles que nos permiten seleccionar una opción dentro de una lista de posibilidades. Así, podremos utilizar listas desplegables (Spinner), listas fijas (ListView), tablas (GridView) y otros controles específicos de la plataforma como por ejemplo las galerías de imágenes (Gallery).

Adaptadores en Android (adapters)

Para los desarrolladores de java que hayan utilizado frameworks de interfaz gráfica como Swing, el concepto de adaptador les resultará familiar. Un adaptador representa algo así como una interfaz común al modelo de datos que existe por detrás de todos los controles de selección que hemos comentado. Dicho de otra forma, todos los controles de selección accederán a los datos que contienen a través de un adaptador.

Además de proveer de datos a los controles visuales, el adaptador también será responsable de generar a partir de estos datos las vistas específicas que se mostrarán dentro del control de selección. Por ejemplo, si cada elemento de una lista estuviera formado a su vez por una imagen y varias etiquetas, el responsable de generar y establecer el contenido de todos estos “sub-elementos” a partir de los datos será el propio adaptador.

Android proporciona de serie varios tipos de adaptadores sencillos, aunque podemos extender su funcionalidad fácilmente para adaptarlos a nuestras necesidades. Los más comunes son los siguientes:

• ArrayAdapter. Es el más sencillo de todos los adaptadores, y provee de datos a un control de selección a partir de un array de objetos de cualquier tipo. 
• SimpleAdapter. Se utiliza para mapear datos sobre los diferentes controles definidos en un fichero XML de layout. 
• SimpleCursorAdapter. Se utiliza para mapear las columnas de un cursor sobre los diferentes elementos visuales contenidos en el control de selección.

Por ahora nos vamos a conformar con describir la forma de utilizar un ArrayAdapter con los diferentes controles de selección disponibles.

Veamos cómo crear un adaptador de tipo ArrayAdapter para trabajar con un array genérico de java:

final String[] datos = new String[]{"Elem1","Elem2","Elem3","Elem4","Elem5"};

ArrayAdapter<String> adaptador =
new ArrayAdapter<String>(this,android.R.layout.simple_spinner_item, datos);

Comentemos un poco el código. Sobre la primera línea no hay nada que decir, es tan sólo la definición del array java que contendrá los datos a mostrar en el control, en este caso un array sencillo con cinco cadenas de caracteres. En la segunda línea creamos el adaptador en sí, al que pasamos 3 parámetros:

1. El contexto, que normalmente será simplemente una referencia a la actividad donde se crea el adaptador. 
2. El ID del layout sobre el que se mostrarán los datos del control. En este caso le pasamos el ID de un layout predefinido en Android (android.R.layout.simple_spinner_item), formado únicamente por un control TextView, pero podríamos pasarle el ID de cualquier layout de nuestro proyecto con cualquier estructura y conjunto de controles, más adelante veremos cómo. 
3. El array que contiene los datos a mostrar.

Con esto ya tendríamos creado nuestro adaptador para los datos a mostrar y ya tan sólo nos quedaría asignar este adaptador a nuestro control de selección para que éste mostrase los datos en la aplicación.

Control Spinner [API]

Las listas desplegables en Android se llaman Spinner. Funcionan de forma similar al de cualquier control de este tipo, el usuario selecciona la lista, se muestra una especie de lista emergente al usuario con todas las opciones disponibles y al seleccionarse una de ellas ésta queda fijada en el control. Para añadir una lista de este tipo a nuestra aplicación podemos utilizar el código siguiente:

<Spinner android:id="@+id/CmbOpciones"

android:layout_width="fill_parent"

android:layout_height="wrap_content" />

Poco vamos a comentar de aquí ya que lo que nos interesan realmente son los datos a mostrar. En cualquier caso, las opciones para personalizar el aspecto visual del control (fondo, color y tamaño de fuente, …) son las mismas ya comentadas para los controles básicos.

Para enlazar nuestro adaptador (y por tanto nuestros datos) a este control utilizaremos el siguiente código java:

final Spinner cmbOpciones = (Spinner)findViewById(R.id.CmbOpciones);

adaptador.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
cmbOpciones.setAdapter(adaptador);

Comenzamos como siempre por obtener una referencia al control a través de su ID. Y en la última línea asignamos el adaptador al control mediante el método setAdapter(). La segunda linea como ya se sabe le pasamos uno de los parámetros ID del layout que tan sólo se aplicará al elemento seleccionado en la lista, es decir, al que se muestra directamente sobre el propio control cuando no está desplegado. Sin embargo, antes indicamos que el funcionamiento normal del control Spinner incluye entre otras cosas mostrar una lista emergente con todas las opciones disponibles. Pues bien, para personalizar también el aspecto de cada elemento en dicha lista emergente tenemos el método setDropDownViewResource(ID_layout), al que podemos pasar otro ID de un layout distinto al primero sobre el que se mostrarán los elementos de la lista emergente. En este caso hemos utilizado otro layout predefinido en Android para las listas desplegables (android.R.layout.simple_spinner_dropdown_item).

Con estas simples lineas de código conseguiremos mostrar un control como el que vemos en las siguientes imágenes:

Como se puede observar en las imágenes, la representación del elemento seleccionado (primera imagen) y el de las opciones disponibles (segunda imagen) es distinto, incluyendo el segundo de ellos incluso algún elemento gráfico a la derecha para mostrar el estado de cada opción. Como hemos comentado, esto es debido a la utilización de dos layouts diferentes para uno y otros elementos.

En cuanto a los eventos lanzados por el control Spinner, el más comunmente utilizado será el generado al seleccionarse una opción de la lista desplegable, onItemSelected. Para capturar este evento se procederá de forma similar a lo ya visto para otros controles anteriormente, asignadole su controlador mediante el método setOnItemSelectedListener():

cmbOpciones.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {

    public void onItemSelected(AdapterView<?> parent,
        android.view.View v, int position, long id) {
            lblMensaje.setText("Seleccionado: " + datos[position]);
        }

        public void onNothingSelected(AdapterView<?> parent) {
            lblMensaje.setText("");
        }
    });

Para este evento definimos dos métodos, el primero de ellos (onItemSelected) que será llamado cada vez que se selecciones una opción en la lista desplegable, y el segundo (onNothingSelected) que se llamará cuando no haya ninguna opción seleccionada (esto puede ocurrir por ejemplo si el adaptador no tiene datos).

El control ListView muestra al usuario una lista de opciones seleccionables directamente sobre el propio control, sin listas emergentes como en el caso del control Spinner. En caso de existir más opciones de las que se pueden mostrar sobre el control se podrá por supuesto hacer scroll sobre la lista para acceder al resto de elementos.

Para empezar, veamos como podemos añadir un control ListView a nuestra interfaz de usuario:

<ListView android:id="@+id/LstOpciones"

    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

Una vez más, podremos modificar el aspecto del control utilizando las propiedades de fuente y color ya comentadas. Por su parte, para enlazar los datos con el control podemos utlizar por ejemplo el mismo código que para el control Spinner. Definiremos primero un array con nuestros datos de prueba, crearemos posteriormente el adaptador de tipo ArrayAdapter y lo asignaremos finalmente al control mediante el método setAdapter():

final String[] datos =
    new String[]{"Elem1","Elem2","Elem3","Elem4","Elem5"};

ArrayAdapter<String> adaptador =
    new ArrayAdapter<String>(this,
    android.R.layout.simple_list_item_1, datos);

ListView lstOpciones = (ListView)findViewById(R.id.LstOpciones);

lstOpciones.setAdapter(adaptador);

En este caso, para mostrar los datos de cada elemento hemos utilizado otro layout genérico de Android para los controles de tipo ListView (android.R.layout.simple_list_item_1), formado únicamente por un TextView con unas dimensiones determinadas. La lista creada quedaría como se muestra en la imagen siguiente:

Como podéis comprobar el uso básico del control ListView es completamente análogo al ya comentado para el control Spinner.

Si quisiéramos realizar cualquier acción al pulsarse sobre un elemento de la lista creada tendremos que implementar el evento onItemClick. Veamos cómo con un ejemplo:

lstOpciones.setOnItemClickListener(new OnItemClickListener() {
    @Override
    public void onItemClick(AdapterView<?> a, View v, int position, long id) {
    //Acciones necesarias al hacer click
    }
});

Hasta aquí todo sencillo. Pero, ¿y si necesitamos mostrar datos más complejos en la lista? ¿qué ocurre si necesitamos que cada elemento de la lista esté formado a su vez por varios elementos? Pues vamos a provechar los ListView para conseguirlo, aunque todo lo que comentaré es extensible a otros controles de selección.

Para no complicar mucho el tema vamos a hacer que cada elemento de la lista muestre por ejemplo dos líneas de texto a modo de título y subtítulo con formatos diferentes (por supuesto se podrían añadir muchos más elementos, por ejemplo imágenes, checkboxes, etc).

En primer lugar vamos a crear una nueva clase java para contener nuestros datos de prueba. Vamos a llamarla Titular y tan sólo va a contener dos atributos, título y subtítulo.

package net.sgoliver;

public class Titular
{
    private String titulo;
    private String subtitulo;

    public Titular(String tit, String sub){
        titulo = tit;
        subtitulo = sub;
    }

    public String getTitulo(){
        return titulo;
    }

    public String getSubtitulo(){
        return subtitulo;
    }
}

En cada elemento de la lista queremos mostrar ambos datos, por lo que el siguiente paso será crear un layout XML con la estructura que deseemos. En mi caso voy a mostrarlos en dos etiquetas de texto (TextView), la primera de ellas en negrita y con un tamaño de letra un poco mayor. Llamaremos a este layout “listitem_titular.xml“:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
android:orientation="vertical">

<TextView android:id="@+id/LblTitulo"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:textStyle="bold"
android:textSize="20px" />

<TextView android:id="@+id/LblSubTitulo"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:textStyle="normal"
android:textSize="12px" />

</LinearLayout>

Ahora que ya tenemos creados tanto el soporte para nuestros datos como el layout que necesitamos para visualizarlos, lo siguiente que debemos hacer será indicarle al adaptador cómo debe utilizar ambas cosas para generar nuestra interfaz de usuario final. Para ello vamos a crear nuestro propio adaptador extendiendo de la clase ArrayAdapter.

class AdaptadorTitulares extends ArrayAdapter {

Activity context;

    AdaptadorTitulares(Activity context) {
        super(context, R.layout.listitem_titular, datos);
        this.context = context;
    }

    public View getView(int position, View convertView, ViewGroup parent) {
        LayoutInflater inflater = context.getLayoutInflater();
        View item = inflater.inflate(R.layout.listitem_titular, null);

        TextView lblTitulo = (TextView)item.findViewById(R.id.LblTitulo);
        lblTitulo.setText(datos[position].getTitulo());

        TextView lblSubtitulo = (TextView)item.findViewById(R.id.LblSubTitulo);
        lblSubtitulo.setText(datos[position].getSubtitulo());

        return(item);
    }
}

Analicemos el código anterior. Lo primero que encontramos es el constructor para nuestro adaptador, al que sólo pasaremos el contexto (que será la actividad desde la que se crea el adaptador). En este constructor tan sólo guardaremos el contexto para nuestro uso posterior y llamaremos al constructor padre tal como ya vimos al principio de este artículo, pasándole el ID del layout que queremos utilizar (en nuestro caso el nuevo que hemos creado, “listitem_titular”) y el array que contiene los datos a mostrar.

Posteriormente, redefinimos el método encargado de generar y rellenar con nuestros datos todos los controles necesarios de la interfaz gráfica de cada elemento de la lista. Este método es getView().

El método getView() se llamará cada vez que haya que mostrar un elemento de la lista. Lo primero que debe hacer es “inflar” el layout XML que hemos creado. Esto consiste en consultar el XML de nuestro layout y crear e inicializar la estructura de objetos java equivalente. Para ello, crearemos un nuevo objeto LayoutInflater y generaremos la estructura de objetos mediante su método inflate(id_layout).

Tras esto, tan sólo tendremos que obtener la referencia a cada una de nuestras etiquetas como siempre lo hemos hecho y asignar su texto correspondiente según los datos de nuestro array y la posición del elemento actual (parámetro position del método getView()).

Una vez tenemos definido el comportamiento de nuestro adaptador la forma de proceder en la actividad principal será análoga a lo ya comentado, definiremos el array de datos de prueba, crearemos el adaptador y lo asignaremos al control mediante setAdapter():

private Titular[] datos =
    new Titular[]{
        new Titular("Título 1", "Subtítulo largo 1"),
        new Titular("Título 2", "Subtítulo largo 2"),
        new Titular("Título 3", "Subtítulo largo 3"),
        new Titular("Título 4", "Subtítulo largo 4"),
        new Titular("Título 5", "Subtítulo largo 5")};
//...
//...
AdaptadorTitulares adaptador =
    new AdaptadorTitulares(this);

ListView lstOpciones = (ListView)findViewById(R.id.LstOpciones);

lstOpciones.setAdapter(adaptador);

Hecho esto, y si todo ha ido bien, nuestra nueva lista debería quedar como vemos en la imagen siguiente:

Aunque ya sabemos utilizar y personalizar las listas en Android, en el próximo artículo daremos algunas indicaciones para utilizar de una forma mucho más eficiente los controles de este tipo, algo que los usuarios de nuestra aplicación agradecerán enormemente al mejorarse la respuesta de la aplicación y reducirse el consumo de batería.

Cuando comentamos cómo crear nuestro propio adaptador, extendiendo de ArrayAdapter, para personalizar la forma en que nuestros datos se iban a mostrar en la lista escribimos el siguiente código: 

class AdaptadorTitulares extends ArrayAdapter {

    Activity context;

    AdaptadorTitulares(Activity context) {
        super(context, R.layout.listitem_titular, datos);
        this.context = context;
    }

    public View getView(int position, View convertView, ViewGroup parent) {
        LayoutInflater inflater = context.getLayoutInflater();
        View item = inflater.inflate(R.layout.listitem_titular, null);

        TextView lblTitulo = (TextView)item.findViewById(R.id.LblTitulo);
        lblTitulo.setText(datos[position].getTitulo());

        TextView lblSubtitulo = (TextView)item.findViewById(R.id.LblSubTitulo);
        lblSubtitulo.setText(datos[position].getSubtitulo());

        return(item);
    }
}

Centrándonos en la definición del método getView() vimos que la forma normal de proceder consistía en primer lugar en “inflar” nuestro layout XML personalizado para crear todos los objetos correspondientes (con la estructura descrita en el XML) y posteriormente acceder a dichos objetos para modificar sus propiedades. Sin embargo, hay que tener en cuenta que esto se hace todas y cada una de las veces que se necesita mostrar un elemento de la lista en pantalla, se haya mostrado ya o no con anterioridad, ya que Android no “guarda” los elementos de la lista que desaparecen de pantalla (por ejemplo al hacer scroll sobre la lista). El efecto de esto es obvio, dependiendo del tamaño de la lista y sobre todo de la complejidad del layout que hayamos definido esto puede suponer la creación y destrucción de cantidades ingentes de objetos (que puede que ni siquiera nos sean necesarios), es decir, que la acción de inflar un layout XML puede ser bastante costosa, lo que podría aumentar mucho, y sin necesidad, el uso de CPU, de memoria, y de batería.

Para aliviar este problema, Android nos propone un método que permite reutilizar algún layout que ya hayamos inflado con anterioridad y que ya no nos haga falta por algún motivo, por ejemplo porque el elemento correspondiente de la lista ha desaparecido de la pantalla al hacer scroll. De esta forma evitamos todo el trabajo de crear y estructurar todos los objetos asociados al layout, por lo que tan sólo nos quedaría obtener la referencia a ellos mediante findViewById() y modificar sus propiedades.

¿Pero cómo podemos reutilizar estos layouts “obsoletos”? Pues es bien sencillo, siempre que exista algún layout que pueda ser reutilizado éste se va a recibir a través del parámetro convertView del método getView(). De esta forma, en los casos en que éste no sea null podremos obviar el trabajo de inflar el layout. Veamos cómo quedaría el métod getView() tras esta optimización:

public View getView(int position, View convertView, ViewGroup parent)

{
    View item = convertView;

    if(item == null)
    {
        LayoutInflater inflater = context.getLayoutInflater();
        item = inflater.inflate(R.layout.listitem_titular, null);
    }

    TextView lblTitulo = (TextView)item.findViewById(R.id.LblTitulo);
    lblTitulo.setText(datos[position].getTitulo());

    TextView lblSubtitulo = (TextView)item.findViewById(R.id.LblSubTitulo);
    lblSubtitulo.setText(datos[position].getSubtitulo());

    return(item);
}

Si añadimos más elementos a la lista y ejecutamos ahora la aplicación podemos comprobar que al hacer scroll sobre la lista todo sigue funcionando con normalidad, con la diferencia de que le estamos ahorrando gran cantidad de trabajo a la CPU.

Pero vamos a ir un poco más allá. Con la optimización que acabamos de implementar conseguimos ahorrarnos el trabajo de inflar el layout definido cada vez que se muestra un nuevo elemento. Pero aún hay otras dos llamadas relativamente costosas que se siguen ejecutando en todas las llamadas. Me refiero a la obtención de la referencia a cada uno de los objetos a modificar mediante el método findViewById(). La búsqueda por ID de un control determinado dentro del árbol de objetos de un layout también puede ser una tarea costosa dependiendo de la complejidad del propio layout.¿Por qué no aprovechamos que estamos “guardando” un layout anterior para guardar también la referencia a los controles que lo forman de forma que no tengamos que volver a buscarlos? Pues eso es exactamente lo que vamos a hacer mediante lo que en los ejemplos de Android llaman un ViewHolder. La clase ViewHolder tan sólo va a contener una referencia a cada uno de los controles que tengamos que manipular de nuestro layout, en nuestro caso las dos etiquetas de texto. Definamos por tanto esta clase de la siguiente forma:

static class ViewHolder {
    TextView titulo;
    TextView subtitulo;
}

La idea será por tanto crear e inicializar el objeto ViewHolder la primera vez que inflemos un elemento de la lista y asociarlo a dicho elemento de forma que posteriormente podamos recuperarlo fácilmente. ¿Pero dónde lo guardamos? Fácil, en Android todos los controles tienen una propiedad llamada Tag (podemos asignarla y recuperarla mediante los métodos setTag() y getTag() respectivamente) que puede contener cualquier tipo de objeto, por lo que resulta ideal para guardar nuestro objeto ViewHolder. De esta forma, cuando el parámetro convertView llegue informado sabremos que también tendremos disponibles las referencias a sus controles hijos a través de la propiedad Tag. Veamos el código modificado de getView() para aprovechar esta nueva optimización:

public View getView(int position, View convertView, ViewGroup parent)
{
    View item = convertView;
    ViewHolder holder;

    if(item == null)
    {
        LayoutInflater inflater = context.getLayoutInflater();
        item = inflater.inflate(R.layout.listitem_titular, null);

        holder = new ViewHolder();
        holder.titulo = (TextView)item.findViewById(R.id.LblTitulo);
        holder.subtitulo = (TextView)item.findViewById(R.id.LblSubTitulo);

        item.setTag(holder);
    }
    else
    {
        holder = (ViewHolder)item.getTag();
    }

    holder.titulo.setText(datos[position].getTitulo());
    holder.subtitulo.setText(datos[position].getSubtitulo());

    return(item);
}

Con estas dos optimizaciones hemos conseguido que la aplicación sea mucho más respetuosa con los recursos del dispositivo de nuestros usuarios, algo que sin duda nos agradecerán.

El control GridView de Android presenta al usuario un conjunto de opciones seleccionables distribuidas de forma tabular, o dicho de otra forma, divididas en filas y columnas. Dada la naturaleza del control ya podéis imaginar sus propiedades más importantes, que paso a enumerar a continuación:

• android:numColumns, indica el número de columnas de la tabla o “auto_fit” si queremos que sea calculado por el propio sistema operativo a partir de las siguientes propiedades. 
• android:columnWidth, indica el ancho de las columnas de la tabla. 
• android:horizontalSpacing, indica el espacio horizontal entre celdas. 
• android:verticalSpacing, indica el espacio vertical entre celdas. 
• android:stretchMode, indica qué hacer con el espacio horizontal sobrante. Si se establece al valor “columnWidth” este espacio será absorbido a partes iguales por las columnas de la tabla. Si por el contrario se establece a “spacingWidth” será absorbido a partes iguales por los espacios entre celdas.

Veamos cómo definiríamos un GridView de ejemplo en nuestra aplicación:

<GridView android:id="@+id/GridOpciones"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:numColumns="auto_fit"
    android:columnWidth="80px"
    android:horizontalSpacing="5px"
    android:verticalSpacing="10px"
android:stretchMode="columnWidth" />

Una vez definida la interfaz de usuario, la forma de asignar los datos desde el código de la aplicación es completamente análoga a la ya comentada tanto para las listas desplegables como para las listas estáticas: creamos un array genérico que contenga nuestros datos de prueba, declaramos un adaptador de tipo ArrayAdapter pasándole en este caso un layout genérico (simple_list_item_1, compuesto por un simple TextView) y asociamos el adaptador al control GridView mediante su método setAdapter():

private String[] datos = new String[25];
//...
for(int i=1; i<=25; i++)
    datos[i-1] = "Dato " + i;

ArrayAdapter<String> adaptador =
    new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, datos);

final GridView grdOpciones = (GridView)findViewById(R.id.GridOpciones);

grdOpciones.setAdapter(adaptador);

Por defecto, los datos del array se añadirán al control GridView ordenados por filas, y por supuesto, si no caben todos en la pantalla se podrá hacer scroll sobre la tabla. Vemos en una imagen cómo queda nuestra aplicación de prueba:

En cuanto a los eventos disponibles, el más interesante vuelve a ser el lanzado al seleccionarse una celda determinada de la tabla: onItemSelected. Este evento podemos capturarlo de la misma forma que hacíamos con los controles Spinner y ListView. Veamos un ejemplo de cómo hacerlo:

grdOpciones.setOnItemSelectedListener(
    new AdapterView.OnItemSelectedListener() {
        public void onItemSelected(AdapterView<?> parent,
        android.view.View v, int position, long id) {
            lblMensaje.setText("Seleccionado: " + datos[position]);
        }

    public void onNothingSelected(AdapterView<?> parent) {
        lblMensaje.setText("");
    }
});
sgoliver.net

Guía para los formularios en HTML5

The Current State of HTML5 Forms nos proporciona una serie de pistas de cómo funcionan los nuevos tipos de entradas de datos, qué navegadores los soportan, cómo gestionar la validación de datos en JavaScript y otra información interesante.

Esta página forma parte de la web de Wufoo, una herramienta para crear formularios y encuestas con sus bases de datos asociadas de forma más rápida y sencilla de lo habitual.

Cuenta los correos que tienes desde PHP

En el post anterior ya vimos la conexión mediante la función imap_open.
Así que le pasamos los siguientes parametros
$hostname = '{mail.servidorcorreo.com/notls}INBOX';
 $username = 'usuario@aulambra.com';
 $password = 'password';

 $inbox = imap_open($hostname,$username,$password) or die('Ha fallado la conexión: ' . imap_last_error());

Ahora, para saber cuántos emails tenemos en el buzón vamos a utilizar la función imap_num_msg, la cual recibe la conexión que hemos establecido con imap_open como parámetro.

$numero_emails = imap_num_msg($inbox); echo "Tienes ".$numero_emails." mensajes en tu correo";

Ahora ya solo nos quedará cerrar la conexión mediante
  imap_close.imap_close($inbox);

baja los correos con POP3 y PHP

Es bastante sencillo, lo primero es conocer la función imap_open. Nos permitirá conectarlos con el servidor de email vía POP3.

imap_open($mailbox, $username, $password [, $options, $retries, $params]

Solo tenemos 3 parámetros obligatorios que son los siguientes.

$hostname = '{mail.servidorcorreo.com/notls}';

$username = 'usuario@servidorcorreo.com';

$password = 'mipassword';

Siendo el mailBox el mas complicado ya que su estructura es la siguiente.

{servidor:puerto/flags}carpeta

En nuestro caso mail.servidorcorreo.com es el nombre del servidor. El puerto no lo indicamos, aunque en el caso de acceder vía POP3 utilizaremos el 110. El parámetro /notls son las opciones de conexión. En este caso al utilizar /notls indicamos al servidor que no inicie una sesión segura. Tampoco hemos indicado la carpeta de la que queremos recuperar los emails mediante POP3. Al no ponerla se toma INBOX como por defecto.
Ahora nos conectamos con el imap_open

$inbox = imap_open($hostname,$username,$password) or die('Ha fallado la conexión: ' . imap_last_error());

La sentencia or die permite gestionar el caso de fallo en la conexión. Una vez que tenemos la conexión pasamos a listar los emails. Para ello tenemos varias funciones, aunque usaremos imap_search() esta función busca los emails bajo un determinado criterio. Usaremos el criterio "ALL", es decir, todos los emails.

$emails = imap_search($inbox,'ALL');

Ahora un array en $emails con todos los email de nuestro inbox. Es por ello que los recorreremos mediante un bucle for-each.

foreach($emails as $email_number) {...}

La estructura del email tiene varias partes, pero nosotros nos centraremos en la cabecera. En la cabecera es dónde va la información de la persona que nos lo envió, el tema del email,... Para recuperar la cabecera de un email utilizamos la función imap_fecth_overview. A esta función le pasamos el buzón y el email del que queremos recuperar la cabecera.

foreach($emails as $email_number) {

    $overview = imap_fetch_overview($inbox,$email_number,0);

    $salida.= 'Tema: '.$overview[0]->subject;

    $salida.= 'De: '.$overview[0]->from;

}

El resultado de ejecutar imap_fecth_overview es un array con un montón de propiedades. De estas propiedades nos quedamos con subject y from para mostrarlas por pantalla.

Ahora que hemos listado las cabeceras de todos los mensajes de nuestro buzón lo que haremos será el cerrar la conexión de nuestro buzón de emails mediante la función imap_close.

imap_close($inbox);

Sellos en PSD para diseñar

Descargar PSD

AB Exp Tipografía para diseñar

Descargar la fuente

Crea un póster refrescante con Photoshop

Ver tutorial completo

Condiciones en CSS

Ante el problema de necesitar una segunda hoja CSS para un navegador en especial comúnmente usado con IE. Podríamos usar algo como esto:

<!--[if IE 8]> 

    <style type="text/css"> 

    /* css for IE 8 */

     </style>

<![endif]-->

<!--[if lt IE 8]> 

    <link href="ie7.css" rel="stylesheet" type="text/css" />

<![endif]-->

Esto visualizará la primera CSS si el navegador es IE8 en caso de que fuera menor que IE8 se aplicará la segunda CSS. Una brebe explicación de las condiciones posibles:

• <!--[if IE 8]> = IE8
• <!--[if lt IE 8]> = IE7 or below
• <!--[if gte IE 8]> = greater than or equal to IE8

un saludo espero que esto os ayude

fuente webdesignerwall

Finalizar objetos en Java

Cuando un objeto ya no está en uso por el programa es eliminado de memoria por el garbage collector. Antes de que ocurra todo esto podemos ejecutar el método finalice() el cual nos permite ejecutar las acciones pertinentes sobre el objeto antes de que sea eliminado. Por ejemplo... la gestión de ficheros o bases de datos en los que se deberán cerrar las conexiones de dichos recursos. La definición se realizaría de la siguiente manera:

protected void finalize() throws Throwable{
  System.out.println("Finalizando el Objeto");
  super.finalize();
 }

Al incluir el método finalice() sobre un objeto estamos sobrescribiendo el método por defecto que viene en la clase Object. Mediante la sentencia super.finalice() estamos ejecutando el método finalize() de la clase padre.

De todas formas el método no se ejecutará hasta que no pase el garbage collector, pero aun así existe la posibilidad de surgerir a la máquina virtual de java que se ejecute el finalize. Esto se consigue ejecutando el el método runFinalization() de la clase System. Como ya e dicho es solo una "surgerencia" no implica una ejecucción directa de los métodos finalize(). Un ejemplo del código en ejecución seria la siguiente:

public static void main(String[] args) {
  FinalizarUnObjeto fuo = new FinalizarUnObjeto();
  System.out.println(fuo.toString());
  fuo = null;
  System.runFinalization();
 }

redireccionar con www o sin www

El truco consiste en utilizar uno de los siguientes códigos y pegarlos en el archivo .htaccess en la raíz del servidor (previo backup).

Convertir de NO www a www

RewriteEngine On
RewriteCond %{HTTP_HOST} !^www\.midominio\.com [NC]
RewriteRule ^(.*)$ http://www.midominio.com/$1 [L,R=301]

Convertir de www a NO www

RewriteEngine On
RewriteCond %{HTTP_HOST} !^midominio\.com [NC]
RewriteRule (.*) http://midominio.com/$1 [R=301,L]

Fuente:  puntogeek

Mi Cuaderno Android - Controles básicos

Ahora nos vamos a centrar en los diferentes tipos de botones y cómo podemos personalizarlos. El SDK de Android nos proporciona tres tipos de botones: el clásico (Button), el de tipo on/off (ToggleButton), y el que puede contener una imagen (ImageButton). En la imagen siguiente vemos el aspecto por defecto de estos tres controles.

Control Button [API]

Un control de tipo Button es el botón más básico que podemos utilizar. En el ejemplo siguiente definimos un botón con el texto “Púlsame” asignando su propiedad android:text. Además de esta propiedad podríamos utilizar muchas otras como el color de fondo (android:background), estilo de fuente (android:typeface), color de fuente (android:textcolor), tamaño de fuente (android:textSize), etc.

<Button android:id="@+id/BtnBoton1"

android:text="Púlsame"

android:layout_width="wrap_content"

android:layout_height="wrap_content" />

Control ToggleButton [API]

Un control de tipo ToggleButton es un tipo de botón que puede permanecer en dos estados, pulsado/no_pulsado. En este caso, en vez de definir un sólo texto para el control definiremos dos, dependiendo de su estado. Así, podremos asignar las propiedades android:textOn y android:textoOff para definir ambos textos.

<ToggleButton android:id="@+id/BtnBoton2"

android:textOn="ON"

android:textOff="OFF"

android:layout_width="wrap_content"

android:layout_height="wrap_content" />

Control ImageButton [API]

En un control de tipo ImageButton podremos definir una imagen a mostrar en vez de un texto, para lo que deberemos asignar la propiedad android:src. Normalmente asignaremos esta propiedad con el descriptor de algún recurso que hayamos incluido en la carpeta /res/drawable. Así, por ejemplo, en nuestro caso hemos incluido una imagen llamada “ok.png” por lo que haremos referencia al recurso “@drawable/ok“.

<ImageButton android:id="@+id/BtnBoton3"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:src="@drawable/ok" />

Eventos de un botón

Como podéis imaginar, aunque estos controles pueden lanzar muchos otros eventos, el más común de todos ellos y el que querremos capturar en la mayoría de las ocasiones es el evento onClick. Para definir la lógica de este evento tendremos que implementarla definiendo un nuevo objetoView.OnClickListener() y asociándolo al botón mediante el método setOnClickListener(). La forma más habitual de hacer esto es la siguiente:

final Button btnBoton1 = (Button)findViewById(R.id.BtnBoton1);

btnBoton1.setOnClickListener(new View.OnClickListener() {

    @Override

    public void onClick(View arg0)

    {

        lblMensaje.setText("Botón 1 pulsado!");

    }

});

En el caso de un botón de tipo ToggleButton suele ser de utilidad conocer en qué estado ha quedado el botón tras ser pulsado, para lo que podemos utilizar su método isChecked(). En el siguiente ejemplo se comprueba el estado del botón tras ser pulsado y se realizan acciones distintas según el resultado.

final ToggleButton btnBoton2 = (ToggleButton)findViewById(R.id.BtnBoton2);

btnBoton2.setOnClickListener(new View.OnClickListener() {

    @Override

    public void onClick(View arg0)

    {

        if(btnBoton2.isChecked())

            lblMensaje.setText("Botón 2: ON");

        else

            lblMensaje.setText("Botón 2: OFF");

    }

});

Personalizar el aspecto un botón [y otros controles]

En la imagen anterior vimos el aspecto que presentan por defecto los tres tipos de botones disponibles. Pero, ¿y si quisiéramos personalizar su aspecto más allá de cambiar un poco el tipo o el color de la letra o el fondo?

Para cambiar la forma de un botón podríamos simplemente asignar una imagen a la propiedad android:background, pero esta solución no nos serviría de mucho porque siempre se mostraría la misma imagen incluso con el botón pulsado, dando poca sensación de elemento “clickable”.

La solución perfecta pasaría por tanto por definir diferentes imágenes de fondo dependiendo del estado del botón. Pues bien, Android nos da total libertad para hacer esto mediante el uso de selectores. Un selector se define mediante un fichero XML localizado en la carpeta /res/drawable, y en él se pueden establecer los diferentes valores de una propiedad determinada de un control dependiendo de su estado.

Por ejemplo, si quisiéramos dar un aspecto plano a un botón ToggleButton, podríamos diseñar las imágenes necesarias para los estados “pulsado” (en el ejemplo toggle_on.png) y “no pulsado” (en el ejemplotoggle_off.png) y crear un selector como el siguiente:

<?xml version="1.0" encoding="UTF-8"?>

    <selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_checked="false"

    android:drawable="@drawable/toggle_off" />

    <item android:state_checked="true"

    android:drawable="@drawable/toggle_on" />

</selector>

Este selector lo guardamos por ejemplo en un fichero llamado toggle_style.xml y lo colocamos como un recurso más en nuestra carpeta de recursos /res/drawable. Hecho esto, tan sólo bastaría hacer referencia a este nuevo recurso que hemos creado en la propiedad android:background del botón:

<ToggleButton android:id="@+id/BtnBoton4"

    android:textOn="ON"

    android:textOff="OFF"

    android:padding="10dip"

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

android:background="@drawable/toggle_style"/>

En la siguiente imagen vemos el aspecto por defecto de un ToggleButton y cómo ha quedado nuestro ToggleButton personalizado.

Control ImageView [API]

El control ImageView permite mostrar imágenes en la aplicación. La propiedad más interesante esandroid:src, que permite indicar la imagen a mostrar. Nuevamente, lo normal será indicar como origen de la imagen el identificador de un recurso de nuestra carpeta /res/drawable, por ejemplo android:src=”@drawable/unaimagen”. Además de esta propiedad, existen algunas otras útiles en algunas ocasiones como las destinadas a establecer el tamaño máximo que puede ocupar la imagen, android:maxWidth y android:maxHeight.

<ImageView android:id="@+id/ImgFoto"

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

android:src="@drawable/icon" />

En la lógica de la aplicación, podríamos establecer la imagen mediante el método setImageResorce(…), pasándole el ID del recurso a utilizar como contenido de la imagen.

ImageView img= (ImageView)findViewById(R.id.ImgFoto);

Control TextView [API]

El control TextView es otro de los clásicos en la programación de GUIs, las etiquetas de texto, y se utiliza para mostrar un determinado texto al usuario. Al igual que en el caso de los botones, el texto del control se establece mediante la propiedad android:text. A parte de esta propiedad, la naturaleza del control hace que las más interesantes sean las que establecen el formato del texto mostrado, que al igual que en el caso de los botones son las siguientes: android:background (color de fondo), android:textColor (color del texto), android:textSize (tamaño de la fuente) y android:typeface (estilo del texto: negrita, cursiva, …).

<TextView android:id="@+id/LblEtiqueta"

    android:layout_width="fill_parent"

    android:layout_height="wrap_content"

    android:text="Escribe algo:"

    android:background="#AA44FF"

android:typeface="monospace" />

De igual forma, también podemos manipular estas propiedades desde nuestro código. Como ejemplo, en el siguiente fragmento recuperamos el texto de una etiqueta con getText(), y posteriormente le concatenamos unos números, actualizamos su contenido mediante setText() y le cambiamos su color de fondo con setBackgroundColor().

final TextView lblEtiqueta = (TextView)findViewById(R.id.LblEtiqueta);

String texto = lblEtiqueta.getText().toString();

texto += "123";

lblEtiqueta.setText(texto);

Control EditText [API]

El control EditText es el componente de edición de texto que proporciona la plataforma Android. Permite la introducción y edición de texto por parte del usuario, por lo que en tiempo de diseño la propiedad más interesante a establecer, además de su posición/tamaño y formato, es el texto a mostrar, atributo android:text.

<EditText android:id="@+id/TxtTexto"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_below="@id/LblEtiqueta" />

De igual forma, desde nuestro código podremos recuperar y establecer este texto mediante los métodos getText() y setText(nuevoTexto) respectivamente:

final EditText txtTexto = (EditText)findViewById(R.id.TxtTexto);

String texto = txtTexto.getText().toString();

txtTexto.setText("Hola mundo!");

Un detalle que puede haber pasado desapercibido. ¿Os habéis fijado en que hemos tenido que hacer un toString() sobre el resultado de getText()? La explicación para esto es que el método getText() no devuelve un String sino un objeto de tipo Editable, que a su vez implementa la interfaz Spannable. Y esto nos lleva a la característica más interesante del control EditText, y es que no sólo nos permite editar texto plano sino también texto enriquecido o con formato. Veamos cómo y qué opciones tenemos, y para empezar comentemos algunas cosas sobre los objetos Spannable.

Interfaz Spanned

Un objeto de tipo Spanned es algo así como una cadena de caracteres (deriva de la interfaz CharSequence) en la que podemos insertar otros objetos a modo de marcas o etiquetas (spans) asociados a rangos de caracteres. De esta interfaz deriva la interfaz Spannable, que permite la modificación de estas marcas, y a su vez de ésta última deriva la interfaz Editable, que permite además la modificación del texto.

Aunque en el apartado en el que nos encontramos nos interesaremos principalmente por las marcas de formato de texto, en principio podríamos insertar cualquier tipo de objeto.

Existen muchos tipos de spans predefinidos en la plataforma que podemos utilizar para dar formato al texto, entre ellos:

• TypefaceSpan. Modifica el tipo de fuente. 
• StyleSpan. Modifica el estilo del texto (negrita, cursiva, …). 
• ForegroudColorSpan. Modifica el color del texto. 
• AbsoluteSizeSpan. Modifica el tamaño de fuente.

De esta forma, para crear un nuevo objeto Editable e insertar una marca de formato podríamos hacer lo siguiente:

//Creamos un nuevo objeto de tipo Editable

Editable str = Editable.Factory.getInstance().newEditable("Esto es un simulacro.");

//Marcamos cono fuente negrita la palabra "simulacro"

str.setSpan(new StyleSpan(android.graphics.Typeface.BOLD), 11, 19, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);

En este ejemplo estamos insertando un span de tipo StyleSpan para marcar un fragmento de texto con estilo negrita. Para insertarlo utilizamos el método setSpan(), que recibe como parámetro el objeto Spana insertar, la posición inicial y final del texto a marcar, y un flag que indica la forma en la que el span se podrá extender al insertarse nuevo texto.

Texto con formato en controles TextView y EditText

Hemos visto cómo crear un objeto Editable y añadir marcas de formato al texto que contiene, pero todo esto no tendría ningún sentido si no pudiéramos visualizarlo. Como ya podéis imaginar, los controles TextView y EditText nos van a permitir hacer esto. Vemos qué ocurre si asignamos al nuestro control EditText el objeto Editable que hemos creado antes:

txtTexto.setText(str);

Tras ejecutar este código veremos como efectivamente en el cuadro de texto aparece el mensaje con el formato esperado:

Ya hemos visto cómo asignar texto con y sin formato a un cuadro de texto, pero ¿qué ocurre a la hora de recuperar texto con formato desde el control?. Ya vimos que la función getText() devuelve un objeto de tipo Editable y que sobre éste podíamos hacer un toString(). Pero con esta solución estamos perdiendo todo el formato del texto, por lo que no podríamos por ejemplo salvarlo a una base de datos.

La solución a esto último pasa obviamente por recuperar directamente el objeto Editable y serializarlo de algún modo, mejor aún si es en un formato estandar. Pues bien, en Android este trabajo ya nos viene hecho de fábrica a través de la clase Html [API], que dispone de métodos para convertir cualquier objeto Spanned en su representación HTML equivalente. Veamos cómo. Recuperemos el texto de la ventana anterior y utilicemos el método Html.toHtml(Spannable) para convertirlo a formato HTML:

//Obtiene el texto del control con etiquetas de formato HTML

String aux2 = Html.toHtml(txtTexto.getText());

Haciendo esto, obtendríamos una cadena de texto como la siguiente, que ya podríamos por ejemplo almacenar en una base de datos o publicar en cualquier web sin perder el formato de texto establecido:

<p>Esto es un <b>simulacro</b>.</p>

La operación contraria también es posible, es decir, cargar un cuadro de texto de Android (EditText) o una etiqueta (TextView) a partir de un fragmento de texto en formato HTML. Para ello podemos utilizar el método Html.fromHtml(String) de la siguiente forma:

//Asigna texto con formato HTML

txtTexto.setText(

     Html.fromHtml("<p>Esto es un <b>simulacro</b>.</p>"),

     BufferType.SPANNABLE);

Desgraciadamente, aunque es de agradecer que este trabajo venga hecho de casa, hay que decir que tan sólo funciona de forma completa con las opciones de formato más básicas, como negritas, cursivas, subrayado o colores de texto, quedando no soportadas otras sorprendentemente básicas como el tamaño del texto, que aunque sí es correctamente traducido por el método toHtml(), es descartado por el método contrario fromHtml().

Control CheckBox [API]

Un control checkbox se suele utilizar para marcar o desmarcar opciones en una aplicación, y en Android está representado por la clase del mismo nombre, CheckBox. La forma de definirlo en nuestra interfaz y los métodos disponibles para manipularlos desde nuestro código son análogos a los ya comentados para el control ToggleButton.

De esta forma, para definir un control de este tipo en nuestro layout podemos utilizar el código siguiente, que define un checkbox con el texto “Márcame”:

<CheckBox android:id="@+id/ChkMarcame"

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:text="Márcame!" />

En cuanto a la personalización del control podemos decir que éste extiende [indirectamente] del control TextView, por lo que todas las opciones de formato ya comentadas en artículos anteriores son válidas también para este control.

En el código de la aplicación podremos hacer uso de los métodos isChecked() para conocer el estado del control, y setChecked(estado) para establecer un estado concreto para el control.

if (checkBox.isChecked()) {

    checkBox.setChecked(false);

}

En cuanto a los posibles eventos que puede lanzar este control, el más interesante es sin duda el que informa de que ha cambiado el estado del control, que recibe el nombre de onCheckedChanged. Para implementar las acciones de este evento podríamos utilizar por tanto la siguiente lógica:

final CheckBox cb = (CheckBox)findViewById(R.id.chkMarcame);

cb.setOnCheckedChangeListener(

    new CheckBox.OnCheckedChangeListener() {

        public void onCheckedChanged(CompoundButton buttonView,

                                                  boolean isChecked) {

            if (isChecked) {

                cb.setText("Checkbox marcado!");

            }

            else {

                cb.setText("Checkbox desmarcado!");

        }

    }

});

Control RadioButton [API]

Al igual que los controles checkbox, un radiobutton puede estar marcado o desmarcado, pero en este caso suelen utilizarse dentro de un grupo de opciones donde una, y sólo una, de ellas debe estar marcada obligatoriamente, es decir, que si se marca una de ellas se desmarcará automáticamente la que estuviera activa anteriormente. En Android, un grupo de botones radiobutton se define mediante un elemento RadioGroup, que a su vez contendrá todos los elementos RadioButton necesarios.

<RadioGroup android:id="@+id/gruporb"

    android:orientation="vertical"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent" >

    <RadioButton android:id="@+id/radio1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="Opción 1" />

    <RadioButton android:id="@+id/radio2"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="Opción 2" />

</RadioGroup>

En primer lugar vemos cómo podemos definir el grupo de controles indicando su orientación (vertical u horizontal) al igual que ocurría por ejemplo con un LinearLayout. Tras esto, se añaden todos los objetos RadioButton necesarios indicando su ID mediante la propiedad android:id y su texto mediante android:text.

Una vez definida la interfaz podremos manipular el control desde nuestro código java haciendo uso de los diferentes métodos del control RadioGroup, los más importantes: check(id) para marcar una opción determinada mediante su ID, clearCheck() para desmarcar todas las opciones, y getCheckedRadioButtonId() que como su nombre indica devolverá el ID de la opción marcada (o el valor -1 si no hay ninguna marcada). Veamos un ejemplo:

final RadioGroup rg = (RadioGroup)findViewById(R.id.gruporb);

rg.clearCheck();

rg.check(R.id.radio1);

int idSeleccionado = rg.getCheckedRadioButtonId();

En cuanto a los eventos lanzados, al igual que en el caso de los checkboxes, el más importante será el que informa de los cambios en el elemento seleccionado, llamado también en este caso onCheckedChange. Vemos cómo tratar este evento del objeto RadioGroup:

final RadioGroup rg = (RadioGroup)findViewById(R.id.gruporb);

rg.setOnCheckedChangeListener(

    new RadioGroup.OnCheckedChangeListener() {

        public void onCheckedChanged(RadioGroup group, int checkedId) {

            lblMensaje.setText("ID opcion seleccionada: " + checkedid);

        }

});

Veamos finalmente una imagen del aspecto de estos dos nuevos tipos de controles básicos que hemos comentado en este artículo:

sgoliver.net

Tipografías de logos famosos

1. Frutiger Black



2. Pico Alphabet (Modified)





3. Black Rose


4. Helvetica Rounded Bold


5. Alternate Gothic


6. Catull BQ



7. Yahoo Font



8. Myriad Pro Bold



9. Neuropol (Modified)



10. Bootle



11. Klavika



12. Densmore (Modified)



13. Eagle Bold



14. Squealer



15. Royal Acid Bath



16. FFF Forward



17. Agenda Italic



18. Cheap Motel



19. Amelia



20. Avant Garde Family



Fuente: onextrapixel