Learn how to prototype web and mobile apps

Second example: Extract text for translation

Imagine we would like to have a MS Excel file with all the texts in your prototype and send it to a translator. We are going to build an example to do exactly that. We will extract all the texts from labels, buttons, links and so on from a prototype and create a MS Excel file with all that information.

First create a plugin project like the one you did in the first example. Name it ‘Translator’ and create a main class inside the src folder.

Place this code inside the main method:

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 (IComponent iComponent : components) {
FileDialog dialog = new FileDialog(Display.getDefault().getActiveShell(), SWT.SAVE);
dialog.setFilterExtensions(new String[] { “*.csv” });
String path = dialog.open();
if (path != null) {
Writer output = null;
File file = new File(path);
FileWriter fw = null;
try {
fw = new FileWriter(file);
output = new BufferedWriter(fw);
} catch (IOException e) {
} else {
// show error

Select that class, then right click on it and choose run as java application. You will be requested to select a .vp file and where do you want to save the .csv file with all the texts in the selected prototype. How is this code doing that?

The first piece of code loads the information of a .vp file in the IPrototype class. Then there’s another piece of code that browse the elements of each screen, template or master using the class hierarchy described in the ‘Component classes diagram’ described in the previous section of this document. When it founds a text it adds it to a String which will be later used to create the resulting .csv file.

As you see is extremely easy to read the information of a .vp file. You can use this option to generate any kind of things you like. You could even generate your own HTML code if you like.

You can download the full source code of this example from the Plugin Exchange page

One Comment

  1. Min

    November 9, 2015 at 4:53 pm

    I can’t download the full source code of this example…
    The link works but it redirects into “http://www.justinmind.com/developers”

    Can I get the full source code please?

    Thank you

    Best regards