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.
Segunda tarefa
Na última
tarefa, criei uma página usando a biblioteca Webix. E agora eu preciso definir a seguinte lógica para interação do usuário com o formulário:
O widget principal com o qual o artigo trabalhará é o
formulário . Além disso, pode ser lido na
documentação .
Você pode baixar o
link de origem.
O aplicativo de demonstração resultante pode ser encontrado
aqui .
Etapa 1. Adicionando novos dados à tabela.
Para a conveniência de ler o código e dividir o projeto em blocos lógicos, vou criar o arquivo functions.js e indicar o caminho para ele no arquivo index.html. Nele, definirei as funções responsáveis pelo comportamento do aplicativo.
<body> <script src="data.js"></script> <script src="functions.js"></script> <script src="script.js"></script> </body>
No novo arquivo, eu crio a função
addItem , que adiciona novos dados à tabela:
const addItem = () =>{ var item_data = $$("film_form").getValues(); $$("film_list").add(item_data); }
Para acessar um elemento na biblioteca Webix, use
o método $$ , no qual o ID do elemento é passado. No código acima, o formulário é acessado usando a construção
$$("film_form") .
A função addItem funciona da seguinte maneira: Eu obtenho os dados atuais do formulário por meio do método getValues e os escrevo na variável item_data . Usando esses dados, crio um novo registro na planilha usando o método add .
Para chamar essa função clicando no widget
"button" com o valor
"Add new" , defino a propriedade
clique .
margin:10, cols:[ { view:"button", id:"btn_add", value:"Add new", css:"webix_primary", click:addItem}, { view:"button", id:"btn_clear", value:"Clear"} ]
Como resultado, os dados do formulário devem ser adicionados à tabela:
Etapa 2. Validação do formulário. Mensagem pop-up
Antes de adicionar novos dados, as informações dos campos de entrada devem ser verificadas (validadas). A validação é acionada
pelo método validate () , que chamarei dentro da função
addItem imediatamente antes de trabalhar com os dados. Também colocarei aqui o código para uma mensagem pop-up sobre uma validação bem-sucedida.
Uma mensagem simples no Webix é criada pela função
webix.message () , que
utiliza o texto da mensagem como parâmetro. Uma mensagem aparecerá no canto superior direito.
const addItem = () =>{ if($$("film_form").validate()){ var item_data = $$("film_form").getValues(); $$("film_list").add(item_data); webix.message("Validation is successful!"); } }
A função funciona assim. Dentro da condição If , acessamos o formulário e chamamos o método validate () . Se o teste for bem-sucedido, o método retornará true e o código será executado ainda mais. Após adicionar dados à tabela, uma função é chamada com a mensagem - "Validation is successful!" .
Mensagem pop-up:
Agora eu preciso criar um objeto de
regras no widget de
formulário . É necessário que a função
validate () verifique as informações de todos os campos do formulário para conformidade com os critérios especificados.
As condições para uma validação bem-sucedida serão as seguintes:
- O campo do título não deve estar vazio;
- O ano do campo não deve ser menor que 1970 e maior que o ano atual;
- o campo Classificação não deve ser zero;
- O campo Votos deve ser maior que 1 e menor que 1.000.000.
Em seguida, o código fonte do widget de
formulário com regras de validação será assim:
view:"form", id:"film_form", width: 350, elements:[ { type:"section", template:"EDIT FILMS"}, { view:"text", name:"title", label:"Title", invalidMessage:"Must be filled in"}, { view:"text", name:"year", label:"Year", invalidMessage:"Should be between 1970 and current" }, { view:"text", name:"rating", label:"Rating", invalidMessage:"Cannot be empty or 0" }, { view:"text", name:"votes", label:"Votes", invalidMessage:"Must be less than 100000" }, { margin:10, cols:[ { view:"button", id:"btn_add", value:"Add new", css:"webix_primary", click:addItem}, { view:"button", id:"btn_clear", value:"Clear", click:clearForm} ] }, {} ], rules:{ title: webix.rules.isNotEmpty, rating(value){ if(webix.rules.isNumber(value)){ return true; } }, votes(value){ return value < 1000000 && value >= 1; }, year(value){ return value>=1970 && value <= new Date().getFullYear(); } }
As propriedades do objeto de regras devem corresponder aos valores da propriedade
name: "…" dos elementos do formulário. As
regras predefinidas webix.rules.isNotEmpty e webix.rules.isNumber são definidas nas propriedades de título, classificação e votos; no ano, há uma função que define
as regras do usuário .
As regras devem retornar true em caso de sucesso e false em erro. O formulário passará na validação quando todas as propriedades do objeto de regras retornarem true. Caso contrário, os campos que falharem na validação serão destacados em vermelho.
Resultado do teste:
Etapa 3. Mensagem de erro
As regras estão definidas, agora eu preciso de um mecanismo para exibir uma mensagem de erro para notificar o usuário de que os dados inseridos não atendem aos critérios especificados. Para fazer isso, você pode destacar o campo em vermelho e adicionar uma mensagem de erro.
Os campos podem ter a propriedade
invalidMessage definida ; seu valor é o texto com a mensagem de erro. Esta mensagem aparecerá abaixo do campo se a validação falhar.
Código:
elements:[ { type:"section", template:"EDIT FILMS"}, { view:"text", name:"title", label:"Title", invalidMessage:"Must be filled in"}, { view:"text", name:"year", label:"Year", invalidMessage:"Should be between 1970 and current" }, { view:"text", name:"rating", label:"Rating", invalidMessage:"Cannot be empty or 0" }, { view:"text", name:"votes", label:"Votes", invalidMessage:"Must be less than 100000" }, { margin:10, cols:[ { view:"button", id:"btn_add", value:"Add new", css:"webix_primary", click:addItem}, { view:"button", id:"btn_clear", value:"Clear", click:clearForm} ] }, {} ]
Resultado:
Etapa 4. Limpando o Formulário
Para limpar o formulário, você deve criar uma função chamada pelo botão
"Clear" . Ela também é responsável pela saída de uma mensagem de aviso e, no caso de uma resposta positiva, ela apagará os dados inseridos e redefinirá a indicação de erro.
Mensagem de aviso:
Vou chamar a função
clearForm e escrever o seguinte código:
function clearForm(){ webix.confirm({ title:"All data will be lost!", text:"Are you sure?" }).then( () => { $$("film_form").clear(); $$("film_form").clearValidation(); } )};
O método de retorno de chamada
webback.confirm ({...}) é usado para a janela de confirmação, que aceita um objeto com as seguintes propriedades:
texto e
título . Como o método retorna promissor, eu posso usar o manipulador
.then . Se a resposta for positiva, no manipulador .then chamarei dois métodos: clear () - para limpar os campos do formulário e clearValidation (), que remove os rótulos de erro de validação.
A ação final é vincular a chamada de função ao botão
"Clear" .
margin:10, cols:[ { view:"button", id:"btn_add", value:"Add new", css:"webix_primary", click:addItem}, { view:"button", id:"btn_clear", value:"Clear", click:clearForm} ]
O código e a demonstração podem ser vistos aqui -
snippet.webix.com/17w1dodb .
Generalização
Da fonte, ficou claro que o código do artigo anterior é bastante simples, mas com o desenvolvimento do projeto, gradualmente se torna mais complicado, e seu número está aumentando. Para não se perder no infinito de linhas de código, torna-se importante manter a facilidade de leitura e a simplicidade na estrutura. Um exemplo de interação com um formulário descreve apenas métodos básicos, mas também é claro deles que, para dar dinâmica à página, o webix oferece um código pequeno, legível e intuitivo. Comparado ao JavaScript puro, seu volume dobraria na melhor das hipóteses.