- slide 1 de xx Geração Automática e Assistida de Interfaces de Usuário Marcelo Mrack

Sumário PARTE 1 1.Introdução 2.Motivação 3.Interfaces de Usuário PARTE 2 4.MBUIDE PARTE 3 5.Merlin 6.Estudo de Caso PARTE 4 7.Conclusões

PARTE 1 1.Introdução 2.Motivação 3.Interfaces de Usuário

Introdução  Contextualização  Esta apresentação resume o trabalho de pesquisa realizado durante um curso de mestrado com ênfase sobre o software Merlin, o qual é o resultado de um trabalho que vem sendo desenvolvido desde 2001  O Merlin é um software para geração automatizada de Interfaces de Usuário (IU) que segue as premissas das MBUIDE, e que tem foco específico no mercado profissional de desenvolvimento de sistemas  Objetivos  Apresentar o conceito de geração de IU defendido pelas MBUIDE e um panorama geral dessa tecnologia na atualidade  Detalhar as bases do projeto Merlin e sua relação com as demais MBUIDE, buscando evidenciar os seus diferenciais  Apresentar um pequeno Estudo de Caso, onde o Merlin é utilizado para gerar uma IU de baixa complexidade  Mostrar os resultados obtidos até o momento, os pontos em aberto e os direcionamentos da pesquisa

Motivação  Experiência Profissional  A criação de UI, principalmente em sistemas de banco de dados, é uma tarefa repetitiva, cansativa em com baixos índices de reuso  Custo Expressivo para a Criação das IU  De forma geral, pesquisas comprovam que os custos de criação de IU são significativos, mesmo na atualidade Quanto custa a IU nos sistemas em geral Sistema Completo Interface do Usuário 100% 50% User Interface Software Tools; MEYERS (1994,2002)

Interfaces de Usuário  Cenário Atual na Criação de IU  Escrita de código-fonte  Programador escreve c ó digo-fonte usando API de um toolkit gr á fico  Uso de ferramentas WYSIWYG 1  Programador usa o conceito de arrastar e soltar elementos de IU  Uso de assistentes de criação  Wizards coletam informa ç ões do meio do sistema e geram c ó digo-fonte  Geração Automatizada  Templates –Esqueletos de c ó digo substitu í veis otimizam a programa ç ão  Model Driven Architecture (MDA) –Cartuchos de gera ç ão transformam modelos abstratos em c ó digo 1. ( WYSIWYG: /w ɪ ziw ɪ g/ ) What You See Is What You Get, ou seja o que você vê (ou o que você desenha no editor) é o que você tem quando o sistema estiver em execução.

Interfaces de Usuário  Problemas Recorrentes nas Abordagens Descritas  Tempo elevado de construção de estruturas genéricas  Quanto custa criar um template?  Demora nas alterações  Como refatorar classes j á geradas? E se o c ó digo j á foi alterado?  Falta de reuso  Posso reusar o label “ Nome do cliente ” em projetos diferentes?  Gerência de código  C ó digo template ou não? E a versão?  Refatoração  E se o template contiver erros?

Interfaces de Usuário  Tipos de Interfaces de Usuário  Uso Geral  São interfaces de usu á rio que não têm rela ç ão espec í fica com os dados do sistema, e são orientadas para satisfazer as mais variadas regras de neg ó cio  Devido a sua generalidade, a automa ç ão de gera ç ão dessas IU é reduzida  Interfaces CRUD  Acrônimo do inglês Create, Retrieve, Update and Delete, são IU destinadas a visualizar e manipular os dados existentes nos sistemas  Por possu í rem uma rela ç ão muito forte com os dados do sistema, tendem a ser beneficiadas por recursos de gera ç ão automatizada  Presentes em 100% dos sistemas que operam sobre banco de dados Custo das CRUD nas IU em sistemas de operam sobre BD IU CRUD em geral 100% 60% Merlin: Um Novo Horizonte na Criação de Telas de Cadastro; MRACK (2007) CRUD elementar 36%

Interfaces de Usuário  Tipos de Interfaces CRUD  Um-Para-Um  São as IU mais simples, e todos os elementos da IU existem em fun ç ão de um objeto de dados com propriedades primitivas ou com associa ç ões de cardinalidade m á xima igual a 1 no destino  EXEMPLO: Tela de cadastro de um produto  Um-Para-Muitos (Mestre-Detalhes)  De m é dia complexidade, os elementos da IU satisfazem objetos de dados com associa ç ões de cardinalidade maior que 1 no destino, e exatamente 1 na origem  EXEMPLO: Tela de cadastro de uma nota fiscal e seus itens  Muitos-Para-Muitos  De alta complexidade, satisfazem dados relacionados por estruturas com cardinalidade maior que 1 em ambas extremidades  Na pr á tica, durante a implementa ç ão, são transformadas em IU Um-Para- Muitos isom ó rficas  EXEMPLO: Tela de cadastro de cursos e disciplinas

Interfaces de Usuário  Foco do Software Proposto  100% das interfaces CRUD elementares com custo zero de configuração  100% das interfaces CRUD com algum trabalho de configuração que tenha melhor custo-benefício do que as abordagens existentes Abrangência da ferramenta Merlin descrita no trabalho IU CRUD em geral 50% 30% CRUD elementar 18% Sistema completo 100%

PARTE 2 4.MBUIDE

MBUIDE  Model-Based User Interface Development Environment (MBUIDE)  São ferramentas que objetivam produzir IU através do uso de modelos declarativos de alto nível  Os modelos são processados por um mecanismo de transformação que tem como resultado as IU do sistema  São semelhantes à tecnologia MDA, porém:  Dão grande ênfase para a geração de IU  Valem-se de de processos, linguagens e mecanismos de transformação proprietários  Dependem muito de uma metodologia própria de trabalho

MBUIDE  Origens nas antigas UIMS  User Interface Management System (UIMS)  Início dos anos 80  Primeira alternativa utilizada para produzir IU sem escrever diretamente código-fonte  Características das UIMS  Focada no resultado final pela visão do desenvolvedor e sem processos ou metodologias claras de trabalho  Sem grande preocupação com integrações ou refatoramento  Utilização de linguagens ou sintaxes próprias  Uso de diagramas de estados e transições para modelar o diálogo entre o usuário e o sistema  Resultados das UIMS  Geração dos principais menus do sistema, caixas de diálogo, mensagens simples e invocação de funções pré-determinadas

MBUIDE  Evolução  Grande crescimento entre os anos 80 e 90  Evolução das linguagens e sintaxes de especificação mais ricas  Separação de conceitos: Elementos de IU, Tarefas, Dados, etc.  Modelos  Formam a base das MBUIDE  Estruturas declarativas que armazenam aspectos relevantes do sistema a ser gerado e que, em conjunto, podem detalhar todas as informações necessárias para geração de uma aplicação  Definidos, os modelos servem como entrada para os mecanismos de geração da MBUIDE que, através de ciclos evolutivos e incrementais, produz as IU do sistema

MBUIDE  Tipos de Modelos 1.Modelo de Dados  Semelhante a um modelo relacional, foca os dados persistentes da aplica ç ão 2.Modelo de Domínio  Extende o Modelo de Dados, agregando conceitos semelhantes a OO 3.Modelo de Tarefas  Foca as regras de neg ó cio da aplica ç ão e as opera ç ões e restri ç ões relacionadas 4.Modelo de Apresentação  D á ênfase para os elementos gr á ficos da IU  Abstract Interface Object (AIO) e Concrete Interface Object (CIO) são suportados 5.Modelo de Diálogo  Correlato ao Modelo de Tarefas, focaliza a conversa ç ão do usu á rio com a IU 6.Modelo de Usuário  Define aspectos de personaliza ç ão da IU para determinados usu á rios ou grupos 7.Modelo de Aplicação  Efetua a liga ç ão das IU com o meio externo da aplica ç ão 8.Modelo de Plataforma  Variante do Modelo de Aplica ç ão, foca mais detalhes do ambiente operacional 9.Modelo de Contexto  Semelhante ao Modelo de Usu á rio, enfatiza aspectos dependentes do uso do sistema

MBUIDE  Exemplos de Modelos de MBUIDE BODART, LEHEUREUX e VANDERDONCKT (1994) e MRACK (2007) Modelos de ApresentaçãoModelo de Tarefas na TRIDENT DEFINE INTERACTION-OBJECT ID_Label; WORDING IS "Id."; MNEMONIC IS "I"; PROMPT IS ":"; IS INSTANCE OF Label; IS COMPONENT OF Customer_GroupBox; DEFINE INTERACTION-OBJECT Id_EditBox; MAX-LENGTH IS 6; LINEARITY SIMPLE; IS INSTANCE OF EditBox; IS COMPONENT OF Customer_GroupBox; IS ATTACHED @Length(max=6) String id; Merlin (2007) TRIDENT (1994) ||| >> ||| >> ||| >> ||| Acess and Manage Patient Information Manage Patiente Information Identification Insert Login Insert Password Request Patient File Visualize Pictures Visualize Text Add Information Delete Information Manage Patiente Medical File Visualize Patiente Medical File Modify Patiente Medical File Monitor Real Time Patient Information Close Session Adaptado de SOUCHON, LIMBOURG e VANDERDONCK (2002)

MBUIDE  Arquitetura Geral Adaptado de PINHEIRO (2001) (a) TEALLACH e TADEUS (b) TRIDENT e METAGEN (c) MERLIN e MECANO Conjunto de modelos Gerador de código- fonte Compilador Código principal da aplicação Código gerado para um toolkit gráfico específico Aplicação final Conjunto de modelos Gerador de código intermediário Compilador Código principal da aplicação Subconjunto otimizado dos modelos Aplicação final Conjunto de modelos Compilador Código principal da aplicação Aplicação final Interpretador de tempo de execução Biblioteca do toolkit gráfico específico Arquitetura geral das MBUIDE em relação ao processo de geração da IU

MBUIDE  Arquitetura Geral  Geradores de código-fonte  Aplicação final não possui dependência dos modelos da MBUIDE  MBUIDE deve (ou deveria) se preocupar com refatoração de código-fonte  Menor flexibilidade à mudanças, usando abordagem “uma via”  Maior desempenho da aplicação final (devido compilação total)  Geração de código intermediário  Menor dependência dos modelos da MBUIDE  Problemas de sincronização duplicados, devido 2 pontos de integração  Possível melhor desempenho  Geradores de tempo de execução (abordagem utilizada no trabalho)  Total dependência dos modelos da MBUIDE  Prototipação instantânea  Praticamente não sofrem problemas de refatoração  Possível pior desempenho

MBUIDE  Processo de Desenvolvimento Criação dos modelos Nova IU Adição de funcionalid ades Geração de versões preliminare s Detalhame ntos de mais baixo nível Geração da IU ou código- fonte final Ajustes e integração com o restante do sistema IU Completa Refatoração Processo geral de desenvolvimento de IU usando MBUIDE (notação BPMN) Abstração MaiorMenor

MBUIDE  Vantagens  Padronização e centralização de atividades  Trabalhos realizados em mais alto nível  Respostas rápidas nos primeiros ciclos de desenvolvimento  Problemas Recorrentes  Sintaxes e notações complicadas  Linguagens e metodologias fora dos padrões de mercado  Busca pela generalidade, implicando em modelos demasiadamente complexos e instáveis  Reuso de soluções não alcançado com praticidade  Fraco suporte à refatoração e evolução dos modelos  Desequilíbrio entre a pesquisa e a aplicação de conceitos

PARTE 3 5.Merlin 6.Estudo de Caso

Merlin  É uma MBUIDE com ênfase no cenário de desenvolvimento profissional que: 1.Tem foco específico em interfaces CRUD  Na versão corrente suporta CRUD simples, do tipo Um-Para-Um 2.Utiliza uma estrutura única para o armazenamento dos seus modelos  Na prática, os modelos são as próprias classes compiladas da aplicação 3.Não gera nenhum tipo de código-fonte  A transformação dos modelos em IU ocorre em tempo de execução 4.Vale-se de heurísticas plugáveis para geração da IU  Podendo serem definidas em linguagem nativa ou usando frameworks externos 5.Utiliza um mecanismo realimentado de configurações  Inferência de comportamento com base em informações históricas e taxas de acerto 6.É neutro em relação a pacote gráfico e ambiente de uso  Web, desktop ou dispositivos móveis podem ser alcançados 7.Possui uma arquitetura focada em reuso e integração de tecnologias

Merlin  Origens  Projeto Metagen na UNISC  Iniciado em 2001, era uma MBUIDE rudimentar  Gerava interfaces CRUD Um-Para-Um e Um-Para-Muitos  Foi utilizado com sucesso em sistemas profissionais  Ênfase no Modelo de Dados  Utilizava código intermediário para os modelos  Carências do Metagen  Linguagem VB, Delphi e Kylix  Sem suporte Web, não era multi-plataforma e não permitia distribuição  Sem definição clara de modelos  Orientação a Objetos não era utilizada  Pouca preocupação com padrões e tecnologias de mercado  Reuso baseado em cópia de configuração  Layout de IU sem grande flexibilidade

 Idéia básica de geração das IU CRUD Mapeamento de um modelo de domínio para uma IU CRUD simples Merlin codigo = “RH0001” : String nome = “Marcelo Mrack” : String ativo = true : boolean dataDeNascimento = 02/10/1977 : Date observacoes = null : String : Funcionario

Merlin  Típica interface CRUD gerada pelo Metagen (2003) Interface CRUD Um-Para-Um de média complexidade gerada pelo Metagen Agrupamentos simples Layout essencialmente tabular Dependências de preenchimento Máscaras e tamanhos Ligação básica de funções de negócio Operações CRUD essenciais

Merlin  Iniciado em 2004, é a continuação do projeto Metagen  Uso da linguagem Java  Franco crescimento  Suporte Web, Desktop, multi-plataforma  Orientação a Objetos  Separação de conceitos  Modelos claros –Modelo de Domínio –Modelo de Tarefas –Modelo de Apresentação, com suporte AIO e CIO –Modelo de Diálogo –Modelo de Usuário  Outros modelos sem utilidade devido uso da Java  Flexibilidade total no layout da IU  Foco em reuso de configurações e integração de tecnologias  Geração totalmente em tempo de execução

Merlin  Características  Modelos  O Merlin utiliza 5 tipos de modelos para geração das IU, todos orbitando sobre o Modelo de Domínio  Descritos através da própria linguagem Java, com do recurso conhecido como Metadata Facility, ou simplesmente Anotações (JSR 175)  Os modelos nada mais são do que as classes (com ênfase nas de persistência) da aplicação enriquecidos com Anotações, as quais: –São definidas pelo próprio Merlin –Podem ser reutilizadas de outros frameworks –Podem ser criadas pelo próprio programador  Por serem as classes da aplicação, são compilados junto a ela, e portanto, não existem estruturas adicionais de armazenamento

Merlin  Características  Modelos no Merlin, um de Cliente Pessoa Física”) class Cliente extends Pessoa implements IPessoaFisica event={“focusLost”}, action={“habilitarCartao”} condition={“length>0”}) float String Estado Cidade cidade; } Uma classe de persistência utilizada como base de um conjunto de modelos

Estrutura geral de funcionamento do software Merlin  Características  Arquitetura Merlin Modelos Interpretador de Tempo de Execução IU Gerada Classes da Aplicação Anotações Heurísticas Resolvedores AIOCIOToolkit Gráfico Histórico Estimativas Meio Externo

 Características  Processo de Desenvolvimento Desenvolvimento de IU utilizando o software Merlin Merlin IDE Aplicação Tempo de execuçãoTempo de projeto Programador usa IDE Programador cria classes Programador insere anotações Programador compila sistema Merlin interpreta modelos IU gerada pelo Merlin Usuáirio utiliza o sistema final

Merlin  Funcionalidades  Heurísticas plugáveis  Nada mais são do que algoritmos que transformam as informações dos modelos nas características desejadas para a IU  Escritos em linguagem Java, Groovy, BeanShell ou delegados a mecanismos externos –JBoss Drools é uma máquina de processamento de regras de produção (um Sistema Especialista) que pode ser usado para inferir resultados com base nas classes anotadas do sistema (modelos). –A estrutura do Merlin permite integrações desse tipo, seja com delegação total, ou com um sistema híbrido de resolução

Merlin  Características  Heurísticas plugáveis, um exemplo Implementando uma heurística simples em código Java Uma nova anotação Capitalized {} Uma classe decorada class Cliente String nome; } Um resolvedor simples em código Groovy instrumentado + class CapitalizedResolver extends AbstractResolver { void resolve(Object source, Object destination) { if (source.contains(annotation)) { set(“destination.text”, StringUtil.capitalize(destination)) }

 Diferenciais  Sinônimos e Similaridades Utilizando similaridades e sinônimos para geração da IU Merlin class Cliente String observacao; } class Produto { String observacoes; } class NotaFiscal { String obs; } Observação Cliente Observações Produto Obs Nota Fiscal Modelo de Domínio A Modelo de Domínio B Modelo de Domínio C

Merlin  Diferenciais  API enxuta, dois métodos essenciais para o programador  getInstance(toolkit) –Obtém uma instância do gerador para o toolkit gráfico desejado  createIU(objeto, params) –Retorna uma IU CRUD completa

Merlin  Funcionalidades  Layout Customizável  Por anotações  Por heurísticas  Por design manual –Por templates –Por substituição

Merlin  Diferenciais  Configuração realimentada e distribuída  Ou podem ser delegados para mecanismos externos –JBoss Drools é uma máquina de processamento de regras, como um Sistema Especialista da Inteligência Artificial. Nele, regras de produção podem ser usadas para inferir resultados com base nas

 Diferenciais  Integração com Ferramentas  Edição Textual Assistida é uma tendência de mercado –Parsing de expressões e captura de erros –Preenchimento automático de informações –Navegação entre modelos –Code folding (Dobras de código no editor de texto) Assistência de edição de modelos no Eclipse IDE Merlin The event focosLost cannot be recognized. Available events are: focusLost focusGain see others... focusLost

Merlin  Diferenciais  Mapeamento Bi-Direcional entre AIO e CIO

PARTE 4 7.Conclusões

- slide 40 de xx Fim Geração Automática e Assistida de Interfaces de Usuário Marcelo Mrack

- slide 41 de xx Sobre o autor  Marcelo Mrack,  29 anos, 8 em TI, 6 em Java  Bacharel em C. Computação, UNISC – 2001  Mestrando em C. Computação, UFRGS – 2006  Atuação em projetos web e desktop n camadas  Sócio e arquiteto na 3Layer Tecnologia  Projetista na CWI Software  Consultor e instrutor Hibernate, Java EE  Especialidades: IHC, Patterns, geradores, PU Ágil e UML  

- slide 42 de xx Figuras Auxiliares  A partir daqui, figuras auxiliares Dependências em grafos Cliente Cidade Estado

Ligação de elementos e Injeção de recursos Interligação de eventos e regras de negócio para controles de IU public class Funcionario event = { “lostFocus" }, action = { “fill " } ) String nome; String ; } (a) Classe do Modelo de Domínio(b) Classe com regras de negócio public class RegrasDeNegocio Context ctx; void fill () { ctx.eval( “$txt .text = $txtNome.text.trim + }

Layout de IU via anotações Redefinindo a ordem de controles e a posição de textos descritivos na IU A classe de dados class Cliente String nome; float String observacoes; } A tela gerada Cadastro de Cliente Salário Nome Observações 2 5

Layout de IU via templates Um exemplo de layout manual (a) O template inicial AlgumaClasse extends JPanel Cadastro de Cliente (b) O template configurado Cadastro de Cliente AlgumaClasse extends JPanel lblSalario salario lblNome nome observacoes lblObservacoes (c) A IU gerada Cadastro de Cliente Salário Nome Observações (d) A chamada ao gerador, informando o template de IU a ser utilizado merlin.createIhc(Cliente.class, AlgumaClassse.class);

Sinônimos e Similaridades Utilizando similaridades e sinônimos para a geração da IU Modelo de Domínio A class Cliente String observacao; } Modelo de Domínio B class Produto { String observacoes; } Modelo de Domínio C class NotaFiscal { String obs; } Observação Cliente Observações Produto Obs Nota Fiscal

Processo de Desenvolvimento O processo de desenvolvimento utilizando o Merlin (a) Tempo de projeto(b) Tempo de execução Ambiente de desenvolvimento Aplicação Programador Classes Java Anotações [Enriquecer] Compilar Utilizar Criar Evoluir MERLIN IU Usuário Classes-base da IU compiladas com anotações Classes compiladas do restante da aplicação

Estudo de Caso, geração 1 - slide 48 de xx

Estudo de Caso, geração 2 - slide 49 de xx