I know, there are no excuses to skip releases but I hope you’ll forgive me… pretty please!!

What’s included in this release?

Improved tabs

Now you can see better which tab is selected and which ones are in the background

Disabled text

On Balsamiq Mockups you can disable portions of text by using the -disabled text- notation.
I tried to get the most out of it on Napkee:

There are some limitations though: you cannot partially disable inputs in HTML. Napkee will disable the whole component if you start and finish with a – or simply ignore the disabled part in case of a partially disabled control.

Canvas border and style

Like in Mockups, also Napkee now supports the new borders for the canvas component.

Init code for new interactions!

Napkee, thanks to Custom IDs and Data, already supports some level of interactivity in the same mockup.
You can now write “init” Javascript code that is executed at the page load (and not at the click of an element).
Let’s make an example!

Scenario: I want to show an error message only when a button has been clicked and it should look like this

I right click on the red canvas, I choose Custom properties and I write this

this will hide the error message as soon as the page is opened.
Now, I right click on the Sorry… button and I write

The last step is to right click on Do something really terrible and insert this custom data

We are set! You can see the result here and download the original BMML file here.

Please keep coming with problems, questions and feature requests, I’m here to hear you all!

How can I update?

You have two ways to update Napkee:

• from the application itself, click on Check for updates
• online, from this page

Talk to you soon, I have an announcement to make!
Ciao, Enrico

Today’s release brings a whole new level of interactivity to the generated prototypes and that’s possible because of the latest release of Balsamiq Mockups which includes a whole new “Custom Properties” feature.

If you right click on a component in Balsamiq Mockups now you have a Custom Properties menu

that opens this dialog

Now you have a way to specify the IDs of your components and that will be reflected in the exported code.

What about custom control data? I have a video for you to show you what you can do with it:

Simple, isn’t it?
For now the available actions are:

• hide: to hide a component
• show: to show a hidden component
• toggle: to toggle the visibility of a component
• js: to write Javascript code

To use these actions you just have to write XML-like code in the “custom control data” textarea of Balsamiq Mockups.
Like in the video, if you have a canvas with ID orangeBox, you can set up a button to hide it writing this code

<hide>orangeBox</hide>

You can download the BMML file and see the exported file here to have an example to start from.

And stay tuned, I’m planning to add more “actions” to the list!
The next release will be Flex-oriented since I still have to come up with a solution for the shapes in there and then I have to apply the actions in there as well. In the meanwhile I’m developing the ASP.NET exporter: if you are interested in trying it in advance, write me an email!

How can I update?

You have two ways to update Napkee:

• from the application itself, click on Check for updates
• online, from this page

Talk to you soon!
Ciao, Enrico

Today I will show you how to pass parameters from one mockup to the other!

Preparing the files on Balsamiq Mockups

I created two files, a submit form with a text field and a button

and a welcome screen

and saved them as submitForm.bmml and welcome.bmml.

The first mockup is linked together with the welcome screen through the “Submit” button. Please notice the use of {username} on the welcome screen: that is a placeholder that will be substituted by what the user will input in the form.

Exporting with Napkee

Create a new project in Napkee, import the Balsamiq Mockups and click on “Export”. Yes, it’s that easy

Overview of the exported files

This is the typical exported project structure for the web project

Open the two HTML files with your favorite text editor – I personally use TextMate on my mac.
You can see in there some common areas: the css, the javascript code and then HTML at the end of the file. We will work with javascript, so in the area that is defined by

<script type="text/javascript" charset="utf-8">

Let’s move to the real hack.

Writing a bit of jQuery code

What we need to do is to pass what the user writes on the text input of the submit form

to the placeholder of the welcome screen

    {username}

On the file submitForm.html change the javascript line

showMockup('welcome.html'});

to

showMockup('welcome.html',{username: "nap2"});

this will tell to the browser to pass the value written on the field with ID nap2 to the page welcome.html.

On the file welcome.html write the new applyValue line inside the existing jQuery block

$(document).ready(function(){
      applyValue("nap5","username");

this tells the browser to change the placeholder {username} inside the element with ID nap5 to the value passed from the submit form.

See it live here: submitForm.html

Resources

You can download the BMML files, the Napkee project and the two exports (original + “hacked” one) from here.

Happy hacking!