Curso de Bacharelado em Ciência da Computaçã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 • 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 ModelerRational 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...; • 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...;

21. 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...;

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