Roteiros para os exemplos utilizados durante o curso

Transcrição

1 WebMedia 2009 Minicurso 3: Desenvolvimento Web Orientado a Modelos: Conceitos, Ferramentas e Técnicas Daniel Lucrédio Thiago Jabur Bittar Renata Pontin de Mattos Fortes {lucredio,jabur,renata@icmc.usp.br ICMC USP São Carlos/SP Roteiros para os exemplos utilizados durante o curso Software utilizado: - Eclipse Modeling Tools - Build (Galileo) - Xtext Antlr Support update site: - Eclipse Data Tools Platform Enablement update site: - Eclipse Web Tools Platform update site: 06 de outubro de 2009

2 Exemplo 1 Objetivo: Demonstrar como usar Xtext para criar uma linguagem textual, e criar um interpretador simples baseado em EMF 1. Criar novo projeto xtext 1.1. name = webmedia.mc3.exemplo language = webmedia.mc3.math 1.3. file extension = math 1.4. Mandar criar o generator project 2. O arquivo Math.xtext irá aparecer 3. Definir a seguinte gramática para uma linguagem matemática simples grammar webmedia.mc3.math with org.eclipse.xtext.common.terminals generate math " Problema : (expressoes += Expressao)*; Expressao : Armazena Operacao; Armazena : Operacao : 'Armazene' termo=int; sinal=sinalmatematico termo=int; enum SinalMatematico : SOMA = '+' SUBTRACAO = '-' MULTIPLICACAO = '*' DIVISAO = '/'; 4. Observar que no Xtext que sintaxe abstrata e concreta é junto 5. Gerar o plug-in da linguagem 5.1. Clicar com botão direito sobre o arquivo: src/webmedia.mcr/generatemath.mwe 5.2. Escolher Run As -> MWE Workflow 6. Observar que foi gerado o metamodelo OO correspondente: src-gen/webmedia.mc3/math.ecore 6.1. Para visualizar melhor o metamodelo, clicar com botão direito sobre o arquivo.ecore e escolher Initialize Ecore Diagram File Fazer deploy do plug-in 7.1. Clicar com botão direito no projeto e escolher Export 7.2. Mandar exportar como Deployable plug-ins and fragments os projetos webmedia.mc3.exemplo1 e webmedia.mc3.exemplo1.ui Ao exportar, escolher a opção arquivos.jar Escolha uma pasta qualquer para exportar os arquivos 7.3. Copiar a pasta gerada dentro da pasta do eclipse e reiniciar o ambiente 8. Abrir o arquivo de testes (src/model/mymodel.math) no generator project (webmedia.mc3.exemplo1.generator) e testar o editor 9. Fazer um interpretador 9.1. Comentar as linhas para geração de código, e adicionar uma linha no final do arquivo de workflow do generator project (MathGenerator.mwe), conforme a seguir:

3 <workflow>... <!-- <component class="org.eclipse.xpand2.generator"> <metamodel class="org.eclipse.xtend.typesystem.emf.emfregistrymetamodel"/> <fileencoding value="cp1252"/> <expand value="templates::template::main FOR model"/> <genpath value="${targetdir"/> </component> --> <component class="math.executa" /> </workflow> 9.2. Criar nova classe (math.executa) no pacote src do generator project que estende AbstractWorkflowComponent 9.3. Mandar o Eclipse adicionar os métodos não implementados 9.4. Adicionar a seguinte implementação ao método invokeinternal protected void invokeinternal(workflowcontext ctx, ProgressMonitor monitor, Issues issues) { EObject model = (EObject) ctx.get("model"); Problema problema = (Problema) model; float resultado = 0; for (Expressao expressao : problema.getexpressoes()) { int valor = expressao.gettermo(); if (expressao instanceof Armazena) { System.out.println(" Armazena " + valor); resultado = valor; else { Operacao operacao = (Operacao) expressao; switch (operacao.getsinal()) { case SOMA: System.out.println(" Soma " + valor); resultado = resultado + valor; break; case SUBTRACAO: System.out.println(" Subtrai " + valor); resultado = resultado - valor; break; case DIVISAO: System.out.println(" Divide " + valor); resultado = resultado / valor; break; case MULTIPLICACAO: System.out.println(" Multiplica " + valor); resultado = resultado * valor; break; System.out.println("=" + resultado); 9.5. Rodar o exemplo Clicar com botão direito sobre MathGenerator.mwe Escolher Run As -> MWE Workflow

4 Exemplo 2 Objetivo: Demonstrar como usar GMF para criar uma linguagem visual, e criar um interpretador simples baseado em EMF 1. Criar novo projeto GMF 1.1. name = webmedia.mc3.exemplo Mandar mostrar a dashboard 1.3. Mover a pasta model para dentro da pasta src 2. Criar um Domain Model(usando o dashboard), dentro da pasta model, chamado questionario.ecore 3. Inicializar diagrama ecore para editar mais facilmente 3.1. Clicar com botão direito sobre questionario.ecore e escolher Initialize Ecore Diagram File... (Não utilizar Initialize ecore_diagram diagram file ) 4. Criar o metamodelo 4.1. Se não estiver aparecendo, mandar mostrar a properties view 4.2. Clicar em qualquer lugar do diagrama, e setar as propriedades: Name: questionario Ns Prefix: questionarionsprefix Ns URI: questionarionsuri 4.3. Criar o seguinte metamodelo 5. Derivar o Domain Gen Model (usando o dashboard) e gerar o código EMF 5.1. Abrir o genmodel gerado 5.2. Clicar sobre o elemento raiz (Questionario) com o botão direito e escolher Generate All 6. Derivar o Graphical Def Model (usando o dashboard) 6.1. Escolher Questionario como Diagram Element 6.2. Na tela de definição gráfica, escolher as seguintes opções:

5 7. Derivar o Tooling Def Model (usando o dashboard) 7.1. Escolher Questionario como Diagram Element 7.2. Na tela de definição das ferramentas, escolher as seguintes opções: 8. Combinar o Graphical e Tooling Def Models no Mapping Model (usando o dashboard) 8.1. Escolher Questionario como elemento do canvas mapping 8.2. Seguir até o fim 8.3. Após o gmfmap ser criado, expandir o Link Mapping e clicar sobre o nó filho Feature Label Mapping false 8.4. Na propriedade Diagram Label escolher Diagram Label RespostaTexto 9. Transformar o Mapping Model em Diagram Editor Gen Model (usando o dashboard) 9.1. Aguardar, pois não é exibida nenhuma janela nesse último passo 10. Mandar gerar o editor de diagramas Clicar sobre Generate diagram editor no dashboard 11. Fazer deploy Clicar com botão direito no projeto e escolher Export Mandar exportar como Deployable plug-ins and fragments todos os projetos webmedia.mc3.exemplo2*.* Usar a opção de exportar para arquivos.jar No campo Qualifier replacement, inserir noqualifier Copiar a pasta gerada dentro da pasta do eclipse e reiniciar o ambiente 12. Testar o editor criado Criar um novo Xpand Project nome = webmedia.mc3.exemplo2.generator Create a sample = true Criar um novo arquivo do diagrama Clicar com botão direito no pacote src, escolher New -> Example... -> Questionario diagram Testar o editor, criando um questionario 14. Embelezar o diagrama Trocar os ícones Sair do eclipse, remover os arquivos.jar do plug-in e iniciar novamente Substituir os ícones novos da pasta icons/full/obj16 do projeto webmedia.mc3.exemplo2.edit Exportar os plug-ins novamente e testar Colocar seta na resposta No gmfgraph, adicionar um filho Polyline Decoration ao nó Polyline Connection RespostaFigure Clicar sobre o elemento recém-criado e colocar no campo Name o valor Seta Clicar sobre o elemento Polyline Connection RespostaFigure e escolher para a propriedade Target decoration o valor Polyline Decoration Seta Refazer os passos Transform e Generate diagram editor do dashboard Exportar os plug-ins novamente e testar

6 15. Fazer um interpretador Configurar o arquivo de workflow (src/workflow/generator.mwe) do projeto webmedia.mc3.exemplo2.generator: <workflow> <property name="model" value="webmedia.mc3.exemplo2.generator/src/default.questionario" /> <!-- set up EMF for standalone execution --> <bean class="org.eclipse.emf.mwe.utils.standalonesetup" > <platformuri value=".."/> <RegisterGeneratedEPackage value="questionario.questionariopackage"/> </bean> <!-- load model and store it in slot 'model' --> <component class="org.eclipse.emf.mwe.utils.reader"> <uri value="platform:/resource/${model" /> <modelslot value="model" /> </component> <component class="questionario.executa" /> </workflow> Configurar as dependências do projeto Abrir o arquivo META-INF/MANIFEST.MF Na aba de dependências, adicionar os seguintes plug-ins como required: - webmedia.mc3.exemplo2 - org.eclipse.emf.mwe.utils Criar nova classe (questionario.executa) no pacote src, estendendo AbstractWorkflowComponent Mandar o Eclipse adicionar os métodos não implementados Adicionar a seguinte implementação ao método invokeinternal protected void invokeinternal(workflowcontext ctx, ProgressMonitor monitor,issues issues) { EObject model = (EObject) ctx.get("model"); Questionario questionario = (Questionario)model; Item itematual = null; for(item i: questionario.getperguntas()) { if(i.isinicio()) { itematual = i; break; if(itematual == null) { issues.adderror("não existe mensagem definida como inicial!"); return; System.out.println(itemAtual.getMensagem()); Scanner console = new Scanner(System.in); while(!itematual.isfim()) { for(int i=1;i<=itematual.getalternativas().size();i++) { Resposta r = itematual.getalternativas().get(i-1); System.out.println(i+") "+r.gettexto()); System.out.println("Digite sua resposta"); int opcao = console.nextint(); itematual = itematual.getalternativas().get(opcao- 1).getProximaPergunta(); System.out.println(itemAtual.getMensagem()); System.out.println("Fim do questionário"); Rodar o arquivo generator.mwe

7 Exemplo 3 Objetivo: Demonstrar como fazer uma transformação declarativa utilizando xtend 1. Copiar projeto webmedia.mc3.exemplo1.generator 1.1. Novo nome = webmedia.mc3.exemplo3 2. Modificar arquivo Extensions.ext para incluir as regras transforma(problema problema) : problema.expressoes.typeselect(armazena).incrementaarmazena() -> problema.expressoes.typeselect(operacao).trocasomaporsubtracao() -> problema.adicionaexpressao() ; incrementaarmazena (Armazena armazena) : armazena.settermo(armazena.termo + 10) ; trocasomaporsubtracao (Operacao operacao) : if(operacao.sinal == SinalMatematico::SOMA) then operacao.setsinal(sinalmatematico::subtracao) ; adicionaexpressao(problema problema): let e = new Operacao: e.setsinal(sinalmatematico::soma) -> e.settermo(1234) -> problema.expressoes.add(e) ; 3. Adicionar o seguinte trecho ao workflow (antes do math.executa) <component class="org.eclipse.xtend.xtendcomponent"> <metamodel class="org.eclipse.xtend.typesystem.emf.emfmetamodel"> <metamodelpackage value="webmedia.mc3.math.mathpackage" /> </metamodel> <invoke value="templates::extensions::transforma(model)"/> </component> 4. Rodar o workflow

8 Exemplo 4 Objetivo: Demonstrar como fazer uma transformação procedural utilizando EMF 1. Copiar projeto webmedia.mc3.exemplo2.generator 1.1. Novo nome = webmedia.mc3.exemplo4 2. Criar dentro do pacote src uma classe questionario.transforma, que estende AbstractWorkflowComponent 2.1. Inserir o seguinte conteúdo no método protected void invokeinternal(workflowcontext ctx, ProgressMonitor monitor, Issues issues) { EObject model = (EObject) ctx.get("model"); Questionario questionario = (Questionario)model; Item iteminicial = null; for(item i: questionario.getperguntas()) { if(i.isinicio()) { iteminicial = i; break; if(iteminicial == null) { issues.adderror("não existe mensagem definida como inicial!"); return; for(item i: questionario.getperguntas()) { if(!i.isinicio() &&!i.isfim()) { Resposta r = QuestionarioFactory.eINSTANCE.createResposta(); r.settexto("voltar ao início"); r.setproximapergunta(iteminicial); i.getalternativas().add(r); 3. Adicionar a chamada para a nova classe criada, no final arquivo de workflow, antes do componente Executa, e modificar o começo do arquivo para apontar para o projeto atual <workflow> <property name="model" value="webmedia.mc3.exemplo4/src/default.questionario" />... <component class="questionario.transforma" /> <component class="questionario.executa" /> </workflow> 4. Rodar o workflow

9 Exemplo 5 Objetivo: Demonstrar como gerar código utilizando xpand 1. Copiar projeto webmedia.mc3.exemplo Novo nome = webmedia.mc3.exemplo5 2. Colocar o seguinte conteúdo no arquivo src/templates/template.xpt «IMPORT math»; «EXTENSION templates::extensions» «DEFINE main FOR Problema-» «FILE "CodigoGerado.java"-» public class CodigoGerado { public static void main(string args[]) { double resultado = 0; «FOREACH this.expressoes AS expressao-» «IF expressao.metatype == Armazena-» resultado = «expressao.termo»; «ELSE-» resultado = resultado «((Operacao)expressao).sinal» «expressao.termo»; «ENDIF-» «ENDFOREACH-» System.out.println("O resultado é "+resultado); «ENDFILE-» «ENDDEFINE» 3. Descomentar o componente do xpand Generator no arquivo de workflow: <workflow>... <component class="org.eclipse.xpand2.generator"> <metamodel class="org.eclipse.xtend.typesystem.emf.emfregistrymetamodel"/> <fileencoding value="cp1252"/> <expand value="templates::template::main FOR model"/> <genpath value="${targetdir"/> </component>... </workflow> 4. Rodar o workflow 5. Observar que foi gerado o arquivo src-gen/codigogerado.java

10 Exemplo 6 Objetivo: Demonstrar como gerar código utilizando JET 1. Criar um novo JET Transformation Project 1.1. nome = webmedia.mc3.exemplo Deixar as outras opções como default 2. Configurar o projeto para ler modelos EMF 2.1. Abrir o arquivo plugin.xml no raiz do projeto 2.2. Clicar na aba Extensions 2.3. Expandir o elemento org.eclipse.jet.transform na árvore All Extensions 2.4. Clicar no elemento (transform) 2.5. No campo modelloader, preencher org.eclipse.jet.emf 3. Criar templates para gerar um HTML para o questionário arquivo templates/main.jet <%@taglib prefix="ws" id="org.eclipse.jet.workspacetags" %> <c:setvariable var="org.eclipse.jet.taglib.control.iteratesetscontext" select="true()"/> <ws:project name="webmedia.mc3.exemplo6.generated"> <ws:folder path="html-gen"> <ws:file path="questionario.html" template="templates/questionario.html.jet" /> </ws:folder> </ws:project> arquivo templates/questionario.html.jet <html> <head> <title><c:get select="/questionario/@titulo" /></title> </head> <body> <h1><c:get select="/questionario/@titulo" /></h1> <br> Descrição: <c:get select="/questionario/@descricao" /> <br> <br> O tempo estimado para este questionário é de <c:get select="/questionario/@tempo" /> minutos <hr> <br> <% int contadorpergunta = 1; %> <c:iterate select="/questionario/perguntas[@fim!='true']" var="pergunta"> <c:get select="$pergunta/@mensagem" /> <br> <c:iterate select="$pergunta/alternativas" var="resposta" delimiter=" "> <input type="radio" name="rbpergunta<%=contadorpergunta%>" value=""><c:get select="$resposta/@texto" /> </c:iterate> <% contadorpergunta++; %> <br><br> </c:iterate> Possíveis conclusões:<br> <c:iterate select="/questionario/perguntas[@fim='true']" var="pergunta"> <input type="radio" name="rbconclusao" value=""><c:get select="$pergunta/@mensagem" /> <br> </c:iterate> </body> </html> 4. Rodar a transformação 4.1. Clicar no menu Run -> Run Configurations...

11 4.2. Clicar com botão direito sobre JET Transformation e escolher New 4.3. No campo Transformation Input, escolher - webmedia.mc3.exemplo4/src/default.questionario 4.4. No campo Transformation ID, escolher - webmedia.mc3.exemplo Clicar em Apply e em seguida em Run 4.6. Observar que foi criado um novo projeto webmedia.mc3.exemplo6.generated, com o conteúdo do questionário sendo gerado no arquivo html-gen/questionario.html 5. Mostrar como combinar com a transformação 5.1. Copiar projeto webmedia.mc3.exemplo Novo nome = webmedia.mc3.exemplo6.transforma 5.2. Modificar o arquivo de workflow Modificar a propriedade model para apontar para o modelo deste projeto Incluir uma propriedade transformedmodel para apontar para o modelo transformado Comentar o componente questionario.executa Incluir um componente de escrita do modelo transformado <?xml version="1.0"?> <workflow> <property name="model" value="webmedia.mc3.exemplo6.transforma/src/default.questionario" /> <property name="transformedmodel" value="webmedia.mc3.exemplo6.transforma/src/transformed.questionario" /> <!-- set up EMF for standalone execution --> <bean class="org.eclipse.emf.mwe.utils.standalonesetup" > <platformuri value=".."/> <RegisterGeneratedEPackage value="questionario.questionariopackage"/> </bean> <!-- load model and store it in slot 'model' --> <component class="org.eclipse.emf.mwe.utils.reader"> <uri value="platform:/resource/${model" /> <modelslot value="model" /> </component> <component class="questionario.transforma" /> <!--<component class="questionario.executa" />--> <component class="org.eclipse.emf.mwe.utils.writer"> <modelslot value="model" /> <uri value="platform:/resource/${transformedmodel" /> </component> </workflow> 5.3. Rodar o workflow Será criado o arquivo transformed.questionario Clicar com botão direito sobre o arquivo criado e escolher Initialize questionario_diagram diagram file e verificar que o novo modelo inclui as transformações 5.4. Rodar o gerador JET novamente, mas com o modelo transformado Clicar em Run -> Run Configurations Clicar na configuração JET Transformation criada anteriormente Modificar o campo Transformation Input para: webmedia.mc3.exemplo6.transforma/src/transformed.questionario Clicar em Apply e Run Verificar que o novo arquivo HTML gerado agora inclui as transformações

12 Estudo de caso Objetivo: Demonstrar a aplicação dos conceitos do desenvolvimento orientado a modelos na Engenharia Web 1. Modelagem estrutural 1.1. Criar novo projeto Xtext Name = webmedia.mc3.estudodecaso.estrutura Language name = webmedia.mc3.estudodecaso.estrutura DSL-file extension = estrutura Create generator project = true 1.2. Manter a própria gramática de exemplo criada 1.3. Mandar gerar o plug-in para a linguagem Rodar o workflow GenerateEstrutura.mwe 1.4. Exportar como Deployable plug-ins and fragments os projetos: - webmedia.mc3.estudodecaso.estrutura - webmedia.mc3.estudodecaso.estrutura.ui 1.5. Sair do eclipse, copiar os arquivos exportados para a pasta do eclipse e reiniciar o ambiente 1.6. Testar o modelo, no arquivo src/model/mymodel.estrutura, localizado no projeto webmedia.mc3.estudodecaso.estrutura.generator type String type int entity Pessoa { property nome : String property idade : int property dependentes : Pessoa[] property enderecoresidencial : Endereco entity Endereco { property rua : String property numero : int 2. Modelagem da navegação 2.1. Criar novo projeto GMF Nome = webmedia.mc3.estudodecaso.navegacao Mandar mostrar o dashboard Mover a pasta model para dentro da pasta src 2.2. Criar um Domain Model (usando o dashboard), dentro da pasta model, chamado navegacao.ecore 2.3. Inicializar diagrama ecore para editar mais facilmente Clicar com botão direito sobre navegacao.ecore e escolher Initialize Ecore Diagram File... (Não utilizar Initialize ecore_diagram diagram file ) 2.4. Criar o metamodelo Se não estiver aparecendo, mandar mostrar a properties view Clicar em qualquer lugar do diagrama, e setar as propriedades: Name: navegacao Ns Prefix: navegacaonsprefix Ns URI: navegacaonsuri

13 Criar o seguinte metamodelo: 2.5. Mandar derivar o Domain Gen Model (usando o dashboard) Deixar todas as opções default Após a criação, o arquivo gerado será aberto Clicar com botão direito sobre o nó raiz Navegacao e escolher Generate All 2.6. Mandar derivar o Graphical Def Model (usando o dashboard) Escolher Navegacao como Diagram Element Na tela de definição gráfica, escolher a seguinte configuração Ajustar o arquivo gmfgraph gerado: Apagar o nó Rectangle AreaFigure Clicar com botão direito sobre Figure Descriptor AreaFigure e escolher -> New Child -> Rounded Rectangle Clicar sobre Rounded Rectangle para visualizar suas propriedades e digitar AreaFigure no campo Name Mudar o campo Line Width para Clicar com botão direito sobre o nó Rounded Rectangle AreaFigure e escolher -> New Child -> Flow Layout Clicar com botão direito sobre o nó Rounded Rectangle AreaFigure e escolher -> New Child -> Label Clicar sobre o recém-criado elemento Label e setar os seguintes campos: Name = AreaNomeFigure Text = <...> Clicar sobre o elemento Child Access getfigurenull e setar o campo Figure para Label AreaNomeFigure (O campo Accessor irá atualizar automaticamente) Clicar sobre o elemento Polyline Connection PaginaAreaFigure e mudar o campo Line Kind para LINE_DOT

14 Clicar com botão direito sobre o elemento Polyline Connection LinkFigure e escolher -> New Child -> Polyline Decoration Clicar sobre o elemento recém-criado Polyline Decoration e colocar no campo Name o valor SetaLink Clicar sobre o elemento Polyline Connection LinkFigure e colocar no campo Target Decoration o valor Polyline Decoration SetaLink Clicar com botão direito sobre o elemento Polyline Connection LinkFigure e escolher -> New Child -> Foreground Color Constant Color Clicar sobre o elemento recém-criado e escolher o valor blue 2.7. Mandar derivar o Tooling Def Model (usando o dashboard) Escolher Navegacao como Diagram Element Na tela de definição de ferramentas, escolher a seguinte configuração 2.8. Mandar combinar Graphical e Tooling Def Models no Mapping Model (usando o dashboard) Escolher Navegação como a classe do Canvas Mapping Deixar nas opções padrão a seleção de Palette e Canvas Na tela de mapeamento, escolher a seguinte configuração e clicar em Finish

15 Clicando sobre os elementos do mapping, verificar/modificar as propriedades para que estejam conforme a seguir: - Top Node Reference <areas:area/area> - Node Mapping <Area/Area> - Feature Label Mapping false (Area/Area) - Top Node Reference <paginas:pagina/pagina> - Node Mapping <Pagina/Pagina>

16 - Feature Label Mapping false (Pagina/Pagina) - Link Mapping <{Pagina.area:Area/PaginaArea> - Link Mapping <Link{/> (após alterar os campos, clique com botão direito e escolha Refresh. O nome deste nó irá mudar para: Link{Link.origem:Pagina->Link.destino:Pagina/Link ) Clicar com botão direito sobre este último nó e escolher New Child -> Feature Label Mapping Clicar sobre o elemento recém-criado e setar os seguintes campos: Features to display = Link.nome:Estring Diagram Label = Diagram Label LinkNome 2.9. Transformar o Mapping Model no Diagram Editor Gen Model (usando o dashboard) Aguardar, pois não é exibida nenhuma janela nesta ação Gerar o Diagram Editor Gen Model (usando o dashboard) Exportar os projetos como plug-in Clicar com botão direito sobre o projeto e escolher Export Exportar como Deployable plug-ins and fragments os projetos webmedia.mc3.estudodecaso.navegacao*.* Usar a opção de exportar para arquivos.jar

17 No campo Qualifier replacement, inserir noqualifier Copiar a pasta gerada dentro da pasta do eclipse e reiniciar o ambiente Para testar, clicar em qualquer pasta e escolher New -> Example -> Navegacao Diagram 3. Modelagem da apresentação 3.1. Criar novo projeto Xtext Name = webmedia.mc3.estudodecaso.apresentacao Language name = webmedia.mc3.estudodecaso.apresentacao DSL-file extension = apresentacao Create generator project = true 3.2. Criar a seguinte gramática grammar webmedia.mc3.estudodecaso.apresentacao with org.eclipse.xtext.common.terminals generate apresentacao " Apresentacao : (conteudo+=conteudo)* (paginas+=pagina)* ; Conteudo : 'conteudo' name=id '{' ('paragrafo' texto+=string)* '' ; Pagina : 'pagina' name=id '{' 'titulo' titulo=string 'ref_conteudo' (conteudopagina += [Conteudo])+ '' ; 3.3. Rodar o workflow GenerateApresentacao.mwe 3.4. Exportar como Deployable plug-ins and fragments os projetos - webmedia.mc3.estudodecaso.apresentacao - webmedia.mc3.estudodecaso.apresentacao.ui 3.5. Copiar a pasta gerada dentro do eclipse e reiniciar o ambiente 3.6. Testar, modificando o arquivo src/model/mymodel.apresentacao do projeto webmedia.mc3.estudodecaso.apresentacao.generator 4. Geração de código 4.1. Criar novo projeto Xpand Name = webmedia.mc3.estudodecaso.gerador Create a sample = true 4.2. Criar nova pasta model no pacote src

18 4.3. Criar arquivo model/meusite.estrutura type String type boolean type int type double entity Pessoa { property nome : String property String property receberinformacoes : boolean entity Noticia { property titulo : String property texto : String entity Produto { property nome : String property descricao : String property preco : double entity Pedido { property pessoa : Pessoa property produtos : Produto [] 4.4. Criar arquivo meusite.navegacao ( New -> Example... -> Navegacao diagram )

19 4.5. Criar arquivo meusite.apresentacao Criar conteúdo e páginas de acordo com o diagrama acima Manter os nomes das páginas Exemplo: conteudo faleconosco { paragrafo "Estamos abertos à críticas e sugestões" paragrafo "Entre em contato pelo faleconosco@site.com" paragrafo "Estaremos respondendo em até 24 horas" conteudo endereco { paragrafo "O site de compras tem sede em São Carlos - SP" paragrafo "Rua central, número 1234, Centro" paragrafo "CEP: " paragrafo "Telefone: (16) / Fax: (16) "... pagina principal { titulo "Página principal" ref_conteudo bemvindo endereco pagina ultimasnoticias { titulo "Últimas notícias" ref_conteudo noticias pagina faleconosco { titulo "Entre em contato" ref_conteudo faleconosco endereco Adicionar as dependências do projeto Abrir arquivo META-INF/MANIFEST.MF, e na aba Dependencies, adicionar os seguintes plug-ins como Required: - org.eclipse.emf.mwe.utils - webmedia.mc3.estudodecaso.apresentacao - webmedia.mc3.estudodecaso.estrutura - webmedia.mc3.estudodecaso.navegacao 4.7. Criar gerador da estrutura (beans)

20 Colocar o seguinte conteúdo nos arquivos: template/generatorextensions.ext (Xtend) import estrutura; Model model(type this) : econtainer; List[Entity] entities(model this) : elements.typeselect(entity); getter(property this) : "get"+name.tofirstupper(); setter(property this) : "set"+name.tofirstupper(); template/template.xpt (Xpand) «IMPORT apresentacao» «IMPORT estrutura» «IMPORT navegacao» «EXTENSION template::generatorextensions» «DEFINE main(apresentacao apresentacao, Navegacao navegacao) FOR Model» «EXPAND javaclass FOREACH entities()» «ENDDEFINE» «DEFINE javaclass FOR Entity-» «FILE "src-gen/beans/"+name+".java"-» package beans; public class «name» { «FOREACH properties AS p-» «IF!p.many-» private «p.type.name» «p.name»; public void «p.setter()»(«p.type.name» «p.name») { this.«p.name» = «p.name»; public «p.type.name» «p.getter()»() { return «p.name»; «ELSE-» private java.util.collection<«p.type.name»> «p.name»; public void «p.setter()»(java.util.collection<«p.type.name»> «p.name») { this.«p.name» = «p.name»; public java.util.collection<«p.type.name»> «p.getter()»() { return «p.name»; «ENDIF-» «ENDFOREACH-» «ENDFILE» «ENDDEFINE»

21 Para testar, modificar o arquivo de workflow (generator.mwe) para: <?xml version="1.0"?> <workflow> <property name="modeloestrutura" value="webmedia.mc3.estudodecaso.gerador/src/model/meusite.estrutura" /> <property name="modelonavegacao" value="webmedia.mc3.estudodecaso.gerador/src/model/meusite.navegacao" /> <property name="modeloapresentacao" value="webmedia.mc3.estudodecaso.gerador/src/model/meusite.apresentacao" /> <property name="targetdir" value="meusite"/> <!-- Configura os metamodelos EMF --> <bean class="org.eclipse.emf.mwe.utils.standalonesetup" > <platformuri value=".."/> <RegisterGeneratedEPackage value="navegacao.navegacaopackage"/> </bean> <!-- Ler modelo estrutural (Xtext) --> <component class="org.eclipse.xtext.mwereader" uri="platform:/resource/${modeloestrutura"> <!-- this class will be generated by the xtext generator --> <register class="webmedia.mc3.estudodecaso.estruturastandalonesetup"/> <outputslot value="modeloestruturalido" /> </component> <!-- Ler modelo de navegacao (GMF) --> <component class="org.eclipse.emf.mwe.utils.reader"> <uri value="platform:/resource/${modelonavegacao" /> <modelslot value="modelonavegacaolido" /> </component> <!-- Ler modelo apresentacao (Xtext) --> <component class="org.eclipse.xtext.mwereader" uri="platform:/resource/${modeloapresentacao"> <!-- this class will be generated by the xtext generator --> <register class="webmedia.mc3.estudodecaso.apresentacaostandalonesetup"/> <outputslot value="modeloapresentacaolido" /> </component> <!-- Gerar codigo --> <component class="org.eclipse.xpand2.generator"> <metamodel class="org.eclipse.xtend.typesystem.emf.emfregistrymetamodel"/> <fileencoding value="cp1252"/> <expand value="template::template::main(modeloapresentacaolido, modelonavegacaolido) FOR modeloestruturalido"/> <genpath value="${targetdir"/> </component> </workflow> Rodar o workflow e observar que gerou código para as entidades 4.8. Criar gerador das páginas Adicionar a seguinte linha ao arquivo Template.xpt... «DEFINE main(apresentacao apresentacao, Navegacao navegacao) FOR Model» «EXPAND javaclass FOREACH entities()» «EXPAND template::templatehtml::htmlpage(navegacao,apresentacao) FOREACH apresentacao.paginas» «ENDDEFINE»...

22 Criar arquivo de template das páginas, clicando sobre a pasta src/template e escolhendo New -> Other... -> Xpand Template template/templatehtml.xpt «IMPORT apresentacao» «IMPORT estrutura» «IMPORT navegacao» «EXTENSION template::generatorextensions» «DEFINE htmlpage(navegacao navegacao, Apresentacao apresentacao) FOR apresentacao::pagina-» «FILE "html-gen/paginas/"+name+".html"-» <html><head> <title>«titulo»</title> </head> <body> <h1>«titulo»</h1> <br> Você está em: «area(name,navegacao)» > «titulo» <hr> <table><tr> <td bgcolor="#cccccc"> «EXPAND menu(name, apresentacao) FOR navegacao-» </td> <td> <br> «FOREACH conteudopagina AS conteudo-» «FOREACH conteudo.texto AS paragrafo-» <p>«paragrafo»</p> «ENDFOREACH-» «ENDFOREACH-» <br> </td></tr></table> <hr> Links: «EXPAND links(name) FOR navegacao-» </body> </html> «ENDFILE» «ENDDEFINE» «DEFINE menu(string nome, Apresentacao apresentacao) FOR Navegacao-» «FOREACH areas AS area-» «area.nome»<br> «FOREACH paginas.select(e e.area==area) AS pagina-» «IF pagina.nome!=nome»<a href="«pagina.nome».html">«endif-» «apresentacao.paginas.selectfirst(e e.name==pagina.nome).titulo» «IF pagina.nome!=nome»</a>«endif-» <br/> «ENDFOREACH-» «ENDFOREACH-» «ENDDEFINE» «DEFINE links(string nome) FOR Navegacao-» «FOREACH links.select(e e.origem.nome==nome) AS link SEPARATOR " " -» <a href="«link.destino.nome».html">«link.nome»</a> «ENDFOREACH» «ENDDEFINE»