Learn how to prototype web and mobile apps

My first plugin step by step: print all the screen names

In this tutorial we’re going to build a very simple code that reads a .vp file and prints to console the names of all the screens in that prototype. Let’s get going!

  • Select File> New> Other… Then choose ‘plugin Project’. *Important* note that all the integrations must be coded in Java, if you don’t know how to code in Java check out these online Java courses.

First plugin with Justinmind

Click ‘Next’ and then choose a name for your project. Click ‘Next’ again and check the options ‘Generate an activator…’ and ‘This plugin will make…’

New plugin project with Justinmind

Finally click ‘Finish’. Your Eclipse IDE will look like this:

Plugin overview

Now select the tab called ‘Dependencies’. Click the ‘add’ button and write ‘com.justinmind’. Select the three plugins listed and click ‘OK’. Then select ‘File> Save’. You have now a project configured to access to all the methods in the API.

Add dependencies

You need to follow the same steps each time you want to build a new integration for Justinmind.

Ok, so you are ready now to build your first integration. This will be a very simple integration but can be extended to more complex cases. In this case we are going to create a little java application that reads all the screens inside a .vp file and print their names by console. Let’s do it!

  • First, create a class inside your source folder. Right click on the folder called ‘src’ and select ‘New> class’. Give it a name and check the option ‘public static void…’ like this:

new java class

new java class

Click ‘Finish’. Then add the actual code for the integration until it looks like this:

Plugin Java

Here is the code in plain text:

public static void main(String[] args) {
FileDialog dialog = new FileDialog(new Shell());
String path_to_vp = dialog.open();
try {
String temp_directory = System.getProperty("java.io.tmpdir");
FileUtils.unZip(path_to_vp, temp_directory + File.separator + "work");
IPrototype prototype = API.getPrototypeLoader().loadPrototype(temp_directory + File.separator + "work");
List canvas = prototype.getApiCanvases();
for (ICanvas current : canvas) {
FileUtils.deepDeleteDirExceptRoot(temp_directory + File.separator + "work");
} catch(Exception ex) {
// TODO Auto-generated catch block
  • Save your changes. Then right click on the class file you just created and select ‘Run as> Java Application’ to run your example. The example you just coded will be executed allowing you to select a .vp file and see all its screens listed in the console. Now let’s take a closer look at the code. The first two lines use a file dialog to ask the user for a .vp file. But let’s focus on the three lines after those lines of code:

String temp_directory = System.getProperty(“java.io.tmpdir”);

FileUtils.unZip(path_to_vp, temp_directory+File.separator+”work”);

IPrototype prototype = API.getPrototypeLoader().loadPrototype(temp_directory+File.separator+”work”);

These are the lines of code that do all the magic. This piece of code will load all the prototype’s information on the selected .vp file into the variable called ‘prototype’. Using that variable and the methods in the API you can browse all the information in your prototypes and generate whatever you want with it. In this example we just read all the screens, templates and masters and we print their names to console. In order to load all the information of a .vp file you need to extract the contents of the file into a folder. That’s what the first two lines of this example do. Just remember to clean all those files when you are done with it using this line of code: