Mes: abril 2023

Esta sección detalla la instalación y uso de un framework de Componentes gráficos llamado Vuetify aplicado en VUE JS el cual nos permitirá diseñar nuestras aplicaciones Web de forma más ágil teniendo presente componentes prediseñados.

Para aprender a programar en Java sigue este link

En la página principal de vuetify se encuenta toda la documentación de todos los componentes y las diferentes propiedades que se requieren para hacer diseños.

Página principal de Vuetify

1. Instalación y configuración

Instalar Vuetify dentro de nuestro proyecto VUE JS es bastante sencillo, solamente debes incluirlo aprovechando que ya tenemos el comando de la consola o CLI de VUE, para hacerlo utiliza el siguiente comando.

vue add vuetify

Una vez instalado vuetify se reemplazará el archivo App.vue y HelloWorld.vue el cual contendrá ahora archivos que estan basados en vuetify. Adicionalmente cuando se instaló vuetify se creó un archivo con la configuración donde se pueden encontrar algunas propiedades generales y los nombres de los colores que se utilizarán en la aplicación. El siguiente código muestra un extracto de este archivo llamado vuetify.js el cual está ubicado en la carpeta plugins.

import Vue from 'vue';
import Vuetify from 'vuetify/lib/framework';

Vue.use(Vuetify);

export default new Vuetify({
  theme: {
      options: {
        customProperties: true,
      },
    themes: {
      light: {
        primary: '#007BFF',
        secondary: '#424242',
        accent: '#82B1FF',
        error: '#FF5252',
        info: '#2196F3',
        success: '#4CAF50',
        warning: '#FFC107'
      },
    },
  },
  icons: {
    iconfont: 'md',
  },
});

En el caso de los iconos podemos utilizar diferentes fuentes como md para Material Design o Font Awesome. En la web de vuetify se encuentran los detalles para instalar diferentes fuentes de iconos.

Instalar fuentes de iconos

2. Primeros pasos con Vuetify

En Vuetify tenemos muchos componentes y diferentes formas de aplicar estilos y maquetar nuestra aplicación en el fronted, para iniciar es importante saber que todos los componentes de vuetify comienzan con <v->. En el siguiente código se hará uso de los v-toolbar, v-toolbar-title y v-content para establecer una maquetación inicial básica de nuestra aplicación.

<template>
  <v-app>
    <v-app-bar color="primary" dark app>
        <span>{{ titulo }}</span>
    </v-app-bar>

    <v-content>
      <home />
    </v-content>
  </v-app>
</template>

<script>
import Home from '@/views/Home.vue'

export default {
  name: 'App',
  component: { Home },
  data: () => ({
    titulo: "Demo App"
  }),
};
</script>

Aquí es importante observar que el uso de la etiqueta dark permite poner el color de texto en blanco para que resalte según el color primario que estemos utilizando.

3. Maquetación

En vuetify se recomiendo seguir la siguiente jerarquia de contendores:

• v-container: sirve para hacer la distribución de la pantalla en general.
• v-layout: sirve para hacer alineaciones tanto de forma horizontal como vertical.
• v-flex: que permite seleccionar las partes de la pantalla a utilizar.

En el siguiente ejemplo se muestra el uso de estos contenedores para la maquetación. Los atributos fluid y fill-height permiten que el contenedor se centre horizontalmente y que ocupe todo el alto de la página respectivamente, de forma similar aplican las opciones de layout justify-center align-center.

En cuanto a las opciones de flex, por defecto divide la pantalla en 12 casillas y podemos usar particiones entre 1 y 12 para determinar qué espacio ocupará nuestro componente. Adicional a lo anterior, existen los breakpoint que son tamaños preconfigurados: xs, sm, md, lg, xl que corresponden a tamaños de pantallas.

<template>
  <v-app>
    <v-app-bar color="primary" dark app>
        <span>{{ titulo }}</span>
    </v-app-bar>
    
    <v-main>
      <v-container>
        <create-user></create-user>
      </v-container>
    </v-main>
  </v-app>
</template>

<script>
  import CreateUser from './components/CreateUser.vue'
  
  export default {
    name: 'App',
    components: { CreateUser },
    data: () => ({
      titulo: "Demo App"
    }),
  };
</script>

<template>
  <v-layout
    justify-center
    align-center
  >
    <v-flex xs4>
      <v-card class="elevation-12">
        <v-toolbar color="primary" dark card>
          <v-toolbar-title>
            Sign Up
          </v-toolbar-title>
        </v-toolbar>
        <v-card-text>
          <v-text-field label="mail"></v-text-field>
          <v-text-field
            label="password"
            type="password"
          ></v-text-field>
        </v-card-text>
      </v-card>
    </v-flex>
  </v-layout>
</template>

La figura 1 muestra este ejemplo ejecutandose.

4. Helpers

En vuetify existen diferentes ayudantes de clases que permiten realizar tareas comunes como especificar los márgenes o los padding a través de clases. Por ejemplo, si se desea hacer un margin en todos los bordes de 2 pixeles se puede usar la clase ma-2. En los siguiente link se proporciona un acceso a los helpers más comunes.

Espaciado de vuetify

Elevation

Tamaños de componentes y responsive

Fuentes para incorporar en nuestra aplicación

5. Propiedades útiles

Algunas propiedades (props) útiles son las siguientes:

• column: aplicable a un layout indica que el layout ocupa una columna, por defecto los layout tienen la propiedad row establecida a true. Esto nos sirve para ubicar el contenido completo de un layout de forma que ocupe todo el ancho de la página.
• wrap: aplicada a un layout permite que los componentes dentro del layout se acomoden en columnas cuando el contenido ya no quepa en una sola fila.
• text-xs-center: alinea el texto al centro para la resolución más pequeña que sería la pantalla de un celular.
• text-shadow: aplicable a los estilos CSS permite especificar sombras que dan estilo a los textos.

6. Artículos de Interés

Glosario de Términos Informáticos

Operadores en Java

Hola Mundo en VUE