dsi-p6-win311-alu0100833010

Práctica 6. VueJS.

Descripción de la Práctica dsi-p6-win311.

¿Qué es VueJS?

VueJS es un framework progresivo para construir interfaces de usuario. A diferencia de otros frameworks monolíticos, Vue está diseñado desde cero para ser utilizado incrementalmente. La librería central está enfocada solo en la capa de visualización, y es fácil de utilizar e integrar con otras librerías o proyectos existentes. Por otro lado, Vue también es perfectamente capaz de impulsar sofisticadas Single-Page Applications cuando se utiliza en combinación con herramientas modernas y librerías de apoyo.

• Vue-CLI:

Vue-CLI (interfaz de línea de comandos de Vue) es una herramienta creada por VueJS que facilita el rápido desarrollo de las aplicaciones de Vue. Nos permite comenzar un proyecto de inmediato sin tener que preocuparnos de diferentes herramientas de compilación.

• Objetivo:

En esta práctica, vamos a utilizar VueJS y su sistema de componentes para crear una imitación visual del sistema de ventanas del entorno gráfico de Windows 3.11.

Comenzando

1. Crea un proyecto con VueJS.

Para ello comenzamos creando la estructura del proyecto.

Pasos para crear el proyecto.

• Instalación de Vue-CLI

  // Instalamos vue en nuestro sistema
  npm install -g @vue-cli

  Comprobamos que se ha instalado correctamente:

  vue --version

• VueJS

  Creamos el repo usando el comando vue:

  vue create dsi-p6-win311-alu0100833010

  Nos situamos en el repo:

  cd dsi-p6-win311-alu0100833010

Automáticamente se nos crea una estructura del proyecto:

A diferencia de Parcel, para correr el servidor ejecutamos el comando:

npm run serve

Inicialmente, VueJS nos muestra una pantalla de bienvenida.

• Producción

  npm run build

• Linters

  npm run lint

See Configuration Reference.

2. Código HTML.

La estrucutura de index.html es la siguiente:

Por defecto, VueJS nos crea un archivo index.html muy sencillo que sirve como plantilla. VueJS añade a este archivo los elementos que necesita que están dentro de la parte de Vue.

Debemos tener en cuenta el <div id="app"></div>, ya que es el contenedor que va a recibir toda la información proveniente de los componentes de Vue. Es donde se monta toda la aplicación.

3. Código Javascript.

Utilizando VueJS, creamos los componentes Win311Window y Win311Icon:

• main.js:

  

Sería equivalente al index.js que hemos utilizado en las prácticas anteriores. Contiene el núcleo de la parte de VueJS. En este archivo se importa la librería Vue y el fichero App.vue que corresponde con el componente principal de la aplicación.

new Vue({
  render: h => h(App)
}).$mount('#app')

Se crea una instancia de Vue que es la que utilizará la aplicación y le indica donde ha de montarla, en este caso, en el elemento HTML con el mismo nombre que vimos en index.html.

4. Componentes.

Una de las características más importantes de Vue es el trabajo con componentes. Un componente de Vue es un elemento que encapsula código reutilizable. Dentro de un componente podemos encontrar etiquetas HTML, estilos de CSS y código Javascript.

Antes de ver el código de la práctica, un componente simple de Vue posee 3 secciones: HTML, CSS y Javascript:

<template>
  <h1 class="text"> Plantilla de Vue </h1>
</template>

<script>
</script>

<style>
</style>

• App.vue:

App.vue es el componente principal de toda la aplicación. Como mencionamos antes, la estructura del archivo está dividida en <template></template>, <script></script> y <style></style>.

En <template></template> se encuentra el código HTML de la página. Solo debe haber un único elemento hijo, en este caso, <div id="app"></div>. Dentro de él, encontramos las etiquetas correspondientes con el resto de componentes de la aplicación, <win311-icon> y <win311-window>, en el que a ambos se les indica una prop que hace referencia a windows.json, que es un json que lo que hace es especificar que título y que iconos va a tener cada ventana.

Por otro lado, en <script></script>, damos nombre al componente principal e indicamos los componentes locales que tenemos.

Dentro <style></style>, se encuentra el código CSS para darle estilo a toda la página.

• Win311Window.vue:

Contiene la estructura de la ventana que vamos a crear.

En template, tal y como comentamos antes, solo hay un único elemento hijo, window. En él, seccionamos mediante el uso de divs la estructura de nuestra ventana.

• • header: Añadimos el guión, el título de la ventana y la flecha.
• • container: Añadimos la barra de navegación y los iconos de la ventana. En VueJS podemos crear componentes más complejos que nos permiten renderizar variables, iterar e incluso realizar condicionales. Por tanto, hacemos uso de dicha funcionalidad en la etiqueta <win311-icon> para generar los iconos y asignar dicha "zona" para ellos.
• • footer: Añadimos el texto.

En script indicamos el componente local Win311Icon. También, definimos las props y data que contiene las variables.

Y en style definimos el estilo para el componente. Debería haber hecho uso de la propiedad scoped para asegurar que dichos estilos CSS se apliquen únicamente sobre el componente actual.

• Win311Icon.vue:

Componente donde se generan los iconos.

A través del div que contiene a la clase icon, llamamos a los métodos bg_blue al hacer click y alert al hacer doble click. En <img>, mostramos las imágenes de los iconos que se encuentran en /assets/icons/nombre-icono.png y añadimos el nombre y el color de fondo del mismo.

Declaramos las props y en data declaramos las variables, exactamente igual que en el componente Win311Window. Creamos las funciones bg_blue() y alert().

• • bg_blue: Cuando el usuario interactúe con el icono y haga click sobre el, ponemos el fondo del nombre del icono en azul. Con la variable aux controlamos el número de clicks del usuario.
• • alert: Cuando el usuario haga doble click sobre el icono, lanza una alerta con "Open " + nombre del icono.

En este componente no definimos ningún estilo.

5. Publicación en gh-pages.

Para publicar nuestro proyecto en gh-pages, como ya no estamos haciendo uso de Parcel, cambia la forma. Por tanto, para hacerlo con Vue-cli creamos el script deploy.sh:

y vue.config. js:

Al ejecutar deploy.sh, ya quedaría nuestro proyecto publicado en gh-pages:

Enlace: https://ull-esit-dsi-1920.github.io/dsi-p6-win311-alu0100833010/

6. Retos.

Reto 1.

Método:

bg_blue: function(event) {
            if (this.aux === 0) {
                this.aux++;
                this.color = "blue";
            } else {
                this.color = "none";
                this.aux = 0;
            }

Llamada:

<div class="icon" @click="bg_blue()" @dblclick="alert()">

Reto 3.

Método:

alert: function(event) {
            alert("Open " + this.name);
        }

Llamada:

<div class="icon" @click="bg_blue()" @dblclick="alert()">