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.

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

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

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

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)

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)

Principais Conceitos - MDA MDA – Model Driven Architecture

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

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

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.

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.

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

Abordagens Pesquisadas Web Modeler Rational Rose Enterprise Edition (IBM) Screen Painter Diagram System Architect (Telelogic) UML Web Profile HENNICKER, KOCH, 2001. GUILayout BLANKENHORN, 2004.

Web Modeler Rational Rose Enterprise Edition - IBM

Screen Painter Diagram System Architect - Telelogic

UML Web Profile HENNICKER, KOCH, 2001

GUILayout BLANKENHORN, 2004

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

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.

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);

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.

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

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.

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.

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

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

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

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.

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.

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.

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.

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.

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.

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

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.

Estereótipo: TextBox “Edit box” Atributos Value: String MaxLength: Integer MinLength: Integer = 0 PasswordMode: Boolean = false Required: Boolean = true Mask: String FieldName: String

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

Estereótipo: RichBox MemoBox com conteúdo formatado Atributos Value: String MaxLength: Integer MinLength: Integer = 0 Required: Boolean = true FieldName: String ContentType: String

Estereótipo: ComboBox Lista drop-down com scroll Atributos Items[*]: String SelectedIndex: Integer Required: Boolean = true FieldName: String Sorted: Boolean = false Editable: Boolean = false

Estereótipo: Media Conteúdo multimídia Atributos Value: String[*] Required: Boolean = true FieldName: String ContentType: String Editable: Boolean = false Stretch: Boolean = false

Estereótipo: Table Conteúdo tabular Atributos TotalCols: Integer Titles: String[*] Items: String[*] Editable: Boolean = false FieldName: String SelectedIndex: Integer

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

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

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

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.

Estereótipo: RadioButton Opções exclusivas Atributos Hint: String Checked: Boolean = false CheckedValue: String FieldName: String Required: Boolean = true

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

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

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

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

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

EXEMPLO 1 Fonte: Microsoft WordPad

EXEMPLO 2 Fonte: Banrisul Remote Banking

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

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/05-07-04, p. 666, 2006)

Avaliação - Together Architect PROFILE EM UML PARA MODELAGEM SIMPLIFICADA DE INTERFACES GRÁFICAS EM APLICATIVOS 26/03/2017 Avaliação - Together Architect

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

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

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.

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.

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.