Exporting and converting prototypes

This page covers the different conversion options for Quplo prototypes. Want to write your own converter to PHP, Java, Ruby-on-rails or any other framework? Contact us!

ASP.NET MVC 2

By Jaap Taal of Q42

QuploToNetMvc2.zip (1.7 MB)


About the conversion

Each quplo prototype can be converted to an ASP.NET solution that uses the MVC2 framework. The resulting project will have URL routes, controllers, views, master pages, and CSS files generated for you from the start. When opened in Visual Studio, all you need to do to see it running in your browser is hit F5 to run it.

Technical details

The converted project uses the ASP.NET 3.5 framework together with ASP.NET MVC 2. The solution uses C# and is specific to Visual Studio 2008. This is done intentionally, as we figured not everyone is using Visual Studio 2010 yet. If you have Visual Studio 2010 or .NET 4, converting is painless and will be offered automatically when you open the solution file.

If you're using Visual Studio 2008 Express (the free version of Visual Studio), you might need to install the ASP.NET MVC 2 VWD Express 2008 Tools.

Converted prototypes currently have their views implemented using XSLT, due to the declarative nature of Quplo's flow prototype markup language. This is done by adding an XsltViewEngine next to the ASPX view engine that is used by default in every project. Work is underway to add support for converting to native ASPX as well, so stay tuned.

Steps

  1. Download QuploToNetMvc2.zip (1.7Mb)

  2. Unzip it to see the following folders and files:

    All you need to care about is the Prototypes folder and QuploToNetMvc2.exe. The exe file is what converts your prototype. The Prototypes folder is where you can download your exported prototype zipfile to.

    It already contains two prototypes for you to experiment with:

    • Examples - An export of the prototype that contains all example sheets.
    • Tutorial - An export of Quplo's original Tutorial template.

  3. Export the prototype that you wish to convert.

    This will prompt you to download your prototype as a .zip file. Download it into a subfolder inside the Prototypes folder mentioned above. So if your prototype is named "MyPrototype.zip", create a folder "MyPrototype" there and download your zip into it.

  4. Run QuploToNetMvc2.exe

  5. Press the "Select your prototype .zip file..." button and, well, select your zip. For illustration purposes we'll select the tutorial.

  6. Then press the "Choose solution filename..." button. It will suggest a proper name automatically, and offer to save the converted project in your prototype's folder. Leave this as is for now, as the converter needs an empty folder to export to (apart from the original zip file, which is allowed in there).

  7. If all goes well, you should get a message saying "Done!". It's time to see the results... Go to your prototype folder and double-click on the solution file.

  8. The solution file is specific to Visual Studio 2008 using .NET 3.5, but if you have Visual Studio 2010 and/or .NET 4 it can be safely converted. Here's the tutorial running in Visual Studio 2008:

  9. And here it is in the browser after hitting "Run" in Visual Studio: