Learn how to prototype web and mobile apps

Extend Justinmind: Create your own Plugins

So far we have talked about how to create code that is able to read the contents of a .vp file and do something with them. Now we will see how to add menu and tool bar options inside Prototyper itself.

Justinmind Prototyper has been built using a Eclipse Framework technology called RCP (Rich Client Platform). This technology allows you to extend the application’s functionality using plugins. There’s a lot of information available in Eclipse’s web site about how to develop plugins for RCP applications like Prototyper. What this tutorial will cover are just the basics to build simple plugins for Justinmind Prototyper. We encourage you to go deeper on the plugins development if you want to build more complex things.

So, let’s start! First we need to create a new plugin project just like we did in the previous tutorials. Go to file → Project → Other and select Plugin Project. Give it a name and push ‘next’. Then check the options ‘Generate an activator…’ and ‘This plugin …’ like in the previous examples but this time instead of the ‘Finish’ button press ‘next’. Then select the ‘hello world Command’ template:


And press ‘Finish’. The new project will appear in the project’s folder at the left. Open the src folder and look for the class called SampleHandler inside handlers package. That class is the main entry point to your code. Open it and look for the method ‘execute’. That it’s the equivalent of the ‘main’ method we had in the previous examples. So write some code there just to test the integration (you can copy and paste the code of one of the examples).

Now you need to configure your plugin to be able to work in Prototyper. Open the file called ‘MANIFEST.MF’ that is located inside the META-INF folder. Then select the tab called ‘MANIFEST.MF’ and add this line at the bottom:

Eclipse-RegisterBuddy: com.justinmind.prototyper.api

And press ‘Save’. Now your plugin and the API are ‘buddies’ so they will be able to work together and so on. Don’t think too much about it, if you want to know what that sentence really does check the information in www.eclipse.org.

Select the tab called ‘Dependencies’. Push the ‘add’ button and write ‘com.justinmind’. Select the three plug-ins listed and press ‘ok’. Then select ‘File → Save’. Now you have a project configured to access to all the methods in the API.

Open the file named plugin.xml and select the tab ‘extensions’. Then select the ‘Sample Command’ node in the extensions tree (inside org.eclipse.ui.commands branch). There you will be able to define the menu option name that will execute your plug-in inside Prototyper.

In order to make your plug-in visible inside Prototyper, you need to set its location within the workbench menu and the toolbar of the application: Open plugin.xml and select the tab ‘extensions’. Select ‘org.eclipse.ui.menus’ node and then ‘menu:org.eclipse.ui.main.menu’. Replace its locationURI with the following text: ‘menu:org.eclipse.ui.workbench.menu?after=additions’.

We highly recommend you to append your plug-in to the ‘plugins’ menu already available in Prototyper so the users of your plug-in know where to find it. So if you want your plug-in to be included inside the ‘Plug-ins’ menu option in Prototyper once the user imports it, then you need to customize the ‘org.eclipse.ui.menus’ Extension this way: Select ‘Sample Menu’ node in the extensions tree and set as id → plugins and as label → Plug-ins just like the screenshot below:


The plugin is ready now but you need to export it out of the SDK. Select the tab ‘overview’ and look for the link that says ‘Export Wizard’:


Then select a destination folder to save your plugin and press finish. Your plugin will be saved in a folder called ‘plugins’ inside the one you defined as the destination folder.

You are all set and ready to test your plugin in Prototyper. Open Justinmind Prototyper and select the option ‘Install a plugin’ that you’ll find in the plugins menu. Select the plugin you’ve just exported and restart Prototyper. Now you will have a new option available inside the plugins menu that refers to the plugin you just made.

So that’s all folks! Now it’s time to build your own plugins and share them (or sell them) with all the other Justinminders around there!