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.