Mat|r tips: Implementando la nueva UI a nuestro Tateti

Hola, soy  Fernando nuevamente. En esta ocasión, y para complementar la guía anterior, vamos a retomar nuestra app “Tateti” y le vamos a realizar un refactor completo a la UI para dejarla con un acabado un poco más profesional y bonito. Para ello utilizaremos los diseños que ha preparado Muriel, nuestra diseñadora.

 

Antes de comenzar, es importante tener en cuenta que para este proyecto deberemos subir las imágenes que utilizaremos en nuestra app a un servidor de imágenes, como por ejemplo imgur. Una vez que tengamos los enlaces de estas imágenes, hacer la implementación, será muy rápido gracias al UI Builder.

 

Por si aún no lo has chequeado, hemos actualizado el tutorial del tateti anterior. Te recomiendo que antes de seguir vuelvas a leerlo para ponerte al día.

 

Eso es todo por esta introducción, así que manos a la obra!

 

Comenzando

Para comenzar primero vamos a preparar todos nuestros assets, es decir, todos los recursos que vamos a utilizar para estilizar nuestra interfaz de usuario. Para esto vamos a preparar las imágenes de fondo, botones y los diferentes componentes que utilizaremos.

 

Todas las imágenes que necesito para implementar el nuevo diseño de la app, las he subido al servidor de mat|r, y, como desde allí es posible acceder mediante enlace directo a cada imagen, resultará muy sencillo incluirlas en la aplicación.

 

Así ya tenemos todas y cada una de las imágenes que necesitaremos para darle forma a nuestra app. Así que comenzaremos por agregar un nuevo layout,  que será la pantalla de inicio donde se verá el logo de la aplicación. Para esto agregamos una experiencia adicional desde el modeler y procedemos con las modificaciones para darle uso a nuestra nueva pantalla.

 

Vamos a modificar una pequeña sección del código para hacer que lo primero que se muestre sea esta pantalla.

Volvemos al modeler y allí abrimos el archivo app.ms. Dentro de este archivo vamos a ubicar la línea que corresponde al primer push de la experiencia GetIn (donde se prepara la partida) y lo vamos a reemplazar con un push a esta nueva experiencia que estamos creando.

 

 

Luego vamos al archivo de la experiencia que creamos llamada Main, y vamos a crear el botón y la regla que deberá ejecutar.

 

 

Ya con eso podemos ir al UI Builder y comenzamos con la edición gráfica de nuestra app!

 

 

Lo primero que haremos será abrir el Layout correspondiente al Menú. Lo que haremos allí será colocar la imagen de fondo con el logo, y también le daremos un estilo a ese botón para que quede con un acabado bonito y profesional.

 

 

Este será el fondo que implementaremos. Y hacerlo no podia ser mas sencillo gracias al UI Builder de Mat|r. Simplemente clickeamos en el tab desplegable “Backgrounds”, que podemos encontrar en la derecha de la ventana, y colocamos el url directo a la imagen en el campo “BG Image URL”. Listo! Ya deberías poder visualizar correctamente la imagen colocada en el fondo en la previsualización del UI Builder.

 

 

Ahora vamos a tildar la opción “Aspect Fill” para que la imagen se rellene en toda la pantalla. Luego abrimos el tab “Navigation Bar” y lo desactivamos para esta pantalla. Guardamos y cargamos desde nuestro dispositivo móvil. Como podemos ver tendremos algo como lo siguiente:

 

 

Perfecto! Ahora vamos a darle estilo a ese botón y a ubicarlo donde corresponde. Para ello lo seleccionaremos y veremos que las propiedades que se muestran ahora son las pertenecientes a ese botón.

 

 

Primero iremos al tab “Layout” y allí vamos a correrlo hacia abajo. Para esto modificaremos el campo “Margin” correspondiente al superior. Al aumentarlo, el botón se desplazará hacia abajo tantos pixeles como le indiquemos. Vamos a colocarle unos 500px aproximadamente para que se visualice por debajo del logo principal. Luego, quitamos todo el padding y colocamos en “Height” el valor 32. Por último, en el campo “Radius” le damos un valor de 5 para redondear un poco las esquinas del botón.

 

Una vez hecho abrimos el tab “backgrounds” y, al igual que hicimos para el fondo, vamos a incluir la URL de la imagen de estilo del botón. El estilo se aplica al instante y ya con ello estará listo nuestro menú. Damos save y cargamos!

 

 

Bien ya tenemos nuestra primera pantalla terminada. Vamos por las siguientes!

 

Abrimos el layout “GetIn” correspondiente a la “sala de espera”. Allí haremos nuestras próximas modificaciones. Lo primero que haremos será colocar el fondo y el estilo a la barra de navegación. Para ello haremos lo mismo que antes para el fondo.

 

Estando en las propiedades del layout vamos a “Backgrounds” y en el campo de url colocamos la url que corresponde al fondo. Y como hicimos antes seleccionamos el modo “Aspect Fill”.

 

Luego abrimos el tab “Navigation Bar” y colocamos la url de la imagen en el campo “Background Image URL”. Con ello ya tenemos estilos en el fondo y en la barra de navegación. Vamos a cambiar el texto en la barra, vamos al campo “Title” en el mismo tab de la barra y colocamos algo como “”ta te ti” por ejemplo. Cambiamos el estilo de letra o el tamaño como más nos guste y ya está lista la barra.

 

Ahora vamos al botón para darle el mismo estilo que al botón del menú. Repetimos lo mismo: -Backgrounds, Url, aplicamos los cambios de layout del botón y listo. Aplicar estilos en mat|r es bastante sencillo como verán.

 

Guardamos y vemos!

 

 

Vamos a darle estilo al textfield. Lo seleccionamos y nos dirigimos a layout. Una vez allí vamos a cambiar el color del borde. Para este ejemplo lo dejaremos en blanco. Y en background vamos a ponerlo transparente. Cambiamos también el color del texto a blanco yendo a “Text Format” y cambiando el color allí. Listo, ya quedo casi lista esta pantalla.

 

Ahora nos dirigiremos al Modeler para agregar un par de componentes a la experiencia “GetIn”. Dos imágenes:

String rd1 as Image
String rd2 as Image

En ellas colocaremos una imagen cada vez que uno de los jugadores apriete el botón listo, con ello reemplazamos los checkbox.

Agregamos estas dos reglas también:

 

Rule rd1 listen (ready_player1 from GetIn as In) when getIn.ready_player1 {
        genIn.rd1 = "https://i.imgur.com/9Ti3Ie3.png"
    }
    
    Rule rd2 listen (ready_player2 from GetIn as In) when getIn.ready_player2 {
        genIn.rd2 = "https://i.imgur.com/9Ti3Ie3.png"
    }

Dichas reglas se encargaran de hacer lo anterior mencionado. Ahora volvemos al UI Builder y agregamos los dos componentes de imagen. Para hacerlo clickeamos el icono  “Components”, y clickeamos dos veces el componente que corresponde a las imágenes.

 

Bindeamos esas imágenes a las que definimos en el código de la experiencia yendo a sus propiedades, luego al tab que dice “Data Binding” y agregando ahí la línea “getin.rd1” y “getin.rd2” respectivamente.

 

También le cambiaremos el tamaño a dichos componentes y su ubicación dentro de la experiencia. Iremos al tab “Layout” de cada uno de esos componentes de imagen y cambiamos el campo “width %” que está en 1 por .3. También seleccionamos “Center” en “Self Alignment”.

 

Ahora eliminaremos de la experiencia los dos checkboxes y vamos a reorganizar todos los componentes de tal forma que quede un label y abajo la imagen de confirmación que acabamos de asignar para cada jugador.

 

Como verán,  podemos ir guardando y probando como esta quedando.

 

 

Hermoso! Y muy rápido! Ahora nos queda la última pantalla. Colocaremos el mismo fondo que en la anterior para mantener la consistencia. Al igual que vamos a hacer todos los textos de color blanco. En el modeler vamos a cambiar las url de las imágenes que corresponden a la X y al O por los otros que definimos al principio para que correspondan con la interfaz gráfica que estamos armando.

 

Luego vamos a colocar cada fila de la grilla dentro de un componente llamado “vcontainer”. Esto para colocar la imagen de fondo de la grilla. Esto lo hacemos de la misma manera que con los demás componentes a los que les hemos establecido el fondo. Vamos a ponerle tambien un pequeño margen para que no quede demasiado pegado a los componentes de arriba. En el tab de “Layout” de ese componente, vamos a modificar el campo superior de margin.

 

Con todo ello listo ya podemos ver el resultado final. Como se puede observar es bastante bueno y nos ha llevado 20 min o menos si lo haces con agilidad. Mucho menor al tiempo que te tomaría incluir todos estos cambios tocando directamente java o swift. Y con una interfaz bastante simple y amigable. Mat|r es una herramienta muy poderosa en lo que a ahorro de tiempo se refiere.

 

Aqui te dejamos los enlaces a las imágenes que utilizamos en nuestra app y que hemos subido a un servidor de imágenes:

 

-Logo e imagen de fondo del menú principal: http://matrproject.com/appimages/appposts/tateti-ui/fondo_menu.jpg

-Imagen de fondo de las demás pantallas: http://matrproject.com/appimages/appposts/tateti-ui/fondo.jpg

-Estilo de botones:

http://matrproject.com/appimages/appposts/tateti-ui/fondo_boton.png

-Ficha X:

http://matrproject.com/appimages/appposts/tateti-ui/x.png

-Ficha O:

http://matrproject.com/appimages/appposts/tateti-ui/o.png

-Grilla del tablero:

http://matrproject.com/appimages/appposts/tateti-ui/grilla.jpg

-Fondo de la barra de navegación:

http://matrproject.com/appimages/appposts/tateti-ui/nav.png

 

 

Eso es todo por esta ocasión! 

Cualquier duda escribe a support@matrproject.com

Saludos y suerte!