Eclipse GMF: un editor grafico per i modelli EMF

Eclipse GMF: un editor grafico per i modelli EMF

Vedremo ora come sia possibile generare un completo editor grafico per il modello EMF creato nei tutorial precedenti, Library.ecore.

A tale scopo dovremo utilizzare un altro framework , Graphical Modeling Framework (GMF), attualmente compreso nel pi├╣ ampio insieme di progetti Graphical Modeling Project (GMP).

Come cita testualmente il Wiki, GMF ÔÇ£provides a generative component and runtime infrastructure for developing graphical editors based on EMF and GEFÔÇØ, si pone cioè come bridge tra EMF (che consente la definizione del modello) e GEF (un framework grafico ÔÇ£leggeroÔÇØ, basato sul paradigma MVC), generando tutta lÔÇÖinfrastruttura necessaria a coordinare il ciclo di vita degli oggetti del modello (classi EMF) e la loro rappresentazione grafica (EditPart GEF).

Per utilizzare GMF nei nostri progetti dobbiamo installare il componente GMF Tooling; sarà quindi sufficiente selezionare (dal men├╣ principale della nostra installazione di Eclipse) Help >> Install Modeling Components:

 

 

Dalla schermata successiva selezioniamo ÔÇ£GMF Modeling Framework ToolingÔÇØ:

Proseguiamo cliccando su ÔÇ£FinishÔÇØ, accettiamo le impostazioni di default e infine clicchiamo ÔÇ£Restart NowÔÇØ per completare lÔÇÖinstallazione.

Ora siamo pronti per sviluppare il nostro editor; a questo scopo utilizzeremo uno strumento che il tooling di GMF ci mette a disposizione: la GMF Dashboard. Per visualizzarla, selezioniamo Window >> Show view >> Other >> GMF Dashboard:

 

In seguito a questa operazione il nostro IDE si presenta così:

 

Prendiamoci un minuto per esaminare questo nuovo strumento: la Dashboard esiste per guidare lo sviluppatore nel corretto processo di generazione dei file di configurazione di un progetto GMF, consentendo di generare tutti i file e il codice necessario seguendo un processo iterativo (assai simile a quello già visto per la generazione del modello EMF) che parte dal file di modello (*.ecore) e finisce con la creazione del file di generazione del diagramma (*.gmfgen); questo processo può essere eseguito quante volte si vuole, in modo da affinare progressivamente il risultato finale.

A questo punto abbiamo due scelte: possiamo generare un nuovo progetto (di tipo GMF Project, categoria che adesso troveremo nellÔÇÖelenco degli wizard) oppure proseguire nello sviluppo del progetto EMF originale; seguiremo questa seconda strada, in quanto pi├╣ semplice e adatta al percorso del tutorial.

Selezioniamo quindi il progetto it.rcpvision.rcptutorial.model nella finestra del Package Explorer; nella GMF Dashboard, al riquadro Domain Model, clicchiamo su Select: si aprirà una finestra di dialogo che ci consente di selezionare il file di modello; poich├® nel nostro workspace esiste un solo file con queste caratteristiche, lo troviamo preimpostato:

 

Accettiamo quanto proposto e proseguiamo cliccando su OK; il passo successivo consiste nella creazione (cliccando sul bottone Derive) o selezione (in caso esista già) del file *.genmodel: poich├® lo abbiamo già creato nelle prime fasi del tutorial su EMF, in questa fase clicchiamo sul riquadro Domain Gen Model, opzione Select, e accettiamo il default già individuato dallo strumento:

A questo punto, cliccando sul bottone Derive sopra al riquadro Domain Model, procediamo con la creazione del file *.gmfgraph:

 

Accettiamo i valori di default per il nome del file e folder di destinazione, e proseguiamo cliccando sul bottone Next; si aprirà una finestra di dialogo che ci chiede lÔÇÖURI del file di modello e quale elemento vogliamo impostare come Diagram Element:

Per capire questa richiesta occorre entrare un momento nella logica di generazione dellÔÇÖeditor che ci apprestiamo a creare: il tooling di GMF crea un editor di diagrammi, al cui interno è possibile creare, modificare e cancellare oggetti grafici che corrispondono a istanze degli oggetti del modello…ma il diagramma stesso a quale oggetto corrisponde? Di regola (ma non sempre, e non necessariamente) è sufficiente far corrispondere il diagramma allÔÇÖoggetto ÔÇ£rootÔÇØ del nostro modello; poich├® fortunatamente il modello che stiamo gestendo è davvero molto semplice, altrettanto semplice è la risposta alla domanda: selezioneremo quindi, come Diagram Element, lÔÇÖoggetto Library. Poich├® lÔÇÖeditor che otterremo alla fine del processo può gestire n diagrammi, questo implica che per ogni diagramma nuovo che apriremo, staremo implicitamente creando una nuova istanza dellÔÇÖoggetto Library.

Proseguiamo cliccando sul bottone Next, si aprirà una nuova finestra:

In questa finestra ci viene chiesto di dichiarare quali oggetti e proprietà del modello vogliamo rappresentare sotto forma di Nodes (figure piane), Connections (linee) e Labels (etichette di testo); quindi in base a quanto selezionato nella finestra, avremo nel diagramma gli oggetti Author e Book rappresentati come figure, nome e cognome dellÔÇÖautore e titolo del libro rappresentati da etichette e infine la relazione tra libro e autore rappresentata come una connessione. Accettiamo quanto proposto e proseguiamo cliccando su Finish: questo provoca la creazione del file Library.gmfgraph e la sua apertura con un editor dedicato

Proseguiamo cliccando sul bottone Derive posto sotto il riquadro Domain Model: questo provoca lÔÇÖapertura di una finestra in cui possiamo scegliere il nome e il folder di destinazione del file *.gmftool:

Il GMFTool Model è il file che definisce quali e quanti strumenti di creazione vogliamo far comparire nella Palette che verrà generata nel nostro editor; accettando il default e cliccando su Next si aprirà una ulteriore finestra di scelta:

Ci viene di nuovo chiesto lÔÇÖURI del modello e il Diagram Element: confermiamo lÔÇÖoggetto Library e clicchiamo Next; si apre la finestra seguente

 

I tool che compaiono nella Palette sono di due tipi: CreationTool (corrispondono ai Nodi) e ConnectionTool (corrispondono alle Connections): poich├® il default che ci propone lo strumento è perfettamente adeguato alle nostre esigenze, confermiamo con Finish; questo comporta la creazione e lÔÇÖapertura (con editor dedicato) del file Library.gmftool:

A questo punto clicchiamo sul bottone Combine posto a destra del riquadro Domain Model: otterremo cos├¼ lÔÇÖapertura della finestra di generazione del file *.gmfmap:

 

 

 

Accettiamo il default e proseguiamo, cliccando su Next: ci viene proposta di nuovo la finestra in cui confermiamo il modello, il Diagram Element e il package

 

clicchiamo su Next; appare la finestra in cui confermiamo quale Palette intendiamo utilizzare:

cliccando su Next, la schermata successiva ci chiede conferma degli elementi grafici

Infine lÔÇÖultima schermata ci propone il mapping finale tra oggetti e immagini

poich├® il default corrisponde a quello che vogliamo, terminiamo il processo cliccando su Finish: questo provoca la creazione e lÔÇÖapertura del file Library.gmfmap:

A questo punto selezioniamo dalla Dashboard il checkbox RCP (poich├® intendiamo creare una applicazione stand alone, anzich├® un semplice plugin) e successivamente clicchiamo sul sottostante link Transform

 

questo provoca la creazione del file Library.gmfgen

e finalmente dalla Dashboard, riquadro Diagram Editor Gen Model, clicchiamo la voce Generate diagram editor

QuestÔÇÖultima operazione dà il via al processo di generazione di un progetto nuovo, it.rcpvision.rcptutorial.diagram; alla fine, il nostro IDE si presenta così:

 

Finalmente siamo pronti a vedere il risultato della nostra fatica: apriamo il file plugin.xml contenuto nel nuovo progetto e, dalla tab Overview, sezione Testing, selezioniamo il link Launch an Eclipse application e… voilà, ecco il risultato dei nostri sforzi!

 

Vediamolo allÔÇÖopera: dal men├╣ File scegliamo New >> Library Diagram; parte un wizard che ci chiede nome e destinazione dei file che conterranno il diagram model e il domain model

 

Cliccando su Finish avremo il seguente risultato:

e, utilizzando la Palette, possiamo finalmente cominciare a popolare il nostro modello.

Niente male per non aver scritto neanche una riga di codice, non credete? Certo, la rappresentazione grafica degli oggetti potrebbe essere migliore, abbiamo quelle fastidiose icone accanto alle etichette di testo, i nomi dei tool presenti nella Palette sono poco esplicativi… nelle prossime puntate esploreremo alcune delle infinite possibilità di ÔÇ£customizzazioneÔÇØ offerteci dal tooling di GMF, andando a modificare queste e altre piccole imperfezioni, ed esploreremo la capacità di rigenerazione infinita del codice GMF.


2012-06-08T11:16:22+00:00By |

4 Comments

  1. silvio alexander lopez herrera 21 giugno 2013 at 00:34 - Reply

    Ciao Vincenzo,

    this diagram generates a new. library? and I would like to know where I can see the following tutorial on gmf

    • Vincenzo 21 giugno 2013 at 10:47 - Reply

      Ciao Silvio,
      yes, a new .library is generated.
      Regarding other tutorials on GMF we do not have them.
      In fact, in the meantime, we started to use Eclipse Graphiti, which is far more easier to use.
      We did not have written any tutorials on Graphiti until now, since the its Help system has already good tutorials.
      Best regards
      Vincenzo

  2. Fabio Messina 19 luglio 2013 at 10:30 - Reply

    Ciao Vincenzo,
    ho seguito questo tutorial per creare la mia library application e l’ho portato a termine con successo.
    Tuttavia ho riscontrato un problema con la vista ad albero nel pannello “Outline”: le etichette corrispondenti agli elementi del modello rimangono bianche, con l’unica eccezione degli elementi del modello che hanno un attributo denominato “name”.

    Allego uno screen per maggior chiarezza:
    screen_outline_tree

    Come puoi vedere l’intero albero nella vista Outline è composto di etichette vuote, pur essendo queste selezionabili. Solamente gli elementi di classe Author (che hanno un attributo “name”) vengono mostrati.
    Esiste un modo per rimediare al problema che non sia dotare tutte le entità di un apposito attributo “name”?

    • Vincenzo 5 agosto 2013 at 13:48 - Reply

      Ciao Fabio,
      in EMF è possibile specificare quale tra gli attributi deve essere usato come Label Provider (di default viene usato l’attributo name appunto).
      Per specificare tale attributo basta aprire il file .genmodel, selezionare l’entità e cambiare la proprietà Label Feature, selezionando da una lista uno degli attributi.
      Poi si procede con le varie rigenerazioni di codice.
      Ciao
      Vincenzo

Leave A Comment