Introdução
Continuando a matéria sobre o Framework do Twitter, agora partiremos para a criação de um aplicativo para web ou web site pelo Visual Studio, a Microsoft facilitou (e muito) esta parte, pois é possível criar um projeto pelo Visual Studio, que já vem com algumas páginas prontas para o desenvolvimento, com o layout no padrão do Bootstrap, desta forma você pode começar a desenvolver seu aplicativo para web ou web de maneira mais rápida, pois não será necessário criar as páginas básicas como Home, Sobre, Contato, Login, Cadastro de Usuário, pois essas páginas já vem prontas, será apenas necessário alterar o layout do jeito que você preferir (obs: para fazer tais alterações é necessário ter conhecimento básico de HTML, CSS, JavaScript).
Criando um projeto no Visual Studio 2013
No andamento deste artigo utilizarei a versão do Visual Studio 2013 que está disponível apenas em inglês. Iremos começar criando um projeto, para acessar este recurso basta seguir o exemplo da Imagem 1, logo abaixo:
Imagem 1 Criando um Projeto
Após seguir os passos da imagem 01, o Visual Studio abrirá uma janela para você selecionar qual linguagem deseja utilizar, para este projeto é necessário selecionar Visual C#(C Sharp), e depois clique em Web e ele lhe dará apenas uma opção, a “ASP.NET Web Application” (que significa Aplicação Web, em uma tradução livre) selecione esta opção e coloque o nome de seu projeto na parte inferior da tela, se restou alguma dúvida observe na Imagem 02:
Imagem 2 Janela para criação de um projeto.
Depois de selecionadas as informações corretas e dado o devido nome ao projeto, basta clicar em “OK” e logo em seguida o aparecerá outra tela para você selecionar o “template” (em tradução livre significa modelo), e para neste artigo utilizaremos o modelo “MVC” (a sigla significa Model-View-Controller, que é um padrão de arquitetura de software), observe na imagem 03 logo abaixo:
Imagem 3 Janela para seleção do modelo da aplicação da web.
Ao clicar em “OK” o Visual Studio levará alguns segundos para gerar o projeto, assim que ele terminar, para poder visualizar o projeto, compile-o em seu navegador de preferência (irei utilizar a versão para desenvolvedores do Mozilla Firefox), e terá este resultado exibido na imagem 4:
Imagem 4 Compilando o projeto!
Este será o resultado que seu navegador exibirá após compilar o projeto:
Imagem 5 Tema padrão gerado pelo Visual Studio.
Como foi citado anteriormente, o Visual Studio gera as páginas básicas necessárias para começar a desenvolver uma aplicação para web, que são essas exibidas na imagem 5: Home(Inicio), About(Sobre), Contact(Contato), Registro(Cadastro) e Log In(Entrar). Com estas páginas prontas basta começar a desenvolver sua aplicação web. Caso você não tenha gostado do tema padrão, para mudá-lo é muito fácil, o primeiro passo é entrar no site http://bootswatch.com/ e escolher um tema de sua preferência, no meu caso escolhi o tema “Yeti”, quando encontrar um tema de seu agrado clique em download e será aberta uma aba em seu navegador com o código fonte da biblioteca de estilos do bootstrap, basta pressionar atalho CTRL + A para selecionar tudo e CTRL + C para copiar o conteúdo, depois abra o Visual Studio com o seu projeto aberto e clique com o botão direito do mouse em cima da pasta “Content” e vá até a opção “Add” depois clique em ”New Item” (Caso o Visual Studio não esteja exibindo o “Solution Explorer“, que é o recurso que exibe as pastas do projeto, pressione a tecla CTRL + ALT + L).
Imagem 6 Criando um arquivo CSS para o novo tema.
Depois que clicou em “New Item”, o Visual Studio exibirá uma tela para selecionar o tipo de arquivo que deseja que ele crie, para o tema é necessário selecionar a opção “Style Sheet” (em tradução livre significa Folha de Estilos), e na parte inferior da tela é necessário nomear o arquivo como “bootstrap-theme.css” e clique em “Add” para finalizar, se restou alguma dúvida observe como o procedimento é feito na imagem 7 logo abaixo:
Imagem 7 Adicionando o arquivo ao projeto.
Apague a tag “body” que vem escrita por padrão no arquivo e cole o conteúdo que copiou do tema escolhido no site do “Bootswatch”, depois salve o arquivo (CTRL+S), quando feito isso, pode fechar o arquivo, em seguida dê um duplo clique na pasta “App Start” de seu projeto e faça o mesmo para abrir o arquivo “BundleConfig.cs”, o mesmo exibido na imagem 08 logo abaixo:
Imagem 8 Abrindo o arquivo BundleConfig.cs
Quando ele abrir vá até a linha de código que está declarando o Bootstrap, como é exibido na imagem 9 abaixo:
Imagem 9 Alterando a declaração do CSS referente ao tema.
Altere a declaração de “bootstrap.css” para “bootstrap-theme.css”, que é o arquivo que criamos anteriormente com o tema escolhido do bootswatch.
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap-theme.css",
"~/Content/site.css"));
Dependendo do tema escolhido, que no meu caso foi o “Yeti”, ao compilar o projeto o resultado que obtive será exibido na imagem 10 logo abaixo:
Imagem 10 Novo tema.
Ao observar a imagem 10, é possível perceber que a página ficou com um design mais leve e agradável para olhos, isso faz com que o usuário consiga acessar a página durante mais tempo e a partir daí basta alimentá-lo com conteúdo e será fiel ao seu site, seja ela uma loja virtual ou site de notícias.
Como utilizar máscaras em campos
Agora mudando um pouco de assunto, vamos entrar em uma parte que muitos programadores para web têm dúvidas e muitas vezes acabam perdendo muito tempo para fazer coisas simples, como por exemplo implementar o uso de máscaras. Começando pela criação de “Inputs” (campos para inserção de dados) com máscaras de dados como as de Telefone e RG, que é muito simples de se fazer, pois já existe um poderoso jQuery plugin que faz toda a parte de programação por traz chamado de “Masked Input”(em uma tradução livre significa “Máscara de entrada”), a única parte que precisamos fazer é uma função em JavaScript que define a máscara que o campo terá, enfim, mãos a obra. O primeiro passo seria obter o plugin Masked input na versão 1.4, para isso vá até o Google e pesquise “Maskedinput 1.4 download” e depois clique no segundo resultado, que o direcionará a página da Digital Bush, desenvolvedora do plugin, como é exibido na imagem 11 logo abaixo:
Imagem 11 Obtendo o plugin Masked Input, parte 1.
Ao abrir o site da Digital Bush, poderá observar que há dois links para baixar o plugin, pode ser obtido em sua forma não comprimida que é possível compreender o código se possuir um conhecimento avançado em JavaScript, caso queira o arquivo compresso basta clicar na segunda opção que é exibida na imagem 12 logo em seguida:
Imagem 12 Obtendo o plugin Masked Input, parte 2.
Quando clicar em um dos links o site lhe direcionará ao código fonte do Masked Input, basta fazer o mesmo procedimento da troca do tema do Bootstrap, de um “Ctrl + A” e depois “Ctrl + C” e vá até o Visual Studio e com a seta do mouse sobre a pasta “Scripts” do projeto, clique com o botão direito, vá em Add e depois New Item, ao abrir a tela para selecionar o tipo do arquivo, selecione a segunda opçãpo “JavaScript File”, na parte de baixo coloque o nome do arquivo como “maskedinput-1.4” e clique em Add, como mostra a imagem 13:
Imagem 13 Adicionando o plugin ao projeto.
Quando o novo arquivo abrir, cole(Ctrl + V) o código fonte do plugin em seguida salve-o(Ctrl + S) e feche-o. Depois de adicionado o plugin ao projeto, precisamos declará-lo no arquivo “BundlesConfig.cs”, como foi feito no tema, e neste caso estaremos declarando um pacote de “Scripts” e não de estilos, digite as seguintes linhas de código logo abaixo de onde foi declarado o tema anteriormente:
bundles.Add(new ScriptBundle("~/bundles/maskedinputjs")
.Include("~/Scripts/maskedinput-1.4.js"));
Quando terminar de adicionar as linhas de código, salve e feche o arquivo “BundlesConfig.cs”, o próximo passo é atualizar a versão do jQuery que é gerada pelo Visual Studio, para a versão disponível no site do http://www.jquery.com, clique no menu “Download” quando ele abrir a página clique nos links para baixar a versão 1.11.2, nas versões comprimidas e não comprimidas, como é exibido na imagem 14 logo abaixo:
Imagem 14 Obtendo a versão 1.11.2 do jQuery.
Após baixar os arquivos do jQuery, coloque-os na pasta Scripts do projeto, depois de feito isso, exclua os arquivo com os respectivos nomes: jquery-1.10.2.intellisense; jquery-1.10.2; jquery-1.10.2.min.
Depois que os arquivos antigos foram excluídos é necessário ir abrir o Visual Studio e adiciona-los ao projeto, para fazer isso é necessário estar com a seta do mouse sobre a pasta Scripts, clicar com o botão direito do mouse, ir até a opção do “Add” e depois clicar na opção “Existing Item”(em tradução livre significa Item Existente), se houver dúvida observe a imagem 15:
Imagem 15 Adicionando os novos arquivos do jQuery ao projeto.
Quando o Visual Studio abrir o “explorer” procure os arquivos com os respectivos nomes jquery-1.11.2 e jquery-1.11.2.min, pressione a tecla “Ctrl” e selecione os dois e clique em Add, observe como é feito na imagem 16.
Imagem 16 Selecionando os arquivos do jQuery.
Quando terminar de adicioná-los ao projeto, podemos partir para a declaração dos campos que iremos definir máscaras, para isso, se estiver no Visual Studio, vá até a pasta “Models”(que em tradução livre significa Modelos) e abra o arquivo “AccountViewModel” e vá até a declaração da classe chamada “RegisterViewModel”, como mostra a imagem 17 logo abaixo:
Imagem 17 Declarando os campos que iremos utilizar.
Observe o código em negrito abaixo como ficará a declaração dos campos:
[DataType(DataType.Password)]
[Display(Name = "Confirm password")]
[Compare("Password", ErrorMessage = "The password and confirmation password do not match.")]
public string ConfirmPassword { get; set; }
[Display(Name = "RG")]
public string RG { get; set; }
[Display(Name = "Telefone")]
public string Telefone { get; set; }
}
Quando finalizar a declaração, salve e feche o arquivo e vá para o explorador de soluções e abra a pasta “Views”, depois “Account” e abra o arquivo “Register.cshtml”, como é mostrado na imagem 18:
Imagem 18 Acessando o arquivo de cadastros.
Com o arquivo aberto, vai estar igual à imagem 19, vá para a parte de baixo do código como está na imagem abaixo, agora iremos criar dois “inputs” para utilizarmos as máscaras, e as linhas de código tem que ser escritas entre as “div” tags que declaram o campo de Confirmação de senha e o botão para registrar, bem no lugar onde está a linha vermelha na imagem 19, caso não saiba como criar um os campos copie o código que disponibilizarei abaixo da imagem 19.
Imagem 19 Localizando o lugar correto para criar os campos.
O código dos respectivos campos é o seguinte, observe que as variáveis são iguais as que foram declaradas no arquivo “AccountViewModel”:
<div class="form-group">
@Html.LabelFor(m => m.RG, new { @class = "col-md-2 control-label "})
<div class="col-md-10">
@Html.TextBoxFor(m => m.RG, "RG", new { @class = "form-control" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(m => m.Telefone, new { @class = "col-md-2 control-label "})
<div class="col-md-10">
@Html.TextBoxFor(m => m.Telefone, "Telefone", new { @class = "form-control" })
</div>
</div>
Depois que criarmos os campos, temos que escrever o script com a função, mas antes é necessário declarar o plugin masked input que adicionamos ao projeto e criamos um pacote para ele anteriormente neste artigo, para adicioná-lo é simples, observe que no fim do código tem uma seção de “Scripts”, e existe dentro dela uma declaração de um validador de jQuery, essa linha não é necessária e pode ser apagada, o código com a declaração do pacote o plugin é o seguinte:
@section Scripts {
@Scripts.Render("~/bundles/maskedinputjs")
}
Assim que declarar o plugin, podemos escrever a função, para que ele funcione corretamente é necessário que o jQuery esteja declarado na página mestre, o nome desta página é “_Layout” e elafica dentro do diretório “Shared” na pasta ”Views”, dê um duplo clique nela para abri-la, caso não tenha encontrado o arquivo, observe a imagem 20 logo abaixo:
Imagem 20 Abrindo a página mestre.
Quando aberto, observe dentro da tag <head> se o pacote do jQuery está sendo declarado, como na imagem 21:
Imagem 21 Verificando o jQuery na página mestre.
Agora que verificamos o jQuery podemos fechar a página mestre e voltar para a página de registros e começar a escrever a função da máscara, ela tem que ser inserida logo após os códigos do formulário de registros, observe o código abaixo:
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" class="btn btn-default" value="Register" />
</div>
</div>
<script>
$(document).ready(function () {
$("#RG").mask("99.999.999-9");
$("#Telefone").mask("(99)99999-9999");
});
</script>
@section Scripts {
@Scripts.Render("~/bundles/maskedinputjs")
}
Observe que a função JavaScript utiliza os ID’s que declaramos nos campos, podendo assim compilar o projeto e teremos um resultado idêntico ao da imagem 22
Imagem 22 Resultado da máscara de RG e Telefone utilizando o plugin Masked Input.
Conclusão
Neste artigo é possível perceber o quanto o Bootstrap juntamente com o Visual Studio pode dar aquele pontapé inicial que estava faltando para você começar um novo projeto, com os recursos oferecidos pelo Framework é difícil negar que o nível de utilidade é realmente alto, pois ele facilita e agiliza muito o desenvolvimento. Caso já utilize o Bootstrap e desconhecia a possibilidade de obter um tema online sem ter que alterar todo o layout da sua página, a partir deste artigo procurei apresentar vários temas disponibilizados online gratuitamente para dar aquele up que faltava em seu projeto.
|
