Press "Enter" to skip to content

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

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.

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.

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.

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á

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.

 

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.

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

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í:

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

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?

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?

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.

Prompt

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

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.

 

Simple verdad?

Indicator

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

Y para ocultarlo

 

#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.

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!