Framework7 – Tutorial Español – Parte 4

En anteriores partes de este tutorial hemos visto como es la estructura, añadir menús laterales, páginas y algunos componentes internos de Framework7, en esta ocasión vamos a ver como integrar otros componentes, por ejemplo Cards, Alertas y algunas cosas más.

Si has llegado aquí directamente y no has visto los anteriores te los dejo aquí

Cards

Para integrar este componente veremos la siguiente estructura

<div class="card">
    <div class="card-header">Header</div>
    <div class="card-content">
        <div class="card-content-inner">Card content</div>
    </div>
    <div class="card-footer">Footer</div>
</div>

Es una estructura muy simple pero da mucho juego, esta es la estructura «limpia» o sin mucho que mostrar.

Pero veremos cómo puedes añadir elementos que mejorarán mucho la apariencia.

 

Hay muchas opciones de para las cards, ya que se separan en 3 contenedores, que puedes poner o quitar como más te gusten, en los ejemplos de la web de Framework7 vemos varios, aquí mostraré algunos de ellos, los que parecen más interesantes.

Card con imagenes

Las cards con imágenes pueden ser una buena idea para mostrar publicaciones con foto, se integra perfectamente en el contenido y ya que las provee Framework7, eso que nos ahorramos de aplicar estilos.

Como vemos tiene un estilo limpio y claro, en ocasiones he tenido que agregar utilizando este tipo de card una barra inferior en el titulo, ya que puede que la imagen sea del mismo color que las letras, añadiendo un pequeño contenedor con un fondo semi trasparente eliminamos el problema.

El código para esta card se parece mucho al anterior pero con un pequeño cambio.

<div class="card demo-card-header-pic">
  <div style="background-image:url(...)" valign="bottom" class="card-header color-white no-border">Journey To Mountains</div>
  <div class="card-content">
    <div class="card-content-inner">
      <p class="color-gray">Posted on January 21, 2015</p>
      <p>Quisque eget vestibulum nulla...</p>
    </div>
  </div>
  <div class="card-footer">
    <a href="#" class="link">Like</a>
    <a href="#" class="link">Read more</a>
  </div>
</div>

Como ves se agrega un background-image y algunas clases, teniendo en cuenta el primer contenedor agrega la clase demo-card-header-pic que no tiene ningún estilo en Framework7, por lo que podemos poner la clase que quieras, siempre y cuando agregues este estilo.

.demo-card-header-pic .card-header {
    height: 40vw;
    background-size: cover;
    background-position: center;
  }

Este estilo solo ajusta la imagen de fondo.

Esta seguro que la conoces, es un estilo a Facebook, y está bastante conseguido, si tienes pensado hacer una red social, ya sabes :).

Al igual que la anterior cambia un poco la estructura, agrega un poco más de contenido ya que muestra la fecha, y demás, aunque claro ahí puedes mostrar lo que quieras.

Veamos como funciona.

<div class="card facebook-card">
  <div class="card-header no-border">
    <div class="facebook-avatar"><img src="..." width="34" height="34"></div>
    <div class="facebook-name">John Doe</div>
    <div class="facebook-date">Monday at 3:47 PM</div>
  </div>
  <div class="card-content"><img src="..." width="100%"></div>
  <div class="card-footer no-border">
    <a href="#" class="link">Like</a>
    <a href="#" class="link">Comment</a>
    <a href="#" class="link">Share</a>
  </div>
</div>

Simple y limpio, en esta ocasión agregamos una url al src de la imagen para la foto de perfil, nombre, fecha y en caso de querer mostrar una imagen en la «publicación» pues también.

¿El estilo?

Aquí está

.facebook-card .card-header {
    display: block;
    padding: 10px;
  }
  .facebook-card .facebook-avatar {
    float: left;
  }
  .facebook-card .facebook-name {
    margin-left: 44px;
    font-size: 14px;
    font-weight: 500;
  }
  .facebook-card .facebook-date {
    margin-left: 44px;
    font-size: 13px;
    color: #8e8e93;
  }
  .facebook-card .card-footer {
    background: #fafafa;
  }
  .facebook-card .card-footer a {
    color: #81848b;
    font-weight: 500;
  }
  .facebook-card .card-content img {
    display: block;
  }
  .facebook-card .card-content-inner {
    padding: 15px 10px;
  }

No hemos terminado aún!

Aquí os dejo otro estilo para las cards, y este es el ultimo que muestro, en la web de Framework7 quedan más.

En este caso se muestran discos de artistas, como siempre puedes dejar volar la imaginación, esta se complica un poco más, ya que hay que controlar más HTML.

Pero tranquil@ no es imposible, solo presta atención a los cierres de cada tag.

 

<div class="card">
  <div class="card-header">New Releases:</div>
 
  <div class="card-content">
    <div class="list-block media-list">
      <ul>
        <li class="item-content">
          <div class="item-media">
            <img src="..." width="44">
          </div>
          <div class="item-inner">
            <div class="item-title-row">
              <div class="item-title">Yellow Submarine</div>
            </div>
            <div class="item-subtitle">Beatles</div>
          </div>
        </li>
        <!-- Aquí empezaría otro <li> -->
      </ul>
    </div>
  </div>
 
  <div class="card-footer">
    <span>January 20, 2015</span>
    <span>5 comments</span>
  </div>
</div>

Bueno más o menos se puede entender, en cada <li> es un disco, en el código no está todo porque se haría muy pesado y liar más aún.

Donde pone «Aquí empezaría otro <li>» adivinad que iría… Exacto.

<li class="item-content">
          <div class="item-media">
            <img src="..." width="44">
          </div>
          <div class="item-inner">
            <div class="item-title-row">
              <div class="item-title">Don't Stop Me Now</div>
            </div>
            <div class="item-subtitle">Queen</div>
          </div>
        </li>

Y así uno y otro.

Alertas

Dependiendo del sistema operativo donde se ejecute sabemos que si utilizamos una alerta por defecto del sistema no se va a ver igual, por ello Framework7 integra alertas HTML, por lo que nos mejora mucho el diseño, ya que podremos agregar HTML, imágenes, botones y demás dentro del contenido de la alerta.

Como funcionan?

Una alerta normal se muestra así, también depende de si utilizamos Material o no, este es de iOS.
Su código es el siguiente

myApp.alert('Here goes alert text');

Muy simple verdad? Pero vamos a ver de que está compuesta:

  • myApp – Esta variable la encontramos en la primera parte de este tutorial, en el archivo index.js es la variable que construye Framework7.
  • alert – Al igual que Javascript, se ha mantenido el mismo nombre
  • Texto – Es el texto que se mostrará

Pero, la alerta en la imagen tiene un título, ese es el título por defecto de Framework7, que claro está no podía ser otro, el titulo por defecto podemos modificar agregando a la variable myApp dentro del objeto Framework7 lo siguiente, al igual que en el ejemplo de la parte uno, material : true.

En este caso agregamos una coma a true y escribimos esto modalTitle: «Mi nueva App» quedando así:

myApp = new Framework7({
    material: true, //Activamos Material
    modalTitle: "Mi nueva App"
});

Ahora todas las alertas que se muestren se verá ese nombre, además también podemos cambiar los títulos de los botones que aparecen debajo de la alerta, siguiendo con el mismo esquema anterior agregamos los parametros modalButtonOkmodalButtonCancel para cambiar estos títulos.

También podemos modificar el título directamente en la función de la alerta

myApp.alert('Here goes alert text', 'Custom Title!');

Como ves ahora muestra el titulo del segundo parámetro de la función.

Es fácil, pero esto no es todo, no solo de alertas se alimenta una app móvil.

Pero antes, y si necesitas una función de regreso cuando hacen clic en OK?

myApp.alert('Here goes alert text', 'Custom Title!', function () {
    myApp.alert('Button clicked!')
});

Usando el ejemplo anterior, al pulsar en OK lanzará otra alerta, ahí podemos ejecutar otras funciones o cambiar algo de nuestra app.

Ya si, pasamos a las ventanas de confirmación.

Ventanas de Confirmación (Confirm)

El funcionamiento es el mismo que las alertas, su estructura es idéntica, solo cambia claro está la función a la que llamas que en este caso es myApp.confirm(….

Como la usamos?

myApp.confirm('Are you sure?', 
      function () {
        myApp.alert('You clicked Ok button');
      },
      function () {
        myApp.alert('You clicked Cancel button');
      }
);

Esta función nos preguntaría «Are you sure?» y nos mostraría dos opciones Ok o Cancel, dependiendo de la elección nos mostraría otra alerta con lo que hemos elegido. La primera función hace referencia al Ok y el segundo al Cancel.

También podemos agregar un título como en las alertas, igual.

myApp.confirm('Are you sure?', 'Custom Title', 
      function () {
        myApp.alert('You clicked Ok button');
      },
      function () {
        myApp.alert('You clicked Cancel button');
      }
);

Prompt

myApp.prompt('What is your name?', 
      function (value) {
        myApp.alert('Your name is "' + value + '". You clicked Ok button');
      },
      function (value) {
        myApp.alert('Your name is "' + value + '". You clicked Cancel button');
      }
);

No me voy a enrollar mucho porque funcionan igual, solo que esta vez en las funciones reciben un parámetro «value» que es el que el usuario ingrese en el campo que le aparece en la alerta.

Bonus!

Venga tienes un bonus, también mostraré como usar Preloaders o Indicator, esto nos puede beneficiar a la hora de hacer una llamada a un servidor y mientras esperamos respuesta, mostrar un aviso de que la app está haciendo algo.

Su uso es simple

Preloader

myApp.showPreloader("Conectando...")

Agregamos un título por ejemplo «Conectando» para decir al usuario que la app está conectando o iniciando sesión o algo, cuando el proceso termine ocultamos el preloader con.

 

myApp.hidePreloader();

Simple verdad?

Indicator

Si no queremos tanto, podemos mostrar un simple indicador que muestre que la app está cargando, con el siguiente código.

myApp.showIndicator();

Y para ocultarlo

myApp.hideIndicator();

 

#Actualización comentario de Arthur RC

Me pregunta, sobre el evento del back button físico del dispositivo, como controlarlo, pues bien, se agregaría lo siguiente.

 document.addEventListener("backbutton", function(e){
            e.preventDefault();

            /* Si los menús laterales están abiertos */
            if ($$('.panel.active').length > 0) {
                myApp.closePanel();
                return;
            }
           
            /* Si hay un historial  */
            var view = myApp.getCurrentView();
            console.log(view);
            if (!view) return;
            if (view.history.length > 1) {
                view.router.back();
                return;
            }
            /* Si no se cumple nada de lo anterior, Cerramos App */
            myApp.confirm('¿Quiere salir de la aplicación?', 'Atención!', function () {
                navigator.app.exitApp();
            });
}, false);

Eso es todo, si al pulsar, los paneles laterales (menús) están abiertos, los cierra, si no lo están hace un back en el historial, si no hay páginas para volver hacia atrás, le pregunta al usuario si quiere cerrar la aplicación.

Espero que con esto Arthur, te haya quedado claro 🙂

##

Si quieres más información os dejo la referencia a todo que hemos visto en el contenido del post.

No olvides compartir en tus redes sociales! 🙂

Un saludo, hasta la próxima y como siempre Happy Code!

Amante de todo lo que tenga que ver con internet, la programación mi pasión, crear nuevas formas y nuevos sistemas que den vida a nuevos proyectos que faciliten la vida a muchas personas,