LUCAS ROBERTO BECHERT SCHMITZ. Construção de um gerador gráfico de consultas SQL via Web utilizando a plataforma.net. Palmas 2004



Documentos relacionados
Noções de. Microsoft SQL Server. Microsoft SQL Server

Desenvolvendo Websites com PHP

CONCEITOS INICIAIS. Agenda A diferença entre páginas Web, Home Page e apresentação Web;

DESENVOLVIMENTO DE SOFTWARE DE VOTAÇÃO WEB UTILIZANDO TECNOLOGIA TOUCHSCREEN

Construtor de sites SoftPixel GUIA RÁPIDO - 1 -

Bem- Vindo ao manual de instruções do ECO Editor de COnteúdo.

Novell. Novell Teaming 1.0. novdocx (pt-br) 6 April 2007 EXPLORAR O PORTLET BEM-VINDO DESCUBRA SEU CAMINHO USANDO O NOVELL TEAMING NAVIGATOR

1. Introdução pág.3 2. Apresentação do sistema Joomla! pág.4 3. Acessando a administração do site pág.4 4. Artigos 4.1. Criando um Artigo 4.2.

Acesso a Banco de Dados usando C# (MySql Provider)

Está apto a utilizar o sistema, o usuário que tenha conhecimentos básicos de informática e navegação na internet.

02 - Usando o SiteMaster - Informações importantes

CAPÍTULO 8 Conexões de banco de dados para programadores ASP.NET

Conteúdo Programático de PHP

Programando em PHP. Conceitos Básicos

DOCUMENTAÇÃO DO FRAMEWORK - versão 2.0

ArpPrintServer. Sistema de Gerenciamento de Impressão By Netsource Rev: 02

Desenvolvendo para WEB

Microsoft Office PowerPoint 2007

Manual da Turma Virtual: MATERIAIS. Para acessar a turma virtual com o perfil Docente, siga o caminho indicado abaixo:

ANDRÉ APARECIDO DA SILVA APOSTILA BÁSICA SOBRE O POWERPOINT 2007

DESENVOLVIMENTO WEB DENTRO DOS PARADIGMAS DO HTML5 E CSS3

JDBC Java Database Connectivity

Manual do Visualizador NF e KEY BEST

Tutorial Plone 4. Manutenção de Sites. Universidade Federal de São Carlos Departamento de Sistemas Web Todos os direitos reservados

Microsoft Office Outlook Web Access ABYARAIMOVEIS.COM.BR

Manual do Painel Administrativo

DESENVOLVIMENTO DE SOFTWARE AULA 1

Android e Bancos de Dados

Aula 1: Noção Básica e Criação de Tabelas.

Ferramenta: Spider-CL. Manual do Usuário. Versão da Ferramenta:

Manual Q-Acadêmico 2.0 Módulo Web - Aluno

Google Drive. Passos. Configurando o Google Drive

Procedimentos para Reinstalação do Sisloc

Manual de Utilização do Zimbra

GERADOR DE RELATÓRIOS WINREPORT VERSÃO 2.0. Conteúdo

Tema UFPel 2.0 WP Institucional Guia de Opções de Personalização

MANUAL DE INSTRUÇÕES. Versão 1.0. Visão Transportador

Scriptlets e Formulários

( TIAGO DOS SANTOS MENDES ) PROGRAMAÇÃO DISPOSITIVOS MOVEIS ANDROID STUDIO

Treinamento sobre SQL

Principais Comandos SQL Usados no MySql

Introdução a listas - Windows SharePoint Services - Microsoft Office Online

SUAP Módulo Protocolo Manual do Usuário DTI DIRETORIA DE TECNOLOGIA DA INFORMAÇÃO SEÇÃO DE PROJETOS, SISTEMAS E PROCESSOS DE NEGÓCIO

Cadastramento de Computadores. Manual do Usuário

O Windows 7 é um sistema operacional desenvolvido pela Microsoft.

FACULDADE DE ADMINISTRAÇÃO E NEGÓCIOS DE SERGIPE

Manual de Gerenciamento de Conteúdo

Instalando o Internet Information Services no Windows XP

Upload e Download de Arquivos. Ao programador Morfik, cabe implementar em sua aplicação os mecanismos gerenciem todo o processo acima.

Figura 1: tela inicial do BlueControl COMO COLOCAR A SALA DE INFORMÁTICA EM FUNCIONAMENTO?

SQL APOSTILA INTRODUÇÃO A LINGUAGEM SQL

Iniciando o MySQL Query Brower

Criando um script simples

UNIVERSIDADE FEDERAL DO RIO GRANDE DO NORTE ESCOLA AGRÍCOLA DE JUNDIAÍ EAJ - PRONATEC / REDE etec MÓDULO III DESENVOLVIMENTO PROFESSOR ADDSON COSTA

Índice. Manual Backup Online. 03 Capítulo 1: Visão Geral

Framework.NET, Microsoft Visual C# 2010 Express e Elementos da Linguagem C#

O código JavaScript deve ser colocado entre tags de comentário para ficar escondido no caso de navegadores antigos que não reconhecem a linguagem.

MANUAL DE NAVEGAÇÃO DO MILLENNIUM BUSINESS

Fundament n os s da platafo f rm r a. NE N T André Menegassi

SUMÁRIO Acesso ao sistema... 2 Atendente... 3

MANUAL DO USUÁRIO SORE Sistema Online de Reservas de Equipamento. Toledo PR. Versão Atualização 26/01/2009 Depto de TI - FASUL Página 1

Portal Sindical. Manual Operacional Empresas/Escritórios

ROTEIRO PARA TREINAMENTO DO SAGRES DIÁRIO Guia do Docente

Especificação do 3º Trabalho

Microsoft Access XP Módulo Um

Manual do usuário. v1.0

Programa EndNote. Download para teste no site: (Atualmente o EndNote está na versão 5x)

Manual Xerox capture EMBRATEL

Revisão: Introdução. - Integração com o AutoManager; 1 Atualização de versão do banco de dados PostgreSQL

Orientação a Objetos

Manual UNICURITIBA VIRTUAL para Professores

Dicas para usar melhor o Word 2007

Menu Utilitários. Atualização do Banco de Dados Atualização e organização dos arquivos existentes

O que é o JavaScript?

Sistema de Controle de Solicitação de Desenvolvimento

WecDB WecDB Consulta Web Facilitada ao Banco de Dados

Manual SAGe Versão 1.2 (a partir da versão )

Manual de Utilização do PLONE (Gerenciador de página pessoal)

Listando itens em ComboBox e gravando os dados no Banco de Dados MySQL.

Guia Site Empresarial

PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS

Anote aqui as informações necessárias:

Manual do Google agenda. criação e compartilhamento de agendas

Como incluir artigos:

Manual de Publicaça o no Blog da Aça o TRIBOS nas Trilhas da Cidadania

Sistema de Gestão de Recursos de Aprendizagem

Manual Administrador - Mídia System

Web Design. Prof. Felippe

O Primeiro Programa em Visual Studio.net

Sumário INTRODUÇÃO Acesso ao Ambiente do Aluno Ferramentas e Configurações Ver Perfil Modificar Perfil...

5 Mecanismo de seleção de componentes

Linguagem de Programação JAVA. Professora Michelle Nery Nomeclaturas

CONTRA CONTROLE DE ACESSOS E MODULARIZADOR DE SISTEMAS

Personalizações do mysuite

UNIVERSIDADE FEDERAL DE SANTA MARIA - UFSM COLÉGIO AGRÍCOLA DE FREDERICO WESTPHALEN BANCO DE DADOS II

Manual de utilização do sistema OTRS (Atendimento) Cliente Externo

Aula 01 - Formatações prontas e condicionais. Aula 01 - Formatações prontas e condicionais. Sumário. Formatar como Tabela

Tutorial Sistema de Eventos de Certificação e Capacitação

Transcrição:

i LUCAS ROBERTO BECHERT SCHMITZ Construção de um gerador gráfico de consultas SQL via Web utilizando a plataforma.net Palmas 2004

ii LUCAS ROBERTO BECHERT SCHMITZ Construção de um gerador gráfico de consultas SQL via Web utilizando a plataforma.net Relatório apresentado como requisito parcial da disciplina de Prática de Sistemas de Informação I (Estágio) do curso de Sistemas de Informação, orientado pelo Prof. Jackson Gomes de Souza Palmas 2004

iii LUCAS ROBETO BECHERT SCHMITZ Construção de um gerador gráfico de consultas SQL via Web utilizando a plataforma.net Relatório apresentado como requisito parcial da disciplina de Prática de Sistemas de Informação I (Estágio) do curso de Sistemas de Informação, orientado pelo Prof. Jackson Gomes de Souza Aprovado em julho de 2004 BANCA EXAMINADORA Prof. Jackson Gomes de Souza Centro Universitário Luterano de Palmas Prof. Fernando Luiz de Oliveira Centro Universitário Luterano de Palmas Profª. Parcilene Fernandes de Brito Centro Universitário Luterano de Palmas Palmas 2004

iv De que valem leis, onde falta nos homens o sentimento da justiça? (Obras Completas de Rui Barbosa, v. 16, t. 5, 1889. p. 225.)

v AGRADECIMENTOS Agradeço, primeiramente a Deus, tanto por sua bondade em conceder a mim e a todas demais pessoas com quem convivo, uma grande dádiva; quanto por me motivar a ser o que fui, que sou e que pretendo ser a partir desse momento por meio de meus esforços. Agradeço à minha família, que mesmo não podendo estar juntos a mim em todos os momentos nos últimos anos, sempre me deram força para acreditar em meus sonhos e condições para continuar essa caminhada. Agradeço ao meu orientador, o professor Jackson, que sabiamente me orientou no decorer deste trabalho, indicando sempre o melhor caminho para encontrar as respostas necessárias, isso quando já não as respondia. Agradeço aos professores que, através de suas aulas e de atendimentos extraclasse, me passaram parte de seu conhecimento: Ademildo, Aline, Andrés, Augusto, Cristina, Deise, Eduardo Leal, Eduardo Piveta, Fabiano, Fernando, Flávio, Jackson (olha ele de novo), João Nunes, Madianita, Madson, Mário Sérgio, Parcilene, Ricardo e Thereza. Agradeço aos grandes amigos que conheci nesta instituição: André (Rincon), Carlos Eduardo (Careli), Edeilson (Ed), Jorge (Trial), Leandro (Macieira). Agradeço também aos demais amigos, colegas de sala de alua e demais conhecidos; não citarei nomes para não correr o risco de cometer injustiças ao esquecer de alguém. Agradeço também ao leitor que neste momento me prestigia ao ler este trabalho. A ordem dos nomes citados acima não indica preferência, afinal, isto nem mesmo eu sei responder. Os nomes contidos nos parágrafos estão em ordem alfabética.

vi SUMÁRIO LISTA DE FIGURAS...VIII LISTA DE TABELAS...IX LISTA DE ABREVIATURAS... X 1 INTRODUÇÃO... 14 2 REVISÃO DE LITERATURA... 16 2.1 JAVASCRIPT E DHTML... 16 2.1.1 JavaScript... 16 2.1.1.1 DynAPI... 18 2.1.1.2 Modelo de objetos do browser... 20 2.1.2 DHTML... 21 2.2 ASP.NET... 22 2.2.1 ADO.NET... 29 2.2.1.1.NET Framework Data Provider... 30 2.2.1.1.1 Connection... 31 2.2.1.1.2 Command... 32 2.2.1.1.3 DataReader... 33 2.2.1.1.4 DataAdapter... 33 2.2.1.2 DataSet... 34 2.3 BANCOS DE DADOS RELACIONAIS... 35 2.3.1 Linguagem de Consulta ao Banco SQL... 36 3 MATERIAL E MÉTODOS... 40 3.1 LOCAL E PERÍODO... 40 3.2 MATERIAL... 40 3.3 METODOLOGIA... 41 4 RESULTADOS E DISCUSSÃO... 44 4.1 MODELAGEM DO SISTEMA... 44 4.2 INTERPRETAÇÃO DO ESQUEMA RELACIONAL DO MICROSOFT SQL SERVER... 47 4.3 INTERFACE GRÁFICA... 50 4.4 GERAÇÃO DA CONSULTA SQL... 52 4.5 COMUNICAÇÃO COM O BANCO DE DADOS E EXIBIÇÃO DE REGISTROS... 53 5 CONSIDERAÇÕES FINAIS... 56 6 TRABALHOS FUTUROS... 58 REFERÊNCIAS BIBLIOGRÁFICAS... 60 APÊNDICE A - CÓDIGO REFERENTE À CLASSE BANCO... 62 APÊNDICE B - CÓDIGO REFERENTE À CLASSE VALIDA... 65 APÊNDICE C - CÓDIGO REFERENTE À CLASSE CONSULTA... 66

APÊNDICE D - CÓDIGO REFERENTE À CLASSE TABELA... 70 vii

viii LISTA DE FIGURAS Figura 1: Visão simplificada da arquitetura do sistema... 15 Figura 2: Exemplo de código em JavaScript... 17 Figura 3: Exemplo de código para a utilização da DynAPI... 19 Figura 4: Código com a utilização da DynAPI para a crição de uma nova Layer... 19 Figura 5: OZEMAIL (2004) Hierarquia de objetos do Browser... 21 Figura 6: Modelo compilação ASP. Fonte AÉCE (2004).... 26 Figura 7: Modelo compilação ASP.NET. Fonte AÉCE (2004).... 26 Figura 8: Preenchendo um menu de seleção HTML com ASP tradicional... 27 Figura 9: Preenchendo um DropDownList com ASP.NET.... 27 Figura 10: MSDN (2004) Arquitetura do ADO.NET... 30 Figura 11: Formas de acesso a fontes de dados... 31 Figura 12: Exemplo de utilização do SqlConnection... 32 Figura 13: Exemplo de utilização do objeto SqlCommand... 32 Figura 14: Exemplo de utilização do objeto SqlDataReader... 33 Figura 15: Exemplo de utilização do objeto SqlDataAdapter.... 33 Figura 16: Exemplo de utilização do objeto DataSet... 34 Figura 17: Representação da tabela tbproduto em uma base de dados relacional.. 35 Figura 18: Consulta básica utilizando a linguagem SQL... 37 Figura 19: Tabela retornada como resultado da consulta apresentada na Figura anterior (18). 37 Figura 20: Consulta com a cláusula WHERE.... 38 Figura 21: Consulta com o operador de comparação BETWEEN na cláusula WHERE. 38 Figura 22: Exemplo de consulta SQL com a cláusula de ordenação ORDER BY... 39 Figura 23: Modelo de Classes do Sistema desenvolvido nesse trabalho... 45 Figura 24: Implementação do método retornartabelas() da classe Banco. 50 Figura 25: Interface gráfica do sistema... 51 Figura 26: Código responsável por montar a cláusula FROM a partir da interface gráfica 53 Figura 27: Trecho de código responsável por apresentar ao usuário o resultado da consulta. 54

ix LISTA DE TABELAS Tabela 1: Relação entre Web Controls e elementos HTML... 25 Tabela 2: Cronograma de atividades para o desenvolvimento do trabalho.... 41

x LISTA DE ABREVIATURAS ASP = Active Server Pages ASP.NET = Active Server Pages.NET API = Application Program Interface BOM = Browser Object Model CLR = Common Language Runtime CSS = Cascading Style Sheets DHTML = Dynamic HTML HTML = Hyper Text Markup Language IIS = Internet Information Services MSIL = MicroSoft Intermediate Language SQL = Structured Query Language W3C = World Wide Web Consortium

xi RESUMO Este trabalho propõe a implementação de um utilitário Web semelhante ao criador gráfico de consultas já existente em alguns gerenciadores de bancos de dados para desktop. Com este gerador gráfico de consultas, o usuário poderá, entre outras funcionalidades, visualizar uma lista de tabelas existentes no banco de dados, visualizar uma lista de campos de cada tabela e selecionar os campos de uma tabela para que os mesmos possam ser exibidos na consulta. A utilização do utilitário desenvolvido neste trabalho será de grande importância no sentido de facilitar ao usuário o acesso às informações, uma vez que através do sistema o próprio usuário irá montar suas consultas. Palavras-chaves: DHTML, SQL, plataforma.net

xii ABSTRACT This work purposes the implementation of a web utility seem to the graphic query creator that already exists in some desktop database managers. With this graphic query generator, the user can, among other functionality, to visualize a list of tables that exists in the database, to visualize a list of columns of each table and to select the columns from a table for the exhibition of them on the query. The use of the utility developed in this work will be of great importance for making easy to the user the access to the information, because through the system that user will construct his own queries. Keywords: DHTML, SQL,.NET plataform

13 1 INTRODUÇÃO Os sistemas voltados para a Web vêm ganhando cada vez mais espaço. Estes sistemas tornam-se complexos, possuindo funcionalidades de acesso a bancos de dados e gerenciamento de transações. Geralmente, quando um usuário do sistema deseja visualizar informações do banco de dados, acessa as funcionalidades de relatórios já implementadas no sistema; quando algum relatório com informações das quais ele necessita não existe disponível no sistema, o usuário pode tentar entrar em contato com a equipe de desenvolvimento e solicitar que essa nova funcionalidade seja implementada. Esta situação pode gerar dificuldades tanto para o desenvolvedor, que precisará implementar a funcionalidade, quanto para o usuário, que muitas vezes não dispõe de tempo para esperar que a funcionalidade solicitada seja fornecida. Este trabalho propõe a implementação de um utilitário semelhante ao criador gráfico de consultas já existente em alguns gerenciadores de bancos de dados para desktop, tais como o SQL Server Enterprise Manager e o Microsoft Access. Com este gerador gráfico de consultas, o usuário poderá, entre outras funcionalidades: visualizar uma lista de tabelas existentes no banco de dados, visualizar uma lista de campos de cada tabela e selecionar os campos de uma tabela. O diferencial deste trabalho é que o gerador de consultas será acessível via Web. O modelo gráfico da consulta é uma representação visual das tabelas que estão selecionadas para a consulta e dos campos que serão exibidos. Ainda, os relacionamentos entre as tabelas também são representados (na forma de ligações entre as tabelas). O sistema criará a representação em linguagem SQL a partir do modelo gráfico criado pelo usuário. À medida que o modelo gráfico é modificado, a consulta também é modificada, para ficar de acordo com as modificações realizadas na estrutura do modelo gráfico. Caso o usuário que esteja utilizando o sistema tenha um conhecimento maior sobre a linguagem SQL, ele pode alterar a consulta diretamente. Uma representação da arquitetura do sistema pode ser vista na Figura 1.

14 Figura 1: Visão simplificada da arquitetura do sistema. Como visto na Figura 1, o sistema funcionaria da seguinte maneira: a aplicação faz um acesso a uma base de dados para fornecer ao usuário a lista das tabelas disponíveis e dos seus respectivos campos. Após conhecer a estrutura da base de dados o usuário monta a consulta desejada tanto através da parte gráfica (DHTML), como na linguagem SQL através de um editor de texto simples. Ao terminar de definir a consulta e executá-la, o sistema faz um novo acesso à base de dados, agora para buscar o resultado da consulta gerada pelo usuário. Por fim é retornado o resultado da consulta em forma de uma tabela com os campos e seus respectivos valores em cada um dos registros retornados. O texto deste trabalho está organizado da seguinte forma: na seção 2 é apresentada a revisão de literatura, que traz as informações necessárias para se entender as tecnologias utilizadas no desenvolvimento deste trabalho. A seção 3 traz uma descrição dos mateiais e métodos que foram seguidos e utilizados para a realização do trabalho. Na seção 4, são demonstrados os resultados obtidos através da finalização do trabalho e algumas propostas de trabalhos futuros. Por fim, na seção 5 são descritas as considerações finais e na 6 são descritas as referências utilizadas durante o desenvolvimento do trabalho.

15 2 REVISÃO DE LITERATURA Como parte integrante deste trabalho, foi realizada uma revisão bibliográfica sobre os recursos a serem utilizados no decorrer do desenvolvimento do mesmo. Entre estes estão os disponibilizados na plataforma.net, como os recursos de programação Web e de acesso a banco de dados. Outro recurso utilizado foi a DynAPI, uma biblioteca de classes Cross-Browser para códigos JavaScript. Estes e os demais itens utilizados serão vistos com mais detalhes através das próximas seções. 2.1 JavaScript e DHTML Nesta seção serão esplanadas as tecnologias utilizadas para a criação da interface gráfica da geração da consulta SQL por parte do usuário. Entre essas tecnologias estão o JavaScript e a DHTML. 2.1.1 JavaScript FEATHER (1997) afirma que em um esforço da Netscape para expandir as funcionalidades de seu browser, esta desenvolveu uma linguagem de programação que pode ser embutida em páginas Web. Inicialmente essa linguagem foi chamada de LiveScript, mas logo foi rebatizada para JavaScript, aproveitando a popularidade da linguagem de programação Java da Sun Microsystems. JavaScript possui uma sintaxe muito próxima a Pascal, C e C++. Para FEATHER (1997) JavaScript é uma linguagem dirigida por eventos e estes são definidos pelas ações que podem ocorrer em uma página Web, como por exemplo, um

16 botão ser clicado, o mouse ser arrastado ou o botão do mouse ser clicado. Sendo assim, sempre que algum evento ocorre na página, um código JavaScript pode ser acionado. JavaScript é uma linguagem de script utilizada para tornar as páginas mais interativas com o usuário. Algumas características de JavaScript são definidas por W3SCHOOLS-JS (2004): Projetado para adicionar interatividade a páginas HTML É uma linguagem de programação leve; É usualmente embutida no código HTML; É uma linguagem interpretada; Suportada pela maiora dos browsers; Pode alterar o código HTML dinamicamente; Orientada a eventos; Um exemplode código JavaScript é demonstrado na Figura 2. 1: <HTML> 2:... 3: <script language = "JavaScript"> 4: function colorir(obj) 5: { 6: obj.style.backgroundcolor = "green"; 7: obj.style.fontcolor = "black"; 8: } 9: </script> 10:... 11: <BODY> 12: <input type = "button" id = "teste" value = "colorir" onclick = "javascript:colorir(this)"> 13: </BODY> 14: </HTML> Figura 2: Exemplo de código em JavaScript. A Figura 2 traz um exemplo da utilização do JavaScript. Como pode ser visto, a linha 3 demonstra o início de um código JavaScript, através da tag <script> e da definição do atributo language como sendo igual a JavaScript. As linhas de 4 a 8 trazem o código que define uma função denominada colorir, que altera algumas propriedades do objeto obj, passado como parâmetro. A linha 9 traz a finalização do

17 código JavaScript através da tag </script>. A função colorir foi chamada apartir da ocorrência do evento onclick definido na linha 12. O objeto obj que tem suas propriedades alteradas é o próprio botão, já que como pode ser observado também na linha 12, quando se define o evento onclick para o botão, é chamada a função JavaScript colorir e a ela é passado o parâmetro this, que em JavaScript significa o próprio objeto, ou seja, o botão que chama a função. Para atender a um dos requisitos do trabalho, o de possuir um código Cross- Browser, ou seja, funcionar independentemente do Browser que o cliente utiliza, utilizouse uma API para a construção dos códigos JavaScript Cross-Browser, a DynAPI, que será descrita na próxima subseção. 2.1.1.1 DynAPI DYNAPI (2004) define a DynAPI como sendo uma biblioteca JavaScript Cross- Browser usada para criar componentes HTML dinâmicos em uma página Web. Esta biblioteca é de domínio público (código livre) e existem várias versões disponíveis para download no seguinte endereço: <http://sourceforge.net/project/showfiles.php?group_id=5757>. Seus principais objetos são: DynObject; DynLayer; DynDocument; Para utilizá-la devem ser seguidos alguns passos, como se estivesse adicionando arquivos de cabeçalho em um programa feito em uma linguagem de programação convencional (em linguagem C, por exemplo, #include <arquivo.h>). A forma de adicionar a biblioteaca DynAPI em códigos JavaScript é demonstrada na Figura 3, a seguir. 1: <script language="javascript" src="dynapi/src/dynapi.js"> 2: DynAPI.setLibraryPath('dynapi/src/lib/'); 3: DynAPI.include('dynapi.api.*'); 4: DynAPI.include('dynapi.api.dynlayer.js'); 5: DynAPI.include('dynapi.api.dyndocument.js'); 6:... 7: </script> 8:...

18 Figura 3: Exemplo de código para a utilização da DynAPI A Figura 3 demonstra um trecho de código necessário para a utilização de alguns dos objetos e métodos da DynAPI. Na linha 1, tem-se o trecho responsável por adicionar à página o arquivo dynapi.js que é a base para a utilização da DynAPI. A seguir, na linha 2, o caminho de onde serão buscados os demais arquivos da biblioteca é definido, através do método setlibrarypath, que recebe como parâmetro o endereço físico de onde estão os arquivos da biblioteca. Ainda no mesmo script podem ser adicionados outros arquivos da DynAPI, dependendo dos objetos com os quais se deseje trabalhar; como, por exemplo, na linha 4 é adicionada a classe responsável para o trabalho com layers, a dynapi.api.dynlayers.*. As layers são representadas em HTML pelos elementos DIV e SPAN. Suas características serão melhor detalhadas na subseção que trata a DHTML. Um trecho de código utilizando as classes adicionadas ao documento pode ser visualizado na Figura 4. 1:... 2: function criarlayer() 3: { 4: var novalayer = new DynLayer(); 5: novalayer.setid( id ); 6: novalayer.setsize(200,100); 7: novalayer.sethtml( <p>novalayer</p> ); 8: novalayer.setbgcolor( #CCCCCC ); 9: novalayer.moveto(300,10); 10: DynAPI.document.addChild(novaLayer); 11: DragEvent.enableDragEvents(novaLayer); 12: DragEvent.setDragBoundary(novaLayer); 13: } 14:... Figura 4: Código com a utilização da DynAPI para a crição de uma nova Layer. A Figura 4 apresenta um código JavaScript com a utilização da DynAPI para acrescentar uma layer à página dinamicamente, além de fazer modificações em algumas de suas propriedades e possibilitar que a mesma seja movimentada pelo usuário. Essas ações estão representadas nas seguintes linhas do código: Linha 4: a layer é criada; Linhas 5 a 9: algumas propriedades são modificadas, na seguinte ordem: o 5: Identificador da layer tem seu valor definido como "id";

19 o 6: O tamanho a layer é modificado para 200 pixels de largura e 100 pixels de altura; o 7: O texto HTML "<p>nova Layer</p>" é definido como conteúdo da layer; o 8: A cor de fundo da layer passa a ser #CCCCCC (cinza); o 9: A layer é posiciona na página com as coordenadas (x,y) = (300,10), ou seja, 300 no sentido da esquerda para a direita e 10 no sentido de cima para baixo; A linha 10 adiciona a layer ao documento HTML. A partir desse momento o usuário passa a visualizá-la em seu browser; As linhas 11 e 12 são responsáveis por tornar a layer movimentável pelo usuário através da classe DragEvent, que trata os eventos de movimentação do mouse de forma que o usuário possa mover a layer para qualquer local na janela do navegador onde se encontra o documento. 2.1.1.2 Modelo de objetos do browser KANTOR (2003) diz que a janela que utilizamos para exibir documentos HTML é interpretada pelo browser como uma coleção de objetos. Essa coleção de objetos é conhecida como BOM (Browser Object Model). A Figura 5 ilustra o modelo hierárquico dos objetos do browser. Esses objetos permitem toda manipuação feita em uma página web.

20 Figura 5: OZEMAIL (2004) Hierarquia de objetos do Browser. Conforme apresentado na Figura 5, o objeto principal dessa hierarquia é o Window. À partir dele temos outros três objetos, conforme apresentam KANTOR (2003) e OZEMAIL (2004): document: que representa todo o documento HTML a ser exibido; history: que contém o histórico dos documentos acessados pelo usuário; location: que mantém informações da localização (URL) do documento atual; O objeto document por sua vez, traz outros objetos como: Anchor, Applet, Area, Form, Image e Link, que são utilizadas de forma a estruturar o documento. Esses objetos, que também são tratados neste trabalho como elementos, possuem características específicas que definem sua forma, coloração, tamanho e posicionamento em um documento HTML. 2.1.2 DHTML DHTML é um conjunto de tecnologias que disponibilizam as ferramentas necessárias para tornar dinâmica a linguagem HTML. Para UPHOSTING (2004) DHTML disponibiliza, entre outras funcionalidades: Animação: através da movimentação de elementos em uma página; Formatação e posicionamento: através da flexibilidade para formatar elementos HTML como: alterar a cor, o tamanho, a fonte, o posicionamento e outras características; Interação: através de uma linguagem de programação do lado do cliente, como o JavaScript, para gerar essa interação com o usuário. DHTML pode ser definido como a capacidade que os browsers têm de adicionar movimento e interatividade aos vários elementos que compõe uma página web. Isto é possível através de uma combinação entre HTML, CSS e Javascript (SILVA, 2001).

21 O principal componente dinâmico a ser utilizado neste trabalho é a layer. Em HTML uma layer é representada pelos elementos LAYER (para o Browser Netscape Navigator) e DIV ou SPAN (para outros Browsers). Para W3C (2004) os elementos DIV e SPAN oferecem um mecanismo genérico para adicionar estrutura aos documentos. W3C (2004) afirma ainda que esses elementos definem conteúdo de forma inline (caso do elemento SPAN) ou blocos de conteúdo (caso do elemento DIV). Entre as principais características desses elementos estão (MSDN, 2004): Propriedades o id: String identificadora do elemento; o outerhtml: conteúdo HTML do elemento; o clientheight: altura do elemento; o clientleft: distância entre o lado esquerdo do elemento e o limite esquerdo do documento ao qual ele pertence; o clienttop: distância entre o topo do elemento e o topo do documento em que ele está contido; o clientwidth: largura do elemento; Eventos o onclick: disparado quando o usuário clica com o botão do mouse sobre o elemento; o ondragstart: disparado quando o usuário inicia o processo de arrastar o elemento com o mouse; o ondrag: disparado continuamente enquanto o elemento está sendo arrastado; o ondragend: disparado quando o usuário solta o botão do mouse, finalizando assim, o processo de arrasto do elemento. 2.2 ASP.NET W3SCHOOLS-ASP (2004) afirma que um arquivo desenvolvido com a tecnologia ASP pode conter texto, tags HTML e scripts. ASP é uma tecnologia Microsoft e necessita do IIS (Internet Information Services), servidor Web da plataforma Windows, para ser

22 executado. Quando uma página ASP é solicitada, o servidor interpreta o arquivo linha-alinha processando os scripts e retorna ao cliente apenas código HTML. Segundo PAYNE (2001), o ASP.NET é mais que uma atualização do ASP clássico: apresenta um novo modelo de programação e uma grande variedade de ferramentas. MSDN (2004) diz que ASP.NET fornece um modelo unificado de desenvolvimento para a Web que inclui serviços necessários para a construção de aplicações. É parte da plataforma.net Framework e permite que se faça uso das característcas que esta oferece. MSDN (2004) afirma ainda que a plataforma.net é um componente Windows completo que apoia a construção e a execução de aplicações. Para D ANGELO (2003) a plataforma.net é um ambiente que permite o desenvolvimento de aplicações desktop (Windows ou console), aplicações para aparelhos móveis (palm-tops, celulares, etc.) e o desenvolvimento de aplicações web através da tecnologia ASP.NET. O.NET proporciona um ambiente de desenvolvimento com muitos recursos para os desenvolvedores. Pode-se dizer que o.net disponibiliza um ambiente de desenvolvimento, que possui, entre outras características (MSDN, 2004): Multi-plataforma: similar à tecnologia Java: todo o código é compilado, interpretado, depurado e transformado em uma linguagem intermediária. Na plataforma.net essa linguagem é a MSIL (Microsoft Intermediate Language). A MSIL é entendida apenas pela CLR (Common Language Runtime) da plataforma, diz D ANGELO (2003). Quando o programa é executado pela primeira vez, a CLR transforma o código MSIL em código de máquina para que este possa ser interpretado pelo processador. Sendo assim, toda aplicação construída na plataforma.net pode ser executada em qualquer sistema operacional, desde que este por sua vez, tenha uma CLR desenvolvida. Atualmente, existem projetos de implementação do.net Framework para o sistema operacional Linux. MONO (2004) apresenta que o projeto Mono é um esforço patrocinado pela Novell para o desenvolvimento de uma versão de código aberto do.net Framework. Essa versão incluirá um compilador para a linguagem C#, uma CLR e um conjunto de classes, assim como na versão da Microsoft;

23 Multi-dispositivos: segundo D ANGELO (2003), através da.net pode-se desenvolver programas web, desktop e também para dispositivos móveis, como telefones celulares e palm-tops; Multi-linguagem: de acordo com D ANGELO (2003), o que importa para a plataforma.net é o código MSIL e a CLR, logo, a mesma não se limita a trabalhar com apenas uma linguagem de programação. Para ser utilizada na plataforma a linguagem de programação deve ser compatível com a CLS (Common Languagem Specification), visto que a CLS é compatível com a plataforma de desenvolvimento.net e gera códigos MSIL compatíveis com a CLR, diz D ANGELO (2003). Atualmente existem três linguagens homologadas seguindo a CLS, são elas: C#, J# e VB.NET; Orientada a objetos: A.NET dá suporte total à programação orientada a objetos, o que significa também que as linguagens homologadas para a plataforma devem prover esse suporte (D ANGELO, 2003) e (MSDN, 2004); Interoperabilidade entre linguagens: D ANGELO (2003) afirma que classes escritas em determinada linguagem, após compilado o código-fonte, quando é gerada a sua correspondente MSIL, pode ser utilizada por programas desenvolvidos em outras linguagens suportadas pela Plataforma; Uma vasta biblioteca de classes: entre elas estão classes de acesso e manipulação de dados, classes de manipulação de informações transmitidas via Web, classes para trabalhar com objetos visuais, etc (D ANGELO, 2003). Analisando as informações supracitadas, pode-se dizer que a.net possui um modelo de desenvolvimento muito parecido com o modelo do Java, onde, na compilação do código-fonte do programa, um novo código, em uma outra linguagem, é gerado para que possa ser entendido em ambientes diferentes. Já que classes desenvolvidas em.net podem ser acessadas por diversos dispositivos, pode-se tomar como um exemplo a criação de uma classe denominada Professores, que conterá métodos e atributos necessários para gerenciar informações

24 referentes aos professores de uma instituição de ensino (por exemplo: cadastrar professores na base de dados, buscar por professores, alterar dados cadastrais, etc.). Essa classe pode ser acessada pelo sistema Web da instituição, pela aplicação desktop da máquina do departamento pessoal e pelo Palm-top do diretor quando estes desejarem, por exemplo, consultar ou cadastrar professores. Para D ANGELO (2003) a classe acessada por todos será a mesma, diferenciando apenas a forma de disponibilização das informações ao usuário. Essas formas são as extensões específicas para cada tipo de plataforma ou ambiente de desenvolvimento. Para os aplicativos acessados via Web existem APIs denominadas Web Forms e Web Controls, porém aplicativos Web também podem se utilizar das mesmas APIs para desktop. Para as aplicações desktop são utilizadas as extensões denominadas Windows Forms, extensões estas que são APIs utilizadas no desenvolvimento do layout das janelas do aplicativo. MSDN (2004) afirma que Web Controls são componentes visuais que fazem parte de plataforma.net Framework e auxiliam o desenvolvedor na criação de páginas Web. Esses componentes, em sua grande maioria, são semelhantes aos elementos HTML. A Tabela 1 trás uma relação de alguns Web Controls e os seus corresponedentes em HTML. Web Control Elemento HTML DropDownList <Select> TextBox <Input type="text"> Button <Input type="button"> Table <table> TR <tr> TD <td> Para que os Web Controls possam ser interpretados pelo Browser, antes de o servidor enviar a página ao cliente, a própria plataforma.net faz uma espécie de tradução do código, convertendo todos Web Controls em seus respectivos elementos HTML. As Figuras 6 e 7 a seguir apresentam a diferença, citada anteriormente, existente entre as formas de compilação do ASP.NET e do ASP tradicional.

25 Figura 6: Modelo compilação ASP. Fonte AÉCE (2004). Figura 7: Modelo compilação ASP.NET. Fonte AÉCE (2004). Conforme pode ser observado analisando as Figuras 6 e 7, existe muita diferença entre os modelos de compilação de um código ASP e de um código ASP.NET. Na tecnologia ASP o código é sempre interpretado antes do envio ao cliente, ou seja, a cada acesso a página é novamente interpretada. Enquanto que, através do modelo de compilação proposto pelo ASP.NET, as páginas primeiramente são compiladas gerando o código MSIL, depois esse código é interpretado pela CLR. Após essas etapas o cliente recebe a página solicitada. A princípio esse processo pode parecer mais demorado que o do ASP, mas vale ressaltar que uma vez feito esse processo, ele só se repete quando o arquivo original sofre alguma alteração. A modificação veio para possibilitar que aplicações desenvolvidas com a.net Framework pudessem ser executadas em qualquer sistema operacional que dá um suporte à plataforma. Além da forma de compilação, também sofreu uma modificação considerável na forma de se escrever o código. Como exemplos dessa diferença entre o ASP tradicional e o ASP.NET podem ser visualizadas as Figuras 8 e 9 a seguir.

26 1: Dim conn 2: Dim rs 3: Set rs = Server.CreateObject("ADODB.Recordset") 4: conn.open 5: rs.open "SELECT * FROM tbalunos",conn 6: If Not rs.eof Then 7: Response.Write ("<select name = 'DdlAlunos'>") 8: Response.Write ("<option value = 'idaluno'>nome do Aluno</option>") 9: While Not rs.eof 10: Response.Write ("<option value = " & rs("idaluno")) 11: Response.Write (">" & rs("nome") & "</option>") 12: rs.movenext 13: Wend 14: Response.Write ("</select>") 15: End If 16: rs.close 17: conn.close 18: Set rs = Nothing 19: Set conn = Nothing Figura 8: Preenchendo um menu de seleção HTML com ASP tradicional. 1: Dim conn As SqlConnection = New SqlConnection("STRING_DE_CONNECCAO") 2: Dim cmd As SqlCommand = New SqlCommand("SELECT * FROM tbalunos", conn) 3: DdlAlunos.DataTextField = "Nome do Aluno" 4: DdlAlunos.DataValueField = "idaluno" 5: conn.open() 6: DdlAlunos.DataSource = cmd.executereader 7: DdlAlunos.DataBind() 8: Conn.Close() 9:... 10: <asp:dropdownlist id="ddlalunos" runat="server"> 11:... Figura 9: Preenchendo um DropDownList com ASP.NET. Como visto acima nas Figuras 8 e 9, com a plataforma.net, o modelo de escrita do código sofreu uma grande modificação em comparação ao modelo anterior (ASP). Essa modificação se fez tanto na quantida de de classes disponíveis como na forma de utilização dessas classes. Para melhor entender essas diferenças segue-se uma explicação dos códigos acima. Na Figura 8 tem-se um código em ASP. Nas linhas 1 e 2 são criadas as variáveis que irão ficar responsáveis pela conexão com o banco de dados (conn) e por armazenar as informações consultadas (rs) - na sub-seção ADO.NET (2.2.1), esses termos de conexão com o banco de dados e armazenamento de informações serão melhor explanados. Nas