Utilização de JavaScript e CSS (Cascade Style Sheet – ou folhas de estilo) para acrescentar melhorias na interface de aplicações Web. Demonstra como integrar estes recursos em páginas ASP.NET desenvolvidas através do Visual Studio e tornar a aplicação mais fácil de usar e intuitiva para o usuário como, deixar a parte de formatação separada da linguagem de marcação possibilitando personalizações nas páginas ASP.NET feitas de uma maneira mais rápida.
Para que serve
O uso do JavaScript auxilia o usuário em várias situações, quer seja mostrando caixas de diálogo que apresentam mensagens, quer seja solicitando confirmação de ações feitas na página. Já com o uso do CSS é possível desenvolver páginas ASP.NET com uma melhor aparência. É possível ainda usando CSS separarmos o layout dos componentes ASP.NET (representados pelo código em HTML) da formatação.
Em que situação o tema é útil
A separação da linguagem de marcação (HTML) da formatação (CSS) permite que se tenha um controle maior do programa. Uma vez que as páginas ASP.NET terão somente linguagem de marcação, estas, serão mais fáceis de se fazer manutenção. Por outro lado, com a definição do estilo em um local separado, permite que se tenha uma flexibilidade da aplicação com relação à aparência, podendo-se mudar o layout da aplicação completa com pouco esforço. Já o JavaScript permite ao desenvolvedor obter algumas informações ou ainda validar ações e dados do cliente sem a necessidade de fazer requisições ao servidor Web, tornando a aplicação mais ágil.
Resumo do DevMan
As aplicações Web são cada vez mais comuns e são usadas por cada vez mais pessoas. Com isto, surgiu a necessidade de que os desenvolvedores criem páginas mais dinâmicas, atraentes e ao mesmo tempo que sejam simples de usar. O JavaScript juntamente com o CSS são recursos do qual podemos lançar mão para atingir estes objetivos. Grande parte dos ambientes para desenvolvimento de aplicativos para a Internet oferece ferramentas para incorporar estes recursos nos projetos desenvolvidos. Neste artigo, será demonstrado como uma simples aplicação ASP.NET pode incorporar tanto JavaScript como CSS.
Mais cedo ou mais tarde surge na vida da maioria dos programadores, principalmente os que estão envolvidos com o desenvolvimento de aplicativos comerciais, a necessidade de criar-se uma aplicação Web. Quer seja para simplesmente coletar dados de possíveis clientes novos, fazer consultas em um banco de dados para os usuários ou ainda, disponibilizar uma outra maneira para usuários externos consultarem dados das empresas, não importa, os aplicativos Web estão definitivamente ganhando mais espaço.
Entretanto, a Internet é um ambiente hostil ao desenvolvedor principalmente quando este precisa definir a maneira como seu usuário irá interagir com o programa. Isto representa um problema porque é muito difícil para o programador saber exatamente a partir de que ambiente seu programa está sendo acessado.
Uma vez que existe um número razoável de browsers com um número maior ainda de versões, sendo que a maioria destas versões inclui incompatibilidades que fazem com que as páginas não sejam exibidas corretamente, é importante para o desenvolvedor criar uma aplicação que seja consistente na sua interface e permita ao usuário um máximo de produtividade.
A aparência das páginas assume uma importância grande quando consideramos que no ambiente da Internet, não dispomos de transmissão de dados tão rápida como quando estamos com um programa desconectado (já que este precisa basicamente ler os dados que estão no disco rígido e carregá-los para a memória). O design da interface pode tornar-se um ponto crítico se esta for muito carregada ou ainda, se tiver muitos elementos e principalmente, elementos que se repetem e devem ser processados individualmente. Para reduzir o tempo de carga de uma página e também manter consistente a aparência quando temos várias páginas, o uso de folhas de estilo CSS representa um ganho considerável, já que as folhas de estilo podem ser separadas da linguagem de marcação HTML em um arquivo a parte.
Para demonstrar o seu uso, neste artigo criaremos uma pequena aplicação Web que tem por objetivo efetuar o cadastro de usuários. Através das páginas ASP.NET consultaremos os dados dos usuários já cadastrados, vamos incluir usuários novos e excluir usuários existentes. Será demonstrado como o uso do CSS permite a construção de uma interface Web mais atraente para o usuário final, gerando flexibilidade caso seja necessário mudar esta aparência. Para poder validar as ações do usuário da página e também exibir mensagens dinâmicas para este, veremos como incorporar o JavaScript em nossa aplicação.
O JavaScript é uma das linguagens que servem de base para o desenvolvimento de aplicações Web AJAX. Com este, tornou-se possível criar aplicações Web com uma interface quase tão atraente como as que rodam diretamente no Windows (Windows Forms). Não abordaremos o AJAX, sendo este um assunto bem distinto e bem extenso, por outro lado, com o entendimento inicial do JavaScript é possível prosseguir futuramente para este tópico.
Nota do Editor
Nesta mesma edição, você encontra um artigo sobre uso de CSS e JavaScript em aplicações AJAX.
Para executar este exemplo você vai precisar dos seguintes programas instalados no seu sistema:
- Visual Studio 2005 ou superior;
- Internet Explorer, de preferência versão 7 ou superior;
- Microsoft SQL Server 2005 Express Edition ou superior;
Além disto, são necessários os seguintes conhecimentos para executar o projeto aqui proposto:
· Criação de projetos Web dentro do Visual Studio;
- Conhecimento básico da linguagem C#, que permita seu uso para executar algumas ações em nosso programa;
- Conhecimento de instruções da linguagem SQL para consulta e edição de dados;
- Criação de bancos de dados e tabelas bem como os conceitos evolvendo tabelas, campos, tipos de dados, chaves primárias etc.
- ASP.NET, HTML;
- Conhecimento inicial de CSS;
- Noção da linguagem JavaScript, uma vez que será apenas mostrado como integrar este elemento à aplicação ASP.NET.
Definindo o escopo e os requisitos do aplicativo
Através da aplicação Web que estamos desenvolvendo o usuário terá acesso inicialmente a uma página onde estarão disponíveis as seguintes operações:
- Inclusão de novos usuários;
- Consulta dos usuários cadastrados;
- Alteração dos dados de usuários existentes;
- Exclusão de usuários cadastrados;
Nota: como o objetivo principal é demonstrar a utilização de JavaScript e CSS, não faremos considerações sobre segurança e itens como Login e autenticação de usuário.
Para executar as tarefas descritas anteriormente, os seguintes pontos devem ser observados:
- Durante a inclusão, os campos do nome e e-mail do usuário devem ser obrigatoriamente preenchidos e o programa deve exibir um alerta para o usuário caso sejam deixados sem preenchimento;
- O programa não deve permitir dois usuários com o mesmo endereço de e-mail, uma vez que este servirá como identificador do usuário e no banco será definido como nossa chave primária;
- A pesquisa será feita com o usuário digitando o nome a ser buscado. Deve-se pesquisar no campo nome a partir de qualquer parte. Por exemplo: se o usuário digitar “ANA” o programa pode trazer “Ana Paula”, “Carlos Santana” etc.;
- Caso nenhum resultado seja encontrado, deverá ser dado um alerta para o usuário;
- Os resultados devem ser mostrados em uma listagem que possuirá um link para o usuário carregar os dados;
- Ao carregar os dados, uma página para digitação dos dados é carregada e serão disponibilizados os botões para gravar as alterações feitas, excluir o usuário ou abandonar a digitação;
- Para gravar os dados do usuário já cadastrado, os mesmos campos da inclusão (nome do usuário e email) deverão ser validados;
- Antes de excluir o registro, deverá ser pedida uma confirmação para o usuário.
Definindo o banco de dados
Para este projeto estou usando o Microsoft SQL Server 2008 Express Edition, mas é possível desenvolver o projeto usando outra versão, como por exemplo a 2005 e mesmo versões mais completas. Entretanto, a versão Express é adequada para o que faremos.
Abra o SQL Server Management Studio" [...] continue lendo...
