Monthly Archives: julio 2013

You are browsing the site archives by month.
Google Maps

Google Maps

Ayer Google publicó una nueva actualización muy importante para su tan conocida app de mapas en Android, Google Maps.

Estas son sus características:

  • Compatibilidad: Únicamente está disponible para Android 4.0.3 en adelante.
  • Adaptación: Ahora la app está especialmente adaptada para Tablets.
  • Nueva manera de explorar: Google ha querido centrarse más en la experiencia del usuario y ha mejorado la forma de explorar con los mapas. Ahora no requiere escribir tanto ya que Google recomienda los lugares de interés cercanos para visitar, comer, etc. según la ubicación.
  • Navegación de rutas optimizada: Teniendo en cuenta el tráfico actual de la ruta elegida, te recomienda la manera más rápida de acceder a tu destino incluso cuando estás en mitad del viaje.
  • Nuevo sistema de puntuación de estrellas 5.0: Incorpora una forma de puntuar los lugares visitados de manera que al realizar una búsqueda muestra la valoración que tus contactos han hecho en ese sitio.
  • No existe sistema de check-in: Google ha decidido eliminar esta característica a partir del 9 de Agosto.
  • Modo offline: Ya no estará disponible la funcionalidad de mapas sin conexión.

Este es un resumen de las modificaciones que tiene esta nueva actualización. En este enlace están los detalles.

Hoy vamos a ver cómo podemos crear una lista desplegable con opciones para elegir. Este componente suele ser muy habitual en las apps sobre todo para elegir localidades, fechas, etc.

  1. El primer paso como siempre es tener un proyecto ya creado o crear uno.
  2. A continuación añadimos el código necesario para crear nuestra lista desplegable con las opciones que queremos. Éste sería el código:

Como podemos observar en el código, la lista desplegable está dividida en varias partes:

  • Picker: Es el elemento principal. En este aparatado indicamos las propiedades que queremos que tenga.
  • PickerColumn: Con este componente indicamos que vamos a añadir una columna. Este quiere decir que podemos hacer una lista desplegable de varias columnas juntas. Esto es más habitual cuando queremos que el usuario elija fecha y hora.
  • PickerRow: Este parámetro indica cada fila que tendrá la lista desplegable. Con el atributo “title” mostraremos el texto que tiene que aparecer en la fila.
<Alloy>
	<Window class="container">
		<Picker id="selector" selectionIndicator="true">
            <PickerColumn id="columna1">
                <PickerRow title="Opción 1" />
                <PickerRow title="Opción 2" />
                <PickerRow title="Opción 3" />
                <PickerRow title="Opción 4" />
            </PickerColumn>          
        </Picker>
	</Window>
</Alloy>

Además de estos atributos podemos añadir más para modificar su apariencia a nuestro gusto. En este enlace se indican todas las propiedades y eventos.

El código que acabamos de hacer es una forma sencilla y estática de crear una lista desplegable pero, ¿cómo podríamos hacerlo de manera que se rellene automáticamente? En el archivo .js que hace referencia a la vista donde hemos añadido nuestra lista, en mi caso index.js, he incluido el siguiente código que simplemente añade una fila extra al objeto.

var fila = Ti.UI.createPickerRow({title: "fila nueva"}); //Definimos uan variable que será la fila nueva y la creamos indicando el texto que mostrará
$.selector.add(fila); //añadimos la fila a la lista desplegable con id=selector.

Así queda el resultado.

Ejemplo de lista desplegable

Ejemplo de lista desplegable

 

Gracias a jQuery Mobile podemos crear una lista desplegable con estilos definidos y muy usable de cara al usuario. Vamos a ver cómo crear una de forma muy sencilla:

  1. El primer paso es el de siempre, debemos tener creado un proyecto o crear uno.
  2. En el archivo donde queremos mostrar nuestro listado añadiremos el código necesario para crearla. Esto incluye una label que indica al usuario lo que debe hacer y la propia lista con sus atributos y elementos.
  3. La lista con los elementos consta de 2 partes:
    • Select: Esta etiqueta es la principal para crear el listado y es donde se indican los atributos como el nombre que tendrá, el id y los eventos que podemos añadir.
    • Option: Cada opción está incluida dentro de una etiqueta “option” con un atributo “value” que indica el valor de dicha opción.

Así, el código sería el siguiente:

<head>
	<title>Listas</title>
	<!-- Incluimos los archivos de estilos y liberías jQuery -->
	<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.0.min.css" />
	<script src="jquery.mobile/jquery-1.7.2.min"></script>
	<script src="jquery.mobile/jquery.mobile-1.1.0.min.js"></script>
	</head>
	<body>
		<label for="lista-opciones" class="select">Elige una opción</label>
		<select name="lista" id="lista-opciones">
		   <option value="1">Opción 1</option>
		   <option value="2">Opción 2</option>
		   <option value="3">Opción 3</option>
		   <option value="4">Opción 4</option>
		</select>
	</body>

 

Con esto ya tenemos la lista desplegable creada y con buen resultado.

Ejemplo de lista desplegable

Ejemplo de lista desplegable

Además de estas propiedades, existe un gran listado con eventos incluido para poder configurar a gusto de cada uno. Éste es el enlace.

 

Hoy vamos a ver cómo crear un listado de elementos en App Inventor. Este componente es muy habitual en las apps. Muchas veces nos encontramos con un listado de elementos de los cuales hay que elegir uno. Estos son los pasos para crear esa lista:

  1. Como siempre, debemos crear un proyecto nuevo o tener uno ya creado.
  2. En el diseñador de pantallas arrastramos el elemento “listPicker” a la pantalla donde queremos que se muestre.
  3. A continuación cambiamos sus propiedades a nuestro gusto: en este caso he modificado la propiedad “text” para indicar que se debe seleccionar un elemento de la lista, y la propiedad “ElementsFromString” que es donde añadiremos el listado de componentes que deben aparecer a la hora de desplegar el listado.
Propiedades lista

Propiedades lista

Este sería el resultado:

Ejemplo de lista

Ejemplo de lista

Con esto ya tenemos creada nuestra lista de elementos. Ahora vamos a ver qué propiedades tiene para poder configurarlo al gusto de cada uno:

  • BackgroundColor: Este parámetro indica el color de fondo de la lista. Por defecto es negro.
  • ElementsFromString: Los elementos que tendrá la lista de componentes. Deben estar separados por comas.
  • Enabled: Aquí indicamos si queremos que la lista este habilitada o deshabilitada.
  • FontBold: Este parámetro indica que la letra se mostrará en negrita. Por defecto esta desactivado.
  • FontItalic: Si queremos que la letra se muestre en cursiva, deberemos marcar esta opción.
  • FontSize: El tamaño de la letra de la lista es por defecto 14 pero podemos modificarlo en este punto.
  • FontTypeface: Este atributo indica el tipo de letra que se muestra.
  • Image: Si queremos añadir una imagen de fondo elegiremos la imagen y la subiremos en este parámetro.
  • Selection: Aquí podemos indicar el elemento que se mostrará seleccionado cuando se cargue el listado.
  • Shape: En este parámetro se define los bordes de la lista. Por defecto es rectangular pero podemos modificarlo para que sea ovalada o redondeada.
  • ShowFeedback: Este atributo muestra una pequeña animación cuando se utiliza la lista de modo que ayuda al usuario a indicar que ha hecho click en ella.
  • Text: Aquí indicamos el texto que mostrará por defecto cuando se cargue y antes de elegir un componente.
  • TextAlignment: En este apartado podemos indicar si queremos que el texto que se muestra por defecto en la lista esté alineado a la izquierda, centrado o a la derecha. Por defecto se muestra centrado.
  • TextColor: Para cambiar el color del texto configuramos este apartado y elegimos el que queramos.
  • Visible: Este atributo indica si la lista desplegable es visible o no. Por defecto está marcado.
  • Width: Aquí podemos indicar la anchura del listado cuando está sin desplegar.
  • Height: El último de los parámetros es indicar la altura que queramos que tenga la lista cuando no esta desplegada.

Aquí dejo el enlace con más detalles de las propiedades y los eventos más comunes de las listas desplegables.

 

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies