How to use Justinmind’s API

In this tutorial, we will create an app with Justinmind’s API. We’ll show you how to use the API to display your prototype’s screen names and extract text for translation.

Let’s get started.

Setting up a new project in Eclipse

  1. 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.
  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 “Finish”.
    • wizard-plugin-5
  8. If this is the first time you’re creating a plug-in project with Eclipse, the following dialog will appear:
    • first-plug-in-dialog
    • 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
  9. With your project set up, go to the “Dependencies” tab at the bottom of your project’s editor and click the “Add…” button.
    • go-to-dependencies-tab-2
  10. 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-2
  11. Now you have a project configured to access all the methods in the API.
    • project-configured
  12. In the Package Explorer, select your project. Then, go to the “File” main menu option and click “Properties”.
    • file properties
  13. In the dialog that appears, select “Java Compiler”. Check the “Enable project specific settings” option and change the Compiler compliance level to “1.5”. Click “OK”.
    • java compiler
  14. Then, go to back “File” and click “Save”.
    • file-save-project
    • You have now a project configured to access to all the methods in the API.

Example 1: displaying your prototype’s screen names

In this first example, we’ll show you how to use Justinmind’s API to display your prototype’s screen names in the Eclipse console. To do so:

  1. Create a class inside your source folder by right clicking on the “src” folder in the Package explorer. Select “New” and then “Class” from the contextual menu.
    • create-class
  2. In the dialog that appears, give your class a name and check the “public static void…” option. Remember to use the Java naming convention. Then click “Finish”.
    • public-static-void
  3. In your project’s editor, the default class will appear. Overwrite it with the following code. Remember to change the name class to match your own.
    • default-class
    • import java.io.File;
      import java.util.List;
      
      import org.eclipse.swt.widgets.FileDialog;
      import org.eclipse.swt.widgets.Shell;
      
      import com.justinmind.prototyper.api.API;
      import com.justinmind.prototyper.api.IPrototype;
      import com.justinmind.prototyper.api.ui.canvas.ICanvas;
      import com.justinmind.util.file.FileUtils;
      
      
      public class Example {
      
        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) {
              System.out.println(current.getApiName());
            }
            FileUtils.deepDeleteDirExceptRoot(temp_directory + File.separator + "work");
          } catch(Exception ex) {
            ex.printStackTrace();
          }
        }
      
      }
      
    • Go to “File” to save your changes.
  4. Then right click on your class file in the Package explorer and select “Run as” and then “1 Java Application” in the contextual menu to run your example.
    • run-as-java-application
    • In the dialog that appears, select a Justinmind .vp file and click “Open”.
  5. open-justinmind-file
    • Your prototype’s screens, templates and masters should appear as a list in the console.
    • eclipse-console
      • Now let’s take a closer look at the code.
      • These first two lines use a file dialog to ask the user for a .vp file:
      • FileDialog dialog = new FileDialog(new Shell());
        String path_to_vp = dialog.open();
      • 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 these next two lines do:
    • String temp_directory = System.getProperty(“java.io.tmpdir”);
      FileUtils.unZip(path_to_vp, temp_directory+File.separator+”work”);
      
      • This next piece of code will load all of the selected prototype’s information into the variable called ‘prototype’:
      • IPrototype prototype = API.getPrototypeLoader().loadPrototype(temp_directory+File.separator+”work”);
      • Using the below variable and the methods in the API you can browse all the information in your prototype and generate whatever you want with it. In this example you can read all the screens, templates and masters and print their names to console:
      • List canvas = prototype.getApiCanvases();
        for (ICanvas current : canvas)
            {System.out.println(current.getApiName());
      • Remember to clean all of the files upon completion using the following line of code:
      • FileUtils.deepDeleteDirExceptRoot(temp_directory+File.separator+”work”);

Example 2: extracting text for translation

In this first example, we’ll show you how to use Justinmind’s API to extract text for translation. To do so:

  1. In the same project, overwrite your class once again with the following code. Remember to change the name class to match your own:
      • extract-text-for-translation
    import java.awt.Desktop;
    import java.io.BufferedWriter;
    import java.io.File;
    import java.io.FileWriter;
    import java.io.IOException;
    import java.io.Writer;
    import java.util.List;
    
    import org.eclipse.swt.SWT;
    import org.eclipse.swt.widgets.Display;
    import org.eclipse.swt.widgets.FileDialog;
    import org.eclipse.swt.widgets.Shell;
    
    import com.justinmind.prototyper.api.API;
    import com.justinmind.prototyper.api.IPrototype;
    import com.justinmind.prototyper.api.ui.canvas.ICanvas;
    import com.justinmind.prototyper.api.ui.component.ICanvasComponent;
    import com.justinmind.prototyper.api.ui.component.IImage;
    import com.justinmind.prototyper.api.ui.component.IInput;
    import com.justinmind.prototyper.api.ui.component.IValuedComponent;
    import com.justinmind.util.file.FileUtils;
    
    
    public class Example2 {
    
      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("prototype",temp_directory+File.separator+"work");
          List canvas = prototype.getApiCanvases();
          String content = "Word in prototype\n\n";
          for (ICanvas current : canvas) {
            content+="Screen: "+current.getApiName()+"\n";
            List components = current.getApiRoot().getApiChildren();
            for (ICanvasComponent iComponent : components) {
              content+=addTextsToContent(iComponent);
            }
          }
          FileDialog dialog2 = new FileDialog(Display.getDefault().getActiveShell(), SWT.SAVE);
          dialog2.setFilterExtensions(new String[] { "*.csv" });
          dialog2.setOverwrite(true);
          String path = dialog2.open();
          if (path != null) {
            Writer output = null;
            File file = new File(path);
            FileWriter fw = null;
            try {
              fw = new FileWriter(file);
              output = new BufferedWriter(fw);
              output.write(content);
              output.close();
              Desktop.getDesktop().open(file);
            } catch (IOException e) {
            }
          } else {
            // show error
          }
        }catch(Exception e){}
      }
    
      private static String addTextsToContent(ICanvasComponent iComponent) {
        String content="";
        if(iComponent instanceof IValuedComponent && !(iComponent instanceof IImage) && !(iComponent instanceof IInput)){
          content+=((IValuedComponent)iComponent).getApiValue()+"\n";
        }
        List components = iComponent.getApiChildren();
        for (ICanvasComponent current_child : components) {
          content+=addTextsToContent(current_child);
        }
        return content;
      }
    
    }
    
    • The first section of code is the same as explained above. In addition, each of the prototype’s screens, templates and masters is browsed to find UI elements. When text is found within a UI element, the code adds it to a String which will be used to create the resulting .csv file.