quarta-feira, 13 de novembro de 2019

Windows Forms - Hierarquia de Formulários


Caro amigo leitor,
É considerada uma boa prática utilizarmos hierarquia de formulários quando o assunto é cadastro. Uma das primeiras tarefas quando desenvolvemos sistemas é de implementar formas para facilitar e agilizar o desenvolvimento de tarefas corriqueiras, economizando tempo, como por exemplo a base de um formulário de cadastro. Implementaremos neste artigo automaticamente todos os principais botões (Ajuda, Novo,Alterar, Excluir, Cancelar, Gravar, Pesquisar, Imprimir e Sair) junto com suas devidas chamadas. Todo este trabalho será desenvolvido através de uma “Class Library”, que na tradução significa “Biblioteca de Classe”, facilitando o uso em futuros projetos. Faremos todo este trabalho com o auxílio da ferramenta Microsoft Visual Studio 2017 Community.

Criando um Novo Projeto

Inicie um novo projeto no MVS2017 clicando em “Arquivo/Novo/Projeto...”. Clique na opção “Aplicativo do Windows Forms (.NET Framework)”, defina um Nome, como por exemplo “WindowsFormsApp” e por final clique no botão “Ok”. Ver Imagem 01.


Figura 01: Novo Projeto.

Dentro deste projeto que herdaremos os formulários desejados.

Criando a Biblioteca de Classes

Para adicionar a “Class Library” clique com o botão direito sobre a solução escolhendo “Adicionar Novo Projeto” 
escolhendo a opção “Biblioteca de Classes (.NET Framework)”. Defina um nome para a mesma, no nosso caso deixaremos como “Padrao”.Dentro desta biblioteca armazenaremos o formulário Padrão Base. Ver Figura 02.


Figura 02: Biblioteca de Classes.

A nossa Solução será composta da seguinte estrutura:
1 – Fpadrao (Biblioteca de Classe)
2 – WindowsFormsApp (Aplicativo do Windows Forms)
A Figura 03 nos dá uma noção da estrutura do projeto.


Figura 03: Gerenciador de Soluções.

Criando um novo projeto

O primeiro passo será o de criar o formulário base, para isto clique com o botão direito sobre o “WindowsFormsApp” escolhendo um novo Formulário. Defina um nome para o mesmo, exemplo: “FormularioPadrao”. Adicione no formulário um componente do tipo “ToolStrip” com as propriedades:

Autosize: False
GripStyle: Hidden


Para adicionar os itens de menu deveremos clicar na Propriedade “Items”. Dentro do Editor de Coleção de Itens adicione os botões necessários alterando as seguintes propriedades:

Image: System.Drawing.Bitmap (escolha a imagem do botão)
DisplayStyle: Image
ImageScaling: None
Text: Nome do Botão, por exemplo “Novo”
Autosize: False

Na Imagem 04 teremos a estrutura completa.


Figura 04: Editor de Coleção de Itens.

Note que utilizei alguns “ToolStripSeparator” para separar os botões, proporcionando uma melhor distribuição entre os mesmos.
Teremos um resultado idêntico ao da Figura 05.


Figura 05: Formulário Padrão.

Codificando o Exemplo

O método “public partial class” será do tipo “Form“ e no método Construtor não teremos nada de novidade. Implementaremos neste cadastro base o método “public virtual” do componente “Toolstrip”, permitindo utilizá-lo nos cadastros.
using System.Windows.Forms;
namespace FPadrao
{
    public partial class FormularioPadrao : Form
    {

        public FormularioPadrao()
        {
            InitializeComponent();
        }

Método padrão do Construtor.

public virtual void toolStrip1_ItemClicked(object sender, ToolStripItemClickedEventArgs e)
{
   switch (toolStrip1.Items.IndexOf(e.ClickedItem))
   {
case 0: //Botão Ajuda
MessageBox.Show("Rotinas referentes ao Arquivo de Ajuda ! ", this.Text, MessageBoxButtons.OK, MessageBoxIcon.Information);
     break;

     case 2: //Botão Inclusão
MessageBox.Show("Rotinas referentes à Inclusão ! ", this.Text, MessageBoxButtons.OK, MessageBoxIcon.Information);
     break;
     case 3: //Botão Alteração                
MessageBox.Show("Rotinas referentes à Alteração ! ", this.Text, MessageBoxButtons.OK, MessageBoxIcon.Information);
     break;
     case 4: //Botão Exclusão
MessageBox.Show("Rotinas referentes à Exclusão ! ", this.Text, MessageBoxButtons.OK, MessageBoxIcon.Information);
     break;
     case 6: //Botão Cancelar
MessageBox.Show("Rotinas referentes ao Cancelamento ! ", this.Text, MessageBoxButtons.OK, MessageBoxIcon.Information);
     break;
     case 7: //Botão Salvar
MessageBox.Show("Rotinas referentes à Gravação ! ", this.Text, MessageBoxButtons.OK, MessageBoxIcon.Information);
     break;
     case 9: //Botão Pesquisar
MessageBox.Show("Rotinas referentes à Pesquisa ! ", this.Text, MessageBoxButtons.OK, MessageBoxIcon.Information);
     break;
     case 10: //Botão Impressão
MessageBox.Show("Rotinas referentes à Impressão ! ", this.Text, MessageBoxButtons.OK, MessageBoxIcon.Information);
     break;
     case 12: //Botão Sair
     Close();
     break;
     }
   }
  }
}

No evento clique do “Toolstrip” iremos realizar um “Switch/Case” para verificar o componente clicado, permitindo ter um controle através do índice do mesmo. Importante salientar que estou apenas apresentando um “MessageBox” para identificar cada botão clicado.

É nesta parte do código que devemos implementar todo o código base de cadastro, inclusão, edição, pesquisa, etc... Fica aí a dica caro leitor!

Herdando o Formulário Base
Para herdar o formulário criado acima é muito fácil, no “WindowsFormsApp” clique com o botão direito sobre o mesmo escolhendo a opção “Adicionar/Novo Item/Windows Forms”. Escolha “Formulário Herdado” inserindo um Nome e por final clique no botão Adicionar. Ver Figura 06


Figura 06: Adicionar Formulário Herdado.

Veremos que o formulário não irá herdar mais da classe “Form” e sim da classe “FormularioPadrao”. Ver código abaixo.
public partial class FrmExemplo : FPadrao.FormularioPadrao
{
    public FrmExemplo()
    {
       InitializeComponent();
    }
}
Neste formulário poderemos adicionar quaisquer componentes, como por exemplo TextBox, Label, entre outros. Veremos na Figura 07 o projeto em Run-Time.


Figura 07: Projeto em run-time.

Conclusões

A herança de formulários é uma das características de boa prática de programação. No Microsoft Visual Studio esta tarefa se torna fácil e simples, nos auxiliando e agilizando muito na implementação de cadastros nos sistemas. Também foi apresentado neste mês a possibilidade tanto na parte gráfica (referentes a componentes) do formulário quanto na implementação de códigos padrões.
Fica a dica, um forte abraço e até o mês que vem!

Referências


Sobre o autor

Thiago Cavalheiro Montebugnoli adora aprender novas tecnologias. Formado pela Faculdade de Tecnologia de Botucatu – SP (FATEC), já desenvolveu softwares utilizando a plataforma .NET, Delphi junto com Banco de Dados SQL Server e Firebird. Como experiências profissionais mais recentes, possui em seu currículo sua atuação no Centro de Processamento de Dados da Prefeitura Municipal de Itaí-SP e atualmente compõe a equipe da Coordenadoria Tecnologia da Informação no IFSP – Instituto Federal do Estado de São Paulo em Avaré. Além disso, é colunista mensal da Revista The Club Megazine e é consultor Técnico do The Club. Possui as seguintes certificações: MCP - Microsoft Certified Professional, MCTS - Microsoft Certified Technology Specialist, MCAD - Microsoft Certified Application Developer e  MCSD - Microsoft Certified Solution Developer.

Microsoft Visual Studio 2017 - Utilizando o framework Materialize



Caro leitor,

Neste mês de Março irei discutir um pouco sobre deste framework moderno e responsivo baseado no Material Design (Para quem não sabe, o mesmo design utilizado no sistema operacional para smartphones, tables Android desde a versão 5.0). Criado e projetado pelo Google, o Material Design é uma linguagem de design que combina os princípios clássicos do design bem-sucedido com a inovação e a tecnologia. O objetivo do Google é desenvolver um sistema de design que permita uma experiência de usuário unificada em todos os seus produtos em qualquer plataforma.
De acordo com sua documentação oficial, o Materialize possui alguns princípios, tais como: “Material é a metáfora”, o qual define a relação entre espaço e movimento, sendo que a ideia é que a tecnologia é inspirada em papel e tinta facilitando a criatividade e inovação.“Ousado, gráfico e intencional” significa que elementos e componentes como grids, tipografia, cores, e imagens não são apenas visualmente agradáveis mas também criam um senso de hierarquia, significado e foco. A ênfase em diferentes ações e componentes criam um guia visual para os usuários. “Movimento fornece significado” permite ao usuário traçar um paralelo entre o que eles vêem na tela e na vida real. Para maiores detalhes recomendo a leitura de sua vasta documentação encontrada no link do final do artigo.
Este Framework pode ser facilmente implementado na plataforma .NET, e é por este caminho que iremos hoje. Implementaremos o Materialize junto com o Microsoft Visual Studio 2017 através de um novo “Web Site Asp.Net”. Faremos o uso também do famigerado gerenciador de pacotes NuGet, o qual facilitará nosso trabalho de instalação e configuração do mesmo.

Criando um novo projeto

Inicie o MVS2017 clicando no menu “Arquivo/Novo Projeto/Web Site/Web Site Vazio...” definindo um nome para o projeto. Adicione um “Web Form” dando um clique com o botão Botão direito sobre a solução, “Adicionar/Formulário Web”. Para aplicarmos algumas classes deste framework, criaremos um pequeno exemplo de cadastro contendo um Menu, alguns campos como Nome, SobreNome, E-mail,Endereço e Observações e por final um Botão Cadastrar.

Atenção: Este artigo Implementará apenas a parte visual do cadastro, o “Front-End”.

Instalando o “Materialize”

Com o projeto criado partiremos para a instalação do framework. Os passos são idênticos aos dos artigos anteriores que fazem o uso do NuGet. Clique no menu “Ferramentas/Gerenciador de Pacotes do NuGet/Gerenciar Pacotes do NuGet para a Solução...”. Na aba “Procurar” pesquise por “Materialize”, geralmente é o primeiro encontrado. Para instalá-lo clique na região direita no Botão “Instalar”. Ver Imagem 01.

Figura 01: Instalação do Materialize.


O framework Materialize utiliza como base o Jquery, automaticamente será instalado como pré-requisito para o funcionamento adequado do mesmo. No nosso caso foi instalada a versão “JQuery 2.1.1”.
Após o término da instalação será aberto um arquivo “Readme.txt” com algumas dicas iniciais para o uso do Materialize, como por exemplo sua importação. Podemos conferir mais detalhes na Imagem 02.


Figura 02: Gerenciador de Soluções com o Materialize instalado.

Codificando o Exemplo

Por padrão quando é criada uma página do tipo Web as principais TAGs já estão inclusas. Seguindo a documentação do Materialize precisaremos adicionar algumas referências para o bom funcionamento do mesmo.
Na Tag “Head” importaremos o arquivo “CSS” do Materialize, encontrada na pasta “content/materialize/css/materialize.min.cs”.  Este arquivo que será responsável pelo agradável visual de nosso formulário. Ainda na nesta mesma Tag iremos adicionar o código responsável para uma total otimização com o celular, com a Meta Tag “viewreport”, preencheremos com algumas propriedades como “width-device-width”, “initial-scale=1.0”, “maximum-scale=1.0”, “user-scalable=no”, todas propriedades específicas do Materialize.

Ver Listagem 01 com as principais regiões do código destacada.

<%
@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">

<link type="text/css" rel="stylesheet" href="content/materialize/css/materialize.min.css"  media="screen,projection"/>
 
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>The Club - Materialize</title>
</head>
Na Tag “Body” faremos a referência ao “JQuery”, um script necessário para o funcionamento do framework, e logo em seguida o próprio “Materialize.js”. Usaremos a Tag “<script>”. Ver Listagem 2
<Body>

<
script type="text/javascript" src="Scripts/jquery-2.1.1.min.js"></script>

<script type="text/javascript" src="Scripts/materialize/materialize.js"></script>

O framework Materialize funciona através da implementação de classes, ou seja, teremos classes específicas para o cabeçalho, logo, menus, caixas de textos, etc... Abaixo irei descrever os principais recursos para criar um visual bonito em uma página Web. Toda a codificação deverá ser implementada na Tag “Body”, que será o corpo de nossa página.
<nav>
     <div class="nav-wrapper">
<label class="brand-logo">The Club - O maior clube de programadores do Brasil</label>
    <ul id="nav-mobile" class="right hide-on-med-and-down">
   <li><a href="inicio.aspx">Início</a></li>
   <li><a href="cadastro.aspx">Cadastro</a></li>
   <li><a href="manutencao.aspx">Manutenção</a></li>
   </ul>
   </div>
</nav>

Dentro da Tag “Nav” será montado o cabeçalho. Como foi dito anteriormente, o Materialize faz referências através de classes, portanto inserimos a propriedade “class=”. Colocaremos uma “div” e dentro da mesma criaremos um “label” com o título seguido de uma lista de links. Usaremos a classe “nav-wrapper”, “brand-logo” e “right hide-on-med-and-down” respectivamente. Ver Imagem 03.


Figura 03: Cabeçalho.

A próxima etapa será a de adicionar os campos necessários junto com o botão “Cadastrar”. Crie uma “div” usando a classe “row” e dentro desta implementaremos a tag “form” com a classe “col s12”.


<div class="row">
  <form class="col s12">

     <div class="row">
       <div class="input-field col s6">
         <input id="nome" type="text" class="validate">
         <label for="nome">Nome</label>
     </div>

     <div class="input-field col s6">
       <input id="sobrenome" type="text" class="validate">
       <label for="sobrenome">Sobrenome</label>
     </div>
     </div>          

     <div class="row">
        <div class="input-field col s12">
         <input id="email" type="email" class="validate">
         <label for="email">E-mail</label>
     </div>
     </div>

     <div class="row">
       <div class="input-field col s12">
         <input id="endereco" type="text" class="validate">
         <label for="endereco">Endereço</label>
        </div>
      </div>     
     
     <div class="row">
      <div class="row">
        <div class="input-field col s12">
<textarea id="observacoes" class="materialize-textarea"></textarea>
          <label for="observacoes">Observações</label>
        </div>
      </div>
     </div>

<div class="center-align"><button class="btn waves-effect waves-light" type="submit" name="action">Cadastrar</button></div>
     </form>
  </div>
 </body>
</html>
Todos os campos serão compostos por uma div “row” principal contendo outra denominada “input-field col s6” ou “input-field col s12”. O número 06 ou 12 indica o tamanho do “Input” que será mostrado na tela. A tag “input” ou “textarea” criará a caixa de texto, já a “label” o descritivo deste campo.  Ver Imagem 04 para maiores detalhes.


Figura 04: Tamanhos de campos.

Por final, no “button” usaremos a classe “btn waves-effect waves-light” para uma aparência agradável. Figura 05.



Figura 05: Botão cadastrar.

O projeto em funcionamento poderemos conferir na Figura 06.



Figura 06: Web Form em funcionamento.

Conclusões

O framework “Materialize”, baseado no “Material Design” da grande Google está presente em muitos sites importantes, podendo ser conferido em sua documentação citada nas referências. Assim como o Bootstrap, este framework nos auxilia e nos poupa muito trabalho em se tratando de desenvolvimento “Front-End”, pela sua facilidade nas implementações das classes específicas para cada momento além do lindo visual para o usuário.
Neste artigo procurei desenvolver um pequeno exemplo agregando as principais classes de formatações, deixando como base de estudo para projetos maiores. Não podemos esquecer que o mesmo foi instalado e configurado a partir do gerenciador de pacotes NuGet, uma poderosa ferramenta do Microsoft Visual Studio.
Desejo uma ótima leitura, um abraço e até o mês que vem!

Referências

http://materializecss.com/

Sobre o autor

Thiago Cavalheiro Montebugnoli adora aprender novas tecnologias. Formado pela Faculdade de Tecnologia de Botucatu – SP (FATEC), já desenvolveu softwares utilizando a plataforma .NET, Delphi junto com Banco de Dados SQL Server e Firebird. Como experiências profissionais mais recentes, possui em seu currículo sua atuação no Centro de Processamento de Dados da Prefeitura Municipal de Itaí-SP e atualmente compõe a equipe da Coordenadoria Tecnologia da Informação no IFSP – Instituto Federal do Estado de São Paulo em Avaré. Além disso, é colunista mensal da Revista The Club Megazine e é consultor Técnico do The Club. Possui as seguintes certificações: MCP - Microsoft Certified Professional, MCTS - Microsoft Certified Technology Specialist, MCAD - Microsoft Certified Application Developer e  MCSD - Microsoft Certified Solution Developer.