Tutorial: Model Development

From Developer Documents
Jump to navigation Jump to search

In this part of the tutorial we will focus on implementing the basic functionality for the following parts of the UI:

  • Model Browser for modelling movie production cases
    • Basic context menu actions for the browser
      • Add > Movie Project
      • Add > Casting Plan
      • Add > Role
  • Property View for editing properties of model entities
  • Movie Database Library for searching available movies, actors, directors, etc.

Step 1: Model Browser

Dependencies

To get the model browser working, we will need to depend on some more plug-ins.

  • Open com.acme.movie.ui / META-INF/MANIFEST.MF >> Dependencies
  • On the Required Plug-ins section, add dependencies on
    • org.simantics.browsing.ui.platform
    • org.simantics.layer0
    • com.acme.movie.ontology

Specialize for Movie Productions

To customize the model browser for the movie production case, we cannot directly use the existing view added to the perspective in the previous part of the tutorial. We need to create a new view extension to parametrize the view properly.

Lets add the new view extension.

  • Open com.acme.movie.ui / META-INF/MANIFEST.MF >> Extensions
  • Add a new extension, org.eclipse.ui.views
  • Add view category
    • org.eclipse.ui.views >> right click >> new >> category
    • id = com.acme.movie.ui.category
    • name = Movie Production
  • Add view
    • org.eclipse.ui.views >> right click >> new >> view
    • id = com.acme.movie.ui.productions
    • name = Productions
    • category = com.acme.movie.ui.category
    • class = org.simantics.browsing.ui.swt.GraphExplorerView:browseContext=http://com.acme/Movie-1.0/Productions
      • The first part is the ViewPart implementation class
      • Everything that comes after the first ':' character is an argument for the ViewPart implementation. Arguments are simple key=value pairs, separated by & characters.


In the same extension editor, modify the existing view perspective extension to use the new view.

  • Find the extension in the tree:
    org.eclipse.ui.perspectiveExtensions >>
    com.acme.movie.ui.perspective (perspectiveExtension) >>
    org.simantics.structural.ui.modelBrowser
  • Modify org.simantics.structural.ui.modelBrowser to com.acme.movie.ui.productions


Time to test the Movie product again. Launch it and you will see the old Model Browser view and not your new Productions view. This happens because the application remembers the state of the UI between sessions. This includes the layout of the perspective. To get your new layout visible select from main menu Window >> Reset Perspective... This will reset your perspective's layout according to the current perspective extension specifications.

At this point, the browser will be empty since there is neither data to be shown nor the contributions for showing the data. Next we will focus on adding some basic contributions will get to the contributions for reading the data next.

Step 2: Add Context Menu Actions for Model Browser

Workbench context menus are contribution-based. Each context menu is given a unique ID and popup contributions are then bound to that ID. For the Productions view, we will select #ProductionsPopup as the menu ID.

First the context menu for the Productions browser needs to be registered with this ID. This can be achieved by once again modifying the class attribute of our view extension.

  • Find our production view extension: org.eclipse.ui.views >> Productions (view)
  • Append a new argument to the class attribute: &contextMenuId=#ProductionsPopup

Now your browser should have a context menu registered with the specified ID. You can check this by launching the movie product, activating the Productions view and pressing Control+Shift+F1. A Plug-in Spy window should pop up and give information on the view. It should say:

The active menu contribution identifiers:
    #ProductionsPopup

Step 3: Add Property View for Model Browser

The Productions browser is responsible for contributing its own property page. To do this, two things must be done:

  1. An implementation of IPropertyPage must be created
  2. Once again, the class attribute of our Productions view extensions must be modified to offer our IPropertyPage implementation.

Here's the IPropertyPage implementation we will be using:

<syntaxhighlight lang="java"> package com.acme.movie.ui;

import java.util.Collections; import java.util.Set;

import org.eclipse.ui.IWorkbenchPartSite; import org.simantics.browsing.ui.swt.StandardPropertyPage;

public class ProductionsPropertyPage extends StandardPropertyPage {

   public ProductionsPropertyPage(IWorkbenchPartSite site) {
       super(site);
   }
   @Override
   protected Set<String> getContexts() {
       return Collections.singleton("http://com.acme/Movie-1.0/Productions/Properties");
   }

} </syntaxhighlight>

Now we modify the view extension to use this implementation.

  • Find the production view extension: org.eclipse.ui.views >> Productions (view)
  • Append a new argument to the class attribute: &propertyPageClass=com.acme.movie.ui.ProductionsPropertyPage

Technical Details

The property view is a generic view. It's contents follow the active workbench part, i.e. the active view or editor. When a view or editor is activated, the property view will see this and request for the activated part to provide an IPropertyPage implementation through the platform's IAdaptable interface.

Step 4: Add Content for Movie Database Library

Things TODO:

  • Implement the fixed set of ISymbolGroups for movies, actors and characters.
  • Add code to the project feature that contributes a fixed set of ISymbolGroups into the ISymbolManager.KEY_SYMBOL_GROUPS hint of IProject
  • Add new symbol group interface for adding a filtered version of the symbol group getItems() method. This is needed for making the view such results are only shown if a search criterion is specified.

Handshake.png Congratulations You have now created the first parts of a functional UI.

In the next part you will be developing a diagram editor. Wink 16.png
Next.png Tutorial 4: Diagram Development