JavaScript e CSS - Aprimorando as interfaces Web - .net Magazine 66

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.

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...