Pegandonos con lo Layouts

Bueno parece que a todos en la comunidad nos pasa algo parecido al principio o incluso mas adelante, la conclusión es que todos nos acabamos pegando con los Layauts.

Por que nos pegamos todos de esta manera con ellos?

Hombre pues es muy simple, coloca las cosas donde le da la gana y no hace lo que yo quiero.

Hasta cierto punto estoy de acuerdo con lo que decís, puesto que se pueden dominar.

Normalmente al principio, como no entendemos bien que es esto de los Layouts optamos por la opción de colocar todos los elementos en el formulario mirando pixel a pixel donde y como van y dándoles el tamaño que creemos conveniente.

Para que os hagáis una idea, esto es lo que se suele hacer en muchas otras plataformas y lo que hacen muchos al principio en Velneo:

Como estamos acostumbrados ponemos cada objeto donde queremos que aparezca y andando… Pues NO!!

Hay que ver las ventajas y desventajas.

Si no usamos Layouts nos encontramos con:

    • Los controles no son redimensionables en tiempo de ejecución
    • Si el cliente final redimensiona la ventana en cuestión quedara todo igual y la visión no sera agradable
    • Cuando coloquemos en un futuro un objeto mas tendremos que mover y recolocar todo el formulario

Por otro lado si utilizamos Layouts ganaremos en tiempo y obtendremos muchas ventajas

    • Los objetos se colocan, redimensionan, etc. automáticamente
    • Los formularios mantienen la relación de aspecto sin deformarse
    • A la hora de colocar los objetos en tiempo de diseño no nos tenemos que preocupar de los pixeles, bueno a veces si, pero es por ser pejigueros

A la hora de poner los Layouts podemos ver cosas como estas:

Como podemos ver los objetos se colocan de una forma especial en tiempo de ejecución, y en tiempo de diseño están de otra.

Como podemos controlar esto? De forma muy simple.

Algunos hacen comparativas con los DIV de HTML al referirse a los Layouts de Velneo para intentar orientarse y que decir tiene que es casi lo mismo.

Empecemos viendo que tipos de tipos de Layouts proporciona Velneo.

Tenemos un total de 5 tipos de los cuales nos centraremos en 3.

    • Horizontal
        • Todo lo que este dentro de este layout se ordenara en fila de izquierda a derecha
    • Vertical
        • Todo lo que este dentro de este layout se ordenara de arriba hacia abajo
    • Grid
        • Todo el contenido de este layout se ordena en celdas dependiendo de donde y como sea cada objeto que este contenido en el.

Esto puede parecer lioso pero no lo es.

Lo primero que debemos de tener en cuenta cuando empezamos con los Layouts es que el formulario también se comporta como tal, es decir, si no le indicamos a la propiedad Tipo de layout en el formulario un valor, todos los Layouts que pongamos en el formulario no tendrán ningún efecto y por consiguiente quedara todo descolocado.

Dependiendo de como vallamos a diseñar el formulario nos compensara ponerlo de una u otra forma, como se suele decir, para gustos los colores 🙂

Layout Horizontal

Como podemos ver da igual como pongamos los objetos dentro de este layout, al ejecutar todos se alinearan uno detrás de otro.

Cuando me refiero a objetos se entiende que esto también ocurre si metemos otro layout dentro de este.

Layout Vertical

Aquí podemos observar como pasa lo mismo pero todos van de arriba hacia abajo.

Nosotros no indicamos en que posición o que tamaño tiene que tener cada objeto, el solo los ordena y redimensiona para que todo encaje.

Layout Grid

Este es un poco mas lioso pero a la vez sencillo de entender.

Si nos fijamos dentro del layout aparecen unas lineas discontinuas que lo atraviesan. Estas lineas nos indicaran en que posición ira cada objeto dentro del grid. De esta forma es mas sencillo ir colocando al gusto los elementos que necesitemos.

Buenos veamos poco a poco un formulario con todos los Layouts y como quedaría algo mas vistoso.

Tenemos varias opciones para realizar un formulario.

    • Podemos usar el asistente de formularios de Velneo para así tener una primera impresión del formulario y solo tendríamos que recolocar lo que no nos gustase.
    • Realizar el formulario desde cero poniendo nosotros cada uno de los elementos.
    • Levantarse, ir a la cocina, preparar un buen tanque de café y armarse de paciencia (sobre todo si es la primera vez, jejeje 😉 )

Buenos pues si esta todo listo empecemos con el sistema de asistente.

Con una tabla con un par de campos nos sobrara.

Ya en su día comentábamos como se utilizaba el asistente de formularios, por lo cual me lo salto.

Al terminar nos encontramos con algo como esto:

Buenos y ahora que son tantas lineas azules?
No decías que ibas a ir poco a poco?

Yo siempre digo, la paciencia es la madre de toda ciencia. (No siempre lo cumplo pero bueno 🙂 )

Vamos a intentar mirarlo de fuera hacia adentro para intentar explicarlo.

Lo primero que debemos ver es que el formulario en si mismo tiene el Layout en Vertical. Lo que implica que todos los elementos van colocados hacia abajo.

Ahora nos encontramos con 2 grandes grupos, los elementos de edición y los botones. Y por que digo esto? pues por que si separamos un poco , y como he dicho vamos de fuera hacia adentro, nos encontramos con esto:

Tenemos los 2 grupos que hemos comentado bien definidos, ahora vamos a esparramar un poco mas el asunto.

En el asistente seleccionamos la opción de 3 Layout con uno grande abajo. Pues lo desparramamos todo y vemos que pasa.

Como podemos ver, dentro del grupo de edición nos encontramos con 2 separaciones, elementos superiores e inferiores.

El Layout que compone los elementos de edición esta en modo Vertical, de esta forma los 2 elementos que contiene se colocan uno encima del otro. El elemento superior contiene dentro 2 Layout mas y el elemento inferior solo contiene los Objetos de Texto estático y Caja de texto enriquecido. Como el Layout que los contiene esta en Vertical ya sabéis como aparecerán.

Sin embargo en el elemento superior el Layout esta en modo Horizontal puesto que contiene 2 Layout de tipo Grip.

Y por que son de tipo Grid?

Simple, por que es como una tabla con X filas y X columnas. De esta forma se colocan los objetos para que estén alineados.

Bueno y ahora que tenemos todo desparramado, sin colocar y muy feo que es lo que pasa? Como se ve en tiempo de ejecución?

Como podéis ver esta todo colocado y respetando cada objeto su propio espacio y redimensionandose para ocupar el espacio que le a sido asignado por el Layout.

Y por que esta esa imagen en el medio y los campos de Nombre y Apellidos descolocados?

Vaya, ya salto el listo de turno…

Veamos… como decirlo… repito: todos los objetos se redimensionan a un tamaño proporcional dentro de su Layout y por consiguiente, si nos fijamos bien, nos daremos cuenta que el objeto imagen ha hecho exactamente lo que se la ha dicho.

Como se ha venido viendo en varios artículos cada objeto tiene una serie de propiedades, y los Layouts son parte de ellas.

Si queremos en objeto se salte, por así decirlo, lo que dice el Layout y de esta manera darle nosotros el tamaño exacto para cuadrar el aspecto del formulario a la hora de ejecución y que no nos pase lo que hemos visto, solo tendremos que cambiar las propiedades de Ancho en layout y Alto en layout. Pero ojo, que tendréis que mirar bien cada pixel tanto en tamaño como en posición dependiendo de como y donde coloques dicho objeto.

El resto es todo practica y si quedan dudas pues lo de siempre, comentario y responderé encantado.

Y creo que con esto y un bizcocho hasta mañana a las ocho.

Anuncios

Acerca de NexusFireMan

Conocedor de las nuevas tecnologías, Community Manager, Bloger, Wordpress, Velneo, Social Media y encandilado con Android.

Publicado el 28/08/2011 en Tutoriales Antiguos, Velneo y etiquetado en , , , , . Guarda el enlace permanente. 1 comentario.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: