Curso de Bacharelado em Ciência da Computação
PROFILE EM UML PARA MODELAGEM
SIMPLIFICADA DE INTERFACES
GRÁFICAS EM APLICATIVOS
André Sandri
Aluno
Prof. Me. Carlos Michel Betemps
Orientador
30 de junho de 2006.
Roteiro









O Problema (Introdução)
Objetivo Principal
Principais Conceitos
Abordagens Pesquisadas
A Solução Proposta
Requisitos e Limitações
O Projeto
Avaliação do Modelo
Conclusões e Trabalhos Futuros
2
O Problema (Introdução)



Foi constatado que não existe um
modelo padrão para a modelagem
de GUI
Fabricantes disponibilizaram
soluções proprietárias
A relevância deste assunto afeta o
futuro e o provável sucesso da
arquitetura MDA – Model Driven
Architecture
3
Objetivo Principal


Demonstrar a criação de um profile UML para
possibilitar a modelagem de interfaces gráficas de
forma simplificada com ênfase em características
de usabilidade para utilização em projetos de
sistemas empresariais, podendo ser estendido
para outras abordagens de desenvolvimento de
software.
Refinando o objetivo:
“Criar um profile UML para possibilitar a modelagem
de interfaces gráficas com foco na apresentação de
widgets sob o ponto de vista da qualidade e da
usabilidade para ambientes de desenvolvimento de
software que utilizam MDD”.
4
Principais Conceitos - MDE

MDE – Model Driven Engineering



MIC - Model-Integrated Computing (sistemas
embarcados)
DSL - Domain-Specific Language (Microsoft
Software Factories Initiative)
MDA - Model-driven Architecture (OMG)
Tecnologias MDE oferecem uma abordagem promissora
para tratar a incapacidade das linguagens de
terceira geração de diminuir a complexidade das
diferentes plataformas, buscando expressar de
forma eficaz os conceitos do domínio do
problema. (SCHMIDT, 2006)
5
Principais Conceitos - MDD

MDD – Model Driven Development


MDD visa utilizar modelos na maior parte do
tempo durante um processo de
desenvolvimento de software, e prevê
automação através da execução de modelos,
transformações e técnicas de geração de
código. (KLEPPE, WARMER, BAST, 2003)
Ganhos de 70% durante a fase de
manutenção do software. A equipe que
utilizou MDD completou cinco recursos 37%
mais rápido do que a equipe tradicional, em
165 horas contra 260 horas. (COMPUWARE,
2005)
6
Principais Conceitos - MDA

MDA – Model Driven Architecture
7
Principais Conceitos – PIM, PSM
PIM
Platform Independent Model
Mapeamentos
PSM
Platform Specific Model
Transformações
8
Principais Conceitos – ...CIM
CIM
Computation Independent Model
(domain model / business model)
PIM
Platform Independent Model
PSM
Platform Specific Model
9
Principais Conceitos – MOF

MOF – Meta-object Facility





UML – Unified Modeling Language
CWM - Common Warehouse Metamodel
XMI - XML Metadada Interchange
QVT - Query, Views, and
Transformations
MOF é um framework de integração
extensível para definir, manipular e
integrar metadados e dados de
forma independente de plataforma.
10
Principais Conceitos - UML

UML 2.0 – Unified Modeling Language




Superestrutura
Infra-estrutura
OCL - Object Constraint Language
Diagram Interchange
A especificação da Superestrutura
contém os conceitos de profiles,
stereotypes e tagged values.
11
Principais Conceitos - Usabilidade






É a extensão na qual um produto pode ser
usado por usuários específicos para
alcançar objetivos específicos com
efetividade, eficiência e satisfação em um
contexto de uso específico. (ISO 9241-11)
CUA - Common User Access (IBM)
Microsoft Windows User Experience
RIA - Rich Internet Applications
IUI - Inductive User Interface
Widgets
12
Abordagens Pesquisadas

Web Modeler


Screen Painter Diagram


System Architect (Telelogic)
UML Web Profile


Rational Rose Enterprise Edition (IBM)
HENNICKER, KOCH, 2001.
GUILayout

BLANKENHORN, 2004.
13
Web Modeler
Rational Rose Enterprise Edition - IBM
14
Screen Painter Diagram
System Architect - Telelogic
15
UML Web Profile
HENNICKER, KOCH, 2001
16
GUILayout
BLANKENHORN, 2004
17
A Solução Proposta

Técnica: Profile, MOF, outras?
UML 2.0 + DI
Foco na usabilidade (widgets)
Independente de plataforma (PIM)

Como validar?






Protótipo x Ferramenta comercial
Engenharia-reversa de GUI
Outras formas...
18
Aspectos de Usabilidade

Permitir...




Modelagem do posicionamento/hierarquia de widgets;
Modelar expressões textuais (títulos, rótulos, etc.);
Utilização de boxes/containers;
Oferecer...



Widgets comumente utilizados em ferramentas de
programação;
Propriedades que permitam a modelagem de troca de
estados destes componentes;
Propriedades que possam determinar o conteúdo de
cada componente, estaticamente ou dinamicamente,
através de simples expressões textuais (do tipo String)
ou através de expressões OCL.
19
Requisitos (1/2)
1) Um diagrama deve modelar o layout da
GUI...;
2) O diagrama deverá ser fácil de aprender,
utilizar e entender;
3) A criação de um digrama em uma
ferramenta especializada de modelagem
deverá ser uma tarefa de poucos minutos;
4) A criação de um diagrama não deve exigir
muito trabalho adicional;
5) A simbologia utilizada no diagrama deverá
representar os elementos fundamentais
utilizados em interfaces gráficas...;
20
Requisitos (2/2)
6) O modelo deverá oferecer alguma forma de
extensão...;
7) O modelo deverá seguir as premissas do UML, ou
seja, ser simples, compreensível para pessoas que
não são da área de desenvolvimento de software...;
8) O modelo deverá ser abstrato o suficiente para
possibilitar utilizá-lo na camada PIM da arquitetura
MDA...;
9) Prever a utilização de OCL nos widgets possibilitando
assim automatização do funcionamento do sistema
gerado em ferramentas que suportam a execução do
modelo..;
10) O modelo deverá ser criado para utilização em
ferramentas de modelagem que suportem a
criação e utilização de profiles UML de acordo com a
especificação da OMG...;
21
Requisito 8: PIM
UGUI Profile
PIM
Platform Independent Model
WEB UGUI Profile
Mapeamentos
PSM
Platform Specific Model
Transformações
22
Limitações





Navegação;
Interação entre outros diagramas;
Prototipação;
Outros.
Restrições em OCL (sem
possibilidade de validar com os
meta-modelos utilizados)
23
O Projeto



Levantamento principais widgets
Estereótipos para extensão
Framework de Execução






Instanciar conforme plataforma
Validação de conteúdo
Persistência de conteúdo
Ajuda de Contexto
Drag & Drop
Widgets não incluídos: PopupMenu,
TreeView, ListView
24
UGUI Profile – Visão Parcial (1/3)
25
UGUI Profile – Visão Parcial (2/3)
26
UGUI Profile – Visão Parcial (3/3)
27
Estereótipo: Container

Estereótipo abstrato (Component)

Atributos




Visible: Boolean = true
Enabled: Boolean = true
Resizable: Boolean = true
Restrições

Deverá haver pelo menos um estereótipo
estendido de container no diagrama.
28
Estereótipo: Window

Janela (aninhar outros widgets)

Atributos




Title: String
IconFilename: String
Style: WindowStyle = Normal
Restrições

Um Window não pode aninhar outro
Window.
29
Estereótipo: Panel

Área virtual (borda)

Atributos




BorderVisible: Boolean = true
Caption: String
Alignment: AlignmentStyle = Center
Restrições

Um Panel não pode aninhar um Window.
30
Estereótipo: GroupBox


Agrupar elementos relacionados
Atributos


Caption: String
Restrições


Um GroupBox não pode aninhar um
Window.
Um GroupBox não pode aninhar um Panel.
31
Estereótipo: TabSheetGroup


Agrupar TabSheet
Atributos



ActivePage: String
TabPosition: TabSheetStyle = Top
Restrições


Este elemento deve possuir pelo menos
um elemento TabSheet.
Somente o elemento TabSheet pode ser
incluído neste container, nada mais.
32
Estereótipo: TabSheet


“Página com aba”
Atributos



Caption: String
IconFilename: String
Restrições



Todo TabSheet deve pertencer a um
TabSheetGroup.
Um TabSheet não pode conter um
Window.
Um TabSheet não pode conter um
TabSheetGroup.
33
Estereótipo: ExtendedContainer




Estereótipo de Extensão
Pode ser utilizado quando nenhum
dos estereótipos previstos no modelo
atende às necessidades do projeto
Possível adicionar novos atributos
conforme ferramenta de modelagem
Atributos

Type: String
34
Estereótipo: BoxedWidget


Estereótipo Abstrato
Atributos




Visible: Boolean = true
Enabled: Boolean = true
Hint: String
Restrições

Todo BoxedWidget deverá ser incluído
dentro de um Window, Panel, GroupBox
ou TabSheet.
35
Estereótipo: TextBox


“Edit box”
Atributos







Value: String
MaxLength: Integer
MinLength: Integer = 0
PasswordMode: Boolean = false
Required: Boolean = true
Mask: String
FieldName: String
36
Estereótipo: MemoBox


“Edit Box” com várias linhas
Atributos






Value: String
MaxLength: Integer
MinLength: Integer = 0
Required: Boolean = true
FieldName: String
WordWrap: Boolean = false
37
Estereótipo: RichBox


MemoBox com conteúdo formatado
Atributos






Value: String
MaxLength: Integer
MinLength: Integer = 0
Required: Boolean = true
FieldName: String
ContentType: String
38
Estereótipo: ComboBox


Lista drop-down com scroll
Atributos






Items[*]: String
SelectedIndex: Integer
Required: Boolean = true
FieldName: String
Sorted: Boolean = false
Editable: Boolean = false
39
Estereótipo: Media


Conteúdo multimídia
Atributos






Value: String[*]
Required: Boolean = true
FieldName: String
ContentType: String
Editable: Boolean = false
Stretch: Boolean = false
40
Estereótipo: Table


Conteúdo tabular
Atributos






TotalCols: Integer
Titles: String[*]
Items: String[*]
Editable: Boolean = false
FieldName: String
SelectedIndex: Integer
41
Estereótipo: Gauge


Informação quantitativa
Atributos




Style: GaugeStyle = HorizontalBar
Progress: Integer = 0
ShowText: Boolean = true
FieldName: String
42
Estereótipo: TrackBar


Visualizar/alterar um valor
quantitativo limitado
Atributos






MinValue: Integer = 0
MaxValue: Integer = 10
Orientation: TrackBarOrientation =
Horizontal
Value: Integer
ShowText: Boolean = false
FieldName: String
43
Estereótipo: ExtendedBox




Estereótipo de extensão
Pode ser utilizado quando nenhum
dos estereótipos previstos no modelo
atende às necessidades do projeto
Possível adicionar novos atributos
conforme ferramenta de modelagem
Atributos

Type: String
44
Estereótipo: TextualWidget


Estereótipo abstrato
Atributos





Name: String
Visible: Boolean = true
Enabled: Boolean = true
UseAcceleratorChar: Boolean = false
Restrições

Todo TextualWidget deverá ser incluído
dentro de um Window, Panel, GroupBox
ou TabSheet.
45
Estereótipo: RadioButton

Opções exclusivas

Atributos





Hint: String
Checked: Boolean = false
CheckedValue: String
FieldName: String
Required: Boolean = true
46
Estereótipo: CheckBox

Ligado/desligado

Atributos




Hint: String
Checked: Boolean = false
CheckedValue: String
FieldName: String
47
Estereótipo: Button

Botão de comando

Atributos





DefaultButton: Boolean = false
Hint: String
IconFilename: String
UseAcceleratorChar: Boolean = false
Execute: String
48
Estereótipo: Label

Texto não editável

Atributos


Style: String
Alignment: AlignmentStyle = Left
49
Estereótipo: LinkedLabel

Texto hyperlink não editável

Atributos




Style: String
Alignment: AlignmentStyle = Left
Execute: String
Hint: String
50
Estereótipo: ExtendedText




Estereótipo de extensão
Pode ser utilizado quando nenhum
dos estereótipos previstos no modelo
atende às necessidades do projeto
Possível adicionar novos atributos
conforme ferramenta de modelagem
Atributos

Type: String
51
EXEMPLO 1
Fonte: Microsoft WordPad
52
EXEMPLO 2
Fonte: Banrisul Remote Banking
53
Avaliação do Modelo

Para avaliar e testar o modelo e a
abordagem escolhida, foram utilizadas
duas ferramentas de modelagem
comerciais que suportam a criação e a
utilização de profiles (UML 2.0):
- Together Architect 2006
- Enterprise Architect 6.1
54
Avaliação - Together Architect




Suporte de especificação visual do
profile de forma semelhante à
proposta da OMG
Representação gráfica (SVG 1.1)
Ícone (paleta de componentes)
Problemas



Restrições OCL (editor, definição)
“Component” com imagem
(comportamento não previsto pela OMG)
Nome e texto com imagem
55
Avaliação - Together Architect
56
Avaliação - Enterprise Architect




Especificação visual de forma
semelhante ao Together (XML)
Representação gráfica (EMF ou WMF)
Suporta restrições OCL (sem editor)
Problemas



Problemas semelhantes com imagens
Mostra o nome do elemento (superior)
Permite mover para fora dos limites do
elemento pai sem alterar a estrutura
hierárquica
57
Conclusões

O modelo oferece um recurso para
possibilitar a modelagem de GUI com
aspectos de usabilidade para ambientes
MDD (PIM do MDA), pois:




É independente de tecnologia (plataforma)
Possibilita modelar o comportamento básico dos
widgets ao serem executados
Prevê propriedades para serem utilizadas para a
validação, persistência e apresentação dos dados
Permite construir o diagrama de forma
aproximada aos elementos que compõem as
atuais interfaces gráficas
58
Conclusões


Com a avaliação em cima de ferramentas
de modelagem foram encontrados
problemas referentes à utilização de
imagens nos estereótipos e da utilização de
restrições OCL.
Portanto, conclui-se que existe uma
necessidade de amadurecimento das
ferramentas quanto a estes aspectos, além
de que é recomendável reforçar a
padronização da OMG para evitar estes
tipos de problemas, já que estas
especificações não previram explicitamente
estes tipos de necessidades.
59
Trabalhos Futuros







Avaliar a utilização do profile durante a
construção de um software real
Especificar e avaliar um modelo semelhante
ao proposto utilizando MOF ou DSL
Avaliar e sugerir modificações nos
padrões da OMG
Avaliar e sugerir correções para as
ferramentas de modelagem
Especificar, construir e validar um framework
de execução para este profile
Realizar a conversão das restrições para OCL
Sugerir navegação, interação, etc.
60
Muito Obrigado!
André Sandri
www.sandri.cjb.net
Esta apresentação, a monografia e os
arquivos do profile para ambas ferramentas
de modelagem serão disponibilizadas na
terceira semana de julho na página do autor.
61