DESENVOLVENDO APLICAÇÕES WEB UTILIZANDO A FERRAMENTA WEBSCHARTS

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.

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

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.

4.

Defina a pasta do menu iniciar onde será criado os ícones do programa e clique no botão avançar.

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

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.

2.2 PROJETOS

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

Sair Registro

anterior Próximo registro Primeiro

registro Último registro

Inserir Editar Remover

Imprimir Confirmar Cancelar

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

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.

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 ( )

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.

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.

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;

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.

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

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:

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.

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.

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

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

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