Sou desenvolvedor iniciante em front-end. Agora estou estudando e treinando em uma empresa de TI em Minsk. Aprender o básico do web-ui ocorre com a biblioteca JS
Webix como
exemplo e quero compartilhar minha experiência modesta e salvá-la como um pequeno tutorial para esta interessante biblioteca da interface do usuário.
Terceira tarefa
Continuo desenvolvendo a funcionalidade do aplicativo criado usando a biblioteca Webix. Em artigos anteriores, descobri como
criar uma interface de aplicativo e como
interagir com o formulário . Neste artigo, considero as seguintes tarefas:
A operação dos widgets Lista e
Layout foi descrita em artigos anteriores.
Você pode baixar o
link de origem.
O aplicativo finalizado pode ser encontrado
aqui .
Etapa 1. Dividindo o projeto em módulos
Para evitar confusão no código, é mais confiável dividir o projeto em módulos. Para fazer isso, vou criar os seguintes arquivos e transferir o código do widget para eles:
- header.js - widget da barra de ferramentas;
- apart.js - Widget de lista ;
- table.js - widget Datatable;
- form.js - widget de formulário;
- footer.js - um elemento com o texto: "O software é ...".
Em novos arquivos, a descrição das configurações do widget ocorre em uma variável ...
const footer = { height: 30, template:"The software is provided by <a href='#'>webix.com</a>. All rights reserved (c)", css:"bottom-link" }
Os arquivos criados estão incluídos no arquivo index.html na seguinte ordem:
<body> <script src="functions.js"></script> <script src="users_module.js"></script> <script src="products_module.js"></script> <script src="data.js"></script> <script src="header.js"></script> <script src="table.js"></script> <script src="form.js"></script> <script src="aside.js"></script> <script src="footer.js"></script> <script src="script.js"></script> </body>
Os módulos resultantes são combinados em um arquivo script.js, que agora contém um código de inicialização de aplicativo simples e conciso.
webix.ui({ rows:[ header, { cols:[ aside, {view: "resizer"}, table, form ] }, footer ] });
Etapa 2. Abas e alternando entre elas
Nos casos em que não há espaço livre suficiente na página ou se você precisar separar tematicamente o conteúdo do aplicativo, é lógico usar guias.
A alternância entre guias é realizada pelo componente
Multiview . Este componente permite criar o número necessário de guias no aplicativo e exibe apenas uma em um determinado momento.
Criaremos uma visualização múltipla no arquivo apart.js:
const multi = { view: "multiview", cells:[ { id:"dashboard", cols:[table, form ] }, { id:"users", template:"Users" }, { id:"products", template:"Products" } ] }
A matriz de células contém o código para as guias. Cada guia precisa ser adicionada com um ID para que possa ser acessada e exibida. Agora, a Multiview contém três guias, a primeira das quais é movida, criada antes disso, a tabela e o formulário.
No arquivo script.js, substituo os widgets Tabela e Formulário pelo módulo Multi.
webix.ui({ rows:[ header, { cols:[ aside, {view: "resizer"}, multi ] }, footer ] });
O papel da alternância entre guias é desempenhado pelo widget
Lista . Eu preciso da guia correspondente para abrir clicando em seus elementos.
Por conveniência, definirei os elementos do widget
Lista com o mesmo ID que as guias de múltiplas visualizações.
const aside = { view: "list", id:"mylist", scroll:false, select:true, width:200, css:"list_color", data:[ {value:"Dashboard", id:"dashboard"}, {value:"Users", id:"users"}, {value:"Products", id:"products"} ], on:{ onAfterSelect:function(id){ $$(id).show(); } } }
Quando você clica em um elemento do widget
Lista ,
onAfterSelect é acionado, dentro do manipulador do qual obtemos o ID do elemento selecionado e mostramos a guia com o mesmo nome, acessando-o por id - eles, como você se lembra, são os mesmos.
Um exemplo:
Importante!
Ações de dados adicionais serão realizadas com o servidor local em execução.
Etapa 3. Guia "Painel" - configuração da tabela
Até esse momento, o projeto usava uma tabela cujos campos eram gerados automaticamente. No caso em que você deseja excluir uma coluna ou adicionar uma nova, as configurações da tabela são usadas. Para fazer isso, no widget
Datatable , a propriedade
autoConfig : true deve ser substituída pela matriz de
colunas pelas configurações de cada coluna.
const table = { view:"datatable", id:"film_list", scroll:"y", select:true, url:"data/data.js", hover:"myhover", columns:[ { id:"rank", header:"", width:50, css:"rank"}, { id:"title", header:"Film title", fillspace:true}, { id:"year", header:"Released", width:100}, { id:"votes", header:"Votes", width:100}, { id:"rating", header:"Rating", width:100} ] }
- O valor da propriedade id indica o campo do item de dados que será exibido nesta coluna;
- a propriedade do cabeçalho no elemento é o cabeçalho da coluna;
- todas as colunas estão definidas para uma largura fixa, mas a segunda usa a propriedade fillspace, que permite que a coluna de título ocupe todo o espaço livre.
As configurações CSS personalizadas são usadas na tabela: o foco é definido para as linhas e o plano de fundo é alterado na primeira coluna. Todas as configurações são predefinidas no arquivo style.css e você só precisa inserir o nome da classe.
Além disso, preciso de mais dados para a tabela, para carregá-los em data / data.js, apontando para ela usando a propriedade
url .
Resultado:
Etapa 4. Guia "Usuários" - desenhando uma lista e um diagrama
Na segunda guia, vou criar uma lista e um diagrama. Para fazer isso, no segundo elemento Multiview, indicarei o nome do módulo - "usuários".
const multi = { view: "multiview", cells:[ { id:"dashboard", cols:[table, form ] }, { id:"users", rows:[users] }, { id:"products", template:"Products" } ] }
Para os próprios widgets, criarei um novo arquivo
users_module.js .
List . Uma lista é entendida como um widget de
Lista ; anteriormente, ela era usada na criação do menu. As linhas da lista devem consistir em nomes de usuários e nomes de países.
Código do widget da lista:
const users = { rows:[ { view: "list", id:"user_list", select:true, url:"data/users.js", template:"#name# from #country#" }, { template:"Chart" } ] }
A matriz de linhas é usada para dividir o espaço de trabalho em duas partes. A segunda parte será usada para o gráfico.
Na propriedade do modelo, entre os # sinais, é especificado um campo cujo valor é obtido do elemento de dados carregado no arquivo users.js.
Resultado:
Gráfico . A biblioteca suporta tipos comuns de
gráficos : linha, círculo, radar, rosca, coluna etc. Todos eles são criados pelo widget de
gráfico . A aparência do gráfico define a propriedade
type .
Substituirei a configuração do
template:”Chart” pelo código do widget:
const users = { rows:[ { view: "list", id:"user_list", select:true, url:"data/users.js", template:"#name# from #country#" }, { view:"chart", type:"bar", value:"#age#", url:"data/users.js", xAxis:{ template:"#age#", title:"Age" } } ] }
type: "bar" configuração type: "bar" define o tipo de barra do gráfico;- o nome do campo é passado para o valor e é indicado necessariamente em `# ... #`. Esse é um recurso do widget Gráfico;
- a configuração xAxis determina quais informações serão exibidas abaixo do gráfico ao longo do eixo X;
- O modelo indica que, sob as linhas do gráfico, haverá dígitos de idade;
- title contém o nome do gráfico -
"Age" .
O resultado do desenho da lista e do gráfico:
Etapa 5. Guia "Produtos" - tabela em árvore
Para inicializar esse componente, criarei o arquivo
products_module.js e, no terceiro elemento do widget Multiview, indicarei o nome do módulo "produtos".
const multi = { view: "multiview", cells:[ { id:"dashboard", cols:[table, form ] }, { id:"users", rows:[users] }, { id:"products", rows:[products] } ] }
Para criar uma tabela em árvore, use o widget
Treetable . Uma das colunas do widget deve conter o modelo necessário -
{common.treetable ()} , caso contrário, obteremos uma tabela padrão em vez de uma
exibição em árvore. O modelo permite desenhar imediatamente elementos característicos:
- ícone ativo para recolher / expandir registros aninhados;
- ícones de arquivo / pasta;
- recuo dependendo do nível de entradas.
const products = { view:"treetable", scrollX:false, columns:[ { id:"id", header:"", width:50 }, { id:"value", header:"Title", fillspace:true, template:"{common.treetable()} #title#" }, { id:"price", header:"Price", width:200 } ], select:"row", url:"data/products.js" }
O componente treetable é preenchido com dados hierárquicos, que eu obterei do arquivo products.js.
Resultado:
O aplicativo resultante pode ser encontrado
aqui .
Generalização
Passo a passo, o aplicativo é complementado por novos recursos. Um estágio importante foi a separação do código em módulos. A separação ajudou a evitar confusão no código e a organizar uma interface de várias páginas. Foi interessante aprender novos widgets Webix na forma de diagramas e listas de tabelas editáveis livremente. Tudo também era simples, tudo também é harmonioso.