UNIVERSIDADE FEDERAL DE MATO GROSSO DO SUL DEPARTAMENTO DE COMPUTAÇÃO E ESTATÍSTICA DESENVOLVENDO APLICAÇÕES WEB UTILIZANDO A FERRAMENTA WEBSCHARTS LÍCIO SÉRGIO FERRAZ DE BRITO MARCELO AUGUSTO SANTOS TURINE CAMPO GRANDE MS 2003
APRESENTAÇÃO O presente documento tem como objetivo apresentar um guia rápido para instalação e utilização da ferramenta CASE WebScharts, que auxilia o projetista em todas as fases do desenvolvimento de aplicações Web (WebApp) tendo como método subjacente, baseado em StateCharts (HAREL, 1987), o HMBS/M (CARVALHO, 1998) estendido. O método HMBS/M tem utiliza como modelo subjacente o HMBS (TURINE, 1998). O WebScharts é um dos produtos do Laboratório de Educação a Distância e Engenharia de Software (LEDES) do Departamento de Computação e Estatística da Universidade Federal do Mato Grosso do Sul. Foi desenvolvido utilizando o ambiente Delphi (Borland Delphi 6), tem aproximadamente 6.000 linhas de código, rodando em Windows 98 ou superior e Linux, e é resultado da pesquisa de Mestrado em Ciência da Computação do aluno Lício Sérgio Ferraz de Brito (BRITO, 2003), sob a orientação do Prof. Marcelo Augusto Santos Turine. i
SUMÁRIO 1. INSTALANDO O WEBSCHARTS... 1 2. EXECUTANDO O WEBSCHARTS... 3 2.1 INICIANDO... 3 2.2 PROJETOS... 4 2.3.1 Editor de Classes... 5 2.3.2 Editor de Fatias... 8 2.4 MODELAGEM NAVEGACIONAL... 10 2.4.1 Editor de Contextos Navegacionais... 10 2.4.2 Editor Navegacional de Tipos... 11 2.4.3 Editor do Modelo de Composição... 12 2.5 PUBLICAÇÃO... 14 2.5.1 Hiperbase... 14 2.5.2 Modelo de Statechart... 16 2.5.3 Gerador da WebApp... 16 3. CONCLUSÃO... 17 REFERÊNCIAS BIBLIOGRÁFICAS... 17 ii
1. INSTALANDO O WEBSCHARTS Para instalar o WebScharts deve-se fazer o download do arquivo de instalação através do link: http://www.dct.ufms.br/~turine/webscharts/setup.exe e siga os seguintes passos: 1. Execute o arquivo de instalação SETUP.EXE. Ao aparecer a tela abaixo, escolha a linguagem das mensagens do instalador (Português ou Inglês) e clique no botão OK. 2. Na tela de boas vindas abaixo clique no botão avançar. 3. Escolha o diretório de instalação ou aceite o default apresentado pelo instalador. A seguir clique no botão avançar. 1
4. Defina a pasta do menu iniciar onde será criado os ícones do programa e clique no botão avançar. 5. Clique no botão instalar para proceder a instalação. 2
6. A instalação está concluída. Observe que no momento a base de estrutura da aplicação é substituída pela existente versão do instalador. Qualquer alteração realizada nos arquivos da ferramenta será perdida. 2. EXECUTANDO O WEBSCHARTS O WebScharts pode ser executado através do ícone ao lado na área de trabalho ou através do menu iniciar: programas: WebScharts e clicando na opção WebScharts. 2.1 INICIANDO Na tela inicial da ferramenta, apresentada abaixo, estão os acessos a todas as rotinas ou funcionalidades. O acesso pode ser feito através do menu principal ou da barra de ferramentas (ícones abaixo do menu principal). 3
Na opção Configurações Linguagem é possível alterar a linguagem do WebScharts. Inicialmente estão disponíveis a linguagem Português e Inglês, no futuro podem ser facilmente incluídas outras linguagens. Todas as telas em que é necessário efetuar o cadastro de informações possuem as mesmas funções. É possível navegar entre os registros, inserir novos registros, editar os registros existentes e remover registros. Após a realização cada operação deve ser confirmada ou cancelada. Existe ainda a possibilidade de impressão das informações cadastradas. Inserir Editar Remover Sair Primeiro 2.2 PROJETOS registro Registro anterior Próximo registro Último registro Confirmar Cancelar Imprimir Cada WebApp é considerada um projeto e contém toda a estrutura necessária para geração da aplicação. É possível criar um novo projeto por meio da opção Novo Projeto. Deve ser informado o Nome, a Data de Criação e o Autor do Projeto. Para executar qualquer operação no software é necessário primeiro abrir o projeto, para isto execute a opção Abrir Projeto e escolha o projeto desejado 4
conforme tela abaixo. Como exemplo e estudo de caso são instalados com a ferramenta os seguintes projetos: (1) Departamento Acadêmico: catálogo de cursos, disciplinas e professores de um departamento de uma universidade e (2) Galeria de Arte: catálogo de obras e autores de uma Galeria de Arte. 2.3 AUTORIA O ambiente de autoria contém dois editores: de classe e de fatia. Estes editores auxiliam na criação do diagrama de classes e de fatias da WebApp. 2.3.1 Editor de Classes O cadastro do diagrama de classes é feito por meio do Editor de Classes. Para efetuar o cadastramento das classes execute os seguintes passos: a. Utilize o botão incluir para cadastrar uma nova classe; b. Informe o nome, descrição e o tipo de mapeamento da herança. O tipo de mapeamento informa se os atributos da classe filha serão incluídos na classe Pai (tipo Pai) ou se os atributos da classe pai serão incluídos na classe filha (tipo Derivada). c. Confirme a gravação clicando no botão de confirmação. 5
Para incluir atributos nas classes, clique na página Atributos da Classe e siga os seguintes passos: a. Utilize o botão incluir para cadastrar um novo Atributo; b. Informe o nome, o tipo, o tamanho e a perspectiva se for o caso. c. Confirme a gravação clicando no botão de confirmação. Os tipos de atributos possíveis no WebScharts são: Perspective Atributos com perspectivas de tipos diferentes. Utilize o editor de perspectiva acessado através do botão String Texto de uma linha. Deve ser informado o tamanho do texto no campo tamanho. Number Valor numérico. Não é necessário informar o tamanho do campo. Date Campo para armazenamento de data. Memo Texto em múltiplas linhas. Não é necessário informar o tamanho do campo. Image Contém o nome do arquivo com a imagem a ser apresentada no site. Audio Contém o nome de Áudio. Video - Contém o nome de Vídeo. 6
Com as classes e atributos cadastrados para completar o diagrama é necessário informar os relacionamentos entre as classes. Clique na página Relacionamentos e siga os seguintes passos: a. Utilize o botão incluir para cadastrar um novo Relacionamento; b. Selecione a classe de origem, a classe de destino, o tipo de relacionamento e a cardinalidade quando for o caso. c. Confirme a gravação clicando no botão de confirmação. Os tipos de relacionamentos possíveis no WebScharts são: Associação ( ) Agregação ( ) Composição ( ) Generalização ( ) 7
Observe que a cardinalidade só é necessária nos relacionamentos de Associação e Agregação. 2.3.2 Editor de Fatias O cadastro do diagrama de fatias é feito através do Editor de Fatias. Para efetuar o cadastramento das fatias execute os seguintes passos: a. Utilize o botão incluir para cadastrar uma nova fatia; b. Informe o nome, o tipo e qual a classe que pertence a fatia. Os tipos possíveis são Principal e Simples. Escolha a classe a que pertence a fatia que está sendo cadastrada. Observe não é possível efetuar o cadastramento da fatia antes de cadastrar a classe desejada. c. Confirme a gravação clicando no botão de confirmação. 8
Para selecionar quais atributos da classe serão utilizados naquela fatia clique na página Atributos da fatia e siga os seguintes passos: a. Utilize o botão incluir para cadastrar um novo Atributo; b. Selecione o atributo desejado da classe a que pertence a fatia; c. Confirme a gravação clicando no botão de confirmação. Para incluir os relacionamentos entre as fatias na página Relacionamentos da Fatia e siga os seguintes passos: a. Utilize o botão incluir para cadastrar um novo Relacionamento; b. Selecione a fatia de origem e a fatia de destino. Observe que os relacionamentos entre as fatias são sempre unidirecionais. c. Confirme a gravação clicando no botão de confirmação. 9
2.4 MODELAGEM NAVEGACIONAL A modelagem navegacional é feita por meio dos editores de Contextos Navegacionais, do Editor Navegacional de Tipos e Editor do Modelo de Composição. 2.4.1 Editor de Contextos Navegacionais Este editor permite o cadastramento dos contextos navegacionais da aplicação. Para efetuar o cadastramento execute os seguintes passos: a. Utilize o botão incluir para cadastrar um novo contexto; b. Informe o código do contexto, o tipo e a descrição. Os tipos possíveis de contextos são: Índice, Roteiro Guiado, Roteiro Guiado Indexado, Grupo; c. O contexto deve estar associado a uma classe específica, escolha a classe e os atributos que serão apresentados no contexto; d. Caso deseje ordenar o contexto por um atributo específico escolha o atributo e o critério de ordenação. Os critérios possíveis são em ordem ascendente e descendente. Para eliminar uma ordenação existente clique no botão limpar; e. Escolha a template XSL utilizada para efetuar a transformação do arquivo XML com as instâncias. Observe que é necessário que a template tenha sido construída especificamente para o tipo de contexto escolhido; f. Finalmente defina as condições de restrições que serão utilizadas 10
posteriormente, no modelo de composição, para filtrar as instâncias da classe. 2.4.2 Editor Navegacional de Tipos Este editor permite o cadastramento do Modelo Navegacional de Tipos. Para efetuar o cadastramento execute os seguintes passos: a. Utilize o botão incluir para cadastrar um novo contexto; b. Selecione o grupo ou classe de origem da ligação e o grupo ou classe de destino. c. Selecione o contexto de ligação entre os grupos ou classes. 11
2.4.3 Editor do Modelo de Composição O cadastro do modelo de composição é realizado por meio deste Editor. Inicialmente é necessário cadastrar a página Web. Para efetuar o cadastramento da página execute os seguintes passos: a. Informe o título da página; b. Opcionalmente informe a classe que será apresentada na página. Observe que nem todas as páginas necessitam apresentar informações sobre as classes. Caso seja escolhida uma classe, os atributos apresentados inicialmente na página serão os da fatia principal da classe. c. No campo arquivo informe o nome físico do arquivo HMTL que será criado na publicação. d. Caso esta página seja a principal da aplicação marque a opção HomePage. e. Para criar um hiperlink na página que acesse a página principal marque a opção Link para HomePage. Cada página está associada a um ou mais contextos. Para selecionar quais contextos estão na página clique em Contextos da Página e siga os seguintes passos: a. Utilize o botão incluir para cadastrar um novo Contexto na página; b. Selecione o contexto desejado e informe o Título da página. Este título será mostrada na aplicação final. c. A opção Link para Contexto indica se o contexto será apresentado em uma outra página acessada através de um hiperlink. Observe que o 12
padrão é o contexto ser apresentado sempre na página a que está associado. d. Deve ser informado qual a página de destino, no momento que o usuário clicar no hiperlink do contexto. e. O relacionamento deve ser informado para restringir as instâncias da classe. Por exemplo ao associar um contexto de índice uma página que contenha uma classe, normalmente é necessário apresentar os itens do índice que estão relacionados a classe escolhida. f. É possível combinar as condições do contexto possibilitando utilizar expressões lógicas mais complexas. Para isto basta inserir as condições e os operadores desejados. g. Confirme a gravação clicando no botão de confirmação. Para incluir os relacionamentos entre as páginas acesse os Relacionamentos da aplicação e siga os seguintes passos: a. Utilize o botão incluir para cadastrar um novo Relacionamento; 13
b. Selecione a página de origem e a página de destino. Observe que os relacionamentos entre as páginas são sempre unidirecionais. c. Confirme a gravação clicando no botão de confirmação. 2.5 PUBLICAÇÃO Para efetuar a publicação é necessário primeiro instanciar as classes antes de gerar a aplicação Web. 2.5.1 Hiperbase Este módulo permite incluir as instâncias das classes. Para isto basta escolher a classe desejada e clicar no botão Editar Instâncias. 14
A seguir é apresentada a tela para inclusão, alteração e/ou remoção de instâncias da classe. As operações seguem o mesmo padrão apresentado em todas as telas do WebScharts. Para uma melhor apresentação na WebApp os nomes dos atributos podem ser mapeados em nomes mais adequados. Isto é realizado através da operação de mapear atributos. A tela abaixo apresenta um exemplo dos mapeamentos dos atributos da Classe Estilo. 15
2.5.2 Modelo de Statechart Este módulo ainda não foi implementado. Foi previsto como extensão futura do trabalho. 2.5.3 Gerador da WebApp A geração da aplicação é bastante simples, bastando clicar no botão Gerar Aplicação Web da tela abaixo. O WebScharts gera os arquivos da aplicação na pasta com o nome da mesma abaixo do diretório WebApp. Para acesso a WebApp basta clicar no botão Apresentar aplicação Web na tela acima. Será executado o Browser default com a url de acesso a página principal. Por exemplo: http://localhost/webscharts/galeria_de_arte/index.html Observe que deve ser criado um Alias no servidor Web para acesso 16
ao diretório onde se encontram as WebApps. No caso do Apache inclua a seguinte configuração no arquivo httpd.conf: Alias /webscharts/ "C:/Arquivos de Programas/webscharts/webapp/" <Directory "C:/Arquivos de Programas/webscharts/webapp"> Options Indexes MultiViews AllowOverride None Order allow,deny Allow from all </Directory> Note que a pasta webapp pode encontrar-se em outro local conforme foi realizada a instalação do WebScharts. 3. CONCLUSÃO Este documento apresentou os passos necessários para o desenvolvimento de uma aplicação. É importante conhecer o método HMBS/M com as extensões criadas para a utilização da ferramenta. REFERÊNCIAS BIBLIOGRÁFICAS Borland Software Corporation. Borland Delphi 6. Scotts Valley, CA, 1994-2002. Ferramenta de desenvolvimento. BRITO, L. S. F. WebScharts: Uma Ferramenta de Desenvolvimento de Aplicações Web baseada no HMBS/M. Campo Grande-MS, 2003, Dissertação de Mestrado Departamento de Computação e Estatística (DCT-UFMS). (em desenvolvimento) CARVALHO, M. R. C. HMBS/M - Um Método orientado a objetos para o projeto e o desenvolvimento de aplicações hipermídia. São Carlos-SP, 1998, Dissertação de Mestrado - Instituto de Ciências Matemáticas e de Computação (ICMC-USP). HAREL, D. Statecharts: a visual formalism for complex systems. Science of Computer Programming, v. 8 (3), p. 231-274, jul. 1987. 17
TURINE, M. A. S. HMBS - Um Modelo Baseado em Statecharts para a Especificação Formal de Hiperdocumentos. São Carlos-SP, 1998. Tese de Doutorado, Instituto de Física de São Carlos (IFSC). 18