Curso de Bacharelado em Ci

1
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.

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
PIM Platform Independent Model
PSM Platform Specific Model
Transformações
Mapeamentos
9
Principais Conceitos ...CIM
CIM Computation Independent Model (domain model /
business model)
PIM Platform Independent Model
PSM Platform Specific 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)

1. O modelo deverá oferecer alguma forma de
   extensão...
2. 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...
3. O modelo deverá ser abstrato o suficiente para
   possibilitar utilizá-lo na camada PIM da
   arquitetura MDA...
4. 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..
5. 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
PIM Platform Independent Model
UGUI Profile
PSM Platform Specific Model
WEB UGUI Profile
Transformações
Mapeamentos
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é 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.