Tutorial GMF (Graphical Modeling Framework)

Transcrição

1 Tutorial GMF (Graphical Modeling Framework) Sobre o GMF: O GMF (Graphical Modeling Framework) é um framework para desenvolvimento de editores gráficos para modelos de domínio. Ele surgiu de uma união de dois frameworks denominados GEF (Graphical Editing Framework), utilizado para a criação de editores gráficos genéricos e EMF (Eclipse Modeling Framework), que permite ao desenvolvedor construir meta-modelos e gerar códigos java referidos ao mesmo. O framework EMF permite a modelagem do domínio utilizando um meta-modelo próprio, mais simples do que a especificação MOF (Meta-Object Facility) da MDA (Model Driven Architecture), chamado Ecore. A partir do mesmo é feita uma transformação em um meta-modelo especifico (*.genmodel) para a geração de código java. Baixando o plugin: Para baixar o plugin do GMF, siga a figura auto-explicativa abaixo:

2 Agora clique em New Remote Site e adicione o GMF através do update site: Criando o projeto Selecione a pasta Graphical Modeling Framework e clique em New GMF Project. Em seguida aperte em Next >. Neste caso, nomeamos o projeto como TutorialGMF. Em seguida aperte Next novamente.

3 Em seguida, habilite a opção Show dashboard view for the created project e clique em Finish. Feito isso, o dashboard do GMF já estará disponível em uma das abas do seu eclipse. Observe a figura: Para nosso exemplo, vamos fazer um diagrama simples, com círculos relacionados a círculos como a figura abaixo:

4 Para tanto, vamos criar o nosso META-MODELO Criando o meta-modelo (*.ecore) Para construir o meta-modelo do nosso diagrama, basta definirmos uma regra: Cada elemento (Node) vai conter uma ligação (edge) para outro elemento ou para ele mesmo. Para criar o nosso meta-modelo precisamos apenas de um arquivo *.ecore. No dashboard do GMF, dentro do retângulo Domain Model, clique em create. Observe a figura: Nomeamos o nosso arquivo ecore como My.ecore. Feito isso, aperte em Finish. Depois de criado, observe que o nosso metamodelo está vazio. Clique com o botão direito do mouse e em seguida clique em Show Properties View.

5 Com a aba de propriedades aberta, preencha, nos campos nulos, algumas informações básicas de acordo com a figura: Classes: Para criar uma classe (EClass), clique com o botão direito e siga os passos de acordo com a figura: Definiremos agora as propriedades da classe. No campo Name, definimos o nome da classe, no campo Abstract, definimos se a classe é abstrata ou não. OBS: Se houver relações de herança (não é o nosso caso), no campo ESuper Types definimos a(s) classe(s) pai. No nosso caso, vamos criar duas classes. Domain, que corresponde ao domínio do projeto, Node que corresponde aos elementos do nosso diagrama e Edge que corresponde às ligações entre os elementos do diagrama.

6 Classes: Classe Domain: Classe Node: Classe Edge:

7 Relacionamentos: Como já definimos o nosso metamodelo, agora precisamos concretizar esta idéia. O elemento vai ser uma agregação do nosso domínio (a classe Domain). Para isso vamos definir a relação (EReference): Depois de criar a relação, preencha os campos de acordo com a figura acima. O campo Containment como true significa que existe uma agregação entre o domínio e à classe Node. O campo EType diz qual classe está sendo relacionada. O campo name é o apelido para a relação. Os campos Lower Bound e Upper Bound simbolizam a cardinalidade da relação, onde o número -1 significa * (muitos), sendo assim a relação fica de zero para muitos (0..*).

8 A classe Node também terá os seus relacionamentos, portanto, não será agregação e sim uma associação. Observe a figura: Observe que desta vez o campo Containment está definido como false, o que implica uma associação (diferente do caso anterior). A cardinalidade também foi alterada, definindo o número 1, tanto para Lower Bound quanto para Upper Bound. A classe Edge, por sua vez, conterá duas relações: source e target, que definirá a origem e o destino do relacionamento entre os elementos.

9 Atributos: A classe Node possuirá apenas um atributo (EAttribute) que denominaremos label do tipo EString (adaptação que o ecore faz da classe java.lang.string). Após criar o atributo faça as devidas mudanças nas propriedades do mesmo, preenchendo os campos name e EType conforme à figura acima:

10 Vizualizando o nosso META-MODELO: Para visualizar o nosso meta-modelo de uma forma mais amigável, salve o metamodelo e clique com o botão direito no arquivo My.ecore de acordo com a figura abaixo, clicando em Initialize ecore_diagram diagram filen: Se você seguiu os passos descritos acima fielmente, o seu meta-modelo deve estar mais ou menos assim:

11 Gerando classes (*.genmodel) Para gerar as classes do projeto dirija-se ao dashboard do GMF em Derive ao lado esquerdo do retângulo Domain Model.

12 Após passar por todos os wizards clique em Finish. Este arquivo *.genmodel gera classes java de acordo com o meta-modelo. Então vamos a elas. Clique com o botão direito e em seguida clique em Generate Model Code e Generate Edit Code.

13 Gerando componentes gráficos (*.gmfgraph) Para gerar os componentes gráficos dirija-se ao dashboard e clique em Derive à esquerda do retângulo Graphical Def Model, observe a figura: Domain Model: No meio do processo, um dos wizards vai perguntar qual será o domain model. No nosso caso o domain model é a classe Domain (ver meta-modelo). Feito isso, aperte em Finish. Acompanhe o processo de acordo com as figuras abaixo:

14 A partir de agora vamos definir graficamente como será representada nosso diagrama. Automaticamente os nós correspondentes à classe Node são criados, porém vamos fazer algumas alterações. Expanda os nós e delete o nó Rectangle NodeFigure. Agora clique com o botão direito em Figure Descriptor NodeFigure e siga as figuras abaixo, criando desta vez uma elipse: Feito isso, nomeamos a Ellipse como NodeFigure:

15 Crie agora um label e nomeie-o como NodeLabelFigure: Agora vamos renomear o Chid Access, objeto que vai ter acesso ao label recém criado. No campo Figure procure e selecione o NodeLabelFigure recém criado: Pronto, agora salve o seu arquivo e vamos ao próximo passo.

16 Gerando a paleta (*.gmftool) Para criar o gmftool dirija-se ao dashboard e clique em Derive, ao lado esquerdo de Tooling Def Model. A partir daí repita o processo do exemplo anterior até que apareça a árvore da paleta de acordo com a figura: Mapeamento gmfgraph + gmftool (*.gmfmap) Este arquivo, além de gerir o mapeamento do diagrama, é também um conjunto de referências. Ele referencia o meta-modelo ecore, o arquivo gmfgraph e gmftool. É nele também que se mapeia qual classe se associa a um componente gráfico e qual componente gráfico se associa a um elemento da paleta. Para criar um arquivo *.gmfmap dirija-se ao GMF dashboard e clique em Combine de acordo com a figura abaixo: Uma seqüência de wizards aparecerá, portanto clique em Next até que a árvore do mapeamento apareça, observe as figuras abaixo:

17

18 Arquivo My.gmfmap: Através das propriedades de cada nó desta árvore, você pode conferir se o mapeamento está correto. Estando correto, expanda os nós até Feature Label Mapping false. Ele corresponde ao mapeamento do atributo label da classe Node. Através das propriedades, faça referência ao Diagram Label NodeLabel (ver no arquivo gmfgraph). Agora selecione o nó Link Mapping <{Node.relations:Edge}/NodeRelations> para mapear os relacionamentos. Observe a figura: Agora vamos gerar um arquivo que, criará de fato, o nosso diagrama.

19 Clique com o botão direito em Mapping conforme a figure, e clique em Create generator mode. Após o clique, uma seqüência de wizards aparecerá, clique em Next até que o arquivo gmfgen seja criado. Clique nele com o botão direito e clique na opção Generate diagram code e aguarde enquanto a barra de progresso gera um novo projeto, o projeto que será executável.

20 O projeto executável certamente deve se chamar TutorialGMF.diagram. Clique nele com o botão direito do mouse e acompanhe a figura:

21 Na caixa de texto VM arguments digite -Xmx1024m ou -Xmx512m para aumentar a memória virtual da sua máquina virtual. Isso evita alguns possíveis erros de memória durante a execução, já que o teste é feito a partir de uma nova instância do Eclipse IDE. Executando o diagrama

22 Clique com o botão direito sob o projeto e siga a imagem acima. Uma nova instância do Eclipse IDE irá abrir na sua máquina. Crie um projeto java comum. Clique com o botão direito do mouse sobre o projeto recém criado de acordo com a imagem: O nosso diagrama já está disponível, agora é só cria-lo.

23 Diagrama em execução

24 Considerações Finais Espero que tenha ajudado com este simples tutorial. Naturalmente, com a prática, criar um diagrama mais sofisticado ficará cada vez mais simples. Para mais detalhes, consulte o site Alabê Duarte (alabeduarte@gmail.com) Programador e Estudante da Faculdade Ruy Barbosa (Salvador-BA)