Personalizando nuestra aplicación

Personalizando mi aplicación Ionic

En éste artículo vamos a ver como empezar a cambiar nuestros estilos de la aplicación Ionic que creamos en el artículo anterior: Cómo crear una aplicación híbrida con Ionic y Firebase

Para comenzar vamos a descargarnos la aplicación. Si no la tienes creada aún.
Esta aplicación es una plantilla básica proporcionada por Ionic que cuenta con un sistema de pestañas y al que le hemos añadido un login que conecta con un servidor Restful Firebase. Puedes descargártela de mi cuenta de Github: https://github.com/cookyourweb/Ionic-Firebase-Starter-App

Sigue las instrucciones para poder instalártela:

Abre un terminal en modo administrador e instala el Ionic si aún no lo tienes instalado con la siguiente instrucción:
Sitúate en el directorio donde quieres instalarlo

npm install -g ionic cordova

ionic start myIonicFirebaseApp tabs

Donde myIonicFirebaseApp es el nombre que le he dado yo a mi aplicación. Cámbialo por el tuyo.
A continuación sustituye el directorio www de ésta aplicación por el mio que te has descargado.

Reemplaza el directorio www por el recién descargado

Reemplaza el directorio www por el recién descargado

Ya lo tenemos, ahora vamos a simular la aplicación en un navegador web con la siguiente instrucción:

ionic serve --lab

Personalizando la aplicación
Pues manos a la obra, modificar el diseño es tan fácil como visitar la web de Ionic: http://ionicframework.com/docs/components/ y buscar el componente que quieres cambiar de estilo.
Yo en mi caso y para que veáis lo sencillo y útil que es, voy modificar lo siguiente:

antes-de-modificar

Abre el directorio con tu editor favorito, yo en mi caso utilizo el Brackets

Abre el directorio con un editor de texto

Abre el directorio con un editor de texto

A continuación busca dentro del directorio templates, la página index.html que es donde vamos a modificar el estilo de la cabecera:

En mi caso voy a cambiar el estilo del header por el que se llama energized.

modificando-index-cabecera-app

Una vez abierto el index, sustituye por el código copiado de la página de componentes:

Selecciono el estilo energized del header

Selecciono el estilo energized del header

Debes de susutituir la clase bar-stable por bar-energized que es la que hemos seleccionado.
El resultado tras modificar el estilo:

resultado-ionic-serve-lab

Ahora vamos a abrir la página login.html y la vamos a editar:

Localiza la página login y editalo

Localiza la página login y edítalo

En ésta página vamos a buscar lo primero cambiar el estilo del botón.

Vuelve a la página de Ionic y busca en el menú izquierdo los botones.

Selecciona el estilo de botón energized

Selecciona el estilo de botón energized

Copia el código del botón que deseas, yo en mi caso elijo el botón energized:
sustituimos-el-estilo-button-stable

Para ver el resultado vuelve a la página del simulador:

Cambiado el estilo del botón energized

Cambiado el estilo del botón energized


El resto del código del botón, lo dejo igual, ya que block hace que el botón ocupe todo el ancho del formulario. Si lo cambiara quedaría así:
Button sin el estilo block

Button sin el estilo block

Ya solo nos queda cambiar el estilo del formulario, repito la operación buscando los componentes en la página de Ionic:

Si te fijas, actualmente tengo el estilo input input-text,

Estilo actual item-input

Estilo actual item-input


Voy a seleccionar el inset input que a diferencia del estilo que yo tenia, me deja sobrescribir sobre el nombre y el apellido.
Selecciono el estilo inset-forms para sustituirlo

Selecciono el estilo inset-forms para sustituirlo


Vuelvo a la página de login, y veo qué es lo que tengo que modificar:
Código a modificar de la página login

Código a modificar de la página login

Para ello añado el list-inset dentro de ion-list.

Ion list inset añadido

Ion list inset añadido

Debemos sustituir el estilo de los labels por el que nos proporciona la página, eliminando el span que tenía para el nombre y añadiendo el nombre en el placeholder:

codigo-cambiado

Modificando los labels

Como podéis ver el resultado quedaría de la siguiente forma:

Resultado tras modificar el header, el formulario y el botón

Resultado tras modificar el header, el formulario y el botón

Para finalizar este artículo, os voy a explicar también a cambiar el estilo de los iconos que nos proporciona la plantilla “tabs”
Crea un usuario o accede con el que ya tienes. Recuerda que este ejemplo está conectado con la aplicación Firebase con lo que la autenticación es real.
Voy a acceder con el usurio 1111@1111.com y password 111111

Accediendo a la aplicación conectada a Firebase

Accediendo a la aplicación conectada a Firebase

Como ves en la parte inferior tenemos el sistema de pestañas o tabs con un icono cada una:

Iconos que vamos a cambiar

Iconos que vamos a cambiar

Vamos a volver a la página de ionic y voy a buscar la sección de tabs http://ionicframework.com/docs/components/#icon-only-tabs

Cambiando el estilo tabs a only tabs

Cambiando el estilo tabs a only tabs


Mi intención es dejar solo un icono intuitivo para mi aplicación, por lo que copio el código y lo pego en las pestañas de mi aplicación. Empiezo por tab-dash que a la que me redirige el login.
Si quieres cambiar esta pestaña por otra, solo tienes que ir al directorio js/controllers.js y localizar la linea donde te especifica que pestaña es la primera en abrir situada en la función del login:
Tab que se abre: chats

Tab que se abre: chats


Como puedes ver, aquí no hay información de los iconos del menú. Estos están en la página tabs:

Abrimos pues la página tabs situada dentro de templates.

Abrimos pues la página tabs situada dentro de templates.

Si cambiamos los estilos a solo iconos sin modificar el icono en sí, quedaría:

Cambiados los estilos a solo icono

Cambiados los estilos a solo icono

A continuación voy a cambiar el icono en si, para ello tienes la página de iconos http://ionicons.com/
Busca el icono que más te convenza, yo en mi caso voy a buscar uno que represente el home, otro para chats diferente y otro para herramientas:

Abre la página y en el buscador inserta por ejemplo home:

Selecciono el icono que me interesa que tiene dos estados

Selecciono el icono que me interesa que tiene dos estados


Copio el nombre del icono y lo sustituyo por el ion-ios-pulse-strong:
Sustituyo por ion-ios-home

Sustituyo por ion-ios-home


Ahora repito para el icono que tiene el estado en off:
Repito para el estado off, seleccionado el icono home-outline

Repito para el estado off, seleccionado el icono home-outline

Perfecto, podeís ver el resultado en vuestra simulación:

Primer icono home cambiado

Primer icono home cambiado

Repetimos para los otros dos iconos quedando el resultado:

Cambiados los estilos

Cambiados los estilos

Vamos a aprovechar para meter un icono al botón de logout. Para ello abre la pagina templates/tab-chats y selecciona el botón logout:

Selecciona el botón logout de la página chats

Selecciona el botón logout de la página chats

Volvemos a la página de los iconos, y hacemos una búsqueda por logout:

Copia el nombre del icono

Copia el nombre del icono

Solo tenemos que meter el estilo del icono deseado, un log-out y quitar el texto:

Estilo del botón cambiado con un icono

Estilo del botón cambiado con un icono


Para finalizar cambia el botón en todas las pagínas que lo tienen, chat-detaill.html,tab-account.html, tab-dash.html

A continuación volvemos a la página de documentación de Ionic y buscamos tabs para cambiar el color de fondo:

Documentación para cambiar el color de fondo

Documentación para cambiar el color de fondo

Abrimos tabs.html e insertamos el estilo para el color de fondo, que igualamos a la cabecera simplemente poniendo energized en lugar de primary que es un azul intenso.

Cambiamos el color de fondo de tabas

Cambiamos el color de fondo de tabas

Y el resultado final:

Resultado final cambiando los estilos

Resultado final cambiando los estilos

Te dejo el código en Github por si quieres utilizarlo como comienzo para tu aplicación:https://github.com/cookyourweb/Ionic-Firebase-Starter-App-Changed-Styles

Eso es todo, ya tenéis los conocimientos necesarios para personalizar vuestra primera App construida con Ionic y Firebase como backend. En el siguiente artículo veremos como modificar los estilos con Sass, una forma muy rápida de tocar el Css original sin volvernos locos con los estilos

Verónica Serna| Cookyourweb

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *