Sistemas para internet e software livre Metodologia de modelagem de aplicações WEB Image: FreeDigitalPhotos.net WAE - Web Application Extension ● Domínio: Elementos de aplicação WEB ○ Páginas Web ○ Scripts ○ Formulários ○ Applets e ActiveX ● Motivação ○ Aplicações WEB complexas. Necessidade de gerenciamento. ○ A página WEB (ASP / JSP / Servlet / CGI / ISAPI / NSAPI ou HTML) é ○ ○ um componente importante da arquitetura de uma aplicação web, e precisa ser modelado como tal. UML é a linguagem padrão de modelagem de sistemas de software, especialmente de sistemas orientados a objeto. A maioria das tecnologias de aplicações web, não são inerentemente orientado a objeto. WAE - Web Application Extension ● Descrição ○ Estereótipos: São utilizados para classificar novos elementos, ou seja, estendem o vocabulário da UML permitindo a criação de novos tipos de blocos de construção, derivados dos já existentes, mas específicos ao seu problema. Normalmente são representados como uma seqüência de caracteres entre os símbolos << >>. ○ Tag: Estende as propriedades de um bloco de construção da UML, permitindo a criação de novas informações na especificação do elemento. Um valor com tag é representado em um diagrama como uma seqüência de caracteres delimitada por colchetes []. ○ Restrições: Estendem a semântica de um bloco em construção da UML, permitindo adicionar novas regras ou modificar as existentes. WAE - Web Application Extension ● Estereótipos ○ Nome: <<Server Page>> ○ Tipo: Classe ○ Descrição: Uma página servidor representa uma página Web que têm scripts executados pelo servidor. Esses scripts interagem com recursos do servidor tais como: banco de dados, lógica de negócios e sistemas externos. ○ Restrições: As páginas servidor podem ter relação apenas com objetos no servidor. ○ Tag: Pode-se definir o script utilizado (JavaScript, VBScript, Perl...) WAE - Web Application Extension ● Estereótipos ○ Nome: <<Client Page>> ○ Tipo: Classe ○ Descrição: Uma página cliente representa uma página web formatada em HTML com uma mistura de dados de apresentação e lógica. É montada no browser cliente e pode conter scripts que são interpretados pelo browser. As funções da página cliente mapeiam para funções em tags na página. Essas páginas podem ter associações com outras páginas cliente e páginas servidor. ○ ○ Restrições: Nenhuma. Tag: ■ ■ ■ TitleTag: Título da página como exibido pelo browser. BaseTag: URL básica para desmarcar referências de URLs relativos. BodyTag: Conjunto de atributos para a tag <<body>>, que define o segundo plano e atributos de texto padrão. WAE - Web Application Extension ● Estereótipos ○ Nome: <<Form>> ○ Tipo: Classe ○ Descrição: Um formulário representa uma coleção de campos de entrada que são parte da página cliente. Um formulário não tem operações. Quaisquer operações que interajam com o formulário, serão propriedades da página cliente que o contêm. ○ ○ Restrições: Nenhuma. Tag: Get ou Post: Usados para submeter dados para ação na URL. WAE - Web Application Extension ● Estereótipos ○ Nome: <<Frame Set>> ○ Tipo: Classe ○ Descrição: Abstrai uma página HTML que contém um elemento do conjunto de quadros. Essa página divide a interface com o usuário em quadros ou regiões retangulares, onde cada quadro é representado como uma página cliente separada. ○ Restrições: Deve conter pelo menos uma classe <<client page>> ou <<target>>. ○ Tag: ■ ■ Linhas: Número de linhas de quadros. Colunas: Número de colunas de quadros. WAE - Web Application Extension ● Estereótipos ○ Nome: <<Target>> ○ Tipo: Classe ○ Descrição: Um quadro nomeado específico em um conjunto de quadros. É o alvo de hyperlinks, uma classe de link de destino. ○ Restrições: O nome do alvo deve ser único em cada cliente do sistema. ○ Tag: ■ ■ Linhas: Número da linhas do quadros do alvo. Colunas: Número da colunas do quadros alvo. WAE - Web Application Extension ● Estereótipos ○ Nome: <<JavaScript>> ○ Tipo: Classe ○ Descrição: No browser é possível simular objetos definidos pelo usuário com funções JavaScript. Instâncias de objetos Java script existem somente no contexto de páginas cliente. ○ ○ Restrições: Nenhuma. Tag: Nehuma. WAE - Web Application Extension ● Estereótipos ○ Nome: <<ClientScript>> ○ Tipo: Classe ○ Descrição: Objeto Java Script que possui um protótipo definido e normalmente define diversas variáveis membros e funções. ○ ○ Restrições: Nenhuma. Tag: Nenhuma. WAE - Web Application Extension ● Estereótipos ○ Nome: <<Static Page>> ○ Tipo: Componente ○ Descrição: A página estática não executa nada que o lado do servidor execute e é produzida diretamente do sistema de arquivos para o cliente. ○ Restrições: Não pode executar componentes lógicos que são executados no servidor (página servidor). Só podem implementar páginas cliente. ○ Tag: Localização no servidor. WAE - Web Application Extension ● Estereótipos ○ Nome: <<Link>> ○ Tipo: Associação ○ Descrição: Um link é um ponteiro da página cliente para uma outra página Web. No diagrama de classes, um link é uma associação entre uma página cliente e outra página cliente ou uma página servidor. ○ ○ Restrições: Nenhuma. Tag: Contém parâmetros passados juntamente com a solicitação http. É formatado como uma sequência de caracteres podendo conter codificações de implementações específicas. WAE - Web Application Extension ● Estereótipos ○ Nome: <<Target Link>> ○ Tipo: Associação ○ Descrição: Similar à associação link, um targeted link é um link cuja página associada é montada em um outro target. ○ ○ Restrições: Nenhuma. Tag: ■ Parâmetros: Lista de nomes de parâmetros que são passados junto com a requisição para a página linkada. ■ Nome do Target: o nome do target que o link desta página aponta para ser montada nela. WAE - Web Application Extension ● Estereótipos ○ Nome: <<Frame Content>> ○ Tipo: Associação ○ Descrição: Agregação que expressa uma contenção do frame de outra página ou target. Pode apontar para outro frameset, indicando frames aninhados. ○ ○ Restrições: Nenhuma. Tag: ■ Row e Col: um inteiro indicando a linha ou coluna específica do frame no frameset que a página associada ou target pertencem. WAE - Web Application Extension ● Estereótipos ○ Nome: <<Submit>> ○ Tipo: Associação ○ Descrição: Associação situada entre um formulário e uma página servidor. Os formulários submetem os valores de seus campos para o processamento no servidor, através de páginas servidor. ○ ○ Restrições: Nenhuma. Tag: Nenhuma. WAE - Web Application Extension ● Estereótipos ○ Nome: <<Build>> ○ Tipo: Associação ○ Descrição: Relação que liga páginas cliente e páginas servidor. Identifica qual página servidor é responsável pela criação da página cliente. ○ ○ Restrições: Nenhuma. Tag: Nenhuma. WAE - Web Application Extension ● Estereótipos ○ Nome: <<Redirect>> ○ Tipo: Associação ○ Descrição: Relacionamento direcional entre uma página do cliente ou servidor e outra página. Indica um comando ao cliente para solicitar outro recurso. ○ ○ Restrições: Nenhuma. Tag: Nenhuma. WAE - Web Application Extension ● Estereótipos ○ Nome: <<Object>> ○ Tipo: Associação ○ Descrição: Relacionamento de confinamento entre uma página do cliente e outra classe lógica (applet, controle ActiveX). ○ ○ Restrições: Nenhuma. Tag: Nenhuma. WAE - Web Application Extension ● Estereótipos ○ Nome: <<Include>> ○ Tipo: Associação ○ Descrição: Associação direcional de uma página cliente para outra página servidor ou uma página cliente. Durante a montagem da página (em tempo de execução) essa associação indica que a página incluída é processada (dinâmica) e que seus conteúdos ou subprodutos são usados pela página pai. ○ ○ Restrições: Nenhuma. Tag: Nenhuma. WAE - Web Application Extension ● Principais combinações de estereótipos DE Página Cliente Servidor de Páginas Conjunto de Quadros (Frameset) Alvo (Target) Formulário Página Cliente <<link>> <<redirect>> <<link>> <<redirect>> <<link>> <<redirect>> Dependência Agregação Servidor de Páginas <<redirect>> <<build>> <<redirect>> <<redirect>> <<build>> Não tem Não tem Conjunto de Quadros (Frameset) <<frame content>> Não tem <<frame content>> <<frame content>> Não tem Alvo (Target) Não tem Não tem Não tem Não tem Não tem Agregação <<submit>> Não tem Não tem Não tem PARA Formul ário WAE - Web Application Extension ● Exemplo de estereótipos Imagem: jim conallen Imagem: jim conallen WAE - Web Application Extension ● Exemplo de Frames Imagem: jim conallen Imagem: Arilo Claudio dias Neto WAE - Web Application Extension ● Exemplo de Forms e Submits Imagem: jim conallen