A apresentação está carregando. Por favor, espere

A apresentação está carregando. Por favor, espere

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.

Apresentações semelhantes


Apresentação em tema: "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."— 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 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 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 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 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 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 7 Principais Conceitos - MDA MDA – Model Driven Architecture

8 8 Principais Conceitos – PIM, PSM PIM Platform Independent Model PSM Platform Specific Model Transformações Mapeamentos

9 9 Principais Conceitos –...CIM PIM Platform Independent Model PSM Platform Specific Model CIM Computation Independent Model (domain model / business model)

10 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 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 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 13 Abordagens Pesquisadas Web Modeler Rational Rose Enterprise Edition (IBM) Screen Painter Diagram System Architect (Telelogic) UML Web Profile HENNICKER, KOCH, GUILayout BLANKENHORN, 2004.

14 14 Web Modeler Rational Rose Enterprise Edition - IBM

15 15 Screen Painter Diagram System Architect - Telelogic

16 16 UML Web Profile HENNICKER, KOCH, 2001

17 17 GUILayout BLANKENHORN, 2004

18 18 A Solução Proposta Técnica: Profile, MOF, outras? UML DI Foco na usabilidade (widgets) Independente de plataforma (PIM) Como validar? Protótipo x Ferramenta comercial Engenharia-reversa de GUI Outras formas...

19 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 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 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 22 Requisito 8: PIM PIM Platform Independent Model PSM Platform Specific Model Transformações Mapeamentos UGUI Profile WEB UGUI Profile

23 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 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 25 UGUI Profile – Visão Parcial (1/3)

26 26 UGUI Profile – Visão Parcial (2/3)

27 27 UGUI Profile – Visão Parcial (3/3)

28 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 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 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 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 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 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 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 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 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 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 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 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 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 41 Estereótipo: Table Conteúdo tabular Atributos TotalCols: Integer Titles: String[*] Items: String[*] Editable: Boolean = false FieldName: String SelectedIndex: Integer

42 42 Estereótipo: Gauge Informação quantitativa Atributos Style: GaugeStyle = HorizontalBar Progress: Integer = 0 ShowText: Boolean = true FieldName: String

43 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 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 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 46 Estereótipo: RadioButton Opções exclusivas Atributos Hint: String Checked: Boolean = false CheckedValue: String FieldName: String Required: Boolean = true

47 47 Estereótipo: CheckBox Ligado/desligado Atributos Hint: String Checked: Boolean = false CheckedValue: String FieldName: String

48 48 Estereótipo: Button Botão de comando Atributos DefaultButton: Boolean = false Hint: String IconFilename: String UseAcceleratorChar: Boolean = false Execute: String

49 49 Estereótipo: Label Texto não editável Atributos Style: String Alignment: AlignmentStyle = Left

50 50 Estereótipo: LinkedLabel Texto hyperlink não editável Atributos Style: String Alignment: AlignmentStyle = Left Execute: String Hint: String

51 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 52 EXEMPLO 1 Fonte: Microsoft WordPad

53 53 EXEMPLO 2 Fonte: Banrisul Remote Banking

54 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 Enterprise Architect 6.1

55 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 56 Avaliação - Together Architect

57 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 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 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 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 61 Muito Obrigado! André Sandri 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.


Carregar ppt "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."

Apresentações semelhantes


Anúncios Google