Post on 17-Apr-2015
Curso de Bacharelado em Ciência da Computação
PROFILE EM UML PARA MODELAGEM SIMPLIFICADA DE INTERFACES
GRÁFICAS EM APLICATIVOS
André SandriAluno
Prof. Me. Carlos Michel BetempsOrientador
30 de junho de 2006.
2
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
3
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
4
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”.
5
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)
6
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)
7
Principais Conceitos - MDA
MDA – Model Driven Architecture
8
Principais Conceitos – PIM, PSM
PIMPlatform Independent Model
PSMPlatform Specific Model TransformaçõesMapeamentos
9
Principais Conceitos – ...CIM
PIMPlatform Independent Model
PSMPlatform Specific Model
CIMComputation Independent Model(domain model / business model)
10
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.
11
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.
12
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
13
Abordagens Pesquisadas Web Modeler
Rational Rose Enterprise Edition (IBM)
Screen Painter Diagram System Architect (Telelogic)
UML Web Profile HENNICKER, KOCH, 2001.
GUILayout BLANKENHORN, 2004.
14
Web Modeler Rational Rose Enterprise Edition - IBM
15
Screen Painter Diagram System Architect - Telelogic
16
UML Web Profile HENNICKER, KOCH, 2001
17
GUILayout BLANKENHORN, 2004
18
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...
19
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.
20
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...;
21
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...;
22
Requisito 8: PIM
PIMPlatform Independent Model
PSMPlatform Specific Model
TransformaçõesMapeamentos
UGUI Profile
WEB UGUI Profile
23
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)
24
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
25
UGUI Profile – Visão Parcial (1/3)
26
UGUI Profile – Visão Parcial (2/3)
27
UGUI Profile – Visão Parcial (3/3)
28
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.
29
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.
30
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.
31
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.
32
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.
33
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.
34
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
35
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.
36
Estereótipo: TextBox
“Edit box” Atributos
Value: String MaxLength: Integer MinLength: Integer = 0 PasswordMode: Boolean = false Required: Boolean = true Mask: String FieldName: String
37
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
38
Estereótipo: RichBox
MemoBox com conteúdo formatado Atributos
Value: String MaxLength: Integer MinLength: Integer = 0 Required: Boolean = true FieldName: String ContentType: String
39
Estereótipo: ComboBox
Lista drop-down com scroll Atributos
Items[*]: String SelectedIndex: Integer Required: Boolean = true FieldName: String Sorted: Boolean = false Editable: Boolean = false
40
Estereótipo: Media
Conteúdo multimídia Atributos
Value: String[*] Required: Boolean = true FieldName: String ContentType: String Editable: Boolean = false Stretch: Boolean = false
41
Estereótipo: Table
Conteúdo tabular Atributos
TotalCols: Integer Titles: String[*] Items: String[*] Editable: Boolean = false FieldName: String SelectedIndex: Integer
42
Estereótipo: Gauge
Informação quantitativa Atributos
Style: GaugeStyle = HorizontalBar Progress: Integer = 0 ShowText: Boolean = true FieldName: String
43
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
44
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
45
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.
46
Estereótipo: RadioButton
Opções exclusivas
Atributos Hint: String Checked: Boolean = false CheckedValue: String FieldName: String Required: Boolean = true
47
Estereótipo: CheckBox
Ligado/desligado
Atributos Hint: String Checked: Boolean = false CheckedValue: String FieldName: String
48
Estereótipo: Button
Botão de comando
Atributos DefaultButton: Boolean = false Hint: String IconFilename: String UseAcceleratorChar: Boolean = false Execute: String
49
Estereótipo: Label
Texto não editável
Atributos Style: String Alignment: AlignmentStyle = Left
50
Estereótipo: LinkedLabel
Texto hyperlink não editável
Atributos Style: String Alignment: AlignmentStyle = Left Execute: String Hint: String
51
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
52
EXEMPLO 1
Fonte: Microsoft WordPad
53
EXEMPLO 2
Fonte: Banrisul Remote Banking
54
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
55
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
56
Avaliação - Together Architect
57
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
58
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
59
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.
60
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.
61
Muito Obrigado!
André Sandriwww.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.