Widgets

Widget, de uma forma resumida, é um componente que simplifica o acesso e funcionalidades de um programa ou serviço. Esse método está pressente em muitos aparelhos como computadores, celulares, tablets e outros. Eles geralmente contêm janelas, botões, ícones, menus, barras de rolagem e outras funcionalidades. Esse componente com interface gráfica (GUI) permite adicionar ao sistema operacional uma tarefa específica. Para facilitar a visualização desse recurso como os widgets de previsão do tempo, relógio, atualização de redes sociais, emails, dentre outros.

Além disso, os widgets dá ao usuário a possibilidade de personalizar sua área de trabalho, escolhendo quais serão exibidas, definindo seu tamanho e posição na tela. Assim, otimiza melhor o sistema, executando apenas os serviços uteis para o usuário de forma simplificada, além de economizar tempo e execução.

Como pode perceber, o termo widgets não é novo e sempre esteve pressente no nosso dia a dia. A ideia de trazer essa estratégia para o nosso sistema é simples, criar um dashboard otimizado e personalizável, deixando uma aparência ideal para o usuário, mas é claro, além disso, economizar tempo e execução.

A forma de configurar um Widget não é tão simples como parece. Entretanto, é preciso bastante atenção no tutorial nessa documentação, seguindo corretamente suas instruções.

Criando Widget

Na pasta Widgets, temos a seguinte organização de arquivos:

src ├─ Widgets │ ├─ ... Demais pastas de todos os widgets existentes │ ├─ defaultLayout.js │ ├─ Widget.js │ └─ index.js

Antes de qualquer coisa, é preciso criar uma pasta específica para o widget, usando um nome genérico e em camelcase, de preferência, o mesmo nome da sua subclasse. Próxima etapa é criar o arquivo interno index.js e construir a subclasse instanciada e exporta-la. Em seguida, importar e exportar o widget no index raiz da pasta Widgets. Veríamos algo como:

src/Widgets/WidgetExample/index.js

import { Widget } from "Widgets/Widget";

export default class WidgetExample extends Widget {
    constructor() {
        super();
    }
    
    render(){
        return <div></div>
    }
}

src/Widgets/index.js

//...

import WidgetExample from "./WidgetExample";

export {
    //...

    WidgetExample,
};

//...

Para exibir na tela, mesmo para teste, é preciso configurar o widget de exibição no layout. O arquivo defaultLayout.js é especialmente responsável para esse tipo de tarefa, nele definimos as configurações de layout padrão de exibição. Por exemplo:

src/Widgets/defaultLayout.js

export default [
    //...
    { 
        w: 12, h:  5,         //largura e altura predefinido
        x:  0, y: 11,         //posição na tela
        name: "WidgetExample" //nome da pasta/subclasse do widget específico
    },
];

Um widget (separado por pastas individualmente) é uma subclasse instanciada da superclasse Widget, herdando as seguintes propriedades:

Propriedades Widget

title

title: string

Uma propriedade que defina o titulo do widget.

icon

icon: string

Uma propriedade que defina o ícone do widget, recebendo como valor, um ícone importada de @mdi/js.

dataGrid

dataGrid: object

Uma propriedade que defina algumas configurações como o tamanho máximo, mínimo e posição na tela do widget predefinido.

Propriedades	Tipo	Opcional	Descrição
x	number		Número da coluna em que o widget será posicionado entre 0 e 12
y	number		Número da linha em que o widget será posicionado entre 0 e infinito
w	number		Número de colunas em que o widget será ocupado entre 0 e 12
h	number		Número de linhas em que o widget será ocupado entre 0 e infinito
minW	number		Número mínimo de colunas em que o widget poderá ser ocupado entre 0 e 12
minH	number		Número mínimo de linhas em que o widget poderá ser ocupado entre 0 e infinito
maxW	number		Número máximo de colunas em que o widget poderá ser ocupado entre 0 e 12
maxH	number		Número máximo de linhas em que o widget poderá ser ocupado entre 0 e infinito
static	boolean		Defina como true se caso o widget não poderá ser editado sob hipótese alguma, se mantendo como estático
isDraggable	boolean		Defina como false se caso o widget não poderá ser arrastado sob hipótese alguma, mantendo sua posição fixa. Substitui static
isResizable	boolean		Defina como false se caso o tamanho do widget não poderá ser modificado sob hipótese alguma, mantendo sua tamanho fixo. Substitui static
isBounded	boolean		Defina como true se caso o widget for arrastável, será movido apenas dentro da grade

permission

permission: Array

Uma propriedade que defina quais usuários poderão ter acesso ao widget. O usuário que não possuir a tal permissão predefinida, o widget não será exibida ou mostrará o componente padrão para todos os usuários sem permissão.

Exemplo/Sintaxe:

import { Widget } from "Widgets/Widget";
import { mdiStar } from '@mdi/js';

export default class WidgetExample extends Widget {
    constructor() {
        super();

        this.title = "Widget Example";
        this.icon = mdiStar;
        this.dataGrid = {
            x:    0, y:     0, //posição na tela
            w:   12, h:     8, //largura e altura predefinido
            minW: 6, maxW: 12, //largura mínima e máxima
            minH: 4, maxH: 12  //altura mínima e máxima
        };
        this.permission = ["root"];
    }
    
    //...
}