WireframeSketcher. The making of.
Nudge and duplicate actions, better button widget and more
Feb 24 2010 by Peter Severin
Hi there! I am happy to announce a new release of WireframeSketcher. This new version brings a new set of improvements meant to improve your productivity. Please read on.
Nudge actions
Nudge actions let you move widgets using only your keyboard. This is very useful when you need more precision. I’ve made a few changes so that widgets can now also be resized using keyboard shortcuts. To make this all work consistently existing shortcuts had to be modified slightly:
- Arrows – Nudge selection by 2px
- Shift+Arrows – Nudge selection by 20px
- Ctrl+Arrows – Nudge resize selection by 2px
- Ctrl+Shift+Arrows – Nudge resize selection by 20px
The logic is simple. Use Ctrl (or Command on Mac OS X) for nudge resize. Use Shift to nudge in increments of 20px.
There is also Alt key that you can use to reduce the increments to 1px and 10px respectively. However there is a slight problem with Alt+Ctrl combinations on Linux so lets say that it’s not an official shortcut for now.
Duplicate action
Duplicate action is something you can find in most graphical editors and WireframeSketcher now also has it. The shortcut for duplicate is Ctrl+D.
Duplicate works mostly like Copy&Paste. So instead of using Ctrl+C, Ctrl+V you can now simply press Ctrl+D.
However duplicate is a bit smarter than just a simple Copy and Paste. When you duplicate some widgets, move them and then duplicate them again, the duplicate action records the relative position of your first copy to the original and then positions the second copy relative to the first copy in the same way.
If it sounds complicated then try to quickly create a form like this. Create a label and a text. Select both and press Ctrl+D to duplicate them. Align this first copy vertically with the original. Press Ctrl+D and watch how the second copy is magically positioned exactly the way you want. Continue pressing Ctrl+D to create as many rows as you need:
Better Button widget
The Button widget saw some improvements in this version. First, buttons now have font properties. Additionally buttons can now be vertically resized.
Another change concerns button colors. Buttons are now smarter and will switch their foreground to white if the background is too dark:
Note in the above screenshot that icons are also rendered using the foreground color. This is something that now also works in other widgets like Label and Text.
Palette rearrangement
A took the risk to rearrange all palette entries. Now all widgets are sorted alphabetically. I think this should make locating a widget a much more easier task. Please let me know how you like this change.
Other changes
- Added Background/Alpha properties for Table and List widgets as requested by Jonathan
- Fixed resize feedback while zoomed
- Fixed the bug when changing size for multiple icons at once
- Better position scaling for non-resizable widgets when resizing groups
- Added a small set of mobile icons
- Fixed a slight problem with Alpha slider
- Improved the look of Browser widget
- Better search support for auto-completion with Ctrl-Space
Updating
As usual to update to the latest version of WireframeSketcher just use the Eclipse update manager.
Enjoy!
68F5Y3HF59BD
Improved resize, bigger icons and a lot more
Feb 03 2010 by Peter Severin
Hi there! I am happy to announce a new release of WireframeSketcher. Yet again it’s a bunch of small and not so small improvements that should make your time spent with WireframeSketcher more productive.
Improved resize
I’ve changed the way the resize of multiple widgets works. Now it’s much more natural. When resizing multiple widgets their positions and sizes are scaled proportionally.
The best part is that you can now also resize grouped widgets. The resize will work exactly the same way there. I think this makes widget grouping a whole lot more useful.
Bigger icons
Icons now also come in 48×48 size. I think this will help you find more uses for the icon set:
Disabled text style
A new wiki style now lets you render a piece of text as disabled. This functionality was requested by Jonathan here. The most obvious place for it is in Menus and Popups but I am sure you’ll find other uses:
To make a piece of text disabled just surround it with tilde(~) characters like this: ~Disabled Text~.
Actual widget size in XML
As of this version, two new attributes “measuredWidth” and “measuredHeight” are stored in the XML. Unlike “width” and “height” these attributes always contain the actual size of the widget, even if the widget is sized automatically.
Most definitely those of you that look into exploiting the XML format used by WireframeSketcher will find this additional information useful.
Other changes
- Multiple selection works when drag is started over a locked widget. You can now lock a widget in background and it will get out of your way when you work on the rest of your wireframe.
- Button widget now supports &char syntax to indicate mnemonics. This is in line with what Menu and Popup widgets do.
- Wiki syntax now accepts markup characters inside styled text. For example this works as expected: *bold*text*.
- Pasting the same content multiple times increases the offset after each paste.
- Image and Master widgets now display clearly when the source file is missing.
- A more comprehensible tooltip is shown during resize.
- New “loading” icon.
- Popup widget now always calculates its height automatically.
- Fixed the problem with auto-scroll when reordering widgets.
- Fixed the positioning of resize tooltip.
Updating
As usual to update to the latest version of WireframeSketcher just use the Eclipse update manager.
Enjoy!
Better paste, Yoxos integration and more
Jan 17 2010 by Peter Severin
Hi there! Happy new year everyone! I am happy to announce a new release of WireframeSketcher. This time it’s a bunch of small and not so small improvements that should make your life easier.
Better paste
First improvement is a better paste action. Now apart from being able to paste widgets you can also paste text, images and even the XML produced by the SWT Spy plugin.
Pasting some text is pretty straightforward. The pasted text ends up in a Text widget. Pasting an image is a little bit more involved. You’ll be asked for a location and a file name to save the image to:
If you are using SWT Spy you’ll be happy to know that now you can paste the captured XML directly into a screen editor. This makes the whole process much more flexible since you can paste multiple captures into the same screen.
Other improvements
- Distribute actions. These actions let you select a set of widgets and space them evenly either horizontally or vertically.
- Better integration with the application menu. There is a new Object menu that lets you discover more easily the available actions:
- Added keyboard shortcuts for Z-ordering actions:
- Bring Forward – Ctrl+Alt+Shift+F
- Bring to Front – Ctrl+Shift+F
- Send Backward – Ctrl+Alt+Shift+B
- Send to Back – Ctrl+Shift+B
- Support for horizontal scroll with Shift+MouseWheel.
- Updated the color used by the Progress Bar widget to match the selection color.
- The plugin is now signed using a trusted certificate. This will get rid of those pesky “Unsigned plugin” warnings. If you are looking to purchase a code signing certificate I’ve got a good deal from Tucows. They resell Comodo certificates for as low as $75/year.
Yoxos integration
I am happy to announce that WireframeSketcher is now part of the Yoxos catalog.
What is Yoxos? Yoxos is a free online service that lets you build your personal Eclipse distribution. You create a profile with your favorite plugins and Yoxos combines everything into a single download that you can extract and install on your machine.
I have frequent requests for a standalone version of WireframeSketcher. I think Yoxos provides nice and flexible solution to this. I’ve created a public Yoxos WireframeSketcher Profile that you can use a minimal Eclipse install with WireframeSketcher. The big plus is that you can customize this profile and add your own plugins from the catalog.
So if you are looking for a standalone version of WireframeSketcher then please give Yoxos a try. Take a look at updated installation instructions for more details.
Updating
As usual to update to the latest version of WireframeSketcher just use the Eclipse update manager.
Enjoy!
Printing, Zoom and Pulse integration
Dec 18 2009 by Peter Severin
Hi there! I am happy to announce a new major release. As you can guess from the title this one is quite exciting. Please read on.
Improved printing support
As promised I worked hard on improving printing support. You can now print both wireframes and storyboards and get a high quality result on paper. Large wireframes are now scaled down to fit on a single page. WireframeSketcher will even choose for you portrait or landscape paper orientation. If you ever wanted to use WireframeSketcher for paper prototyping now is the time!
For best results I recommend that you use the latest stable version of Eclipse. This is especially important on Linux where printing simply won’t work with old versions.
Zoom
Zoom is another exciting addition in this release. You can now edit wireframes at a zoom level that suits you best.
Zoom actions are available in the toolbar:
From the main menu:
And you can also use the following keyboard shortcuts:
| Ctrl++ | Zoom In |
| Ctrl+- | Zoom Out |
| Ctrl+1 | Actual Size |
| Ctrl+0 | Zoom to Fit |
| Ctrl+MouseWheel | Zoom In and Zoom Out |
Pulse integration
Genuitec has just announced the release of Pulse 3.0. What is Pulse? Pulse is a product that helps you manage multiple installations of Eclipse-based IDEs. If you find yourself manually replicating the same Eclipse configuration on multiple machines then try Pulse. I think you’ll like it!
With Pulse 3.0 WireframeSketcher is now part of its catalog. This means that you can easily add WireframeSketcher to your profiles and have it installed automatically for you. Since MyEclipse integrates directly with Pulse, for MyEclipse users WireframeSketcher now is just a few clicks away.
Other small changes
- Added trash icon
- Fixed new wizard shortcuts in Sketching perspective
Updating
As usual to update to the latest version of WireframeSketcher just use the Eclipse update manager.
Merry Christmas to you all!
New selection color and status update
Dec 03 2009 by Peter Severin
Hi there! I am happy to announce a new small release. Read on for the list of changes.
New selection color
Two weeks ago I’ve asked for you to help me choose a better selection color and you did! See this forum topic for more details. I feel that our little experiment went well and I’ll try to do more of this in the future.
Here’s the color that you’ve chosen. It’s a conservative choice but I think it works well and it’s consistent with the overall look of the wireframes:
Staging update site
As a first step to a more close collaboration with you I’ve created a new update site for development versions. This update site will provide all the usual updates, but also 2 or 3 development versions in between.
I don’t encourage everyone to use the development version, but I intend to ask some of you to test out the features that you’ve requested. Here is the update site URL:
Other changes
- Auto-open exported PDF and PNG file using the associated program. (Please let me know how this one works for you)
- Fixed an intermittent error in batch PDF export
What’s next
For the last two weeks I’ve tried to bring the printing support up to the level with PDF export. I think that good printing support is important having in mind that paper prototyping technique is often used along with tools like WireframeSketcher.
What I’ve discovered so far is that getting printing right is hard but getting it right on Windows, Linux and Mac OS X at the same time is even harder. I am buying a new printer just for this task and hopefully I’ll have a working solution in 2 weeks.
If printing support is important to you then you can use the above update site to test out the current version. Things are expected to work this way:
- Both screens and storyboards can be printed.
- Screens are centered on the page and scaled down to fit the page.
- Storyboards are printed one screen per page.
Note that unlike with PDFs printing is done using vector graphics. This allows for a high quality output but in some case can create problems with fonts. So look close at how texts are printed when doing your tests.
Updating
As usual to update to the latest version of WireframeSketcher just use the Eclipse update manager.
Enjoy!
