Your First Extension: Part 14 – Zipit ‘n Shipit (aka Creating an Installer)

This is part of a tutorial series on creating extension components for Design Studio.

Our gauge is effectively done.  There are lot’s of small features that we could still pack into it, but there are no real new concepts that we can use the gauge as a credible vehicle to explore and the component.js already weighs in at 1300 lines.  It is also already very capable and flexible and could be a powerful tool in the hands of any good designer.  So it is time to stop tinkering and finally create an installer that will allow anyone to add the gauge to their Design Studio via the Tools menu.

There are three major steps to creating a Tools menu friendly installer:

1. Create a Feature Project (as a project in Eclipse)
2. Add a Category to your Feature Project
3. Create a Deployable Feature

Creating a Feature Project

Use the following steps to create a new feature project in Eclipse. 

  1 – From the File Menu, select New -> Feature Project if it is in the recents list and skip to step 3.  If Feature Project is not listed in the recents list, select New – Other.

  2 – In the wizard selector dialog’s search bar, start tying in “Feature Project”, until you see it in the window.  Select it.

  3 – Give your project a name.  We’ll call ours SCN Gauge.  Click Finish.

  4 – A new feature project will be created in Eclipse.  Because this kind of project is associated with its own perspective, you will get the popup asking if you want to switch to that perspective.  Click yes.  This will now open the Plugin-ins and Fragments perspective.

  5 – In Plugin-ins and Fragments perspective, you’ll see a row of tabs across the bottom.  Select the Included Plug-ins tab.

  6 – Find the Plug-in Details area, on the right hand side.  Uncheck Unpack the plug-in archive after the installation. 

  7 – Save

Add a Category

  1 – From the File Menu, select New -> Other.

  2 – In the wizard selector dialog’s search bar, start tying in “Category”, until you see it in the window.  Select it.

  3 – The Category Definition dialog will open and ask you which of the open Eclipse projects should be the parent folder.  Select the SCNGauge project folder.

  4 – In the Category perspective, click on the New Category button (in the top, center).  In the ID field, add “com.sap.ip.bi.zen.sdk”.  This is the standard category ID for all Design Studio extensions.  In the name field, add whatever you want.

  5 – Click on the Add Feature button.  This will open the Feature Selection dialog.  Select the SCNGauge feature. 

  6 – Save

Creating the Installer File

  1 – Right Click on the Feature Project and select Export.

  2 – When the Export dialog comes up, select Deployable features.

  3 – Add a destination.  In this case, I’m choosing a file on my desktop.

  4 – In the Options tab, click on Browse and then select the category.xml file that you previously created.

  5 – Click on Finish. 

That’s It!  I’ve saved the example project and install zip into a public Github repository.  You have now created a comprehensive and functional first Design Studio component.  You have touched the basics and should be prepared for building your own other components.  This is the last installment and our tutorial is now at an end.