Wireframes & Mockups with Eclipse

• Tour
• Download
• Buy
• Blog
• Gallery
• Support
• About

Introduction

WireframeSketcher’s screen files use an XML format. This format can be exploited by other tools for various purposes. This document is a quick guide to this format.

WireframeSketcher provides open-source code that can be used for tool development. Specifically you can use Java to work with screen and story files. Refer to developers section for more details.

top

Document Structure

Lets start with an example. Here’s a screen that contains a Button and two grouped Labels.

<?xml version="1.0" encoding="UTF-8"?>
<model:Screen xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
		xmlns:model="http://wireframesketcher.com/1.0/model.ecore">
  <widgets xsi:type="model:Button" x="176" y="96" width="56" 
  		text="OK" measuredWidth="56" measuredHeight="27">
    <font/>
  </widgets>
  <widgets xsi:type="model:WidgetGroup" x="144" y="48"
  		measuredWidth="139" measuredHeight="25">
    <widgets xsi:type="model:Label" text="Label 1" measuredWidth="52"
    		measuredHeight="25">
      <font/>
    </widgets>
    <widgets xsi:type="model:Label" x="87" text="Label 2" measuredWidth="52"
    		measuredHeight="25">
      <font/>
    </widgets>
  </widgets>
  ...
  <font name="Comic Sans MS" size="10" bold="true"/>
</model:Screen>

The document is enclosed by <model:Screen> and </model:Screen> tags. Each widget is described by a <widgets> tag. A <widgets> tag can nest other <widgets> tags for widgets of type WidgetGroup.

The order of <widgets> tags is significant and it’s the order in which widgets are rendered on screen, from back to front.

Widget properties are stored as <widgets> tag attributes.

top

Fonts

A screen font can be specified using the <font> tag. If not specified then a default system font is used. The following properties are supported:

name	Font name
size	Font size
bold	Toggles bold style
italic	Toggles italics style
underline	Toggles underline style

Some widgets can override all of these font properties excepting the ‘name’. This is done by using a nested <font> element.

top

Widget Properties

Here are the common properties shared by all widgets:

Property	Description
xsi:type	Widget type. See widget types for possible values.
id	Uniquely identifies the widget in the screen file
x, y	Absolute position
width, height	User-specified size. If missing then the size is calculated automatically to adapt widget’s content
measuredWidth, measuredHeight	Actual size. Always present. You should always look at these properties instead of width and height
text	The displayed text
locked	true/false. Tells if a widget is locked or not
customId, customData	User-specified custom id and data that can be exploited by 3rd party tools

top

Items

The following widgets support a nested <items> tag: model:Accordion, model:Menu, model:LinkBar, model:Tabs, model:Popup, model:Breadcrumbs, model:List, model:Tree, model:TabbedPane, model:ButtonBar.

Note that if you are doing XML generation then the <items> tag is optional and should only be used to specify links.

The <items> tag supports the following properties:

Property	Description
text	The text of the item
x, y	Relative position
width, height	Actual size
link	Reference to the linked screen file. Can be absolute to workspace or relative.

top

Widget Types

Here’s a complete list of all supported widget types. Follow the links below to discover additional properties supported by each widget.

model:Accordion, model:Arrow, model:Breadcrumbs, model:Browser, model:Button, model:ButtonBar, model:Callout, model:Chart, model:Checkbox, model:Circle, model:ColorPicker, model:Combo, model:CoverFlow, model:CrossOut, model:CurlyBrace, model:DateField, model:Group, model:HLine, model:HScrollbar, model:HSlider, model:HSplitter, model:Hotspot, model:Icon, model:Image, model:Label, model:Link, model:LinkBar, model:List, model:Map, model:Master, model:Menu, model:Note, model:Panel, model:Placeholder, model:Popup, model:ProgressBar, model:RadioButton, model:Rectangle, model:SVGImage, model:ScratchOut, model:SearchField, model:Spinner, model:TabbedPane, model:Table, model:Tabs, model:Text, model:TextArea, model:TextField, model:Tooltip, model:Tree, model:VLine, model:VScrollbar, model:VSlider, model:VSplitter, model:VideoPlayer, model:WidgetGroup, model:Window

Accordion

items	Widget items. See items section for more details.
selection	Selection index. Zero-based. Default: -1
value	Value for scrollbars, progress bars, sliders, etc. Possible values are between 0-100. Default: 0.
verticalScrollbar	Toggles vertical scrollbar. Default: false.

Arrow

direction	Values: top, bottom. Default: top.
foreground	Foreground color. Default: black.
left	Toggles left arrow head. Default: true.
lineStyle	Line style Values: solid, dotted, dashed. Default: solid.
right	Toggles right arrow head. Default: false.

Breadcrumbs

font	Text font. See fonts section for more details.
items	Widget items. See items section for more details.

Browser

value	Value for scrollbars, progress bars, sliders, etc. Possible values are between 0-100. Default: 0.
verticalScrollbar	Toggles vertical scrollbar. Default: false.

Button

background	Background color. Default: white.
font	Text font. See fonts section for more details.
icon	Rotation in degrees in 90° increments See icons section for available icons. Values: 0, 90, 180, 270. Default: 0.
link	Linked screen file path. Can be absolute or relative.
state	Values: normal, disabled, selected, focused. Default: normal.
style	Values: pointleft, square, pointright. Default: square.
textAlignment	Text alignment. Values: Left, Center, Right. Default: Left.

ButtonBar

background	Background color. Default: white.
font	Text font. See fonts section for more details.
items	Widget items. See items section for more details.
selection	Selection index. Zero-based. Default: -1

Callout

alpha	Alpha. Possible values are between 0-255. Default: 255.
background	Background color. Default: white.
font	Text font. See fonts section for more details.
link	Linked screen file path. Can be absolute or relative.

Chart

chartType

Values: pie, line, bar, column. Default: pie.

Checkbox

font	Text font. See fonts section for more details.
link	Linked screen file path. Can be absolute or relative.
selected	Toggles selection.
state	Values: normal, disabled, selected, focused. Default: normal.

Circle

alpha	Alpha. Possible values are between 0-255. Default: 255.
background	Background color. Default: white.
border	Toggles border rendering. Default: true.
font	Text font. See fonts section for more details.
foreground	Foreground color. Default: black.
icon	Rotation in degrees in 90° increments See icons section for available icons. Values: 0, 90, 180, 270. Default: 0.
iconPosition	Values: top, bottom, left, right, topLeft, topRight, bottomLeft, bottomRight. Default: left.
lineStyle	Line style Values: solid, dotted, dashed. Default: solid.
link	Linked screen file path. Can be absolute or relative.
textAlignment	Text alignment. Values: Left, Center, Right. Default: Left.

ColorPicker

background

Background color. Default: white.

Combo

font	Text font. See fonts section for more details.
state	Values: normal, disabled, selected, focused. Default: normal.

CoverFlow

CrossOut

alpha	Alpha. Possible values are between 0-255. Default: 255.
foreground	Foreground color. Default: black.

CurlyBrace

font	Text font. See fonts section for more details.
foreground	Foreground color. Default: black.
position	Values: top, bottom, left, right, topLeft, topRight, bottomLeft, bottomRight. Default: left.

DateField

state

Values: normal, disabled, selected, focused. Default: normal.

Group

alpha	Alpha. Possible values are between 0-255. Default: 255.
background	Background color. Default: white.
font	Text font. See fonts section for more details.
value	Value for scrollbars, progress bars, sliders, etc. Possible values are between 0-100. Default: 0.
verticalScrollbar	Toggles vertical scrollbar. Default: false.

HLine

foreground	Foreground color. Default: black.
lineStyle	Line style Values: solid, dotted, dashed. Default: solid.

HScrollbar

value

Value for scrollbars, progress bars, sliders, etc. Possible values are between 0-100. Default: 0.

HSlider

state	Values: normal, disabled, selected, focused. Default: normal.
value	Value for scrollbars, progress bars, sliders, etc. Possible values are between 0-100. Default: 0.

HSplitter

Hotspot

link	Linked screen file path. Can be absolute or relative.

Icon

foreground	Foreground color. Default: black.
icon	Rotation in degrees in 90° increments See icons section for available icons. Values: 0, 90, 180, 270. Default: 0.
link	Linked screen file path. Can be absolute or relative.

Image

grayscale	Toggles grayscale image rendering.
link	Linked screen file path. Can be absolute or relative.
src	Image source file path. Can be absolute or relative.

Label

font	Text font. See fonts section for more details.
foreground	Foreground color. Default: black.
icon	Rotation in degrees in 90° increments See icons section for available icons. Values: 0, 90, 180, 270. Default: 0.
iconPosition	Values: top, bottom, left, right, topLeft, topRight, bottomLeft, bottomRight. Default: left.
link	Linked screen file path. Can be absolute or relative.
rotation	Rotation in degrees in 90 degree increments Values: 0, 90, 180, 270. Default: 0.
state	Values: normal, disabled, selected, focused. Default: normal.
textAlignment	Text alignment. Values: Left, Center, Right. Default: Left.

Link

font	Text font. See fonts section for more details.
link	Linked screen file path. Can be absolute or relative.
state	Values: normal, disabled, selected, focused. Default: normal.

LinkBar

font	Text font. See fonts section for more details.
items	Widget items. See items section for more details.
selection	Selection index. Zero-based. Default: -1

List

alpha	Alpha. Possible values are between 0-255. Default: 255.
alternative	Alternative color for rows in lists and tables Default: white.
background	Background color. Default: white.
border	Toggles border rendering. Default: true.
font	Text font. See fonts section for more details.
horizontalLines	Toggles horizontal lines. Default: false.
items	Widget items. See items section for more details.
rowHeight	Row height in pixels.
selection	Selection index. Zero-based. Default: -1
value	Value for scrollbars, progress bars, sliders, etc. Possible values are between 0-100. Default: 0.
verticalScrollbar	Toggles vertical scrollbar. Default: false.

Map

Master

dimmed	Toggles dimmed style rendering in design mode.
link	Linked screen file path. Can be absolute or relative.
overrides	Local overrides
screen	Reference to the master screen file. Can be absolute to workspace or relative.

Menu

icon	Rotation in degrees in 90° increments See icons section for available icons. Values: 0, 90, 180, 270. Default: 0.
items	Widget items. See items section for more details.
selection	Selection index. Zero-based. Default: -1

Note

alpha	Alpha. Possible values are between 0-255. Default: 255.
background	Background color. Default: white.
font	Text font. See fonts section for more details.
link	Linked screen file path. Can be absolute or relative.
textAlignment	Text alignment. Values: Left, Center, Right. Default: Left.

Panel

alpha	Alpha. Possible values are between 0-255. Default: 255.
background	Background color. Default: white.
border	Values: none, solid, solid-rounded, dashed-rounded. Default: solid.
foreground	Foreground color. Default: black.
link	Linked screen file path. Can be absolute or relative.
value	Value for scrollbars, progress bars, sliders, etc. Possible values are between 0-100. Default: 0.
verticalScrollbar	Toggles vertical scrollbar. Default: false.

Placeholder

link	Linked screen file path. Can be absolute or relative.

Popup

items	Widget items. See items section for more details.
selection	Selection index. Zero-based. Default: -1

ProgressBar

background	Background color. Default: white.
value	Value for scrollbars, progress bars, sliders, etc. Possible values are between 0-100. Default: 0.

RadioButton

font	Text font. See fonts section for more details.
link	Linked screen file path. Can be absolute or relative.
selected	Toggles selection.
state	Values: normal, disabled, selected, focused. Default: normal.

Rectangle

alpha	Alpha. Possible values are between 0-255. Default: 255.
background	Background color. Default: white.
border	Values: none, solid, solid-rounded, dashed-rounded. Default: solid.
font	Text font. See fonts section for more details.
foreground	Foreground color. Default: black.
icon	Rotation in degrees in 90° increments See icons section for available icons. Values: 0, 90, 180, 270. Default: 0.
iconPosition	Values: top, bottom, left, right, topLeft, topRight, bottomLeft, bottomRight. Default: left.
link	Linked screen file path. Can be absolute or relative.
textAlignment	Text alignment. Values: Left, Center, Right. Default: Left.

SVGImage

alpha	Alpha. Possible values are between 0-255. Default: 255.
background	Background color. Default: white.
foreground	Foreground color. Default: black.
link	Linked screen file path. Can be absolute or relative.
rotation	Rotation in degrees in 90 degree increments Values: 0, 90, 180, 270. Default: 0.
src	Image source file path. Can be absolute or relative.

ScratchOut

alpha	Alpha. Possible values are between 0-255. Default: 255.
foreground	Foreground color. Default: black.

SearchField

Spinner

font	Text font. See fonts section for more details.
state	Values: normal, disabled, selected, focused. Default: normal.

TabbedPane

alpha	Alpha. Possible values are between 0-255. Default: 255.
background	Background color. Default: white.
font	Text font. See fonts section for more details.
items	Widget items. See items section for more details.
position	Tabs position. Values: top, bottom, left, right, topLeft, topRight, bottomLeft, bottomRight. Default: top.
selection	Selection index. Zero-based. Default: -1
value	Value for scrollbars, progress bars, sliders, etc. Possible values are between 0-100. Default: 0.
verticalScrollbar	Toggles vertical scrollbar. Default: false.

Table

alpha	Alpha. Possible values are between 0-255. Default: 255.
alternative	Alternative color for rows in lists and tables Default: white.
background	Background color. Default: white.
border	Toggles border rendering. Default: true.
font	Text font. See fonts section for more details.
header	Toggles vertical lines. Default: true.
horizontalLines	Toggles horizontal lines. Default: false.
rowHeight	Row height in pixels.
selection	Selection index. Zero-based. Default: -1
textAlignment	Text alignment. Values: Left, Center, Right. Default: Left.
value	Value for scrollbars, progress bars, sliders, etc. Possible values are between 0-100. Default: 0.
verticalLines	Toggles vertical lines. Default: true.
verticalScrollbar	Toggles vertical scrollbar. Default: false.

Tabs

font	Text font. See fonts section for more details.
items	Widget items. See items section for more details.
selection	Selection index. Zero-based. Default: -1

Text

dummyText	If true then Lorem Ipsum default text is used.
font	Text font. See fonts section for more details.
foreground	Foreground color. Default: black.
link	Linked screen file path. Can be absolute or relative.
textAlignment	Text alignment. Values: Left, Center, Right. Default: Left.

TextArea

alpha	Alpha. Possible values are between 0-255. Default: 255.
background	Background color. Default: white.
font	Text font. See fonts section for more details.
state	Values: normal, disabled, selected, focused. Default: normal.
textAlignment	Text alignment. Values: Left, Center, Right. Default: Left.
value	Value for scrollbars, progress bars, sliders, etc. Possible values are between 0-100. Default: 0.
verticalScrollbar	Toggles vertical scrollbar. Default: false.

TextField

alpha	Alpha. Possible values are between 0-255. Default: 255.
background	Background color. Default: white.
font	Text font. See fonts section for more details.
state	Values: normal, disabled, selected, focused. Default: normal.
textAlignment	Text alignment. Values: Left, Center, Right. Default: Left.

Tooltip

background	Background color. Default: white.
font	Text font. See fonts section for more details.
position	Pointing arrow position. Values: top, bottom, left, right, topLeft, topRight, bottomLeft, bottomRight. Default: bottomLeft.
textAlignment	Text alignment. Values: Left, Center, Right. Default: Left.

Tree

alpha	Alpha. Possible values are between 0-255. Default: 255.
background	Background color. Default: white.
border	Toggles border rendering. Default: true.
items	Widget items. See items section for more details.
selection	Selection index. Zero-based. Default: -1
value	Value for scrollbars, progress bars, sliders, etc. Possible values are between 0-100. Default: 0.
verticalScrollbar	Toggles vertical scrollbar. Default: false.

VLine

foreground	Foreground color. Default: black.
lineStyle	Line style Values: solid, dotted, dashed. Default: solid.

VScrollbar

value

Value for scrollbars, progress bars, sliders, etc. Possible values are between 0-100. Default: 0.

VSlider

state	Values: normal, disabled, selected, focused. Default: normal.
value	Value for scrollbars, progress bars, sliders, etc. Possible values are between 0-100. Default: 0.

VSplitter

VideoPlayer

WidgetGroup

link	Linked screen file path. Can be absolute or relative.
name	Linked screen file path. Can be absolute or relative.
widgets	Contained widgets.

Window

closeButton	Toggles close button Default: true.
maximizeButton	Toggles maximize button Default: false.
minimizeButton	Toggles minimize button Default: false.
value	Value for scrollbars, progress bars, sliders, etc. Possible values are between 0-100. Default: 0.
verticalScrollbar	Toggles vertical scrollbar. Default: false.

top

Icons

Here’s a complete list of supported icons.

add, alarm, apple, arrow-cursor, arrow-down, arrow-left, arrow-left-down, arrow-left-up, arrow-right, arrow-right-down, arrow-right-up, arrow-up, asc, at, attachment, backspace, bar-chart, battery, bell, bluetooth, book, bookmark, brightness, bulb, bullet, busy-cursor, calculator, calendar, calendar2, car, cd, check, checked, circled-check, circled-minus, circled-mul, circled-plus, close, closed, cloud, comments, computer, copy, copyright, country-flag1, country-flag2, cube, currency-dollar, currency-euro, currency-pound, currency-yen, curved-arrow-down, curved-arrow-left, curved-arrow-right, curved-arrow-up, cut, database, delete, desc, direction, dots, download, download2, edit, eject, email, empty-arrow-down, empty-arrow-left, empty-arrow-right, empty-arrow-up, error, excel, export, eye, facebook, fast-forward, favorites, filled-arrow-down, filled-arrow-left, filled-arrow-right, filled-arrow-up, filter, find, fire, flag, full-screen, grab-cursor, grabbing-cursor, hand-cursor, hash, heart, help, history, home, hresize-cursor, image, import, indeterminate, info, internet, key, lightning, line-arrow-down, line-arrow-left, line-arrow-up, line-chart, link, linkedin, list-bullet, list-number, loading, location, microphone, mobile, more, move, network, new, note, open, options, pages, paste, pause, pdf, phone, pie-chart, pin, plane, play, previous, print, print-preview, redo, refresh, registered, reload, rewind, rss, sad, save, secure, selected, separator, share, shopping-cart, shutdown, signal, skip, smartphone, smile, snapshot, space, squared-minus, squared-mul, squared-plus, stop, stop-media, submenu, suitcase, table, tag, tag-remove, text-align-center, text-align-justify, text-align-left, text-align-right, text-bold, text-caret, text-italic, text-underline, thumbs-down, thumbs-up, train, trash, truck, twitter, unavailable-cursor, unchecked, undo, unsecure, unselected, upload, user, usergroup, video, video2, volume, volume-off, vresize-cursor, warning, wifi, wizard, word, wrench, zoom-in, zoom-out

top