XML Format Specification

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
layoutParams	Layout parameters that control how the widget behaves when its container is resized. It’s a combination of anchor-left, anchor-center, anchor-right flags for horizontal direction and anchor-top, anchor-middle, anchor-bottom for vertical direction. For example “anchor-left,anchor-right|anchor-top” value will anchor the widget to the left and right horizontally and to the top vertically.

top

Items

The following widgets support a nested <items> tag: model:Accordion, model:Alert, model:Breadcrumbs, model:ButtonBar, model:Combo, model:CurlyBrace, model:Label, model:LinkBar, model:List, model:Menu, model:Note, model:Popup, model:TabbedPane, model:Table, model:Tabs, model:Text, model:TextArea, model:Tooltip, model:Tree, model:VButtonBar.

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:Alert, 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:Shape, model:Spinner, model:Switch, model:TabbedPane, model:Table, model:Tabs, model:Text, model:TextArea, model:TextField, model:Tooltip, model:Tree, model:VButtonBar, model:VLine, model:VScrollbar, model:VSlider, model:VSplitter, model:VideoPlayer, model:WidgetGroup, model:Window

Accordion

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 Default: -1.
value	Value for scrollbars, progress bars, sliders, etc. Possible values are between 0-100. Default: 0.
verticalScrollbar	Toggles vertical scrollbar. Default: false.

Alert

font	Text font. See fonts section for more details.
icon	Rotation in degrees in 90 degree increments See icons section for available icons. Values: 0, 90, 180, 270. Default: 0.
items	Widget items. See items section for more details.
skin	Skin resource.

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.
skin	Skin resource.

Browser

alpha	Alpha. Possible values are between 0-255. Default: 255.
background	Background color. Default: white.
font	Text font. See fonts section for more details.
skin	Skin resource.
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 degree increments See icons section for available icons. Values: 0, 90, 180, 270. Default: 0.
link	Linked screen file path. Can be absolute or relative.
skin	Skin resource.
state	Values: normal, disabled, selected, focused. Default: normal.
style	Values: pointleft, square, round, 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 Default: -1.
skin	Skin resource.

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.
skin	Skin resource.

Chart

chartType	Values: pie, line, bar, column. Default: pie.
skin	Skin resource.

Checkbox

font	Text font. See fonts section for more details.
link	Linked screen file path. Can be absolute or relative.
selected	Toggles selection.
skin	Skin resource.
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 degree 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.
skin	Skin resource.

Combo

alpha	Alpha. Possible values are between 0-255. Default: 255.
background	Background color. Default: white.
borderColor	Border color Default: black.
font	Text font. See fonts section for more details.
items	Widget items. See items section for more details.
link	Linked screen file path. Can be absolute or relative.
skin	Skin resource.
state	Values: normal, disabled, selected, focused. Default: normal.

CoverFlow

skin	Skin resource.

CrossOut

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

CurlyBrace

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

DateField

alpha	Alpha. Possible values are between 0-255. Default: 255.
background	Background color. Default: white.
borderColor	Border color Default: black.
skin	Skin resource.
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.
skin	Skin resource.
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.
skin	Skin resource.

HScrollbar

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

HSlider

background	Background color. Default: white.
skin	Skin resource.
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

skin	Skin resource.

Hotspot

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

Icon

foreground	Foreground color. Default: black.
icon	Rotation in degrees in 90 degree 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

border	Toggles border rendering. Default: true.
grayscale	Toggles grayscale image rendering.
hFlip	Toggles horizontal flip
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.
vFlip	Toggles vertical flip

Label

font	Text font. See fonts section for more details.
foreground	Foreground color. Default: black.
icon	Rotation in degrees in 90 degree 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.
items	Widget items. See items section for more details.
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.
skin	Skin resource.
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 Default: -1.
skin	Skin resource.

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.
header	Toggles header row Default: false.
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 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

skin	Skin resource.

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 degree 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 Default: -1.
skin	Skin resource.

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.
items	Widget items. See items section for more details.
link	Linked screen file path. Can be absolute or relative.
skin	Skin resource.
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.
skin	Skin resource.
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.
skin	Skin resource.

Popup

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

ProgressBar

background	Background color. Default: white.
skin	Skin resource.
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.
skin	Skin resource.
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 degree 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.
hFlip	Toggles horizontal flip
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.
vFlip	Toggles vertical flip

ScratchOut

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

SearchField

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

Shape

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 degree 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.
rotation	Rotation in degrees in 90 degree increments Values: 0, 90, 180, 270. Default: 0.
shapeType	Values: ellipse, rectangle, rectangle-rounded, rectangle-round, diamond, star, parallelogram, triangle, triangle-right. Default: ellipse.
skin	Skin resource.
textAlignment	Text alignment. Values: Left, Center, Right. Default: Left.

Spinner

alpha	Alpha. Possible values are between 0-255. Default: 255.
background	Background color. Default: white.
borderColor	Border color Default: black.
font	Text font. See fonts section for more details.
skin	Skin resource.
state	Values: normal, disabled, selected, focused. Default: normal.

Switch

background	Background color. Default: white.
font	Text font. See fonts section for more details.
link	Linked screen file path. Can be absolute or relative.
selected	Toggles selection.
skin	Skin resource.
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 Default: -1.
skin	Skin resource.
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 header row Default: true.
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 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 Default: -1.
skin	Skin resource.

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.
items	Widget items. See items section for more details.
lineHeight	Line height specified either in em, percents or pixels. Default: normal.
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.
borderColor	Border color Default: black.
font	Text font. See fonts section for more details.
items	Widget items. See items section for more details.
lineHeight	Line height specified either in em, percents or pixels. Default: normal.
skin	Skin resource.
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.
borderColor	Border color Default: black.
font	Text font. See fonts section for more details.
skin	Skin resource.
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.
items	Widget items. See items section for more details.
position	Pointing arrow position. Values: top, bottom, left, right, topLeft, topRight, bottomLeft, bottomRight. Default: bottomLeft.
skin	Skin resource.
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.
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 Default: -1.
value	Value for scrollbars, progress bars, sliders, etc. Possible values are between 0-100. Default: 0.
verticalScrollbar	Toggles vertical scrollbar. Default: false.

VButtonBar

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 Default: -1.
skin	Skin resource.
textAlignment	Text alignment. Values: Left, Center, Right. Default: Left.

VLine

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

VScrollbar

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

VSlider

background	Background color. Default: white.
skin	Skin resource.
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

skin	Skin resource.

VideoPlayer

skin	Skin resource.

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

alpha	Alpha. Possible values are between 0-255. Default: 255.
background	Background color. Default: white.
closeButton	Toggles close button Default: true.
maximizeButton	Toggles maximize button Default: false.
minimizeButton	Toggles minimize button Default: false.
skin	Skin resource.
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, brush, 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, find2, 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, list-bullet, list-number, loading, location, microphone, minus, mobile, more, move, network, neutral, new, note, open, options, pages, paste, pause, pdf, phone, pie-chart, pin, placeholder, 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

Contents