Just a short blog post to describe what’s included in this update:

Resizable Button and button icons

If you install the last release of Balsamiq Mockups you can change the height of a Button as shown in this screenshot

Napkee translates that as

Yes, icons are finally in!! Thanks Simone for reminding me that

East asian languages

There was a bug with asian languages and some of the components (ComboBox, Icon, List). It’s now fixed and you can finally enjoy combo boxes even in Korean!

Thanks Yuta/Kitade for raising this!

Better and resizable ButtonBar

I changed a bit the code that handles ButtonBars to reflect the last changes Peldi made. Now this

looks like this

I hope you will enjoy this release and again, 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 (you could have this problem)
• online, from this page

Talk to you soon!
Ciao, Enrico

I occasionally did customer support as well! (that’s me giving away a free license of Napkee )

With this release I want to maintain the 100% Mockups coverage since today Peldi and the wondertastic Balsamiq team pushed out a new release of Balsamiq Mockups that introduces two new controls:

Radio Button group and Check box group

The new Mockups timesaver has been translated into Web and Flex.
So, when you do something like this in Balsamiq Mockups

you can import it in Napkee and have something like this

A note: the Radio Button group is a real group, so it won’t be possible to have more than one selected radio per group!

Fixed bug with imported images

There was an unpleasant issue with images that’s now fixed.
I noticed the problem when Marcelo (thank you!) pointed me at this paging collection from Mockups To Go.

This nice collection of images on Balsamiq Mockups

failed to render and/or made Napkee hang (it depends if you are running it on Mac or PC).
That’s fortunately been corrected and you should not have problems anymore. Just in case that happens, don’t hesitate to drop an email to support@napkee.com!

I hope you will enjoy this release and again, 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 (you could have this problem)
• online, from this page

Talk to you soon!
Ciao, Enrico

Let’s go straight to see what’s new in this release:

iPhone controls

Alert Box has been re-styled, as well as Pointy buttons. Menu, Picker and Keyboard are all new You can resize the Iphone, and the on/off switches work even in Flex!

You can have a preview of the two exports here: Web and Flex.

New export settings

Preferences have been re-organized and expanded. Under the HTML settings you can now define a title for your exported files, a new name for the Icons folder and you can specify an external CSS file that will be included in each export!

Thanks Mat for this request!

I hope you will enjoy this release and again, 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 (you could have this problem)
• online, from this page

Talk to you soon!
Ciao, Enrico

Arrows

Now you can see your pretty arrows Napkee supports all the properties of arrows, including curvature, direction, tips and color.

Curly Braces

Horizontal and vertical ones, with paragraph formatting.

Formatting toolbar

Now you can finally export that “Better Word” project you are keeping in your drawer

Splitters and scrollbars

Written from scratch, fully interactive!

Multiline button

For your long and detailed error messages…

Menu

Sorry if it took that long to have this component, I hope you will like it.

Tooltip

In the HTML version you can set one of the four tips while in Flex you will have the standard yellow tooltip with a nice shadow.

New preferences

In the near future Balsamiq will introduce a “Skip markup” feature. I decided to include it already in this version of Napkee as well.

If you check Skip markup components you won’t have Arrow, Callout, Comment, Geometric Shape, Curly braces, Rex X and Scratch out on your preview or exported files.

In this release you can find a brand new Webcam settings tab.

From there you can tell your Flash player to allow Napkee to use your webcam so you can see the live preview on the exported mockups!

I hope you will enjoy this whole set of changes and as usual, 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 (you could have this problem)
• online, from this page

Talk to you soon!
Ciao, Enrico

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

I have the feeling I am not doing enough charity-wise. Yes, we do have a “free licenses” policy for Napkee and I also tried to convert any unnecessary XMas present into a donation to Charity:Water.
A few days ago I had the chance to watch an inspiring video from TED and that made me say: developing countries! We should give them a hand so they can grow and build themselves a better future.

That’s why from today on we are giving out Napkee for free to students, organizations and companies that come for one of the ~150 developing countries you can find on the IMF list.
So, if you are so lucky that you can read this post, or if you know somebody in a less-fortunate area of this planet, write us your story and we will give you a license free of charge.

One step after the other, one small action after the other, we can all make this world a better place.


Happy holidays everybody!!
Enrico

New tabs

I decided to drop the more-eye-candy-but-very-not-precise tabs

and I came up with a really simple version

and the horizontal and vertical tab alignment is finally supported! A big thanks to Henrik Werdelin for pushing me to do it

Polished interface

I have to thank Peldi for this general improvement. What’s different?

• Preview is the first thing you see (1 click saved!)
• Export Project is now under the list of mockups. More space for the preview area!
• new styling of the project title
• new styling of the two project nature buttons

I hope you’ll enjoy it!

Command line

I also started to implement the command line interface which comes handy in case of internal software distribution or continuous integration.
For now you have a way to register and unregister Napkee with the following commands:

Napkee register <organizationName> <serialKey>

and

Napkee unregister

Thanks Alain for this request.

Small fixes

This release:

• fixes problem with carriage return on Datagrid
• fixes problem with selectedIndex on buttonBar (thanks Phil!)
• fixes problem with text in Sticky note and Callout
• web: better help icon

Updated End User License Agreement

You can have a look at the updated version of the EULA clicking here. It will become effective in 2 weeks!

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!
Ciao, Enrico

Red cross and scratchout

Finally, I have no idea why it took me so long to finally publish these two components.

Subtitle

Now it’s even easier to add a subtitle to the page, 1 click saved, yay!

Second level on the Accordion

This was not so easy to develop, trust me! I hope you enjoy it!

Colors on TextEdit, TextArea and Button

I introduced also the nice feature Balsamiq Mockups has: if you have a dark background the font color switches to white!

Other small improvements

This release includes also:

• better Search box (thanks Janie!)
• fixes with chars escaping
• introduction of the & to underline portions of text
• fix a problem with z-index and modal dialog (thanks Kris!!)
• border on Image, Icon and Icon Label

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!
Ciao, Enrico

iPhone!

Today’s release includes… the brand new iPhone skin!!

You now have the whole set of iPhone configurations (landscape or portrait, all white, all black, top and bottom bars) and the On/Off switch (yes, it works!).
As you can see I also included the Alert control in this release.

Improved accordion

I rewrote the accordion from scratch, I was not happy with the default one provided by jQuery.

What do you think?

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’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