Mostrando entradas con la etiqueta diseño. Mostrar todas las entradas
Mostrando entradas con la etiqueta diseño. Mostrar todas las entradas

martes, 24 de febrero de 2015

Menús en Android (3ra Parte)

image

En los dos artículos anteriores vimos cómo crear menús y submenús. En este artículo vamos a hablar acerca de los menús contextuales, los cuales nos pueden ser muy útiles en nuestras aplicaciones Android.

Los menús contextuales siempre van a ir asociado a un control de la pantalla y se muestra al realizar una pulsación larga sobre el mismo. Por ejemplo, si tenemos una lista de elementos y hacemos una presión de unos segundos sobre uno de los elementos, podríamos programar para que saliera un menú contextual con algunas opciones que queremos hacer sobre ese elemento.

Vamos a hacer un ejemplo de cómo quedaría un menú contextual con una lista de elementos.

Vamos a ponerle al xml de nuestra Activity un ListView que le llamaremos lista. Así quedaría:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >

<ListView
android:id="@+id/lista"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
</ListView>

</LinearLayout>

Creamos un objeto de tipo ListView que le llamaremos objectLista y luego obtenemos la referencia del elemento creado en el xml

objectLista = (ListView)findViewById(R.id.lista);

Para este ejemplo vamos a crear un arreglo para simular los elementos de la lista , creamos un adapter con este arreglo y se lo asignamos al objectLista anteriormente creado y luego asociamos los menús contextuales a los controles.

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

ArrayAdapter&lt;String&gt; adaptador =
new ArrayAdapter&lt;String&gt;(this,
android.R.layout.simple_list_item_1, datos);

objectLista.setAdapter(adaptador);

Creamos el xml menu le ponemos el contenido del menú contextual.

<?xml version="1.0" encoding="utf-8"?>
<menu
xmlns:android="http://schemas.android.com/apk/res/android">

<item android:id="@+id/opcion1"
android:title="Opcion1"></item>
<item android:id="@+id/opcion2"
android:title="Opcion2"></item>

</menu>

Ahora vamos a darle acción a nuestro menú. Creamos el método onCreateContextMenu ahí “inflamos” el menú y también vamos a ponerle como título del menú contextual el texto del elemento presionado de la lista.

@Override
public void onCreateContextMenu(ContextMenu menu, View v,
ContextMenuInfo menuInfo)
{
super.onCreateContextMenu(menu, v, menuInfo);

MenuInflater inflater = getMenuInflater();

AdapterView.AdapterContextMenuInfo info =
(AdapterView.AdapterContextMenuInfo)menuInfo;

menu.setHeaderTitle(
objectLista.getAdapter().getItem(info.position).toString());

inflater.inflate(R.menu.menu, menu);
}

Y para definir que se va a hacer cuando se presione cada uno de los elementos de la lista definimos el método onContextItemSelected En este método según el id del elemento presionado mostramos un mensaje.

@Override
public boolean onContextItemSelected(MenuItem item) {

switch (item.getItemId()) {
case R.id.opcion1:
Toast.makeText(getApplicationContext(), "Etiqueta: Opcion 1 pulsada!", Toast.LENGTH_LONG);
return true;
case R.id.opcion2:
Toast.makeText(getApplicationContext(), "Etiqueta: Opcion 2 pulsada!", Toast.LENGTH_LONG);
return true;
default:
return super.onContextItemSelected(item);
}
}

Aquí hemos usado el objeto Toast para mostrar mensajes, pero de esto hablaremos en próximos artículos.

Con lo visto en este artículo vamos a poder crear menú contextual a nuestras listas, algo muy importante cuando estamos haciendo una aplicación con una lista que queremos visualizar opciones secundarias.

image

{ Leer Más }


miércoles, 28 de enero de 2015

Menús en Android (1ra Parte)

image

En este artículo vamos a hablar sobre los menús en Android, un recurso importante para nuestras aplicaciones cuando queremos mostrar opciones secundarias o queremos simplificar espacio dentro de la vista. En Android existen tres tipos diferentes de menús:

· Menús principales: De estos decir que son los más habituales, aparece cuando se oprime el botón menú del dispositivo en la parte inferior del mismo.

· Submenús: Son usados para mostrar opciones secundarias y se pueden mostrar al pulsar una opción del menú principal.

· Menús Contextuales: Aparece cuando se hace una pulsación larga sobre algún elemento de la vista de la aplicación.

En este artículo hablaremos sobre el primer tipo de menú y dejaremos los otros tipos de menú para próximos artículos.

Los menús los podemos implementar de dos formas en nuestra aplicación, una mediante la definición en un fichero XML y la segunda mediante código. En este artículo abordaremos la primera por ser la que más utilizo por su rápida implementación.

Para entender el tema de los menús pues nada mejor que llevarlo a la práctica y para esto le pondremos unos menús a la app que comenzamos en los artículos anteriores.

Para diseñar un menú es necesario crear el fichero menú.xml en la carpeta res / menú. En nuestra app pondremos un menú con tres opciones, por lo que el diseño quedaría así:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@+id/Menu1" android:title="Opción 1"
android:icon="@drawable/tag"></item>
<item android:id="@+id/Menu2" android:title="Opción 2"
android:icon="@drawable/filter"></item>
<item android:id="@+id/Menu3" android:title="Opción 3"
android:icon="@drawable/chart"></item>
</menu>

Este XML se compone de un elemento principal <menu> que contiene tantos elementos <item> como opciones queramos ponerle a nuestro menú. Destacar que los elementos <item> tiene propiedades como el id, el título y el icono. Podemos observar que nuestro XML tiene un detalle y es que los títulos están puestos directamente, algo que vimos que no era aconsejable, para esto creamos los Strings de las opciones y lo referenciamos en el XML por lo que quedaría así:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@+id/MenuPrincipal"
android:title="@string/texto_opcion1_menu"
android:icon="@drawable/tag"></item>
<item android:id="@+id/Menu2"
android:title="@string/texto_opcion2_menu"
android:icon="@drawable/filter"></item>
<item android:id="@+id/Menu3"
android:title="@string/texto_opcion3_menu"
android:icon="@drawable/chart"></item>
</menu>

Ahora tenemos que implementar el evento onCreateOptionsMenu() del activity que queremos que muestre el menú. En este evento vamos a “inflar” el menú. Primero obtendremos una referencia al inflater mediante el método getMenuInflater() y posteriormente generamos la estructura del menú llamando a su método inflate() pasándole como parámetro el ID del menú definido en el XML que en nuestro caso será R.menu.menu. Por último devolveremos el valor true para confirmar que debe mostrarse el menú.

Ahora solos nos queda implementar cada una de las opciones del menú. Esto se hará incluyendo el evento onOptionsItemSelected() del activity que mostrará el menú. Este evento recibe como parámetro el ítem que fue pulsado, cuyo ID podemos recuperar con el método getItemId(). Con el ID podemos saber qué opción ha sido pulsada y ejecutar lo que queramos. Por ahora lo único que haremos es mostrar un mensaje.

@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.Menu1:
Toast.makeText(this, "Opcion 1 pulsada!",
Toast.LENGTH_LONG).show();
return true;
case R.id.Menu2:
Toast.makeText(this, "Opcion 2 pulsada!",
Toast.LENGTH_LONG).show();
return true;
case R.id.Menu3:
Toast.makeText(this, "Opcion 3 pulsada!",
Toast.LENGTH_LONG).show();
return true;
default:
return super.onOptionsItemSelected(item);
}
}

De este código solo comentar como se muestra el mensaje y es utilizando la clase Toast, el mismo tiene el método makeText para indicar el texto que se mostrará en el mensaje y luego usamos el método show() para que se muestre en nuestro activity. De las notificaciones hablaremos en próximos artículos.

{ Leer Más }


lunes, 19 de enero de 2015

Nuestra primera aplicación (2da parte)

image

En el artículo anterior comenzamos a desarrollar una pequeña aplicación. Definimos toda la parte visual y en esta entrega vamos a desarrollar toda la lógica de la aplicación. Recordando, nuestra app lo único que hará es que al hacer clic en un botón, este cambie el valor de su texto.

Antes de comenzar con la lógica veremos cómo nos quedó la parte visual de nuestra app.

image

Lo primero que debemos hacer es captar el evento que ejecutará el cambio de texto del botón y es el clic, es decir, cuando se le da clic al botón, este llama a su evento onClick, que es el que tenemos que capturar nosotros. Para eso vamos al fichero donde está la clase de que representa al Activity donde pertenece el botón, en nuestro caso se llama PrimeraActivity.java.

image

Lo primero que debemos hacer es declarar un objeto Button que es el que va a representar a nuestro botón de la parte visual en el código. Para esto escribimos el siguiente código:

private Button boton;

Señalar que para usar la clase Button de Android es necesario importar el paquete android.widget.Button como muestra la siguiente línea:

import android.widget.Button;

Después de creado el objeto, vamos a asociar el objeto creado con el botón visual. Esto lo hacemos en el método onCreate de la siguiente forma:

public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

boton = (Button)this.findViewById(R.id.button1);
}

Vamos a explicar un poco este código. El método onCreate de la case Activity se lanza cuando se lanza esta activity. Con el método findViewByid del activity lo que hacemos es devolver la referencia del objeto visual que tiene como id, el que se pasa por parámetro. En anteriores artículos hablamos de la clase R. En el código cuando ponemos R.id.button1 estamos accediendo al componente visual que tiene un id igual a button1.

Ahora vamos a capturar el evento onClick del botón. Esto lo haremos de la siguiente forma:

boton.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
//Acciones a ejecutar
}
});

Después de saber cómo capturar el evento onClick del botón, solo nos queda cambiar el texto del mismo:

boton.setText(R.string.texto);

Es válido aclarar que texto es un String cualquiera que debemos crear para guardar el texto que vamos a mostrar cuando se de clic en el botón. El método onCreate quedaría así:

public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

boton = (Button)this.findViewById(R.id.button1);

boton.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
boton.setText(R.string.texto);
}
});
}

Con esto hemos hemos terminado nuestra primera aplicación en Android. En próximos artículos iremos enriqueciendo aún más esta aplicación.

{ Leer Más }


lunes, 3 de junio de 2013

Diseño web adaptativo (Responsive Design) usando ZK.

clip_image002

La empresa SOFTPEI Ingeniería y Sistemas tiene entre sus temas de investigación-desarrollo el diseño web adaptativo (en inglés, Responsive Web Design), que es una técnica de diseño y desarrollo web que mediante el uso de estructuras e imágenes fluidas, así como de media-queries en la hoja de estilo CSS, consigue adaptar el sitio web al entorno del usuario. Nuestra empresa ha desarrollado varios productos usando el lenguaje Java, combinado con el Framework ZK para lograr aplicaciones que cumplan con las normas de diseños web adaptativo. A continuación les mostramos las funcionalidades que Framework ZK ofrece para lograr Responsive Design, desde la óptica de su equipo de desarrollo:

Los mercados web y móvil crecen rápidamente y cada vez son más y más empresas las que necesitan estar presentes en las 2 plataformas [1]. Esto las lleva a invertir tiempo y dinero creando aplicaciones que se ajusten a las necesidades de ambas plataformas.

La mayoría de los proveedores/frameworks ofrecen un conjunto de componentes diseñados para los dispositivos táctiles, y por lo tanto no alivian el problema de tener que escribir 2 o más aplicaciones diferentes para soportar todos los dispositivos. De hecho, tener que implementar múltiples aplicaciones o múltiples páginas para cada vista dispara los costes e introduce mayores riesgos al proyecto, lo cual no es recomendable en un mercado empresarial móvil todavía incierto.

Con ZK 6.5 hemos aliviado ese dolor, puesto que no hemos implementado únicamente un diseño web responsivo, sino que lo hemos hecho permitiendo a los desarrolladores proporcionar una experiencia óptima al usuario en todos los dispositivos sin tener que escribir 2 aplicaciones o tener que desarrollar múltiples páginas. Esto es un gran punto a favor de los desarrolladores que quieren crear una aplicación para tablet o smartphone, pero no gastar tiempo y dinero implementando 2 aplicaciones separadas o páginas, teniendo que además usar diferentes componentes en cada caso.

El siguiente diagrama presenta las diferencias entre las aproximaciones de otros y la nuestra.

clip_image004

Llevando más allá el Responsive Design

Con ZK 6.5 hemos llevado más allá el Responsive Design, para permitir a los desarrolladores proveer una experiencia de usuario óptima en todos los dispositivos sin tener que escribir 2 aplicaciones o usar múltiples páginas.

Esta es una gran ventaja para los desarrolladores que quieren crear una aplicación para dispositivos Tablet o Smartphone pero no quieren gastar tiempo y dinero implementando 2 aplicaciones separadas o conjuntos de páginas y además con diferentes componentes en cada caso. Esto lo hacemos posible gracias al uso de nuestros componentes Responsive en tu Responsive Design.

Responsive Design & Componentes Responsive

ZK 6.5 da a los desarrolladores la habilidad de escribir una aplicación y que esta funcione de una forma óptima en cualquier tipo de dispositivo, desde escritorio clásico hasta smartphones. A esto se le llama independencia de dispositivo. El "desarrollo independiente del dispositivo" se consigue mediante 2 técnicas.

Responsive Design

ZK 6.5 soporta completamente Resposive Design y permite a los desarrolladores utilizar las últimas técnicas de desarrollo como CSS3 en sus aplicaciones, por lo tanto pueden optimizar sus aplicaciones para funcionar en las diferentes resoluciones que encontramos en pantallas de escritorio, tablets o smartphones.

El Responsive Design determina la posición de los componentes en diferentes dispositivos. Sin embargo, además de que el layout funcione en diferentes dispositivos, los usuarios necesitan componentes que, de forma transparente, provean de una experiencia de usuario óptima para cada dispositivo. Componentes totalmente Responsivos.

Responsive Components

Los componentes de tipo Responsive cambian radicalmente su comportamiento para ajustarse al dispositivo en el que se están mostrando, esto refuerza el concepto de "desarrollo independiente del dispositivo".

Los cambios que un componente Responsivo presenta transparentemente son, entre otros, la gestión de los eventos del ratón y táctiles según el dispositivo, como los movimientos táctiles de arrastrar el dedo propios de una tableta, o los gestos para navegar en un grid o pasar a la siguiente página, también el control del scroll, abrir y cerrar layouts con el dedo, y muchos más.

Conclusiones

El "desarrollo independiente del dispositivo" es posible si se desarrolla usando Responsive Layout y Componentes Responsive, que combinados, proveen a los desarrolladores de ZK la habilidad de escribir una aplicación una vez y tenerla optimizada en los diferentes dispositivos y plataformas, como navegadores de escritorio, tabletas y smartphones.

Esta es una grandísima ventaja para los desarrolladores que quieran ahorrar dinero y tiempo teniendo una aplicación, que con la ayuda de ZK, automáticamente se adapta a la plataforma o dispositivo que está usando.

El "desarrollo independiente del dispositivo" es un punto más en la base de ZK de producir tecnología punta que aligera la carga de desarrollo de los desarrolladores en todo el mundo. ZK continúa ayudando a los desarrolladores abstrayéndolos tener que sufrir, añadiendo nuestra capa Ajax transparente & Java que te permite escribir aplicaciones Ajax sin tener que conocer los detalles de la comunicación y es más controlar el navegador directamente utilizando Java, sin necesidad de utilizar Javascript.

Referencias

  1. ZK 6.5′s Responsive Philosophy.
{ Leer Más }


IconIconIcon