Geração automática de interfaces de usuário

Geração Automática e Assistida de Interfaces de Usuário <Título> - <Subtítulo> slide de xx aluno Marcelo Mrack orientador Prof. PhD Álvaro Freitas Moreira co-orientador Prof. D. Marcelo Soares Pimenta Instituto de Informática – PPGC – Mestrado Universidade Federal do Rio Grande do Sul junho/2008

Sumário ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

PARTE 1 ,[object Object],[object Object],[object Object]

Introdução ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Motivação ,[object Object],[object Object],[object Object],[object Object],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 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Interfaces de Usuário ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Interfaces de Usuário ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

[object Object],Interfaces de Usuário Mapeamento de um objeto de dados para uma IU CRUD simples codigo = “RH0001” : String nome = “Marcelo Mrack” : String ativo = true : boolean dataDeNascimento = 02/10/1977 : Date observacoes = null : String : Funcionario

Interfaces de Usuário ,[object Object],[object Object],[object Object],Abrangência da ferramenta Merlin descrita no trabalho IU CRUD em geral 50% 30% CRUD elementar 18% Sistema completo 100% Merlin: Um Novo Horizonte na Criação de Telas de Cadastro; MRACK (2007)

MBUIDE ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

MBUIDE ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

MBUIDE ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

MBUIDE ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

MBUIDE ,[object Object],BODART, LEHEUREUX e VANDERDONCKT (1994) e MRACK (2007) Modelos de Apresentação Modelo 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 TO Cust_id; @Properties(“mnemonic=I;”) @Group(“Customer”) @Length(max=6) String id; Merlin (2007) TRIDENT (1994) Adaptado de SOUCHON, LIMBOURG e VANDERDONCK (2002) ||| >> >> ||| >> ||| >> ||| 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

MBUIDE ,[object Object],Adaptado de PINHEIRO (2001) (1) TEALLACH e TADEUS (2) TRIDENT e METAGEN (3) 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 Interpretador de tempo de execução Biblioteca do toolkit gráfico específico Biblioteca do toolkit gráfico específico Biblioteca do toolkit gráfico específico Arquitetura geral das MBUIDE em relação ao processo de geração da IU

MBUIDE ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

MBUIDE ,[object Object],Criação dos modelos Nova IU Adição de funcionalidades Geração de versões preliminares Detalhamentos 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 Maior Menor

PARTE 3 ,[object Object],[object Object]

Merlin ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Merlin ,[object Object],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 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Merlin ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Merlin ,[object Object],[object Object],@Caption(“Cadastro de Cliente Pessoa Física”) class Cliente extends Pessoa implements IPessoaFisica { @Agent( event={“focusLost”}, action={“habilitarCartao”} condition={“length>0”}) float salario; @NotNull boolean cartaoCredito; @Email @Column(length=“40”) @Property(“foreground=Color.blue”) @Order(after=“nome”) String email; @Caption(“UF”) Estado estado; @RenderAs(Lookup.class) Cidade cidade; } 1 2 3 4 5 6 7 8 Uma classe de persistência utilizada como base de um conjunto de modelos 9 10 11 12 13 14 15 16 17 18

Merlin ,[object Object],[object Object],@Caption ( “Cadastro de Cliente Pessoa Física” ) class Cliente extends Pessoa implements IPessoaFisica { @Agent ( event ={ “focusLost” }, action ={ “habilitarCartao” } condition ={ “length>0” }) float salario; @NotNull boolean cartaoCredito; @Email @Column ( length = “40” ) @Property ( “foreground=Color.blue” ) @Order ( after= “nome” ) String email; @Caption ( “UF” ) Estado estado; @RenderAs ( Lookup.class ) Cidade cidade; } 1 2 3 4 5 6 7 8 Uma classe de persistência utilizada como base de um conjunto de modelos 9 10 11 12 13 14 15 16 17 18

[object Object],[object Object],Merlin Aplicação final Estrutura geral de funcionamento do software Merlin Modelos Interpretador de Tempo de Execução IU Gerada Classes da Aplicação Anotações Heurísticas Resolvedores AIO CIO Toolkit Gráfico Histórico Estimativas Meio Externo

[object Object],[object Object],Merlin Desenvolvimento de IU utilizando o software Merlin 2 1 3 4 5 6 7 IDE Aplicação Tempo de execução Tempo de projeto Legenda 1 Programador usa IDE 2 Programador cria classes 3 Programador insere anotações 4 Programador compila sistema 5 Merlin interpreta modelos 6 IU gerada pelo Merlin 7 Usuáirio utiliza o sistema final

Merlin ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Merlin ,[object Object],[object Object],Implementando uma heurística simples em código Java Uma nova anotação public @interface Capitalized {} Uma classe decorada class Cliente { @Capitalized String nome; } Um resolvedor simples em código Groovy instrumentado + BeanShell @ResolverFor ( Capitalized.class ) class CapitalizedResolver extends AbstractResolver { void resolve(Object source, Object destination) { if (source.contains(annotation)) { set( “destination.text” , StringUtil.capitalize(destination)) } }

Merlin ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Merlin ,[object Object],[object Object],Redefinindo a ordem de controles e a posição de labels na tela A classe de dados A tela class Cliente { @Order ( after =“ observacoes ”) String nome; float salario; @Caption ( pos = Caption.TOP_LEFT ) String observacoes; } Cadastro de Cliente Cadastro de Cliente 1 2 3 4 5 6 Observações 7 2 5 Observações Salário Nome

Merlin ,[object Object],[object Object],Redefinindo a ordem de controles e a posição de labels na tela A classe de dados A tela @Caption ( pos = Caption.TOP_LEFT ) class Cliente { @Order ( after =“ observacoes ”) String nome; float salario; String observacoes; } Cadastro de Cliente Cadastro de Cliente Salário 1 2 3 4 5 6 Nome Observações 7

[object Object],[object Object],Merlin class Cliente { @RenderAs ( JTextArea.class ) String observacao ; } class Produto { String observacoes ; } class NotaFiscal { String obs ; } Modelo de Domínio A Modelo de Domínio B Modelo de Domínio C Sinônimo Similar Utilizando similaridades e sinônimos para geração da IU Observação Cliente Observações Produto Obs Nota Fiscal

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Merlin Assistência de edição de modelos no Eclipse IDE { “foc o sLost” } The event focosLost cannot be recognized. Available events are: focusLost focusGain see others... focusLost

Merlin ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Merlin ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Merlin ,[object Object],[object Object],[object Object],Classloaders em um servidor de aplicação Root LIBs classes S 1 S 2 S n C 1 C 2 C n classes classes classes C = Classloader S = Sistema LIB = Pacote de classes Root = Bootstrap classloader Legenda

Merlin ,[object Object],[object Object],[object Object],Classloaders em um servidor de aplicação Root LIBs classes S 1 S 2 S n C 1 C 2 C n classes classes classes Histórico

Merlin ,[object Object],[object Object],[object Object],Uma base federada distribuída de configurações Grupo 1 S 1 S 2 S 3 Federação 2 Federação 1 Grupo 2 S 1 S 2 S 3 Grupo 3 S 1 S 2 S 3

Estudo de Caso ,[object Object],[object Object],[object Object],[object Object],[object Object]

Estudo de Caso ,[object Object],[object Object],Uma classe simples, base do Modelo de Domínio public class Cliente { String nome; String sexo; Date dataDeNascimento; String descricao; String observacoes; boolean ativo; boolean vip; String email; } 1 2 3 4 5 6 7 8 9 10

[object Object],[object Object],Estudo de Caso Código-fonte da aplicação principal 1 2 3 4 5 6 7 8 9 10 Passo 1 public class TesteMerlin { public static void main(String[] s) { IMerlin m = Merlin.getInstance(SWING); JPanel crud = (JPanel) m.createIU(new Cliente()); JFrame frame = new Frame( “TesteMerlin” ); frame.add(crud,CENTER); frame.setVisible(true); } }'

Estudo de Caso ,[object Object],[object Object],Interface CRUD simples resultante Passo 2 Painel de mensagens Adequação de textos Correção ortográfica Layout tabular Controles de IU por tipo de dado Heurísticas de tamanho Não gerado pela ferramenta TesteMerlin

Estudo de Caso ,[object Object],[object Object],Novas classes, anotações e regras de negócio (classes Sexo e Pessoa) public enum Sexo { NAO_DECLARADO, MASCULINO, FEMININO } public class Pessoa { @Agent ( event = { "focusLost" }, action = { "proposeEmail" }) @NotNull String nome = "marcelo" ; public Sexo sexo = Sexo.MASCULINO; @Agent ( property = { "foreground=Color.blue" }, binder = DateToTextComponentBinder.class) Date dataDeNascimento = new Date(1977-1900,9,02); } 1 2 3 4 5 6 7 8 9 10 11 12

Estudo de Caso ,[object Object],[object Object],Novas classes, anotações e regras de negócio (classe Cliente) @Caption ( "Cadastro de Clientes" ) public class Cliente extends Pessoa { @Agent ( event = { "focusLost" }, action = { "isPreferencial" }) @Caption ( "Salário (R$)" ) int salario; @Order ( after = "observacoes" ) String descricao; @RenderAs (CHECKBOX) @Dependence ( "descricao" ) @Agent ( property = { "selected=true" }) String observacoes; @Dependence ( “[:alnum:]" ) @Order ( Order.FIRST ) @Agent ( property = { "selected=true;" }) boolean ativo; @RenderAs ( value = JTextField.class, binder = BooleanToTextComponentBinder.class) @Order ( LAST ) boolean vip = true; @Order ( after = "nome" ) @NotNull @Length ( min =12) String email; } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

Estudo de Caso ,[object Object],[object Object],Novas classes, anotações e regras de negócio (classe AlgumasRegras) public class AlgumasRegras { @In Context ctx ; public void isPreferencial () { ctx .eval ("$vip.text=$salario.text>1500 ? 'SIM' : 'NÃO' " ); } public void proposeEmail () { ctx .eval( "$email.text=$nome.text.trim+ '@merlin.com' " ); } } 1 2 3 4 5 6 7 8 9 10 11 12

Estudo de Caso ,[object Object],[object Object],Interface CRUD simples resultante após as refatorações e melhorias Painel de mensagens preenchidas Campo Ativo é o primeiro da tela Preenchimento pela regra associada Formatação de data customizada Campos obrigatórios em destaque Rótulo customizado e regra de negócio Campo Observações agora é CheckBox Desabilitado devido dependência Tipo multivalorado Campo booleano com formatação especial e regra de negócio aplicada TesteMerlin

Estudo de Caso ,[object Object],[object Object],Interfaces CRUD antes (esquerda) e depois (direita) da evolução do sistema TesteMerlin TesteMerlin

Conclusões ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Conclusões ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Conclusões ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Agradecimentos ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Fim <Título> - <Subtítulo> slide de xx Geração Automática e Assistida de Interfaces de Usuário Marcelo Mrack

Sobre o autor ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Geração automática de interfaces de usuário

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (6)

Similaire à Geração automática de interfaces de usuário

Similaire à Geração automática de interfaces de usuário (20)

Plus de Marcelo Mrack

Plus de Marcelo Mrack (9)

Geração automática de interfaces de usuário

Notes de l'éditeur