Introduction
Welcome to the WireframeSketcher User Guide. This guide is also available inside application and can be found at Help > Help Contents > WireframeSketcher User Guide. If you feel that you don’t need to read user guides then try at least skimming through the Keyboard Shortcuts section to get an idea of what’s available. It is also a good idea to familiarize yourself with the Wiki Syntax.
User Interface
To get started open the Sketching perspective in Eclipse using Window > Open Perspective > Other… > Sketching. The screenshot below shows all the important views used by WireframeSketcher. These views are opened by default in Sketching perspective:
Screen Editor
Screen Editor is where you create or modify your wireframes. The editor works along with other views like Palette, Properties, Links and Outline. Double-click the editor’s tab to maximize it and gain some precious screen space.
Storyboard Editor
Storyboard Editor is where you create or modify your storyboards.
Project Explorer
Project Explorer view is where you can explore the contents of your projects. Screen files (files with .screen extension) have a distinctive icon in this view. Double-click the file to open it using the Screen Editor.
Drag & drop screen and image files from Project Explorer directly into Screen Editor or Storyboard Editor. Dropping screen files into Screen Editor will automatically link them as masters or components. Before using drag & drop make sure to go to Project Explorer view and uncheck the Link with Editor option that looks like two yellow arrows.
Palette
The Palette view is where you’ll find the widgets to use in your wireframes. You can change it’s position to the left side of the Screen Editor.
Various palette layout settings can be adjusted from the context menu. Right-click inside the palette to get access to it. You can make thumbnail icons smaller and make widgets display in a list. There is also a Customize… option that allows you to hide and/or reorder widgets in the palette.
You can place your own widgets and images in the palette by placing them in the “assets” folder in the root of your project. Use Mockups Gallery to add useful assets by selecting Add Assets from Mockups Gallery… from the context menu.
The palette can also be opened in its own Eclipse view using Window > Show View > Palette. This gives you more layout options. You can even make the palette float above the editor area using detached views.
Palette items can be filtered using the search field. You can also filter by a pre-defined category using the drop-down at the right side of the search field.
Two non-widget items available in the palette are the selection tools: Select and Marquee.
Properties
The Properties view allows you to quickly edit the properties of the selected objects. If multiple objects are selected then the view lets you edit just the common properties of those objects.
If you prefer to work with your editor maximized you can detach the Properties view so it can float above the editor canvas.
Outline
The Outline view displays the overview of the edited screen contents. Widgets are displayed in their Z-order, those in the back being at the start of the list and those in the front being at the end.
Widgets can be reordered using drag and drop. Other edit operations like copy&paste and delete are also available.
Links
The Links view is used for linking screens. When you select an object that supports linking the Links view will let you edit links for that object.
Toolbar
The Toolbar exposes various quick editing actions:
Actions in order of their appearance are:
- Copy, Cut and Paste
- Undo and Redo
- Delete
- Export to Image
- Export to PDF
- Export to HTML
- Z-order arrange
- Match width, height and size
- Relative align
- Distribute
- Group and Ungroup
- Lock/Unlock
- Toggle bold, italic and underline styles
- Text alignment
- Zoom In and Zoom Out
- Presentation
The toolbar can be customized to remove unwanted entries. This is especially important if you are using WireframeSketcher inside an IDE. To do this, right-click on the toolbar, choose Customize Perspective… and then uncheck all unwanted items in Tool Bar Visibility section.
Context Menu
Most of the actions available in the Toolbar are also available from the context menu. To open the context menu right-click on selected widgets.
Menu
Some actions are also available from the main application menu. There is the View menu:
The Object menu:
And the Format menu:
Some of the actions can also be found in File and Edit menus.
The menu can be customized to remove unwanted entries. This is especially important if you are using WireframeSketcher inside an IDE. To do this, right-click on the toolbar, choose Customize Perspective… and then uncheck all unwanted items in Menu Visibility section.
Working with Screens
Creating a New Screen
Ensure that you have at least one project in your workspace. To create one use File > New > Project. Then create a new screen by selecting File > New > Screen:
Adding Widgets
Use the Palette to add widgets to a screen. A widget can be added in several different ways:
- Drag and drop the palette item onto the editor canvas. The widget will have its size calculated automatically.
- Select the palette item and then draw a bounding box in the editor canvas to place the widget and give it an initial size.
- Open the Quick Add dialog (Ctrl+SPACE), start typing a widget name, select the widget and then click in the editor canvas to place it. You can also draw a bounding box to give it an initial size.
Selection
To select a widget just click on it. For multiple selection hold the Control key while clicking to toggle the selected state of a widget. Hold Shift while clicking to add a widget to the current selection.
The Marquee tool in the Palette gives you another selection method. Use it to drag a bounding box around widgets you want to select. Marquee tool activates automatically when you start dragging in an empty space of the editor canvas. If the screen is crowded and has little empty space then use F4 keyboard shortcut to quickly activate the Marquee tool. Use F3 to go back to the Select tool.
You can also select widgets in the Outline view which keeps in sync with the editor’s selection.
Moving and Resizing
To move selected widgets just drag them using the mouse. Use Arrows to adjust the position of widgets in increments of 2px using the keyboard. Ctrl+Arrows let you adjust the size. Shift+Arrows and Shift+Ctrl+Arrows let you do the same thing in increments of 20px.
To resize selected widgets just grab with the mouse one of the small black squares and drag it. Some widgets cannot be resized in one or both directions. In this case black squares will only appear for directions that work.
Move and resize operations snap to guides, grid and geometry (smart guides). Use Alt key to temporarily disable snapping. Snapping behavior can be disabled in plugin’s preferences.
Most of the widgets are capable of calculating their size automatically. For example the Button widget will adjust its size to fit the text. If a widget is resized explicitly then it will keep this new size. You can use the Auto-Size action to turn back on the auto-sizing behavior.
During the move and resize operations you can see the resulting position and size displayed in the status bar. The same information is also displayed in a small overlayed tooltip when the widget’s size allows it.
For more precision use Align, Size and Distribute actions available from the from the Toolbar and the Context Menu.
You can lock widgets in place (Ctrl+L) to avoid moving or resizing them by accident.
Deleting Widgets
To delete selected widgets just hit Del. The same operation is available from the context menu and from the toolbar.
Ordering Widgets
When layed on the canvas widgets are drawn from back to front. Widgets placed in the front cover widgets placed in the back. To change the order in which widgets are drawn you can use the Send Backward and Bring Forward, Alt+Ctrl+Shift+B and Alt+Shift+Ctrl+F respectively. Widgets can also be reordered using drag and drop in the Outline view.
Grouping Widgets
You can group widgets so that they can be manipulated all at once. This is also useful for creating reusable components. Hit Ctrl+G to group the selected widgets. Use Ctrl+Shift+G to ungroup. You can assign a name to a widget group. This is useful when creating reusable components.
You can “enter groups” to edit their contents using double-click. Hit Escape to exit group editing.
Duplicating Widgets
You can use Copy and Paste, Ctrl+C and Ctrl+V respectively to quickly duplicate the selection. This works both in the same screen and across multiple screens.
Another option is to use Duplicate with Ctrl+D. Duplicate is a bit smarter than 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.
Yet another option is to press Ctrl and then drag the selection to quickly clone it.
Editing Text
Some widgets can display text. You can quickly edit this text in-place. To open the in-place editor just double-click the widget or hit Enter. When finished with editing press the Enter key.
When editing widgets that with multi-line text the Enter key serves to make new lines. In this case use the Ctrl+Enter combination to close the editor.
You can cancel the current edit by hitting the Esc key.
Certain widgets allow multiple items to be entered using comma (,) or newline as separator. When required, commas can be escaped using the \, syntax.
You can force multiple lines in widgets like Table, Placeholder, Button, Link and others by using the \n sequence.
Additionally, a wiki-like markup can be used to style the text.
| What you type | What it looks like |
|---|---|
| *bold text* | bold text |
| _italicized text_ | italicized text |
| +underlined text+ | underlined text |
| -struck out text- | |
| ~disabled text~ | disabled text |
| %(color:red)colored text% | colored text |
| %(color:FF0000)colored text% | colored text |
| %(font:+2)bigger text% | bigger text |
| %(font:-2)smaller text% | smaller text |
| %(font:14)14 points text% | 14 points text |
| +*_combine styles_*+ | combine styles |
| [link] | link |
| {icon-name} | insert the icon named “icon-name” |
| ${screen-name} | insert the name of the screen |
| ${screen-path} | insert the path of the screen |
| ${screen-mtime} | insert last modification time of the screen |
| ${current-time} | insert current time during print/export |
| ${page-number} | insert current page during print/export |
| ${page-count} | insert total page count during print/export |
| \*escape markup\* | *escape markup* |
| * A * Bullet ** List |
|
| # A # Numbered ## List |
|
| h1. Heading 1 h2. Heading 2 h3. Heading 3 h4. Heading 4 h5. Heading 5 h6. Heading 6 |
 |
Hit Ctrl+Space to open auto-completion popup with the list of available icons and macros. To narrow down the list of proposals just continue typing a search keyword directly in the text. For macros start with the ‘$’ character. Auto-completion is smart enough to recognize what you are trying to do.
Working with Tables
To insert a table use the Table widget from the palette widget. Tables are configured via a more complex syntax using comma separated values: one line for each row with commas being used as separators for columns. Tables allow you to insert icons, line returns, specify column alignments and sizes.
Here’s an example:
Name,Last\nName,Age v,Kids,Likes,Actions
Peter,Severin,34,[x],{computer},[Edit] [View]
Henri,Severin,4,[],{train},[Edit] [View]
Olga,Severin,59,[x],{note},[Edit] [View]
[-] You can even
[+] Have
[+] Treetable
Which renders to this:
Controlling Column Aligns and Widths
Column aligns and widths are given using special instructions at the beginning of a table cell. The general syntax is:
instructions. Cell Content
Here are a few examples that show what’s available:
<. Align to left, (align:left). Also align to left >. Align to right, (align:right). Also align to right =. Center, (align:center). Also center (w:30). Width of 30 pixels, (w=30). The same, (width:30). Also works =(w=30). Width and align, (w:30)(align=center). The same, (width:30)(align:center). Also works
Note that specifying column widths only works when given in the header row. Column widths are expressed in pixels, but limited to the minimum width of the column’s content. If you wish to make a column as narrow as possible then give it the width of 1 pixel using: (w:1).
Using Icons in Tables
You can insert any icon using the {icon-name} syntax. There are also some text shortcuts and their equivalent icon syntax:
- Selected checkbox: [x], {checked}
- Unselected checkbox: [], [ ], {unchecked}
- Selected radio button: (x), (*), (o), {selected}
- Unselected radio button: (), ( ), {unselected}
- Collapsed tree node: [+], {expand}
- Expanded tree node: [-], {collapse}
- Ascending sort: ^, {asc}
- Descending sort: v, {desc}
Breaking Text in Multiple Lines
Insert \n sequence inside the text to break it in multiple lines. Use Shift+Enter shortcut to do it without typing.
Multiple Selection in Tables
To mark a row as selected you can prepend it with ‘|’ character, like this:
|This is a selected row
Working with Images
The Image widget lets you use image files in your wireframes. Supported formats are BMP, GIF, JPEG, PNG and TIFF. You can use several methods to add an image:
- Drop the Image widget from the palette. You’ll be prompted for an image file.
- Drag & drop the image file directly from the Project Explorer view into the editor. You may have to uncheck the “Link with Editor” (yellow arrows) option in Project Explorer view first.
- Paste an image from clipboard. You’ll be prompted for a file name to save the image to.
There is also SVG Image widget that lets you work with SVG vector graphic images. To use an SVG image you can:
- Drop the SVG Image widget from the palette. You’ll be prompted for an SVG image file.
- Drag & drop the image file directly from the Project Explorer view into the editor. You may have to uncheck the “Link with Editor” (yellow arrows) option in Project Explorer view first.
Unlike raw images, SVG images will inherit the theme used by the screen. So if the screen is using sketchy theme then SVG images will be sketchy too. There is also a limited control over colors. If the SVG image is black & white then you’ll be able to change these colors in Properties View.
Working with Icons
WireframeSketcher comes with 180+ vector, black & white icons that you can use in your wireframes. Icons come in 4 different sizes.
Here’s a list of widgets that let you use icons: Icon, Label, Button, Circle, Menu, Rectangle. Additionally there is a wiki syntax that lets you embed icons in any text. Some widgets will let you to change the icon color.
To explore available icons just use the Icon property in Properties View to open the Icon Chooser dialog:
If you would like to see other icons added please don’t hesitate to contact me.
Working with Components
Components let you create reusable bits and share them across multiple screens. This is helpful for creating common parts like navigation, headers and footers. Components can then be used by other screens without unnecessary duplication. Changes to a component are automatically reflected in every place it is used.
Any regular screen can be used as a component. Additionally, you can place multiple components in the same screen using named groups.
Screens that to be used as components can also be placed in the “assets” folder in the root of your project. These screens will be automatically loaded into the Palette. Use Mockups Gallery to add useful assets.
Like images, components can be added using several methods:
- Add the component from the Palette if it was placed in “assets” folder
- Add the Component widget from the Palette and choose the screen file to use as master
- Drag & Drop screen files directly from the Project Explorer view into the editor. You may have to uncheck the “Link with Editor” (yellow arrows) option in Project Explorer view first.
A component can be customized by editing its instance and overriding individual properties. The component remains linked to its source and is updated, with overrides preserved, if the source is changed. To override properties “enter” the component using double-click. Hit Escape to exit component editing.
A component can also be detached from its original source and copied into the current screen as a group. To detach the component choose “Detach Component” from the context menu.
Note, that in older versions of WireframeSketcher components were referred to as masters. Masters were renamed to components to better reflect their purpose.
Mockups Gallery
Mockups Gallery is a place to share stencils, components and snippets for your wireframes. Here you’ll find iPhone, iPad and Android stencils and more.
Use Mockups Gallery to jump-start your work and save some valuable time. Share your own resources by simply using your email client.
Mockups Gallery can be opened by selecting Help > Add Assets from Mockups Gallery… or the same action in Palette’s context menu. Simply navigate to the desired asset, click the download link and a wizard will open to help you add it to your project.
Working with Annotations
Some widgets are treated as annotations and can be hidden in exported documents and in presentation mode. By default all widgets listed under Annotations category in palette are treated as such. You can adjust which widgets to be treated as annotations by using the Mark as Annotation action from the context menu.
Custom Properties
You can set custom id and data properties on widgets. You can extract these properties later from the screen XML file using your own or 3rd party tools.
To set custom properties use the Custom Properties… action from the Context Menu.
Working with Storyboards
A storyboard is a list of screens that shows how the UI changes in time as the result of user actions. For example you can use them to show the steps of a checkout process or prototype a wizard dialog. You can also use them for more complex things like UI animations produced by AJAX events in a web application.
Storyboards provide a screenflow view that lets visualize complex navigation flows between screens in a more graphical way.
You can also use storyboards for their multi-page PDF and HTML export capability. Just create a storyboard with the desired screens and then export them.
Storyboards are created using the Storyboard Editor. A storyboard is saved in a file with a .story extension.
To add a screen to a storyboard you can use two methods. First method: use the Add Screen… action available in the context menu. The second method consists in simply dragging .screen files from the Project Explorer view and dropping them into the editor. Drag&drop can also be used to rearrange screens in a different order.
Use F5 to launch a full-screen presentation of your storyboard.
Linking Screens
Linking support lets you create interactive prototypes for your website or software application.
To link two screens select a widget and then specify the linked screen using the Links view. Widgets with multiple items allow you to specify a link target for each item. A small yellow icon lets you quickly see where your links are. You can click it to edit the linked screen.
To test your prototype use the full-screen presentation mode. Clickable areas are highlighted and clicking on them takes you to the linked screen. You can disable link highlighting from the context menu. Arrow keys let you go back to the previous screen.
You can also create clickable PDF and HTML documents. To do so put all the linked screens of your prototype into a storyboard and then export it.
Keyboard Shortcuts
Here is the table that lists the the defined shortcuts. You can change these shortcuts and define new ones using the standard Eclipse Keys preference page. Open this page and then type WireframeSketcher in the filter field to list all the available actions. Mac OS X users, please also read the Keyboard Shortcuts on Mac OS X section.
| Editing | |
|---|---|
| Ctrl+Z | Undo last operation |
| Ctrl+Y | Redo last undone operation |
| Ctrl+C | Copy selection |
| Ctrl+X | Cut selection |
| Ctrl+V | Paste the contents of the clipboard |
| Ctrl+D | Duplicate selected widgets |
| Del | Delete selection |
| Ctrl+G | Group selected widgets |
| Ctrl+Shift+G | Ungroup selected group |
| Ctrl+L | Lock/Unlock selected widgets |
| Ctrl+Space | Quick add |
| Ctrl+B | Toggle bold style |
| Ctrl+I | Toggle italic style |
| Ctrl+U | Toggle underline style |
| Ctrl+] or Ctrl+> | Increase font size |
| Ctrl+[ or Ctrl+< | Decrease font size |
| Ctrl+Alt+0 | Reset font size to default |
| Ctrl+Shift+F | Bring selected widget to front |
| Alt+Ctrl+Shift+F | Bring selected widget one level forward |
| Ctrl+Shift+B | Send selected widget to back |
| Alt+Ctrl+Shift+B | Send selected widget one level backward |
| Ctrl+Shift+D | Detach selected components |
| Inline Text Editing | |
| Enter, Ctrl+Enter, F2 or double-click | Edit the text of the selected widget |
| Esc | Cancel current edit |
| Enter | Commit current edit |
| Ctrl+Enter | Commit current edit for widgets with multiline text |
| Ctrl+Space | Insert an icon |
| Shift+Enter | Insert a \n multi-line separator |
| Moving and Resizing | |
| Arrows | Nudge selection by 1px |
| Shift+Arrows | Nudge selection by 10px |
| Ctrl+Arrows | Nudge resize selection by 1px |
| Ctrl+Shift+Arrows | Nudge resize selection by 10px |
| Esc | Cancel current move/resize operation |
| Holding Alt | Disable snapping |
| Holding Ctrl | Centered resize |
| Holding Shift | Constrained move. Move horizontally, vertically or on a diagonal. |
| . and > | Cycle between resize/move handles. Once selected a handle use arrows to move/resize. |
| Selection | |
| Shift+Click | Add to selection |
| Ctrl+Click | Toggle selected state of a widget |
| Ctrl+Drag | Clone selected widgets |
| Ctrl+A | Select all widgets |
| F3 | Activate selection tool |
| F4 | Activate marquee tool |
| Zoom | |
| Ctrl++ | Zoom In |
| Ctrl+- | Zoom Out |
| Ctrl+1 | Actual Size |
| Ctrl+0 | Zoom to Fit |
| Ctrl+MouseWheel | Zoom In and Zoom Out |
| Other | |
| Ctrl+N | Create new project/folder/screen/storyboard |
| Ctrl+P | |
| Ctrl+Shift+I | Export to image |
| Ctrl+Shift+P | Export to PDF |
| Ctrl+Shift+H | Export to HTML |
| F5 | Launch full-screen presentation mode |
| Alt+Enter | Open widget’s properties |
| Space+Drag | Scroll around using panning mode |
| MouseWheel | Vertical scroll |
| Shift+MouseWheel | Horizontal scroll |
| Ctrl+F6 | Next editor |
| Ctrl+Shift+F6 | Previous editor |
| Ctrl+Shift+E | Switch to editor… |
| Ctrl+S | Save changes |
| Ctrl+W | Close current editor |
| Ctrl+Shift+W | Close all editors |
| Properties View | |
| Arrows | Increment/decrement values by 1 in numeric fields |
| Ctrl+Arrows | Increment/decrement values by 2 in numeric fields |
| Shift+Arrows | Increment/decrement values by 10 in numeric fields |
| Ctrl+Shift+Arrows | Increment/decrement values by 20 in numeric fields |
| Presentation Mode | |
| Arrows,N,Page Down,Space | Go to next screen |
| Arrows,P,Page Up,Backspace | Go to previous screen |
| Ctrl+L or L or Shift | Toggle link highlighting |
| Ctrl+A or A | Toggle annotations |
| Spy Plugin | |
| Alt+Shift+F5 | Export the wireframe of the current window/dialog into the clipboard |
Mac OS X
If you are a Mac OS X user then you can generally replace Ctrl with Command key in the above table. Shortcuts that do not fall under this rule are listed below:
| Editing | |
|---|---|
| Ctrl+Space | Quick add. This can come in conflict with Spotlight. You can change the shortcut used by Spotlight in System Preferences. A good alternative is Command+Space. |
| Selection | |
| Alt+Drag | Clone selected widgets |
| Moving and Resizing | |
| Holding Ctrl | Centered resize |
Exporting your Work
Exporting to Image
To show off your screens you can produce PNG images from your screen files. To export a screen to PNG use the Export to Image action. This action can be invoked from the Toolbar, Context Menu or just by pressing Ctrl+Shift+I shortcut.
The exported image can be saved to clipboard or to a file.
Exporting to PDF
Another option for sharing your work is PDF format. You can export to PDF both screens and storyboards. To export a screen to PDF use the Export to PDF action. This action can be invoked from the Toolbar, Context Menu or just by pressing Ctrl+Shift+P shortcut.
Exporting to HTML
Another option for sharing your work is HTML format. HTML format only works with storyboards. To export a storyboard to HTML use the Export to HTML action. This action can be invoked from the Toolbar, Context Menu or just by pressing Ctrl+Shift+H shortcut.
Batch Image Export
To export multiple screen files to PNG images all at once use the Batch Image Export wizard which you can open by selecting: File > Export… > WireframeSketcher > Batch Image Export.
Batch PDF Export
To export multiple screen and storyboard files to PDF all at once use the Batch PDF Export wizard which you can open by selecting: File > Export… > WireframeSketcher > Batch PDF Export.
Batch HTML Export
To export multiple storyboard files to HTML all at once use the Batch HTML Export wizard which you can open by selecting: File > Export… > WireframeSketcher > Batch HTML Export.
Printing
Use the Print action to directly print your wireframes and storyboards. Printing works best with IDEs based on Eclipse Galileo (3.5) and later.
XML
Screens and storyboards are saved directly using XML. The XML format is straightforward and its rules can be easily inferred. See XML Format Specification for more details.
Command Line
You can use command line to automate the exporting of your screens and storyboards. The executable that you launch and pass options to is eclipsec.exe on Windows and eclipse on Mac OS X and Linux.
To export an entire directory of screens to image use:
eclipsec -application com.wireframesketcher.ui.screenExport \
-data c:\eclipse\workspace \
-noSplash
-source c:\eclipse\workspace\mockups \
-dest c:\mockups
-format PNGTo export a single screen to PDF use:
eclipsec -application com.wireframesketcher.ui.screenExport \
-data c:\eclipse\workspace \
-noSplash
-source c:\eclipse\workspace\mockups\Mockup.screen \
-dest c:\mockups
-format PDFHere’s a complete list of command line options:
Usage:
eclipsec -application com.wireframesketcher.ui.screenExport \
-data WORKSPACE_DIR \
-noSplash \
-source FILE \
-dest FILE
Options:
-source FILE Source file or directory
-dest FILE Destination directory
-format PNG|PDF|HTML Export format (defaults to PNG)
-pdf optimize|fitpage Optimize PDF for viewing or fit a
specified page size (defaults to
fitpage)
-pageSize A2|A3|A4|A5|Legal|Letter|Tabloid PDF page size (defaults to A4)
-orientation auto|portrait|landscape PDF page orientation (defaults to
auto)
-highlightLinks Highlight links in multi-page PDFs
and HTML
-hideAnnotations Hide annotations
-usage Show this messagePresenting your Work
The presentation mode lets you show off wireframes and storyboards in a full-screen mode. The presentation can be launched using F5 keyboard shortcut. While in presentation mode, keyboard shortcuts like Arrows, Space, Backspace, Page Up and Page Down can be used to navigate between screens. Use context menu to toggle links highlighting and annotations.
Working with Multiple Monitors
WireframeSketcher has very flexible user interface that lets you organize it in many ways. To take advantage of multiple monitors you can do the following things:
- Tear views out to make them float. Drag them around to find the setup that works best for you.
- Move the Palette to its own view using Window > Show View > Palette. Now you can make it float too and place it on a second monitor.
- Create a second window using Window > New Window. This lets you edit and view two or more screens at once.
Preferences
Various aspects of the plugin can be customized using Eclipse preferences. To open the preferences dialog select Window > Preferences > WireframeSketcher.
The main page lets you to enter your license key if you have one. Here you’ll also find the Report a Bug button which helps you to email bug reports with all the necessary information.
The Screen Editor subpage is where you can customize the snapping behavior, the visibility of the rulers and grid, and the grid size.
Palette Preferences
The palette can be customized using its context menu. The following customizations can be applied:
- Small or Large icon sizes
- Columns/List/Icons/Details layouts
- Placement on the left or right side of the editor. Just drag the palette’s title bar.
- Auto-hideable palette. Click on the small triangle in the palette’s title bar.
SWT Spy Plugin
SWT Spy plugin allows you to convert your existing SWT UI into a wireframe that you can edit and revise afterwards.
To get started, open the dialog or window you want to mockup. Press Alt+Shift+F5 and the XML of the mockup will be copied into the clipboard. Open the “New Screen” wizard, and on the second page paste the XML. Hit Finish and you are done! Note that you can also paste the XML directly into a screen.
Technically Spy functionality is provided as a separate plugin: com.wireframesketcher.spy. You need to make sure that this plugin is included in your environment when you launch your Eclipse plugin or RCP application.
For more information and a video screencast please see the Spy plugin announcement.
There is swing2mockup community project that lets you do the same thing with your Swing UI!
WireframeSketcher Studio
WireframeSketcher Studio is a standalone version of WireframeSketcher. Behind the scenes it’s based on Eclipse platform which means that you can extend it with various Eclipse plugins. One common requirement is the installation of version control plugins for CVS, SVN (Subclipse), Git and others.
Installing plugins
To install version control plugins like Subclipse, Subversive, eGit, P4Eclipse (Perforce) and others follow these steps:
1. Enable Indigo update site using Window > Preferences > Install/Update > Available Software Sites:
2. Install the plugin from its update site using Help > Install New Software…. WireframeSketcher Studio is based on Eclipse Indigo (3.7) if you need to know.
