Learn how to prototype web and mobile apps

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

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

Select File → New → Other… Then choose ‘plugin Project (IMPORTANT NOTE: all the integrations must be coded in Java, if you don’t know how to code in Java, well, you’ve just found a reason to learn it!. There is plenty of resources, tutorials and stuff to learn how to code in Java. Just google it, is not that hard)


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


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


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

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

Ok, so you are ready now to build your first integration. This will be a very simple integration but you will see it will be easy to extend it 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:


Press the finish button. Then add the actual code for the integration until it looks like this:


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’. 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 by 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:


Finally download this file and copy the ‘lib’ folder that comes in it into your Java project. Then open the ‘lib’ folder and select all the .jar files in it. Right click and select Build path -> Add to Build Path. Once you did this run your example and have fun!


  1. Daniele Mondello Says :

    October 25, 2014 at 11:05 am

    Hi, i’m testing “Justinmind” software and this guide.
    But the code don’t work!

    In the pic:
    List canvas= prototype.getApiCanvases();

    in the code in plain text:
    List canvas = proto.getApiCanvases();

    My working code:
    List canvas= proto.getApiCanvases();


  2. Daniele Mondello Says :

    October 25, 2014 at 12:21 pm

    Ok i try two times to insert my right code here, but it transform code in HTML.
    I try to write right code with code for symbols;

    List<ICanvas>canvas= proto.getApiCanvases();

    ok this is ok!

    • admin

      October 28, 2014 at 9:31 am

      Thanks for telling, we’ll change the tutorial accordingly

  3. ramesh

    November 7, 2014 at 8:44 am

    Will the custom plugin development, allow us to write code snippets to fill up a form and display the same in a different screen. Basically, can we have variables storing temp data.

    • admin

      December 9, 2014 at 1:10 am

      I’m afraid not, you would need to redo the entire generation on your own to do that.