1 Extenses da UML para Engenharia de Websites

Os padres arquitetnicos de aplicaes web envolvem pginas web que so a interface com o usurio, as pginas web conectam o navegador ao restante do sistema. Sendo um dos principais usos de modelagem capturar todos os elementos de um sistema e suas colaboraes para que respondam perguntas sobre o mesmo, vital capturar pginas web como elementos de primeira classe no modelo e represent-las ao lado das classes e componentes que compem o restante do modelo [CON00]. O problema de representar sistemas web surge quando uma pgina web possui scripts a serem executados no servidor e parte no cliente. A notao da UML no suficiente para expressar as sutilezas de pginas web colocadas em scripts como objetos, surgiu ento a necessidade de modificar a UML. Para que a UML pudesse se tornar flexvel, seus criadores definiram mecanismos de extenso, so eles: Esteretipos: so utilizados para classificar novos elementos, ou seja, estendem o vocabulrio da UML permitindo a criao de novos tipos de blocos de construo, derivados dos j existentes, mas especficos ao seu problema. Normalmente so representados como uma seqncia de caracteres entre os smbolos << >>. Valor com Tag: estende as propriedades de um bloco de construo da UML, permitindo a criao de novas informaes na especificao do elemento. Um valor com tag representado em um diagrama como uma seqncia de caracteres delimitada por colchetes []. Restries: estendem a semntica de um bloco em construo da UML, permitindo adicionar novas regras ou modificar as existentes. A associao desses trs mecanismos de extensibilidade permite dar forma e desenvolver a UML de acordo com as necessidades do projeto. A WAE (Web Application Extension), proposta por Connalen, uma extenso da notao UML com semnticas adicionais e restries a fim de permitir a modelagem arquitetural de elementos web especficos. O que esta extenso da UML faz na realidade

a captura, desenvolvimento e a anlise de como ser a execuo das regras de negcio nas pginas web. O objetivo principal desta extenso modelar pginas web, relacionamento entre as mesmas, rotas de navegao, scripts no lado do cliente e gerao de pginas no lado do servidor no nvel apropriado de abstrao e detalhe, permitindo o relacionamento entre os elementos especficos da web e os demais elementos do sistema. Veremos a seguir uma descrio dos principais elementos dessa extenso da UML e posteriormente os elementos especficos para a construo de uma aplicao web.

1.1 Pgina Web

A pgina web necessita ser modelada, pois um dos artefatos primrios de uma aplicao web. Uma pgina representada no modelo atravs de duas classes distintas <<server page>> e <<client page>>. Qualquer pgina em uma aplicao web que tenha funcionalidade tanto no cliente quanto no servidor pode ser representada no modelo como duas classes separadas, mesmo que suas implementaes estejam em um mesmo arquivo ou componente. Assim sendo, mtodos servidores e variveis do escopo da pgina so contidos em uma classe do modelo, estereotipada por <<server page>>. Os mtodos da classe representam os scripts do servidor, sub-rotinas e funes. No fazem parte da pgina servidor os scripts do lado cliente e a formatao da interface grfica. Uma pgina servidor pode ter relacionamentos com componentes existentes no servidor, como objetos de negcio, bancos de dados, sistemas externos e assim por diante. As pginas cliente so representadas no modelo como <<client page>>. Os atributos da pgina cliente so variveis do escopo da pgina e funes que executam no browser cliente. As pginas cliente so associadas com componentes como Java Applets e controles ActiveX.

Existe um relacionamento fundamental entre os esteretipos servidor e cliente de uma pgina web. Uma pgina servidor geralmente constri o resultado em uma pgina cliente. Esse relacionamento representado no modelo atravs de uma associao estereotipada por <<build>>.
<<Server Page>>
<<build>>

<<Client Page>>

Figura 1 Construo de uma pgina cliente. Existe a possibilidade, em algumas tecnologias de desenvolvimento web, de uma pgina servidora redirecionar a requisio de um processamento para outra pgina servidor, esse relacionamento representado como uma associao estereotipada por <<redirect>>. O redirecionamento uma caracterstica muito til, pois permite o reuso em aplicaes web.
<<Server Page>>
<<redirect>>

<<Server Page>>

Figura 2 Redirecionamento de processamento entre pginas servidor. Outro relacionamento importante o link, estereotipado por <<link>>, utilizado para representar a associao entre pginas cliente e outras pginas web cliente. A figura abaixo apresenta um exemplo de relacionamento entre pginas web.
<<Client Page>>
<<link>>

<<Client Page>>

Figura 3 Associao <<link>> entre pginas cliente.

1.2 Formulrios (form)

Os formulrios contm atributos adicionais que podem no ser apropriados no contexto da pgina cliente inteira e possvel ter mltiplos formulrios em uma nica pgina cliente. Os formulrios so representados no modelo atravs de uma classe estereotipada por <<form>>. Uma classe <<form>> composta pelos campos de entrada que so parte de uma pgina cliente. Seus atributos representam: caixa de entrada, reas de texto, botes de

rdio, caixas de seleo e campos ocultos. Essa classe no possui operaes, qualquer operao que interaja com o formulrio seria uma propriedade da pgina que contenha o formulrio. O relacionamento utilizado para representar qual pgina contm o formulrio a associao do tipo agregao entre as classes envolvidas. Outro relacionamento necessrio para identificar qual pgina web processa os dados submetidos por um formulrio, esse relacionamento representado atravs de uma associao estereotipada <<submit>>. A figura abaixo mostra os relacionamentos citados.
<<Client Page>>
Variveis locais JavaScript Java Script Functions()

<<Server Page>>

Atributos do servidor Server operations()

<<Form>>
Campos de entrada
<<submit>>

Figura 3 Uso de formulrio em aplicaes web.

1.2 Quadros (frames)

Os quadros permitem que uma janela web seja dividida em vrias subreas retangulares (panels). Em aplicaes web os quadros geralmente so utilizados para dividir a janela em um painel de navegao e um painel de contedo. O painel de navegao exibe um ndice de todas as pginas do site e a cada vez que o usurio clica nesse painel, o painel de contedo preenchido. Um conjunto de quadros, <<frameset>>, um tipo especial de pgina web que divide sua rea de visualizao em vrios painis, cada um contendo sua prpria pgina web. Um conjunto de quadros define uma grade de quadros, cada um desses quadros so um alvo potencial. Um alvo, <<target>>, um quadro nomeado em um conjunto de quadros para o quais outras pginas do cliente podem solicitar pginas web.

O relacionamento entre pginas cliente e um alvo feita atravs de uma associao estereotipada <<target link>>.

Figura 4 Metamodelo conceitual para os elementos do conjunto de quadros UML.

1.4 Elementos especficos para a construo de aplicaes web

A WAE define um conjunto de esteretipos, valores com tag e restries que podem ser aplicados a elementos dos diagramas de UML, com o propsito de modelar caractersticas especficas de aplicaes web. Veremos a seguir a WAE apresentada em detalhes, sero descritos seus esteretipos e a que elementos so aplicveis. Pgina Servidor
<<server page>> Tipo no Metamodelo Descrio Classe Uma pgina servidor representa uma pgina Web que tm scripts executados pelo servidor. Esses scripts interagem com recursos do servidor tais como: banco de dados, lgica de negcios e sistemas externos.

cone

Restries Valores com Tag

As pginas servidor podem ter relao apenas com objetos no servidor. Nenhum.

Pgina cliente
<<client page>> Tipo no Metamodelo Descrio Classe Uma pgina cliente representa uma pgina web formatada em HTML com uma mistura de dados de apresentao e lgica. montada no browser cliente e pode conter scripts que so interpretados pelo browser. As funes da pgina cliente mapeiam para funes em tags na pgina. Essas pginas podem ter associaes com outras pginas cliente e pginas servidor.

cone

Restries Valores com Tag

Nenhuma TitleTag: o ttulo da pgina como exibido pelo browser. BaseTag: a URL bsica para desmarcar referncias de URLs relativos. BodyTag: o conjunto de atributos para a tag <<body>>, que define o segundo plano e atributos de texto padro.

Formulrio Html
<<form>>
Tipo no Metamodelo Descrio Classe Um formulrio representa uma coleo de campos de entrada que so parte da pgina cliente. Um formulrio no tem operaes, quaisquer operaes que interajam com o formulrio, sero propriedades da pgina cliente que o contm.

cone

Restries Valores com Tags

Nenhuma Get ou Post: usados para submeter dados para ao na URL.

Conjunto de quadros <<frameset> >

Tipo no Metamodelo Descrio Classe Abstrai uma pgina HTML que contm um elemento do conjunto de quadros. Essa pgina divide a interface com o usurio em quadros ou regies retangulares, onde cada quadro representado como uma pgina cliente separada.

cone

Restries Valores com Tags

Deve conter pelo menos uma classe <<client page>> ou <<target>>. Linhas: nmero de linhas de quadros. Colunas: nmero de colunas de quadros.

Alvo
<<target>>
Tipo no Metamodelo Descrio cone Classe Um quadro nomeado especfico em um conjunto de quadros. o alvo de hyperlinks, uma classe de link de destino.

Restries Valores com Tags

Nenhuma. Linhas: nmero da linha em que esse quadro est localizado. Colunas: nmero da coluna em que esse quadro est localizado.

JavaScript Object
Tipo no Metamodelo Descrio cone Classe No browser possvel simular objetos definidos pelo usurio com funes JavaScript. Instncias de objetos Java script existem somente no contexto de pginas cliente.

Restries Valores com Tag

Nenhuma. Nenhum.

Objeto de script do cliente

<<Client Script Object>> Tipo no Metamodelo Descrio cone Classe Objeto Java Script que possui um prottipo definido e normalmente define diversas variveis membros e funes.
f(){ }

Restries Valores com Tag

Nenhuma. Nenhum.

Biblioteca de scripts
<<script library>>
Tipo no Metamodelo Classe

Descrio cone

Define diversas funes JavaScript e variveis.

Restries Valores com Tag

Nenhuma. Nenhum.

Biblioteca de scripts
<<script library>>
Tipo no Metamodelo Descrio cone Componente Realiza uma ou mais classes <<script library>> na viso lgica.

Restries Valores com Tag

Nenhuma. Nenhum.

Pgina Esttica
<<static page>> Tipo no Metamodelo Descrio cone Componente A pgina esttica no executa nada que o lado do servidor execute e produzida diretamente do sistema de arquivos para o cliente.

Restries Valores com Tag

No pode executar componentes lgicos que so executados no servidor (pgina servidor). S podem implementar pginas cliente. Nenhum.

Pgina Dinmica
<<dinamic page>>
Tipo no Metamodelo Descrio Componente Recurso que pode ser solicitado pelo browser do cliente. Quando solicitado ou apontado atravs de um relacionamento <<forward>>, acontece o processamento do lado do servidor. Os resultados desse processo podem alterar o estado do servidor e ser usado para construir algo do HTML que transmitido ao cliente solicitante. As pginas dinmicas podem aceitar a entrada de informaes do usurio enviada atravs de

formulrios. cone

Restries Valores com Tag

Deve implementar uma nica pgina do servidor. Nenhum.

Raiz Fsica
<<physical root>>
Tipo no Metamodelo Descrio Pacote de componentes Uma abstrao de uma hierarquia de arquivos que contm recursos disponveis solicitao. Os clientes solicitam arquivos estticos ou dinmicos diretamente dessa hierarquia.

cone

Restries Valores com Tag

Nenhuma. Nome do Host: nome do host do servidor web. Contexto: o contexto da aplicao.

Raiz Virtual
<<virtual root>>
Tipo no Metamodelo Descrio Pacote Contm componentes web em uma hierarquia do sistema de arquivos que visvel aos clientes. A estrutura de diretrio para solicitar recursos corresponde estrutura de diretrio fsica..

cone

Restries Valores com Tag

Nenhuma. Host (opcional): nome de host que pode ser usado para determinar elementos contidos em URLs totalmente qualificadas. Porta (opcional): nmero de porta usado em resoluo de URL.

Recurso HTTP
<<http resourse>>
Tipo no Metamodelo Descrio Componente Proxy para um ou mais componentes que mapeiam para um URL disponvel solicitao no sistema. Cada elemento do recurso http representa um URL vlido que pode ser solicitado e desempenhado pelo sistema.

cone

Restries Valores com Tag

Nenhuma. Filtro (opcional): expresso regular que usada para corresponder a um conjunto de URLs.

Link
<<link>>
Tipo no Metamodelo Descrio Associao Um link um ponteiro da pgina cliente para uma outra pgina Web. No diagrama de classes, um link uma associao entre uma pgina cliente e outra pgina cliente ou uma pgina servidor. Nenhum. Nenhuma. Parameters: contm parmetros passados juntamente com a solicitao http. formatado como uma seqncia de caracteres podendo conter codificaes de implementaes especficas.

cone Restries Valores com Tag

Targeted Link
<<target link>>
Tipo no Metamodelo Descrio cone Associao Similar associao link, um targeted link um link cuja pgina associada montada em um outro target.

Restries Valores com Tag

Nenhuma. Parmetros: uma lista de nomes de parmetros que so passados junto com a requisio para a pgina linkada. Nome do Target: o nome do target que o link desta pgina aponta para ser montada nela.

Frame Content <<frame content>>

Tipo no Metamodelo Descrio cone Restries Valores com Tag Associao Agregao que expressa uma conteno do frame de outra pgina ou target. Pode apontar para outro frameset, indicando frames aninhados. Nenhum. Nenhuma. Row e Col: um inteiro indicando a linha ou coluna especfica do frame no frameset que a pgina associada ou target pertencem.

Submit
<<submit>>
Tipo no Metamodelo Descrio Associao Associao situada entre um formulrio e uma pgina servidor. Os formulrios submetem os valores de seus campos para o processamento no servidor, atravs de pginas servidor. Nenhum. Nenhuma. Nenhum.

cone Restries Valores com Tag

Build
<<build>>
Tipo no Metamodelo Descrio cone Restries Valores com Tag Associao Relao que liga pginas cliente e pginas servidor. Identifica qual pgina servidor responsvel pela criao da pgina cliente. Nenhum. Nenhuma. Nenhum.

Redirect
<<redirect>>
Tipo no Metamodelo Descrio cone Restries Valores com Tag Associao Relacionamento direcional entre uma pgina do cliente ou servidor e outra pgina. Indica um comando ao cliente para solicitar outro recurso. Nenhum. Nenhuma. Nenhum.

Forward
<<forward>>
Tipo no Metamodelo Descrio Associao Relacionamento direcional entre uma pgina do servidor e outra pgina do servidor ou do cliente. Representa a delegao de processamento de uma solicitao do cliente de um recurso para a pgina do servidor. Nenhum. Nenhuma. Nenhum.

cone Restries Valores com Tag

Object
<<object>>
Tipo no Metamodelo Descrio Associao Relacionamento de confinamento entre uma pgina do cliente e outra classe lgica (applet, controle ActiveX).

cone Restries Valores com Tag

Nenhum. Nenhuma. Nenhum.

Include
<<include>>
Tipo no Metamodelo Descrio Associao Associao direcional de uma pgina cliente para outra pgina servidor ou uma pgina cliente. Durante a montagem da pgina (em tempo de execuo) essa associao indica que a pgina includa processada (dinmica) e que seus contedos ou subprodutos so usados pela pgina pai. Nenhum. Nenhuma. Nenhum.

cone Restries Valores com Tag

As principais combinaes entre esteretipos e relacionamentos vlidos na Wae UML podem ser vistas na tabela abaixo. Tabela II Combinao de Esteretipos com relacionamentos vlidos. Para: De: Pgina Cliente <<link>> <<redirect>> <<redirect>> <<build>> <<frame content>> No tem Agregao Servidor de Pginas <<link>> <<redirect>> <<redirect>> No tem No tem <<submit>> Conjunto de Quadros (Frameset) <<link>> <<redirect>> <<redirect>> <<build>> <<frame content>> No tem No tem Alvo (Target) Dependncia No tem <<frame content>> No tem No tem Formulrio Agregao No tem No tem No tem No tem

Pgina Cliente Servidor de Pginas Conjunto de Quadros (Frameset) Alvo (Target) Formulrio