10 Modelagem de Interface

Modelagem de Interface
Prof. Raul Sidnei Wazlawick

UFSC-CTC-INE

2010

Fonte: Anlise e Projeto de Sistemas de Informao
Orientados a Objetos, 2 Edio, Elsevier, 2010.
Projeto da camada de
interface
Depende de alguns artefatos da anlise,
especificamente dos casos de uso
expandidos ou diagramas de seqncia
de sistema.
Ser necessrio construir um projeto de
interfaces que permitam que as
operaes especificadas possam ser
executadas por um usurio que estiver
seguindo os fluxos.
Tambm se deve ter em mente os
requisitos no-funcionais e
suplementares de interface que
eventualmente tenham sido levantados.

WebML, Web Modeling
Language
uma linguagem de modelagem para
aplicaes Web complexas,
especialmente aquelas que fazem uso
intensivo de dados, como sistemas de
informaes acessveis via Web.

www.webml.org
WebML Unidades Pages Organizao Padres Operaes DSS
Modelos WebML
Modelo estrutural
trata da organizao dos dados.
Modelo de derivao
definio de dados que podem ser calculados a
partir de outros.
Modelo de composio
definio de pginas Web como um agregado de
unidades bsicas e sub-pginas.
Modelo de navegao
links entre as pginas e unidades de publicao.
Modelo de apresentao
posicionamento de unidades em pginas e sua
aparncia.

Units
As unidades de publicao de
informao ou simplesmente units so
os elementos bsicos de uma
especificao WebML.
As units podem ser diretamente
associadas a classes do modelo
conceitual e, por conseguinte, s suas
instncias.

Tipos de Units
Data units
que gerenciam informao sobre um nico
objeto.
Multidata units
que gerenciam informao sobre uma coleo
de objetos.
Index units
que listam atributos de uma coleo de objetos.
Scroller units
que permitem a operao tpica de browse sobre
uma coleo de objetos.
Entry units
que permitem entrada de dados.

Data Unit
Propriedades:
O nome da unit, conforme especificado pelo
projetista.
A fonte dos dados, usualmente o nome de
uma classe do DCP.
Um seletor (opcional), que define quais
instncias da classe so gerenciadas pela
unit. O seletor deve ser especificado como
uma expresso lgica (sugere-se usar OCL).
O conjunto de atributos includos na unit.
Usa-se o smbolo * caso se queira incluir
todos os atributos da classe na unit.

Definio textual e grfica
DataUnit DLivro (
source Livro;
selector isbn = 12345;
attributes *
)
Seletor composto
DataUnit DLivro (
source Livro;
selector
titulo = Anlise e Projeto,
autor = Raul;
attributes *
)
Possvel renderizao
Usando menos atributos
DataUnit DLivro (
source Livro;
selector isbn = 12345;
attributes titulo, autor;
)
Seletor disjuntivo
DataUnit DLivro (
source Livro;
selector autor = Raul | Rui;
attributes *
)
Multidata units
As multidata units gerenciam colees
de instncias de uma nica classe.
Alm das propriedades j
apresentadas para data units elas
ainda acrescentam uma nova
propriedade opcional que define quais
os atributos usados na ordenao das
instncias.

Exemplo
MultidataUnit MLivros (
source Livro;
selector autor = Raul;
attributes isbn, titulo, autor;
orderBy titulo;
)
Index units
As index units apresentam um ou mais
atributos de uma classe na forma de
uma lista de todas as instncias que
satisfizerem o seletor opcional.
Enquanto as multidata units so usadas
normalmente para editar vrios objetos
em uma mesma pgina, as index units
funcionam mais como uma lista para que
se selecione um ou mais objetos.
As propriedades so exatamente as
mesmas das multidata units.

Exemplo
IndexUnit ILivros (
source Livro;
attributes titulo;
)
Variaes de Index Unit
Multi-choice index unit ou lista de
escolha mltipla.
Hierarchical index unit ou lista
hierrquica.

Multi-choice index unit
IndexUnit MCILivros multi-choice (
source Livro;
attributes titulo;
)
Hierarchical index unit
IndexUnit HIlivros hierarchical (
source Livro;
attributes titulo
NEST Capitulo (
selector capitulos;
attributes numero, nome;
orderBy numero
)
)
Possvel renderizao
Uma HIU com detalhe filtrado
IndexUnit HILivros hierarchical (
source Livro;
attributes titulo
NEST Capitulo (
selector capitulos, numero <= 5;
attributes numero, nome;
orderBy numero
)
)
Recursive hierarchical index
unit
IndexUnit HIUnidadesAdm hierarchical(
source UnidadeAdm;
attributes nome;
RECURSIVE NEST UnidadeAdm (
selector subunidades;
attributes nome;
)
)
Scroller unit
So usadas em conjunto com outras
units.
Elas renderizam controles especficos
para avanar para a prxima
instncia, retornar, avanar ao fim e
retornar ao incio da srie, alm de
mostrar a posio do elemento atual
em relao srie completa.

Block factor
Alm do nome e das propriedades
source, selector e orderBy, j
presentes nas estruturas anteriores, a
scroller unit possui a propriedade
blockFactor, que corresponde ao
nmero de instncias que so
avanadas cada vez que a operao
scroll for realizada.
O valor default do blockFactor 1.

Exemplo
ScrollerUnit SLivros (
source Livro;
blockFactor 1;
orderBy titulo
)
Na renderizao no
aparecem os atributos do
livro porque para isso seria
necessrio que a scroller
unit estivesse associada a
uma data unit.
Entry unit
A entry unit, usada para entrada de
dados baseada em forms.
bastante til para criao de novas
instncias de objetos, e tambm para
fornecer parmetros para pesquisas,
consultas ou operaes.
Alm de seu nome tem apenas uma
lista de campos.
Ela no diretamente ligada a uma
source, como as demais units.

Campos
Os campos ou fields de uma entry unit tm
as seguintes propriedades:
Nome
Tipo de dados do campo
string, inteiro, data, moeda, etc..
Valor inicial
opcional.
Modificabilidade
define se o valor inicial do campo pode ser ou no
modificado (o default que qualquer campo seja
modificvel).
Predicado de validade
consiste em uma expresso booleana que define quais
valores so admitidos.

Predicado de validade
Se no for definido um predicado de
validade ento todos os valores entrados
so vlidos.
Os predicados so uma das formas de
implementar a checagem de
precondies sintticas, em nvel de
interface, conforme explicado na seo
8.1.1.
Alm de expresses comparativas com
os sinais <, >, = e <>, possvel utilizar
a expresso notNull para indicar que um
determinado campo no pode ser
deixado de preencher.

Exemplo
EntryUnit InpLivro ( fields
ISBN String notNull;
Ttulo String notNull;
Autor String;
NrPaginas Integer, nrPaginas > 10;
Editora String;
Preo Money;
Estoque Integer;
)
InpLivro
Pages
Pginas so os elementos de
interface efetivamente acessados pelo
usurio.
Tipicamente uma pgina contm uma
ou mais units e possivelmente sub-
pginas.
Uma pgina em WebML
representada por um retngulo
simples, possivelmente com um nome
e opcionalmente um conjunto de units
e sub-pginas includas.

Exemplo
Page Principal (
units ILivros, IPessoas
)
Links
Um link uma conexo orientada entre
duas pginas ou units.
Links podem ser usados no apenas
para definir possibilidades de navegao
entre pginas, mas tambm para ligar
units entre si, definindo dependncias e
relaes de causa e efeito.
Por exemplo, selecionar um elemento
em uma index unit pode fazer aparecer a
descrio do objeto em uma data unit
associada por um link index unit.

Link Parameter
Um parmetro de link uma
especificao de uma informao que
transmitida da origem ao destino do
link.

Link Selector
Algumas units anteriormente vistas
podiam ter seletores (selector).
Um link selector um valor de seletor
que faz referncia a um link
parameter.

Exemplo
Se a index unit de lista de livros envia
um ISBN para a data unit de Livro,
ento a data unit ter um seletor
baseado no link.

Link ILivrosParaDLivro (
from ILivros to DLivro;
parameters livroSelecionado : Livro.isbn
)
Tipos de link
Interpginas
ligam duas pginas diferentes.
Intrapginas
ligam units dentro da mesma pgina.
Contextuais
transmitem informao, na forma de
parmetros de link, da origem para o
destino.
No contextuais
no transmitem informao, mas apenas
indicam navegao.

Exemplo
Link no contextual interpginas
Link com mltiplos valores
Link MCILivrosParaMLivros (
from MCILivros to MLivros;
parameters selecoes : {Livro.isbn}
)
Um link contextual pode ser usado tambm para associar uma entry
unit a uma data ou multidata unit de forma que a entry unit funcione
como um campo de pesquisa ou filtragem para os dados da data ou
multidata unit
EntryUnit Pesquisa ( fields
campoPesquisa String
)
Link PesquisaParaMLivros (
from Pesquisa to MLivros;
parameters palavraChave : campoPesquisa
)
Link de transporte
No define navegao, mas apenas a
dependncia entre duas units.
Graficamente so representados por
setas tracejadas e textualmente,
adiciona-se o termo transport
definio do link.
Exemplo
Link ULivroParaICapitulos transport (
from ULivro to ICapitulos
)
Exibir em uma mesma janela dados de um
livro e a lista de seus captulos
Link automtico
Um link automtico navegado
independentemente da interveno do
usurio.
Ele definido textualmente pela adio
do termo automatic definio do link
e graficamente com um quadrado com a
letra A inscrita na seta que representa
o link.
Uma das aplicaes do link automtico
fazer a ligao entre uma scroll unit e
outras units.
Exemplo
Organizao de hipertexto
As units, links e sua organizao em
pginas constituem a modelagem de
interface em seus aspectos mais locais.
Porm, tambm necessrio realizar
uma modelagem mais ampla da
interface, indicando grupos de pginas
relacionadas, formas de navegao
entre elas, regies, etc.
Esse tipo de modelagem ser descrito
nesta seo e referenciado como
organizao do hipertexto.

Viso de site
Uma viso de site (siteview) um
pacote com vrias pginas de uma
mesma aplicao Web.
O conceito equivalente ao conceito
de pacote da UML, e sua
representao grfica a mesma.

Exemplo
Siteview Livir (...)
rea
Uma viso de site pode ser organizada
em reas.
reas so grupos de pginas ou
recursivamente de outras reas que tem
afinidades, como por exemplo, um
conjunto de botes, ou uma parte do site
com anncios diversos.
Na notao grfica as reas devem
aparecer como grupos de pginas
cercadas por um quadrado tracejado.
Exempl
o
Siteview Livir (
areas Admin, Clientes;
page Principal
)
Area Admin (
pages Relatrios, Manuteno
)
Area Clientes (
pages PrincipalCliente, Compras, Cadastro
)
Tipos de pgina
H: representa a homepage.
Na definio textual da pgina adiciona-se a
expresso home. Esta a pgina inicial da
aplicao.
D: representa a pgina default de uma rea.
expresso default. Essa pgina ser a pgina
padro para onde se navega sempre que se
entrar em uma rea, ou seja, a pgina inicial
de uma rea.
L: representa uma pgina landmark.
expresso landmark. Esta pgina acessvel
sem necessidade de links explcitos por qualquer
outra pgina includa da mesma rea.
Padres de interface Web
ndice em cascata
ndice filtrado
Tour guiado
Pontos de vista
ndice em cascata
O ndice em cascata uma seqncia
de menus baseados em index units
at chegar a uma data unit.
Exemplo
Variante
Uma variante deste padro consiste
em mostrar alguns dados do objeto
selecionado em um dos ndices
intermedirios.
Exemplo
ndice filtrado
Em alguns casos poder ser
interessante no exibir uma lista com
todos os valores possveis.
Pode-se usar, ao invs disso, uma
lista j filtrada, solicitando ao usurio,
por exemplo, que indique uma palavra
chave para pesquisa.
Este padro se realiza pela conexo
entre uma entry unit, uma index unit e
uma data unit.
Exemplo
Variao
Uma variao o ndice filtrado com
scroll, tpico de mecanismos de busca
na Internet.
Aplica-se uma chave de busca e
vrios resultados so apresentados
em listas de n itens.
O usurio pode visualizar os prximos
n itens ou os n anteriores, realizando
operaes de scroll com blockFactor
n.

Esta variao implementada pela
juno de uma entry unit com uma
scroll unit ligada a uma index unit por
um link automtico.
Por sua vez, a index unit se associa a
uma data unit para visualizao dos
detalhes do elemento selecionado
Tour guiado
Um tour guiado um padro onde se
visualiza detalhes de objetos um por
um usando scroll.
Usa-se uma scroll unit com
blockFactor igual a 1 conectado por
um link automtico a uma data unit.

Exemplo
Pontos de vista
Por vezes pode ser interessante
apresentar diferentes facetas de certos
objetos.
Por exemplo, apresentar dados
resumidos sobre um livro, expandir estes
dados visualizando dados completos e
novamente visualizar os dados
resumidos.
Para realizar este padro basta definir
duas data units com diferentes conjuntos
de atributos de uma mesma classe e
criar links entre as duas units.
Exemplo
Operaes
WebML permite ainda que se modele
operaes de criao, excluso e
alterao de objetos, com o uso de
units chamadas operation units.
As cinco operation units bsicas tm
relao direta com as cinco operaes
bsicas sobre objetos.
Operation units
Create unit
Cria instncia
Delete unit
Destri instncia
Modify unit
Altera atributo
Connect unit
Cria
associao
Disconnect unit
Destri
associao
Links de sada de uma op.
unit
Link OK
para onde vai o controle se a operao
executada com sucesso.
Link KO
para onde vai o controle se a operao
falha em executar.

Exemplo de uso de create
unit
EntryUnit EEditora ( fields
campoOid String,
campoNome String
)
CreateUnit CriaEditora (
source Editora;
oid := umOid,
nome := umNome
)
Link EEditoraParaCriaEditora (
from EEditora to CriaEditora;
parameters
umOid : campoOid,
umNome : campoNome
)
unit
DataUnit DEditora (
source Editora;
attribute *
)
OKLink sucesso (
from CriaEditora to DEditora
)
unit
KOLink falha (
from CriaEditora to EntraEditora
)
unit
Delete unit
A delete unit opera sobre um ou
mais objetos que satisfaam a
condio do seletor.
Se um ou mais dos objetos no
puder ser excludo a delete unit
segue o link de sada KO
transportando como
parmetros os OIDs dos
objetos que no foram
excludos.

Modify unit
Uma modify unit contm um seletor
para um ou mais objetos e um
conjunto de atribuies para alterar
atributos desses objetos.
Usualmente os novos
valores dos atributos so
recebidos por links de
transporte.

Connect unit e Disconnect
unit
A connect unit e a disconnect unit tm
dois seletores: um para o objeto
origem e outro para o objeto destino
da associao a ser criada ou
destruda.

Operation unit
Outras operaes que no se
encaixam nos cinco tipos bsicos
podem ser representadas como
operaes genricas, ou operation
units.
Construo de modelos WebML
a partir de DSS
O projeto de interfaces necessita de pelo
menos dois artefatos: o diagrama de
seqncia de sistema e o modelo conceitual.
O diagrama de seqncia de sistema vai
indicar o encadeamento das operaes e das
entradas e sadas de dados na interface.
Ele tambm vai mencionar operaes padro
como CRUD, listagem e relatrios. Conforme
mencionado, tais operaes padro no
precisam ser modeladas com contratos e
diagramas de comunicao, pois a prpria
WebML j conta com os padres necessrios
em sua definio.

DSS original
Cria compra
Lista de livros disponveis
Adiciona livros na compra
Adiciona livros na compra

10 Modelagem de Interface

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

10 Modelagem de Interface

Încărcat de

Drepturi de autor:

Formate disponibile

Modelagem de Interface

Prof. Raul Sidnei Wazlawick

S-ar putea să vă placă și