WireframeSketcher. The making of.
Adjustable scrollbars, new splitter and color picker widgets and more
Mar 16 2010 by Peter Severin
Hi there! I am happy to announce a new release of WireframeSketcher. This new version brings another round of improvements that I’m sure you’ll find useful. I dedicate this version to Laurent Malvert as the acknowledgment of his effort in improving this tool. Please read on.
Adjustable scrollbars
The main change in this version is a new Value property that lets you adjust the thumb position for scrollbar widgets. This property works for Horizontal and Vertical scrollbar widgets but also for all the widgets that have the Scrollbar property such as Table, Tree, Browser, Window and other:
Additionally the Value property also works for Slider and Progress Bar widgets:
Splitters and Color Picker
This version also brings three new widgets. Vertical and Horizontal Splitters and the Color Picker:
Other changes
Here is a list of other changes in this version:
- Locked widgets now use red color for selection outline
- Note widget now supports background color
- Menu widget now lets you specify an icon. Mac OS X users will find this useful.
- Fixed a performance problem with scaled images. This issue was reported by @seantindale and it was especially noticeable on Linux. Images play a big part in wireframes so it was extremely important that they work well. Sean really helped me to see where the problem came from.
- Fixed full-screen mode problem in Flex Builder 3 on Windows
- Fixed the rendering of disabled state in Text Area widget
- Improved slightly the look of the Window widget
- Master screens are no longer moved to the back layer when dropped from Project Explorer. I am not sure if anyone has noticed that it worked like this but in case you miss it please make yourself heard.
- Export now handles better the case where the destination file is locked by another app
Eclipse Helios
I am following closely the development of the next major version of Eclipse also known as Eclipse Helios (3.6). Those that live on the edge will be happy to know that WireframeSketcher works even better than before with this new version.
One notable change in Eclipse Helios was made just yesterday. It concerns a long standing issue on Mac OS X Cocoa which was rendering WireframeSketcher practically unusable. This issue is now fixed and the future is bright for Mac OS X users! You won’t be restricted to using Eclipse Carbon version anymore.
Updating
As usual to update to the latest version of WireframeSketcher just use the Eclipse update manager.
Enjoy!
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!
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!
