Cómo programar con Ionic y Cordova – videotutoriales – episodio 2

En este segundo videotutorial de creación de aplicaciones Ionic continuaremos con la explicación del capítulo anterior en la que empezábamos a usar la herramienta creator.ionic.io con un proyecto de tipo tab. Teníamos una pantalla creada con tres pestañas. A lo largo de este videotutorial vamos a profundizar en los conocimientos de esta herramienta tan útil que nos permite montar la parte visual de la aplicación ionic a la espera de que luego nosotros introduzcamos el código correspondiente.

En este caso al haber elegido una aplicación de tipo TAB con TAB Controller podemos observar en la parte izquierda un pequeño árbol de navegación desde la cual podemos acceder al TAB Controller y a cada una de las tres pestañas que tenemos ahora mismo pre-creadas; también podremos acceder a cada una de las páginas en las que están basadas cada una de las pestañas.

Lo primero que podemos hacer es modificar esas pestañas que ya teníamos. Podemos acceder tanto desde las propias pestañas o también desde el árbol de navegación y vemos que en el árbol de navegación podemos tanto borrar como duplicar una pestaña.

Cambiar las propiedades de una pestaña:

  • la seleccionamos (podemos observar que tiene un conjunto de propiedades)
  • cambiamos el nombre
  • cambiamos el icono
  • importante* la siguiente pestaña nos indica a qué página real está conectada.
  • por último podemos mover la pestaña

A continuación nos vamos a la página a la que pertenece una de las pestañas y comprobamos que podemos cambiar otros componentes, como el color, el fondo de pantalla, el scrolling, la cabecera, el margen… Y por supuesto si fuera necesario también podríamos borrarlo. Después en el menú de la parte izquierda podemos ir arrastrando los componentes que nos interesen.

En este episodio esperamos que haya quedado claro cómo podemos movernos a través de las distintas páginas de cada pestaña. En el siguiente videotutorial, profundizaremos en algunos de estos componentes que son muy importantes para desarrollar una aplicación Ionic correctamente.