Tutorial: Introductory Example

We will start by creating a simple plug-in, which implements a Workbench View. We will let Eclipse generate the basic framework of an appropriate plug-in project using a Project Wizard. However, we will implement the visual components using the SAP UI toolkit.

For simplicity’s sake, our application consists of a view frame with three tabs.

Step 1: Creating the plug-in project

Prerequisites

In our example, we will start by creating a new plug-in project. We will make use of a wizard to create our project, generating the project framework and the templates we need for a Workbench view.

Procedure

1. Choose File ® New ® Project ...

2. In the Wizard that appears, choose the project category Plug-in Development (in the left frame) and the project type Plug-in Project (in the right frame).

3. Choose Next.

4. In the Project name field, enter a name for your project. (We suggest com.sap.demo.simple.)

5. Choose Next.

6. Accept the suggested values for the plug-in structure settings and choose Next again.

In the dialog box you can specify what source code, if any, is to be generated in advance in your new project.

7. Choose Create a new plug-in project using the code generation wizard, select Plug-in with a view and choose Next.

8. Accept the suggested values and choose Finish.

Result

Eclipse generates an appropriate Plug-in project. There are also templates generated for the plug-in (SimplePlugin.java) and the View file (SampleView.java), while the plugin.xml file is pre-configured.

Step 2: Adding missing dependencies to the plugin.xml file

The plugin.xml file has already been pre-configured. However, our example also requires the UI toolkit plug-in, so we must enter this dependency as well.

Procedure

1. In your project, double-click the plugin.xml to open the plug-in definition file.

2. Choose the Dependencies tab.

3. Choose Add... button.

4. Select the UI toolkit plug-in (com.tssap.util) from the provided list of plug-ins and choose Finish.

5. Save the contents of the Editor.

Result

The appropriate import statement line is entered in the XML source code:

...

...

</requires>

...

Step 3: Synchronizing project dependencies

In the last step you have added the required plug-in com.tssap.util in your plugin.xml and now you need only to synchronize the corresponding Java Build Path for your project.

Procedure

1. Switch to the Package Explorer and select your plug-in project.

2. Choose Update Classpath … from the context menu.

Result

Eclipse adds the new project dependency according to the required plug-ins in the plugin.xml definition to your plug-in project.

Step 4: Implementing the UI

1. In the View file (SampleView.java), delete all lines within the createPartControl method.

2. Delete all lines within the setFocus method as well.

3. Add the following lines to the createPartControl method:

// Create UI (main pain)

ITabbedPane mainTabPane = PaneFactory.createTabbedPane(parent);

// First tab

IGridLayoutPane firstTabPane = mainTabPane.addGridLayoutPaneAsTab("First Tab", 1);

firstTabPane.addTextLabel("Content of the first tab");

// Second tab

IGridLayoutPane secondTabPane = mainTabPane.addGridLayoutPaneAsTab("Second Tab", 1);

// Third tab

IGridLayoutPane thirdTabPane = mainTabPane.addGridLayoutPaneAsTab("Third Tab", 1);

Explanatory notes:

The first line creates the main object mainTabPane, (a kind of control pane) using the toolkit factory class PaneFactory. This object has the type ITabbedPane and is created using the createTabbedPane method. We use the parent parameter to specify that the pane is addressed as a Workbench view at runtime.

The main object mainTabPane is also a top-level container, to which you can add UI components. In our case, we use the addGridLayoutPaneAsTab method, since we need several tabs. The number of grid columns and a description of the tabs can be passed as parameters. The grid layout for each tab area is defined implicitly.

Each tab page provides a container for the specific UI elements of the tab. All we need to do is add a text label to the first tab area using the addTextLabel method.

After completing this tutorial you can extend this simple UI by adding suitable code segments from the examples plug-in.

Step 5: Adding imports

Procedure

1. Position the cursor anywhere in the Java Editor and choose Source ® Organize Imports from the context menu.

2. Save the contents of the Editor.

Result

The following imports are generated in the Editor, in our example:

import com.tssap.util.ui.pane.IGridLayoutPane;

import com.tssap.util.ui.pane.ITabbedPane;

import com.tssap.util.ui.pane.PaneFactory;

Step 6: Executing the plug-in

To execute our plug-in, we launch a new Eclipse instance that runs in the runtime workspace.

Procedure

1. In order to start the Launcher for the runtime workspace, choose Run ® Run As ® Run-time Workbench.

Eclipse starts a new instance that runs in the runtime workspace.

2. In the new instance, choose the Window ® Show View ® Other ... menu.

3. Then choose Sample Category, followed by Sample View, then OK.

Result

Eclipse creates an instance of our plug-in as an additional Workbench view and opens it for the current perspective.