Estructura y navegación

Una de las cosas más importantes que debemos tener en cuenta a la hora de realizar una aplicación móvil, es la usabilidad de la misma. Por ello, tener una buena estrucutura y navegación entre las diferentes pantallas o vistas de nuestra aplicación es algo esencial.

Existen varias formas de estrucutrar y/o navegar entre las diferentes vistas y cada una de ellas se utiliza para una casuística. Aunque también se suelen combinar entre las mismas.

Un proyecto con un mínimo de complejidad suele tener varias pantallas. Algunas relacionadas entre si, y otras que no. Vamos a explicar las formas más utilizadas para realizar correctamente la transición entre estas.

Side menu

Se utiliza cuando tenemos varias vistas que no tienen relación entre sí, como por ejemplo, secciones de la aplicación. Es un menú lateral que tiene los accesos a las diferentes secciones de la app. Cuando arranca la aplicación lo normal es que este visualizando el primer item del side menú. También un item del menú puede ser una acción como por ejemplo cerrar sesión de la app si tuviera un login.

Como podemos ver en la imagen superior, se despliega un menú lateral izquierdo en el que podríamos que podríamos utilizar para tener tres items: una sección de cajeros, otro de oficinas y un contacto si fuera una básica aplicación de un banco.

Vamos a ver un ejemplo de implementación:

<ion-side-menus>

  <!-- Center content -->
  <ion-side-menu-content>
    <ui-view name="content"></ui-view>
  </ion-side-menu-content>

  <!-- Left menu -->
  <ion-side-menu side="left">

        <a nav-clear menu-close href="#/cajeros" class="item">
            Cajeros
        </a>
        <a nav-clear menu-close href="#/oficinas" class="item">
            Oficinas
        </a>
        <a nav-clear menu-close href="#/contacto" class="item">
            Contacto
        </a>

  </ion-side-menu>
</ion-side-menus>

Como podemos ver el html se separa en dos partes para el <side-menu>. La primera es <ion-side-menu-content> donde estará el contenido a visualizar según el item marcado del menú. Cada ítem del menú corresponderá con un estado de nuestra configuración del $stateProvider.

Por otra parte tenemos la directiva <ion-side-menu>, donde encontramos la lista de opciones del nuestro menú. En este caso se abrirá hacia la izquierda ya que tiene puesto el parámetro side="left". Como vemos el menú esta formado por tres <a>con su href. Además, se incluyen las etiquetas nav-clearque sirve para borrar el historial de navegación cuando cambias de sección y menu-close que pliega el menú al cambiar de vista.

Además, en nuestro controlador, donde tengamos el botón para abrir el side-menu, necesitaremos esta función para poder abrirlo por ejemplo con un ng-click('toogleLeft()').

$scope.toggleLeft = function() {
    $ionicSideMenuDelegate.toggleLeft();
 };

Tabs

Muy similar al <side-menu>, en cambio, este visualiza las diferentes secciones en la parte inferior de la aplicación ocupando espacio de la interfaz. Además, este no debe tener acciones, ya que el usuario espera un cambio de vista.

Ejemplo de código con los tres items anteriores y con icono.

<ion-tabs class="tabs-positive tabs-icon-only">

  <ion-tab title="Cajeros" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline">
    <!-- Tab 1 content -->
  </ion-tab>

  <ion-tab title="Oficinas" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline">
    <!-- Tab 2 content -->
  </ion-tab>

  <ion-tab title="Contacto" icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline">
    <!-- Tab 3 content -->
  </ion-tab>

</ion-tabs>

Como podemos observar, un <ion-tabs>, contiene varios <ion-tab>, en el que cada uno tiene su propio contenido. Dentro de cada <ion-tab> debería de haber una <ion-view>.

En la directiva ion-tab, sólo hemos utilizado dos parámetros, pero tiene algunos más.

Más información sobre la directiva ion-tab

Navegación horizontal

La gran mayoría de aplicaciones utilizan este tipo de navegación, y su correcto uso es cuando vamos a cambiar de una vista a otra que tiene relación con la actual. Normalmente es para obtener más información.

Un ejemplo claro, es si estamos en una vista que contiene un listado por ejemplo de cajeros, y al tocar en un item de la lista, vamos al detalle, es decir, otra vista con mayor información sobre este cajero.

Para poder realizar esta navegación horizontal entre dos <ion-view> diferentes necesitamos explicar una nueva directiva, llamada <ion-nav-view>. ¿Para qué sirve?.

Como su nombre indica, es un "navegador de vistas", el cual lleva el control de la navegación de las vistas hijas que contiene, de modo que cuando navegamos horizontalmente hacia adelante, las guarda en memoria, y luego cuando volvemos hacia atrás, sabe a que vista tiene que volver, que tiene cacheada previamente.

Ejemplo básico:

  <ion-nav-bar class="bar-positive">
  </ion-nav-bar>

  <ion-nav-view>
    <ion-view>
      <ion-content>Hello!</ion-content>
    </ion-view>
  </ion-nav-view>

Aquí podemos ver un ejemplo de la estrucutra que deberíamos tener para poder realizar este tipo de navegación. A partir de aquí, si cambiamos la <ion-view>por otra, automamáticamente se hará una navegación horizontal animada. Además, hemos añadido en el ejemplo una <ion-nav-bar> (barra de navegación superior).

Para integrar el cambio de vista y que se haga correctamente, debemos añadir un name al ion-nav-view, que luego desde el $stateProvider rellenaremos según el estado.

$stateProvider

    .state("app", {
      abstract: true,
      url:'',
      templateUrl:'app.html',
    })
    .state("app.cajeros", {
      url : '/cajeros',
      views:{
        body:{
          templateUrl: 'vistaCajeros.html',
          controller: 'cajerosController'
        }
      }
    })
    .state("app.detail", {
      url : '/detail',
      views:{
        body:{
          templateUrl: 'detail.html',
          controller: 'detailController'
        }
      }
    });

app.html

<ion-nav-view name="body" class="slide-left-right">
</ion-nav-view>

vistaCajeros.html

<ion-view>
    <ion-content class="has-header">
        <button ng-click="go('app.detail', {})">Go to detail</button>
    </ion-content>
</ion-view>

detail.html

<ion-view>
    <ion-content class="has-header">
       <p> detail view </p>
    </ion-content>
</ion-view>

cajerosController.js

  $scope.go = function(state,params){$state.go(state, params); }

Modales

Las vistas o transiciones modales se utilizan la mayoría de veces cuando la pantalla a mostrar no tiene relación con la existente, es decir, que no es por ejemplo, el detalle con más información sobre un elemento de una lista.

Las modales se suelen utilizar por ejemplo cuando se trata de una vista para seleccionar una provicina de un listado, un login, información o explicación sobre alguna acción.

La transición básica a esta vista que suele estar por defecto es slide-in-up, es la animación que muestra la pantalla saliendo desde la parte inferior del dispositivo. También existen otras como fade-in, que lo que hace es mostrar la vista con una transición que anima la transparencia de la pantalla de 0 a 1.

Vamos a ver un ejemplo.

Lo primero que debemos hacer es en nuestro controlador que abrirá la vista modal, injectar $ionicModal. Después cargar y la vista y insertar los métodos para abrir y cerrar la modal. Código ejemplo.

controlador.js

 $ionicModal.fromTemplateUrl('modal.html', {
    scope: $scope,
    animation: 'slide-in-up'
  }).then(function(modal) {
    $scope.modal = modal;
  });

  $scope.openModal = function() {
    $scope.modal.show();
  };

  $scope.closeModal = function() {
    $scope.modal.hide();
  };

modal.html

  <ion-modal-view>
    <ion-header-bar>
      <h1 class="title">My Modal title</h1>
    </ion-header-bar>
    <ion-content>
      Hello!
    </ion-content>
  </ion-modal-view>

Cuando llamemos al método openModal la modal se mostrará.