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.

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

Property	Description
xsi:type	Widget type. See widget types for possible values.
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

Icons

Here’s a complete list of supported icons.

add, apple, arrow-cursor, arrow-down, arrow-left, arrow-left-down, arrow-left-up, arrow-right, arrow-right-down, arrow-right-up, arrow-up, asc, attachment, backspace, bar-chart, battery, bell, bluetooth, book, bulb, bullet, busy-cursor, calculator, calendar, car, cd, check, checked, circled-check, circled-minus, circled-mul, circled-plus, close, closed, comments, computer, copy, country-flag1, country-flag2, cube, currency-dollar, currency-euro, currency-pound, currency-yen, curved-arrow-down, curved-arrow-up, cut, database, delete, desc, download, edit, email, empty-arrow-down, empty-arrow-left, empty-arrow-right, empty-arrow-up, error, excel, fast-forward, favorites, filled-arrow-down, filled-arrow-left, filled-arrow-right, filled-arrow-up, find, flag, full-screen, grab-cursor, grabbing-cursor, hand-cursor, heart, help, history, home, hresize-cursor, image, info, internet, link, loading, microphone, mobile, move, network, new, note, open, options, paste, pause, pdf, phone, pie-chart, plane, play, previous, print, print-preview, redo, refresh, reload, rewind, rss, sad, save, secure, selected, shopping-cart, shutdown, signal, skip, smile, snapshot, squared-minus, squared-mul, squared-plus, stop, stop-media, submenu, table, tag, tag-remove, text-bold, text-caret, text-italic, text-underline, thumbs-down, thumbs-up, train, trash, unavailable-cursor, unchecked, undo, unsecure, unselected, upload, user, usergroup, volume, volume-off, vresize-cursor, warning, wifi, wizard, word, zoom-in, zoom-out

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.

direction	Values: top, bottom. Default: top.
foreground	Foreground color. Default: black.
left	Toggles left arrow head. Default: true.
right	Toggles right arrow head. Default: false.

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

background	Background color. Default: white.
font	Text font. See fonts section for more details.
icon	Icon. Format “icon-name (icon-size)”. Icon size values are small, medium, large and xlarge. See icons section for available icons.
state	Values: normal, disabled, selected, focused. Default: normal.
style	Values: pointleft, square, pointright. Default: square.

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

alpha	Alpha. Possible values are between 0-255. Default: 255.
background	Background color. Default: white.
font	Text font. See fonts section for more details.

selected	Toggles selection.
state	Values: normal, disabled, selected, focused. Default: normal.

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

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

dummyText	If true then Lorem Ipsum default text is used.
font	Text font. See fonts section for more details.
foreground	Foreground color. Default: black.
textAlignment	Text alignment. Values: Left, Center, Right. Default: Left.

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.

Contents

Product

Community

Contact