Curso de Bacharelado em Ciência da Computação

Apresentação em tema: "Curso de Bacharelado em Ciência da Computação"— Transcrição da apresentação:

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
PROFILE EM UML PARA MODELAGEM SIMPLIFICADA DE INTERFACES GRÁFICAS EM APLICATIVOS 26/03/2017 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
Platform Independent Model PSM Platform Specific Model Transformações Mapeamentos

9 Principais Conceitos – ...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 ) 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) Um diagrama deve modelar o layout da GUI...;
PROFILE EM UML PARA MODELAGEM SIMPLIFICADA DE INTERFACES GRÁFICAS EM APLICATIVOS 26/03/2017 Requisitos (1/2) Um diagrama deve modelar o layout da GUI...; O diagrama deverá ser fácil de aprender, utilizar e entender; A criação de um digrama em uma ferramenta especializada de modelagem deverá ser uma tarefa de poucos minutos; A criação de um diagrama não deve exigir muito trabalho adicional; A simbologia utilizada no diagrama deverá representar os elementos fundamentais utilizados em interfaces gráficas...; Um diagrama deve modelar o layout (disposição) de uma interface gráfica; O diagrama deverá ser fácil de aprender, utilizar e entender; A criação de um digrama em uma ferramenta especializada de modelagem deverá ser uma tarefa de poucos minutos; A criação de um diagrama não deve exigir muito trabalho adicional; A simbologia utilizada no diagrama deverá representar os elementos fundamentais utilizados em interfaces gráficas (widgets);

21 Requisitos (2/2) O modelo deverá oferecer alguma forma de extensão...;
PROFILE EM UML PARA MODELAGEM SIMPLIFICADA DE INTERFACES GRÁFICAS EM APLICATIVOS 26/03/2017 Requisitos (2/2) O modelo deverá oferecer alguma forma de extensão...; 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...; O modelo deverá ser abstrato o suficiente para possibilitar utilizá-lo na camada PIM da arquitetura MDA...; 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..; 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...; O modelo deverá oferecer alguma forma de extensão para utilização direta no diagrama para a representação de widgets não contemplados nesta especificação; 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, e o diagrama poderá ser impresso em papel sem perder informações essenciais para tomadas de decisão; O modelo deverá ser abstrato o suficiente para possibilitar utilizá-lo na camada PIM da arquitetura MDA, ou seja, independente de tecnologia destino (Web, Desktop, PDA, POS, etc); 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, como por exemplo a execução de diagramas modelados no Together Architect 2006 (BORLAND, 2006) a partir da utilização da suíte de componentes chamada de ECO III, atualmente distribuída juntamente com o Delphi da Borland. 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, e para isso o profile especificado neste documento deverá ser avaliado em cima de pelo menos uma ferramenta com este tipo de suporte.

22 Requisito 8: PIM PIM Platform Independent Model PSM
UGUI Profile PSM Platform Specific Model WEB UGUI Profile Transformações Mapeamentos

23 Limitações Navegação; Interação entre outros diagramas; Prototipação;
PROFILE EM UML PARA MODELAGEM SIMPLIFICADA DE INTERFACES GRÁFICAS EM APLICATIVOS 26/03/2017 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) Note que não existem requisitos com a preocupação de possibilitar navegação a partir da interface gráfica modelada, interação entre outros diagramas, prototipação, pois são características não tratadas neste trabalho. Estas características poderão ser solucionadas em futuros trabalhos. Para a especificação das restrições dos elementos do modelo foi avaliada a utilização de OCL. Infelizmente, durante os primeiros testes de validação do modelo, foi constatado que nenhuma das ferramentas de modelagem utilizadas neste projeto (apresentados no capítulo 5) suportam a utilização de OCL com os meta-modelos utilizados neste profile. Já que não é possível validar estas restrições em OCL, as restrições serão especificadas em texto comum. A conversão destas regras em OCL e sua validação poderão ser realizadas em futuros trabalhos.

24 O Projeto Levantamento principais widgets Estereótipos para extensão
PROFILE EM UML PARA MODELAGEM SIMPLIFICADA DE INTERFACES GRÁFICAS EM APLICATIVOS 26/03/2017 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 Os seguintes widgets chegaram a ser avaliados, mas não são contemplados neste modelo pelos motivos abaixo justificados: -PopupMenu: controle para possibilitar a modelagem de um menu popup associado a um widget em particular. Esse controle não foi incluído nesta solução pois esse menu pode ser definido pelo framework para cada widget de forma genérica. Além disso, outro motivo é que a proposta deste trabalho não contempla a especificação da navegação e da interação da interface gráfica. - TreeView: controle que possibilita exibir elementos encadeados em uma relação hierárquica. Um widget específico para este comportamento não é contemplado no modelo por ser um elemento que exige certa complexidade para a definição de seu conteúdo. Porém, foi previsto no modelo que o widget chamado de Table funcione de forma semelhante para apresentar relações hierárquicas quando for associada uma classe que apresente relações hierárquicas em seu conteúdo. - ListView: controle especializado em exibir listas de informações a partir de formatos pré-configurados (por ícones, detalhada, em miniaturas, lado a lado, entre outros). A justificativa de não ter incluído esse elemento é a mesma do widget TreeView.

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 Restrições
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
PROFILE EM UML PARA MODELAGEM SIMPLIFICADA DE INTERFACES GRÁFICAS EM APLICATIVOS 26/03/2017 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 Quando um estereótipo possui em sua definição um ícone, este ícone pode ser graficamente anexado ao elemento do modelo estendido pelo estereótipo. Todo elemento do modelo que tiver uma representação gráfica pode ter um ícone anexado. Quando os elementos do modelo forem graficamente expressos de: Caixas: a caixa pode ser substituída pelo ícone, e o nome do elemento do modelo aparece debaixo do ícone. Esta forma de apresentação pode ser utilizada somente quando um modelo do elemento for extensão de um único estereótipo e quando as propriedades do elemento do modelo (isto é, atributos, operações de uma classe) não são apresentadas. Como outra opção, o ícone pode ser apresentado em uma forma reduzida, dentro e no topo da caixa que representa o elemento do modelo. Quando vários estereótipos são aplicados, vários ícones podem ser apresentados dentro da caixa. Links: o ícone pode ser colocado próximo ao link. Notação textual: o ícone pode ser apresentado à esquerda da notação textual. (Citação traduzida de Unified Modeling Language: Superstructure. OMG, Versão 2.0, formal/ , p. 666, 2006)

56 Avaliação - Together Architect
PROFILE EM UML PARA MODELAGEM SIMPLIFICADA DE INTERFACES GRÁFICAS EM APLICATIVOS 26/03/2017 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 André Sandri www.sandri.cjb.net Muito Obrigado!
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.