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: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.
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