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.