Create your own Justinmind plug-in

In this tutorial, learn how to use Eclipse to create your own Justinmind plug-in and integrate your prototypes with third-party features. Let’s begin.

Creating your plug-in in Eclipse

  1. If you haven’t already, download and install the Justinmind SDK. This SDK is an Eclipse IDE with all the required libraries already included.
    Extract the zip and open the Eclipse application file.

    • If you have already installed the SDK and opened it in Eclipse, skip to step 3.
  2. When Eclipse opens, select a workspace (where you want your work to be saved on your computer). Click “Use this as the default and do not ask again” check box. Then, click “OK”.
    • select-a-workspace
  3. You’ll then be taken to the Eclipse Welcome page.
    • welcome-to-eclipse
  4. Go to “File” in the Eclipse main menu, select “New” and then “Other” from the sub-menu.
    • create-new-plug-in-project
  5. In the dialog that appears, select “Plug-in Project” from the options and then click “Next”.
    • wizard-plugin-1
  6. In the next screen of the dialog, give your project a name and click “Next” again.
    • wizard-plugin-2
  7. Here, ensure that the options “Generate an activator…” and “This plug-in will make…” are checked (they should be checked by default). Then click “Next”.
    • wizard-plugin-3
  8. Select the “Hello World Command” template and click “Finish”.
    • wizard-plugin-4
  9. If this is the first time you’re creating a plug-in project with Eclipse, the following dialog will appear:
    • open-associated-perspective
    • Check “Remember my decision and click “Yes”.
    • Your new project will appear in the Package explorer on the left of the Eclipse IDE.
    • eclipse-overview-1
  10. Expand your project, open the “src” folder and look for the class called “SampleHandler” inside the handler’s package. This class is the main entry point to your code. Double click and look for the “Execute” method.
    • expand-project
  11. Double click on the “Execute” method. Here you can customize your code. In this tutorial, we will leave the default code as is, displaying the plugins’ welcome message that the user will see in Justinmind.
    • execute-method
  12. Then, to configure your plug-in, go to the “META-INF” folder within the “src” folder and double click on the “MANIFEST.MF”.
    • double-click-manifest
  13. Then, click on the “MANIFEST.MF” tab. and add this line below the last line of code:
    • Eclipse-RegisterBuddy: com.justinmind.prototyper.api
    • change-last-line-code-1
  14. Save your project (File>Save). Now your plug-in and the API will be able to work together.
    • save-your-project-1
  15. Go to the “Dependencies” tab at the bottom of your project’s editor and click “Add…”.
    • got-to-dependencies-tab
  16. In the dialog that appears write “com.justinmind” in the “Select a Plug-in” field. Then, select all plug-ins listed and click “OK”.
    • write-com-justinmind
  17. Now you have a project configured to access all the methods in the API.
    • result-project-configured
  18. Back in the Package explorer, select “plug-in.xml”.
    • select-plug-in-xml
  19. Then in your project’s editor, go to the “Extensions” tab.
    • go-to-extensions
  20. In the extensions tree, expand the “org.eclipse.ui.commands” parent node and select the “Sample Command” node. Here, you can customize the name of your plug-in that will be displayed in the Plug-ins main menu in Justinmind.
    •  expand-org-eclipse-ui-commands
  21. To change the name of your Plug-in, enter it in the “name*” field.
    • change-plug-in-name
  22. To make your plug-in visible within Justinmind, you need to set its location within the workbench menu. In the extensions tree, expand the “menu:org.eclipse.ui.menus” node and select the “org.eclipse.ui.menus” node. Replace its “locationURI*” with the following text:
    • menu:org.eclipse.ui.workbench.menu?after=additions
    • set-plug-in-location
  23. We recommend that you link your plug-in to Justinmind’s Plug-ins main menu option so users will be able to locate it easily. To do so, expand the “menu:org.eclipse.ui.workbench.menu?after=additions” node and select the “Sample Menu”. Rename the text in the “label” field “Plug-ins” and then “id” field “plug-ins”.
    • link-plug-in-to-justinmind-main-menu
  24. If you don’t wish to have a plug-in icon in your Justinmind toolbar, delete the toolbar node from within the “org.eclipse.ui.menus” parent node by right clicking and selecting “Remove” from the contextual menu.
  25. You now need to export the plug-in. Select the “Overview” tab and click the ‘Export Wizard’ link.
    • export-plug-in
  26. In the dialog that appears, select a location for your plug-in and click “Finish”. Your plug-in will be saved in a “plug-ins” folder inside the one you defined as the destination folder.
    • select-a-location
  27. Now you’re all set to test your plug-in in Justinmind. Open Justinmind and click the “Plug-ins” main menu option. Select the “Install a plug-in” option.
    • test-your-plug-in
  28. Locate your plug-in from your folders and click “Open”.
    • locate-your-plug-in
  29. Double click on your plug-in. You will be prompted to restart Justinmind.
    • double-click-plug-in
  30. When Justinmind reopens, you should have a new option available within the plug-ins menu for the plug-in you just made.
    • plug-in-available-in-justinmind