Fix samples and Lua

Samples/assets/invader.rcss

@@ -1,3 +1,110 @@
+@spritesheet theme 
+{
+	src: invader.tga;
+	
+	/**
+	   The following specifies a list of sprite names and associated rectangles into the image given above.
+	   Any sprite given here can be specified in a decorator. Their names must be globally unique.
+	   Rectangles are specified as: x y width height.
+	*/
+	title-bar-l: 147px 0px 82px 85px;
+	title-bar-c: 229px 0px  1px 85px;
+	title-bar-r: 231px 0px 15px 85px;
+	
+	/* huditems are vertically flipped titlebars */
+	huditem-l: 147px 55px 82px -55px;
+	huditem-c: 229px 55px  1px -55px;
+	huditem-r: 231px 55px 15px -55px;
+	
+	icon-help:    128px 152px 51px 39px;
+	icon-invader: 179px 152px 51px 39px;
+	icon-game:    230px 152px 51px 39px;
+	icon-hiscore: 281px 152px 51px 39px;
+	icon-waves:   332px 152px 51px 39px;
+	icon-flag:    332px 191px 51px 39px;
+	icon-lives:   383px 152px 51px 39px;
+	icon-score:   434px 152px 51px 39px;
+	
+	window-tl: 0px 0px 133px 140px;
+	window-t:  134px 0px 1px 140px;
+	window-tr: 136px 0px 10px 140px;
+	window-l:  0px 139px 10px 1px;
+	window-c:  11px 139px 1px 1px;
+	window-r:  10px 139px -10px 1px; /* mirrored left */
+	window-bl: 0px 140px 11px 11px;
+	window-b:  11px 140px 1px 11px;
+	window-br: 136px 140px 10px 11px;
+	
+	button: 247px 0px 159px 45px;
+	button-hover:  247px 45px 159px 45px;
+	button-active: 247px 90px 159px 45px;
+	
+	text-l: 162px 192px 14px 31px;
+	text-c: 176px 192px 1px 31px;
+	
+	selectbox-tl: 281px 275px 11px 9px;
+	selectbox-t:  292px 275px 1px 9px;
+	selectbox-tr: 294px 275px 11px 9px;
+	selectbox-l:  281px 283px 11px 1px;
+	selectbox-c:  292px 283px 1px 1px;
+	selectbox-bl: 281px 285px 11px 11px;
+	selectbox-b:  292px 285px 1px 11px;
+	selectbox-br: 294px 285px 11px 11px;
+	
+	selectvalue: 162px 192px 145px 37px;
+	selectvalue-hover: 162px 230px 145px 37px;
+	selectarrow: 307px 192px 30px 37px;
+	selectarrow-hover: 307px 230px 30px 37px;
+	selectarrow-active: 307px 268px 30px 37px;
+	
+	radio: 407px 0px 30px 30px;
+	radio-hover: 437px 0px 30px 30px;
+	radio-active: 467px 0px 30px 30px;
+	radio-checked: 407px 30px 30px 30px;
+	radio-checked-hover: 437px 30px 30px 30px;
+	radio-checked-active: 467px 30px 30px 30px;
+	
+	checkbox: 407px 60px 30px 30px;
+	checkbox-hover: 437px 60px 30px 30px;
+	checkbox-active: 467px 60px 30px 30px;
+	checkbox-checked: 407px 90px 30px 30px;
+	checkbox-checked-hover: 437px 90px 30px 30px;
+	checkbox-checked-active: 467px 90px 30px 30px;
+	
+	datagridheader-l: 127px 192px 16px 31px;
+	datagridheader-c: 143px 192px 2px 31px;
+	datagridheader-r: 145px 192px 15px 31px;
+	
+	datagridexpand: 3px 232px 17px 17px;
+	datagridexpand-hover: 21px 232px 17px 17px;
+	datagridexpand-active: 39px 232px 17px 17px;
+	datagridexpand-collapsed: 3px 250px 17px 17px;
+	datagridexpand-collapsed-hover: 21px 250px 17px 17px;
+	datagridexpand-collapsed-active: 39px 250px 17px 17px;
+	
+	slidertrack-t: 70px 199px 27px 2px;
+	slidertrack-c: 70px 201px 27px 1px;
+	slidertrack-b: 70px 202px 27px 2px;
+	
+	sliderbar-t:         56px 152px 23px 23px;
+	sliderbar-c:         56px 175px 23px 1px;
+	sliderbar-b:         56px 176px 23px 22px;
+	sliderbar-hover-t:   80px 152px 23px 23px;
+	sliderbar-hover-c:   80px 175px 23px 1px;
+	sliderbar-hover-b:   80px 176px 23px 22px;
+	sliderbar-active-t: 104px 152px 23px 23px;
+	sliderbar-active-c: 104px 175px 23px 1px;
+	sliderbar-active-b: 104px 176px 23px 22px;
+	 
+	sliderarrowdec: 0px 152px 27px 24px;
+	sliderarrowdec-hover: 0px 177px 27px 24px;
+	sliderarrowdec-active: 0px 202px 27px 24px;
+	
+	sliderarrowinc: 28px 152px 27px 24px;
+	sliderarrowinc-hover: 28px 177px 27px 24px;
+	sliderarrowinc-active: 28px 202px 27px 24px;
+}
+
 body
 {
 	font-family: Delicious;
@@ -19,8 +126,6 @@ body.window
 	max-height: 700px;
 }
 
-
-
 div#title_bar
 {
 	z-index: 1;
@@ -32,10 +137,6 @@ div#title_bar
 	text-align: left;
 }
 
-@decorator icon : image {
-	image-src: invader.tga;
-}
-
 div#title_bar div#icon
 {
 	position: absolute;
@@ -46,40 +147,13 @@ div#title_bar div#icon
 	height: 39px;
 }
 
-@spritesheet theme {
-	src: invader.tga;
-	title-bar-l: 147px 0px 82px 85px;
-	title-bar-c: 229px 0px 1px 85px;
-	title-bar-r: 231px 0px 15px 85px;
-	
-	window-tl: 0px 0px 133px 140px;
-	window-t:  134px 0px 1px 140px;
-	window-tr: 136px 0px 10px 140px;
-	window-l:  0px 139px 10px 1px;
-	window-c:  11px 139px 1px 1px;
-	window-r:  10px 139px -10px 1px; /* mirrored left */
-	window-bl: 0px 140px 11px 11px;
-	window-b:  11px 140px 1px 11px;
-	window-br: 136px 140px 10px 11px;
-	
-	button: 247px 0px 159px 45px;
-	button-hover:  247px 45px 159px 45px;
-	button-active: 247px 90px 159px 45px;
-}
-
-@decorator title_bar : tiled-horizontal {
-	left-image: invader.tga 147px 0px 229px 85px;
-	center-image: invader.tga stretch 229px 0px 230px 85px;
-	right-image: invader.tga 231px 0px 246px 85px;
-}
-
 
 div#title_bar span
 {
 	padding-left: 85px;
 	padding-right: 25px;
 	padding-top: 17px;
-	padding-bottom: 48px;
+	padding-bottom: 51px;
 
 	font-size: 22px;
 	font-weight: bold;
@@ -88,36 +162,18 @@ div#title_bar span
 	outline-width: 1px;
 	outline-color: black;
 
-	decorator: title_bar;
-}
-
-@decorator window : tiled-box {
-	top-left-image: invader.tga 0px 0px 133px 140px;
-	top-image: invader.tga stretch 134px 0px 135px 140px;
-	top-right-image: invader.tga 136px 0px 146px 140px;
-	left-image: invader.tga stretch 0px 139px 10px 140px;
-	center-image: invader.tga stretch 11px 139px 12px 140px;
-	right-image: none;
-	bottom-left-image: invader.tga 0px 140px 11px 151px;
-	bottom-image: invader.tga stretch 11px 140px 12px 151px;
-	bottom-right-image: invader.tga 136px 140px 146px 151px;
+	decorator: tiled-horizontal( title-bar-l, title-bar-c, title-bar-r );
 }
 
-@decorator window-test : image {
-	image: window-c;
-	/*image: invader.tga 11px 139px 12px 140px;*/
-}
-
-
 div#window
 {
 	width: auto;
 	padding: 10px 15px;
 	
 	decorator: tiled-box(
-		window-tl, window-t stretch, window-tr, 
-		window-l stretch, window-c stretch, window-r stretch,
-		window-bl, window-b stretch, window-br
+		window-tl, window-t, window-tr, 
+		window-l, window-c, window-r,
+		window-bl, window-b, window-br
 	);
 }
 
@@ -225,11 +281,7 @@ input.text
 	height: 31px;
 	padding: 10px 10px 0px;
 
-	decorator: tiled-horizontal( 
-		invader.tga 162px 192px 176px 223px, /* left */
-		invader.tga stretch 176px 192px 177px 223px,  /* center */
-		none  /* right becomes mirrored from left */
-	);
+	decorator: tiled-horizontal( text-l, text-c, auto ); /* Right becomes mirrored left */
 }
 
 input.text,
@@ -274,13 +326,13 @@ dataselect selectvalue
 	height: 28px;
 	padding: 9px 10px 0px 10px;
 
-	decorator: image( invader.tga 162px 192px 307px 229px );
+	decorator: image( selectvalue  );
 }
 
 select selectvalue:hover,
 dataselect selectvalue:hover
 {
-	decorator: image( invader.tga 162px 230px 307px 267px );
+	decorator: image( selectvalue-hover );
 }
 
 select selectarrow,
@@ -289,13 +341,13 @@ dataselect selectarrow
 	width: 30px;
 	height: 37px;
 	
-	decorator: image( invader.tga 307px 192px 337px 229px );
+	decorator: image( selectarrow );
 }
 
 select selectarrow:hover,
 dataselect selectarrow:hover
 {
-	decorator: image( invader.tga 307px 230px 337px 267px );
+	decorator: image( selectarrow-hover );
 }
 
 select selectarrow:active,
@@ -303,7 +355,7 @@ select selectarrow:checked,
 dataselect selectarrow:active,
 dataselect selectarrow:checked
 {
-	decorator: image( invader.tga 307px 268px 337px 305px );
+	decorator: image( selectarrow-active );
 }
 
 select selectbox,
@@ -315,24 +367,15 @@ dataselect selectbox
 	padding: 1px 4px 4px 4px;
 }
 
-
-@decorator selectbox : tiled-box {
-	top-left-image: invader.tga 281px 275px 292px 284px;
-	top-right-image: invader.tga 294px 275px 305px 284px;
-	top-image: invader.tga stretch 292px 275px 293px 284px;
-	bottom-left-image: invader.tga 281px 285px 292px 296px;
-	bottom-right-image: invader.tga 294px 285px 305px 296px;
-	bottom-image: invader.tga stretch 292px 285px 293px 296px;
-	left-image: invader.tga stretch 281px 283px 292px 284px;
-	center-image: invader.tga stretch 292px 283px 293px 284px;
-}
-
-
 select selectbox,
 dataselect selectbox,
 datagrid datagridbody
 {
-	decorator: selectbox;
+	decorator: tiled-box(
+		selectbox-tl, selectbox-t, selectbox-tr, 
+		selectbox-l, selectbox-c, auto,  /* auto mirrors left */
+		selectbox-bl, selectbox-b, selectbox-br
+	);
 }
 
 select selectbox option,
@@ -368,79 +411,71 @@ input.checkbox
 
 input.radio
 {
-	decorator: image(invader.tga 407px 0px 437px 30px);
+	decorator: image(radio);
 }
 
 input.radio:hover
 {
-	decorator: image(invader.tga 437px 0px 467px 30px);
+	decorator: image(radio-hover);
 }
 
 input.radio:active
 {
-	decorator: image(invader.tga 467px 0px 497px 30px);
+	decorator: image(radio-active);
 }
 
 input.radio:checked
 {
-	decorator: image(invader.tga 407px 30px 437px 60px);
+	decorator: image(radio-checked);
 }
 
 input.radio:checked:hover
 {
-	decorator: image(invader.tga 437px 30px 467px 60px);
+	decorator: image(radio-checked-hover);
 }
 
 input.radio:checked:active
 {
-	decorator: image(invader.tga 467px 30px 497px 60px);
+	decorator: image(radio-checked-active);
 }
 
 input.checkbox
 {
-	decorator: image(invader.tga 407px 60px 437px 90px);
+	decorator: image(checkbox);
 }
 
 input.checkbox:hover
 {
-	decorator: image(invader.tga 437px 60px 467px 90px);
+	decorator: image(checkbox-hover);
 }
 
 input.checkbox:active
 {
-	decorator: image(invader.tga 467px 60px 497px 90px);
+	decorator: image(checkbox-active);
 }
 
 input.checkbox:checked
 {
-	decorator: image(invader.tga 407px 90px 437px 120px);
+	decorator: image(checkbox-checked);
 }
 
 input.checkbox:checked:hover
 {
-	decorator: image(invader.tga 437px 90px 467px 120px);
+	decorator: image(checkbox-checked-hover);
 }
 
 input.checkbox:checked:active
 {
-	decorator: image(invader.tga 467px 90px 497px 120px);
+	decorator: image(checkbox-checked-active);
 }
 
-
-@decorator datagridheader : tiled-horizontal {
-	left-image: invader.tga 127px 192px 143px 223px;
-	center-image: invader.tga stretch 143px 192px 145px 223px;
-	right-image: invader.tga 145px 192px 160px 223px;
-}
-
-
 datagrid datagridheader
 {
 	width: auto;
 	height: 25px;
 	padding: 5px 10px 0px 10px;
 
-	decorator: datagridheader;
+	decorator: tiled-horizontal( datagridheader-l, datagridheader-c, datagridheader-r );
 }
 
 datagrid datagridbody
@@ -462,22 +497,32 @@ datagridexpand
 	height: 17px;
 	width: 17px;
 	
-	decorator: image( invader.tga 3px 232px 20px 249px );
+	decorator: image( datagridexpand );
 }
 
 datagridexpand:hover
 {
-	decorator: image( invader.tga 21px 232px 38px 249px );
+	decorator: image( datagridexpand-hover );
 }
 
 datagridexpand:active
 {
-	decorator: image( invader.tga 39px 232px 56px 249px );
+	decorator: image( datagridexpand-active  );
 }
 
 datagridexpand.collapsed
 {
-	decorator: image( invader.tga 3px 250px 20px 267px );
+	decorator: image( datagridexpand-collapsed );
+}
+
+datagridexpand.collapsed:hover
+{
+	decorator: image( datagridexpand-collapsed-hover );
+}
+
+datagridexpand.collapsed:active
+{
+	decorator: image( datagridexpand-collapsed-active  );
 }
 
 
@@ -491,50 +536,30 @@ scrollbarvertical
 
 scrollbarvertical slidertrack
 {
-	decorator: tiled-vertical(
-		invader.tga 70px 199px 97px 201px, /* top-image */
-		invader.tga stretch 70px 201px 97px 202px, /* center-image */
-		invader.tga 70px 203px 97px 204px /* bottom-image */
-	);
+	decorator: tiled-vertical( slidertrack-t, slidertrack-c, slidertrack-b );
 }
 scrollbarvertical slidertrack:active
 {
 	image-color: #aaa;
 }
 
-@decorator sliderbar : tiled-vertical {
-	top-image: invader.tga 56px 152px 79px 175px;
-	center-image: invader.tga stretch 56px 175px 79px 175px;
-	bottom-image: invader.tga 56px 176px 79px 198px;
-}
-@decorator sliderbar-hover : sliderbar {
-	top-image-s: 80px 103px;
-	center-image-s: 80px 103px;
-	bottom-image-s: 80px 103px;
-}
-@decorator sliderbar-active : sliderbar {
-	top-image-s: 104px 127px;
-	center-image-s: 104px 127px;
-	bottom-image-s: 104px 127px;
-}
-
 scrollbarvertical sliderbar
 {
 	margin-left: 4px;
 	width: 23px;
 	min-height: 46px;
 
-	decorator: sliderbar;
+	decorator: tiled-vertical( sliderbar-t, sliderbar-c, sliderbar-b );
 }
 
 scrollbarvertical sliderbar:hover
 {
-	decorator: sliderbar-hover;
+	decorator: tiled-vertical( sliderbar-hover-t, sliderbar-hover-c, sliderbar-hover-b );
 }
 
 scrollbarvertical sliderbar:active
 {
-	decorator: sliderbar-active;
+	decorator: tiled-vertical( sliderbar-active-t, sliderbar-active-c, sliderbar-active-b );
 }
 
 scrollbarvertical sliderarrowdec,
@@ -546,31 +571,30 @@ scrollbarvertical sliderarrowinc
 
 scrollbarvertical sliderarrowdec
 {
-	decorator: image( invader.tga 0px 152px 27px 176px );
+	decorator: image( sliderarrowdec );
 }
 scrollbarvertical sliderarrowdec:hover
 {
-	decorator: image( invader.tga 0px 177px 27px 201px );
+	decorator: image( sliderarrowdec-hover );
 }
 scrollbarvertical sliderarrowdec:active
 {
-	decorator: image( invader.tga 0px 202px 27px 226px );
+	decorator: image( sliderarrowdec-active );
 }
 
 scrollbarvertical sliderarrowinc
 {
-	decorator: image( invader.tga 28px 152px 55px 176px );
+	decorator: image( sliderarrowinc );
 }
 scrollbarvertical sliderarrowinc:hover
 {
-	decorator: image( invader.tga 28px 177px 55px 201px );
+	decorator: image( sliderarrowinc-hover );
 }
 scrollbarvertical sliderarrowinc:active
 {
-	decorator: image( invader.tga 28px 202px 55px 226px );
+	decorator: image( sliderarrowinc-active );
 }
 
-
 scrollbarhorizontal
 {
 	width: 0px;

Samples/invaders/data/game.rml

@@ -21,12 +21,6 @@
 				height: 100%;
 			}
 			
-			@decorator div : tiled-horizontal {
-				left-image: ../../assets/invader.tga 147px 55px 229px 0px;
-				center-image: ../../assets/invader.tga stretch 229px 55px 230px 0px;
-				right-image: ../../assets/invader.tga 231px 55px 246px 0px;
-			}
-
 			div
 			{
 				height: 47px;
@@ -35,7 +29,7 @@
 
 				font-size: 20px;
 
-				decorator: div;
+				decorator: tiled-horizontal( huditem-l, huditem-c, huditem-r );
 			}
 
 			div#score_div
@@ -62,14 +56,6 @@
 				width: 80px;
 			}
 			
-			@decorator icon : image {
-				image: ../../assets/invader.tga 0px 152px 0px 191px;
-			}
-			@decorator icon-score : icon { image-s: 434px 485px; }
-			@decorator icon-hiscore : icon { image-s: 281px 332px; }
-			@decorator icon-waves : icon { image-s: 332px 383px; }
-			@decorator icon-lives : icon { image-s: 383px 434px; }
-
 			icon
 			{
 				display: block;
@@ -83,22 +69,22 @@
 
 			div#score_div icon
 			{
-				decorator: icon-score;
+				decorator: image( icon-score );
 			}
 
 			div#hiscore_div icon
 			{
-				decorator: icon-hiscore;
+				decorator: image( icon-hiscore );
 			}
 
 			div#waves_div icon
 			{
-				decorator: icon-waves;
+				decorator: image( icon-waves );
 			}
 
 			div#lives_div icon
 			{
-				decorator: icon-lives;
+				decorator: image( icon-lives );
 			}
 		</style>
 	</head>

Samples/invaders/data/help.rml

@@ -17,7 +17,7 @@
 			
 			div#title_bar div#icon
 			{
-				decorator: image( ../../assets/invader.tga 128px 152px 179px 191px);
+				decorator: image( icon-help );
 			}
 		</style>
 	</head>

Samples/invaders/data/high_score.rml

@@ -13,7 +13,7 @@
 			
 			div#title_bar div#icon
 			{
-				decorator: image( ../../assets/invader.tga 281px 152px 331px 191px);
+				decorator: image( icon-hiscore );
 			}
 			
 			datagrid

Samples/invaders/data/main_menu.rml

@@ -10,9 +10,10 @@
 
 				margin: auto;
 			}
+			
 			div#title_bar div#icon
 			{
-				decorator: image( ../../assets/invader.tga 179px 152px 230px 191px);
+				decorator: image( icon-invader );
 			}
 		</style>
 	</head>

Samples/invaders/data/options.rml

@@ -13,7 +13,7 @@
 
 			div#title_bar div#icon
 			{
-				decorator: image( ../../assets/invader.tga 230px 152px 281px 191px);
+				decorator: image( icon-game );
 				display: none;
 			}
 

Samples/invaders/data/pause.rml

@@ -13,7 +13,7 @@
 			
 			div#title_bar div#icon
 			{
-				decorator: image( ../../assets/invader.tga 332px 191px 383px 231px);
+				decorator: image( icon-flag );
 			}
 		</style>
 	</head>

Samples/invaders/data/start_game.rml

@@ -13,7 +13,7 @@
 			
 			div#title_bar div#icon
 			{
-				decorator: image( ../../assets/invader.tga 230px 152px 281px 191px);
+				decorator: image( icon-game );
 			}
 			
 			form div

Samples/luainvaders/data/background.rml

@@ -5,10 +5,18 @@
 			{
 				width: 100%;
 				height: 100%;
-				z-index: bottom;
-
 				z-index: -1;
 			}
+			
+			@decorator star : starfield {
+				num-layers: 5;
+				top-colour: #fffc;
+				bottom-colour: #fff3;
+				top-speed: 80.0;
+				bottom-speed: 20.0;
+				top-density: 8;
+				bottom-density: 20;
+			}
 
 			starfield
 			{
@@ -17,14 +25,7 @@
 				height: 100%;
 				z-index: 1;
 
-				star-decorator: starfield;
-				star-num-layers: 5;
-				star-top-colour: #fffc;
-				star-bottom-colour: #fff3;
-				star-top-speed: 80.0;
-				star-bottom-speed: 20.0;
-				star-top-density: 8;
-				star-bottom-density: 20;
+				decorator: star;
 			}
 		</style>
 	</head>

Samples/luainvaders/data/game.rml

@@ -28,10 +28,7 @@
 
 				font-size: 20px;
 
-				background-decorator: tiled-horizontal;
-				background-left-image: ../../assets/invader.tga 147px 55px 229px 0px;
-				background-center-image: ../../assets/invader.tga stretch 229px 55px 230px 0px;
-				background-right-image: ../../assets/invader.tga 231px 55px 246px 0px;
+				decorator: tiled-horizontal( huditem-l, huditem-c, huditem-r );
 			}
 
 			div#score_div
@@ -67,30 +64,26 @@
 
 				width: 51px;
 				height: 39px;
-				
-				icon-decorator: image;
-				icon-image-src: ../../assets/invader.tga;
-				icon-image-t: 152px 191px;
 			}
 
 			div#score_div icon
 			{
-				icon-image-s: 434px 485px;
+				decorator: image( icon-score );
 			}
 
 			div#hiscore_div icon
 			{
-				icon-image-s: 281px 332px;
+				decorator: image( icon-hiscore );
 			}
 
 			div#waves_div icon
 			{
-				icon-image-s: 332px 383px;
+				decorator: image( icon-waves );
 			}
 
 			div#lives_div icon
 			{
-				icon-image-s: 383px 434px;
+				decorator: image( icon-lives );
 			}
 		</style>
 		<script>

Samples/luainvaders/data/help.rml

@@ -17,8 +17,7 @@
 			
 			div#title_bar div#icon
 			{
-				icon-image-s: 128px 179px;
-				icon-image-t: 152px 191px;
+				decorator: image( icon-help );
 			}
 		</style>
 	</head>

Samples/luainvaders/data/high_score.rml

@@ -13,14 +13,12 @@
 			
 			div#title_bar div#icon
 			{
-				icon-image-s: 281px 331px;
-				icon-image-t: 152px 191px;
+				decorator: image( icon-hiscore );
 			}
 			
 			datagrid
 			{
 				margin-bottom: 20px;
-				min-rows: 10;
 			}
 			
 			datagrid data_grid_body
@@ -34,8 +32,7 @@
 				width: 64px;
 				height: 16px;
 				
-				defender-decorator: defender;
-				defender-image-src: high_scores_defender.tga;
+				decorator: defender( high_scores_defender.tga );
 			}
 		</style>
 		<script>
@@ -65,7 +62,7 @@ end
 		</script>
 	</head>
 	<body template="luawindow" onload="HighScore.OnLoad(document) Game.SubmitHighScore()" onunload="Game.SetHighScoreName('Anon')">
-		<datagrid id="datagrid" source="high_scores.scores">
+		<datagrid id="datagrid" source="high_scores.scores" min-rows"10">
 			<col fields="name,name_required" formatter="name" width="40%">Pilot:</col>
 			<col fields="colour" formatter="ship" width="20%">Ship:</col>
 			<col fields="wave" width="20%">Wave:</col>

Samples/luainvaders/data/main_menu.rml

@@ -13,8 +13,7 @@
 			
 			div#title_bar div#icon
 			{
-				icon-image-s: 179px 230px;
-				icon-image-t: 152px 191px;
+				decorator: image( icon-invader );
 			}
 		</style>
 		<script>

Samples/luainvaders/data/options.rml

@@ -13,9 +13,7 @@
 
 			div#title_bar div#icon
 			{
-				icon-image-s: 230px 281px;
-				icon-image-t: 152px 191px;
-
+				decorator: image( icon-game );
 				display: none;
 			}
 

Samples/luainvaders/data/pause.rml

@@ -13,8 +13,7 @@
 			
 			div#title_bar div#icon
 			{
-				icon-image-s: 332px 383px;
-				icon-image-t: 191px 231px;
+				decorator: image( icon-flag );
 			}
 		</style>
 	</head>

Samples/luainvaders/data/start_game.rml

@@ -13,8 +13,7 @@
 			
 			div#title_bar div#icon
 			{
-				icon-image-s: 230px 281px;
-				icon-image-t: 152px 191px;
+				decorator: image( icon-game );
 			}
 			
 			form div

Samples/luainvaders/src/DecoratorInstancerDefender.cpp

@@ -32,7 +32,8 @@
 
 DecoratorInstancerDefender::DecoratorInstancerDefender()
 {
-	RegisterProperty("image-src", "").AddParser("string");
+	id_image_src = RegisterProperty("image-src", "").AddParser("string").GetId();
+	RegisterShorthand("decorator", "image-src", Rocket::Core::ShorthandType::FallThrough);
 }
 
 DecoratorInstancerDefender::~DecoratorInstancerDefender()
@@ -40,30 +41,16 @@ DecoratorInstancerDefender::~DecoratorInstancerDefender()
 }
 
 // Instances a decorator given the property tag and attributes from the RCSS file.
-Rocket::Core::Decorator* DecoratorInstancerDefender::InstanceDecorator(const Rocket::Core::String& ROCKET_UNUSED_PARAMETER(name), const Rocket::Core::PropertyDictionary& properties)
+std::shared_ptr<Rocket::Core::Decorator> DecoratorInstancerDefender::InstanceDecorator(const Rocket::Core::String& ROCKET_UNUSED_PARAMETER(name), const Rocket::Core::PropertyDictionary& properties, const Rocket::Core::DecoratorInstancerInterface& interface)
 {
 	ROCKET_UNUSED(name);
 
-	const Rocket::Core::Property* image_source_property = properties.GetProperty("image-src");
+	const Rocket::Core::Property* image_source_property = properties.GetProperty(id_image_src);
 	Rocket::Core::String image_source = image_source_property->Get< Rocket::Core::String >();
 
-	DecoratorDefender* decorator = new DecoratorDefender();
+	auto decorator = std::make_shared<DecoratorDefender>();
 	if (decorator->Initialise(image_source, image_source_property->source))
 		return decorator;
 
-	decorator->RemoveReference();
-	ReleaseDecorator(decorator);
-	return NULL;
-}
-
-// Releases the given decorator.
-void DecoratorInstancerDefender::ReleaseDecorator(Rocket::Core::Decorator* decorator)
-{
-	delete decorator;
-}
-
-// Releases the instancer.
-void DecoratorInstancerDefender::Release()
-{
-	delete this;
+	return nullptr;
 }

Samples/luainvaders/src/DecoratorInstancerDefender.h

@@ -38,19 +38,16 @@ class DecoratorInstancerDefender : public Rocket::Core::DecoratorInstancer
 {
 public:
 	DecoratorInstancerDefender();
-	virtual ~DecoratorInstancerDefender();
+	~DecoratorInstancerDefender();
 
 	/// Instances a decorator given the property tag and attributes from the RCSS file.
 	/// @param[in] name The type of decorator desired. For example, "background-decorator: simple;" is declared as type "simple".
 	/// @param[in] properties All RCSS properties associated with the decorator.
 	/// @return The decorator if it was instanced successful, NULL if an error occured.
-	Rocket::Core::Decorator* InstanceDecorator(const Rocket::Core::String& name, const Rocket::Core::PropertyDictionary& properties);
-	/// Releases the given decorator.
-	/// @param[in] decorator Decorator to release. This is guaranteed to have been constructed by this instancer.
-	void ReleaseDecorator(Rocket::Core::Decorator* decorator);
+	std::shared_ptr<Rocket::Core::Decorator> InstanceDecorator(const Rocket::Core::String& name, const Rocket::Core::PropertyDictionary& properties, const Rocket::Core::DecoratorInstancerInterface& interface) override;
 
-	/// Releases the instancer.
-	void Release();
+private:
+	Rocket::Core::PropertyId id_image_src;
 };
 
 #endif

Samples/luainvaders/src/DecoratorInstancerStarfield.cpp

@@ -27,18 +27,17 @@
 
 #include "DecoratorStarfield.h"
 #include <Rocket/Core/Math.h>
-#include <Rocket/Core/Types.h>
 #include "DecoratorInstancerStarfield.h"
 
 DecoratorInstancerStarfield::DecoratorInstancerStarfield()
 {
-	RegisterProperty("num-layers", "3").AddParser("number");
-	RegisterProperty("top-colour", "#dddc").AddParser("color");
-	RegisterProperty("bottom-colour", "#333c").AddParser("color");
-	RegisterProperty("top-speed", "10.0").AddParser("number");
-	RegisterProperty("bottom-speed", "2.0").AddParser("number");
-	RegisterProperty("top-density", "15").AddParser("number");
-	RegisterProperty("bottom-density", "10").AddParser("number");
+	id_num_layers = RegisterProperty("num-layers", "3").AddParser("number").GetId();
+	id_top_colour = RegisterProperty("top-colour", "#dddc").AddParser("color").GetId();
+	id_bottom_colour = RegisterProperty("bottom-colour", "#333c").AddParser("color").GetId();
+	id_top_speed = RegisterProperty("top-speed", "10.0").AddParser("number").GetId();
+	id_bottom_speed = RegisterProperty("bottom-speed", "2.0").AddParser("number").GetId();
+	id_top_density = RegisterProperty("top-density", "15").AddParser("number").GetId();
+	id_bottom_density = RegisterProperty("bottom-density", "10").AddParser("number").GetId();
 }
 
 DecoratorInstancerStarfield::~DecoratorInstancerStarfield()
@@ -46,35 +45,21 @@ DecoratorInstancerStarfield::~DecoratorInstancerStarfield()
 }
 
 // Instances a decorator given the property tag and attributes from the RCSS file.
-Rocket::Core::Decorator* DecoratorInstancerStarfield::InstanceDecorator(const Rocket::Core::String& ROCKET_UNUSED_PARAMETER(name), const Rocket::Core::PropertyDictionary& properties)
+std::shared_ptr<Rocket::Core::Decorator> DecoratorInstancerStarfield::InstanceDecorator(const Rocket::Core::String& ROCKET_UNUSED_PARAMETER(name), const Rocket::Core::PropertyDictionary& properties, const Rocket::Core::DecoratorInstancerInterface& interface)
 {
 	ROCKET_UNUSED(name);
 
-	int num_layers = Rocket::Core::Math::RealToInteger(properties.GetProperty("num-layers")->Get< float >());
-	Rocket::Core::Colourb top_colour = properties.GetProperty("top-colour")->Get< Rocket::Core::Colourb >();
-	Rocket::Core::Colourb bottom_colour = properties.GetProperty("bottom-colour")->Get< Rocket::Core::Colourb >();
-	float top_speed = properties.GetProperty("top-speed")->Get< float >();
-	float bottom_speed = properties.GetProperty("bottom-speed")->Get< float >();
-	int top_density = Rocket::Core::Math::RealToInteger(properties.GetProperty("top-density")->Get< float >());
-	int bottom_density = Rocket::Core::Math::RealToInteger(properties.GetProperty("bottom-density")->Get< float >());
+	int num_layers = Rocket::Core::Math::RealToInteger(properties.GetProperty(id_num_layers)->Get< float >());
+	Rocket::Core::Colourb top_colour = properties.GetProperty(id_top_colour)->Get< Rocket::Core::Colourb >();
+	Rocket::Core::Colourb bottom_colour = properties.GetProperty(id_bottom_colour)->Get< Rocket::Core::Colourb >();
+	float top_speed = properties.GetProperty(id_top_speed)->Get< float >();
+	float bottom_speed = properties.GetProperty(id_bottom_speed)->Get< float >();
+	int top_density = Rocket::Core::Math::RealToInteger(properties.GetProperty(id_top_density)->Get< float >());
+	int bottom_density = Rocket::Core::Math::RealToInteger(properties.GetProperty(id_bottom_density)->Get< float >());
 
-	DecoratorStarfield* decorator = new DecoratorStarfield();
+	auto decorator = std::make_shared<DecoratorStarfield>();
 	if (decorator->Initialise(num_layers, top_colour, bottom_colour, top_speed, bottom_speed, top_density, bottom_density))
 		return decorator;
 
-	decorator->RemoveReference();
-	ReleaseDecorator(decorator);
-	return NULL;
-}
-
-// Releases the given decorator.
-void DecoratorInstancerStarfield::ReleaseDecorator(Rocket::Core::Decorator* decorator)
-{
-	delete decorator;
-}
-
-// Releases the instancer.
-void DecoratorInstancerStarfield::Release()
-{
-	delete this;
+	return nullptr;
 }

Samples/luainvaders/src/DecoratorInstancerStarfield.h

@@ -39,19 +39,16 @@ class DecoratorInstancerStarfield : public Rocket::Core::DecoratorInstancer
 {
 public:
 	DecoratorInstancerStarfield();
-	virtual ~DecoratorInstancerStarfield();
+	~DecoratorInstancerStarfield();
 
 	/// Instances a decorator given the property tag and attributes from the RCSS file.
 	/// @param name The type of decorator desired. For example, "background-decorator: simple;" is declared as type "simple".
 	/// @param properties All RCSS properties associated with the decorator.
 	/// @return The decorator if it was instanced successful, NULL if an error occured.
-	Rocket::Core::Decorator* InstanceDecorator(const Rocket::Core::String& name, const Rocket::Core::PropertyDictionary& properties);
-	/// Releases the given decorator.
-	/// @param decorator Decorator to release. This is guaranteed to have been constructed by this instancer.
-	void ReleaseDecorator(Rocket::Core::Decorator* decorator);
+	std::shared_ptr<Rocket::Core::Decorator> InstanceDecorator(const Rocket::Core::String& name, const Rocket::Core::PropertyDictionary& properties, const Rocket::Core::DecoratorInstancerInterface& interface) override;
 
-	/// Releases the instancer.
-	void Release();
+private:
+	Rocket::Core::PropertyId id_num_layers, id_top_colour, id_bottom_colour, id_top_speed, id_bottom_speed, id_top_density, id_bottom_density;
 };
 
 #endif

Samples/luainvaders/src/main.cpp

@@ -118,13 +118,8 @@ int main(int, char**)
 	Shell::LoadFonts("../assets/");
 
 	// Register Invader's custom decorator instancers.
-	Rocket::Core::DecoratorInstancer* decorator_instancer = new DecoratorInstancerStarfield();
-	Rocket::Core::Factory::RegisterDecoratorInstancer("starfield", decorator_instancer);
-	decorator_instancer->RemoveReference();
-
-	decorator_instancer = new DecoratorInstancerDefender();
-	Rocket::Core::Factory::RegisterDecoratorInstancer("defender", decorator_instancer);
-	decorator_instancer->RemoveReference();	
+	Rocket::Core::Factory::RegisterDecoratorInstancer("starfield", std::make_unique<DecoratorInstancerStarfield>());
+	Rocket::Core::Factory::RegisterDecoratorInstancer("defender", std::make_unique<DecoratorInstancerDefender>());
 
 	// Construct the game singletons.
 	HighScores::Initialise();

Samples/tutorial/datagrid/data/tutorial.rcss

@@ -1,3 +1,44 @@
+@spritesheet theme 
+{
+	src: ../../../assets/invader.tga;
+
+	title-bar-l: 147px 0px 82px 85px;
+	title-bar-c: 229px 0px  1px 85px;
+	title-bar-r: 231px 0px 15px 85px;
+	
+	window-tl: 0px 0px 133px 140px;
+	window-t:  134px 0px 1px 140px;
+	window-tr: 136px 0px 10px 140px;
+	window-l:  0px 139px 10px 1px;
+	window-c:  11px 139px 1px 1px;
+	window-r:  10px 139px -10px 1px; /* mirrored left */
+	window-bl: 0px 140px 11px 11px;
+	window-b:  11px 140px 1px 11px;
+	window-br: 136px 140px 10px 11px;
+	
+	slidertrack-t: 70px 199px 27px 2px;
+	slidertrack-c: 70px 201px 27px 1px;
+	slidertrack-b: 70px 202px 27px 2px;
+	
+	sliderbar-t:         56px 152px 23px 23px;
+	sliderbar-c:         56px 175px 23px 1px;
+	sliderbar-b:         56px 176px 23px 22px;
+	sliderbar-hover-t:   80px 152px 23px 23px;
+	sliderbar-hover-c:   80px 175px 23px 1px;
+	sliderbar-hover-b:   80px 176px 23px 22px;
+	sliderbar-active-t: 104px 152px 23px 23px;
+	sliderbar-active-c: 104px 175px 23px 1px;
+	sliderbar-active-b: 104px 176px 23px 22px;
+	 
+	sliderarrowdec: 0px 152px 27px 24px;
+	sliderarrowdec-hover: 0px 177px 27px 24px;
+	sliderarrowdec-active: 0px 202px 27px 24px;
+	
+	sliderarrowinc: 28px 152px 27px 24px;
+	sliderarrowinc-hover: 28px 177px 27px 24px;
+	sliderarrowinc-active: 28px 202px 27px 24px;
+}
+
 body
 {
 	font-family: Delicious;
@@ -7,37 +48,22 @@ body
 	color: white;
 }
 
-@decorator window : tiled-box 
-{
-	top-left-image: ../../../assets/invader.tga 0px 0px 133px 140px;
-	top-right-image: ../../../assets/invader.tga 136px 0px 146px 140px;
-	top-image: ../../../assets/invader.tga stretch 134px 0px 135px 140px;
-	bottom-left-image: ../../../assets/invader.tga 0px 140px 11px 151px;
-	bottom-right-image: ../../../assets/invader.tga 136px 140px 146px 151px;
-	bottom-image: ../../../assets/invader.tga stretch 11px 140px 12px 151px;
-	left-image: ../../../assets/invader.tga stretch 0px 139px 10px 140px;
-	center-image: ../../../assets/invader.tga stretch 11px 139px 12px 140px;
-}
-
 body.window
 {
-	decorator: window;
 	padding: 10px 15px;
+	
+	decorator: tiled-box(
+		window-tl, window-t, window-tr, 
+		window-l, window-c, window-r,
+		window-bl, window-b, window-br
+	);
 }
-
 div#title-bar
 {
 	position: absolute;
 	top: -43px;
 }
 
-@decorator title-bar : tiled-horizontal 
-{
-	left-image: ../../../assets/invader.tga 147px 0px 229px 85px;
-	center-image: ../../../assets/invader.tga stretch 229px 0px 230px 85px;
-	right-image: ../../../assets/invader.tga 231px 0px 246px 85px;
-}
-
 div#title-bar span
 {
 	padding-left: 85px;
@@ -49,7 +75,8 @@ div#title-bar span
 	font-weight: bold;
 
 	text-shadow: 2px 2px black;
-	decorator: title-bar;
+	
+	decorator: tiled-horizontal( title-bar-l, title-bar-c, title-bar-r );
 }
 
 div#content
@@ -62,43 +89,19 @@ div#content
 
 scrollbarvertical
 {
-	width: 27px;
 	margin-top: -6px;
 	margin-bottom: -6px;
 	margin-right: -11px;
-}
-
-@decorator slidertrack : tiled-horizontal 
-{
-	top-image: ../../../assets/invader.tga 56px 199px 83px 201px;
-	center-image: ../../../assets/invader.tga stretch 56px 201px 83px 202px;
-	bottom-image: ../../../assets/invader.tga 56px 203px 83px 204px;
+	width: 27px;
 }
 
 scrollbarvertical slidertrack
 {
-	decorator: slidertrack;
-}
-
-@decorator sliderbar : tiled-horizontal 
-{
-	top-image: ../../../assets/invader.tga 56px 152px 79px 175px;
-	center-image: ../../../assets/invader.tga stretch 56px 175px 79px 175px;
-	bottom-image: ../../../assets/invader.tga 56px 176px 79px 198px;
+	decorator: tiled-vertical( slidertrack-t, slidertrack-c, slidertrack-b );
 }
-
-@decorator sliderbar-hover : sliderbar
-{
-	background-top-image-s: 80px 103px;
-	background-center-image-s: 80px 103px;
-	background-bottom-image-s: 80px 103px;
-}
-
-@decorator sliderbar-active : sliderbar
+scrollbarvertical slidertrack:active
 {
-	background-top-image-s: 104px 127px;
-	background-center-image-s: 104px 127px;
-	background-bottom-image-s: 104px 127px;
+	image-color: #aaa;
 }
 
 scrollbarvertical sliderbar
@@ -107,17 +110,17 @@ scrollbarvertical sliderbar
 	width: 23px;
 	min-height: 46px;
 
-	decorator: sliderbar;
+	decorator: tiled-vertical( sliderbar-t, sliderbar-c, sliderbar-b );
 }
 
 scrollbarvertical sliderbar:hover
 {
-	decorator: sliderbar-hover;
+	decorator: tiled-vertical( sliderbar-hover-t, sliderbar-hover-c, sliderbar-hover-b );
 }
 
 scrollbarvertical sliderbar:active
 {
-	decorator: sliderbar-active;
+	decorator: tiled-vertical( sliderbar-active-t, sliderbar-active-c, sliderbar-active-b );
 }
 
 scrollbarvertical sliderarrowdec,
@@ -129,26 +132,26 @@ scrollbarvertical sliderarrowinc
 
 scrollbarvertical sliderarrowdec
 {
-	decorator: image( ../../../assets/invader.tga 0px 152px 27px 176px );
+	decorator: image( sliderarrowdec );
 }
 scrollbarvertical sliderarrowdec:hover
 {
-	decorator: image( ../../../assets/invader.tga 0px 177px 27px 201px );
+	decorator: image( sliderarrowdec-hover );
 }
 scrollbarvertical sliderarrowdec:active
 {
-	decorator: image( ../../../assets/invader.tga 0px 202px 27px 226px );
+	decorator: image( sliderarrowdec-active );
 }
 
 scrollbarvertical sliderarrowinc
 {
-	decorator: image( ../../../assets/invader.tga 28px 152px 55px 176px );
+	decorator: image( sliderarrowinc );
 }
 scrollbarvertical sliderarrowinc:hover
 {
-	decorator: image( ../../../assets/invader.tga 28px 177px 55px 201px );
+	decorator: image( sliderarrowinc-hover );
 }
 scrollbarvertical sliderarrowinc:active
 {
-	decorator: image( ../../../assets/invader.tga 28px 202px 55px 226px );
+	decorator: image( sliderarrowinc-active );
 }

Samples/tutorial/datagrid/src/DecoratorInstancerDefender.cpp

@@ -25,20 +25,18 @@ DecoratorInstancerDefender::~DecoratorInstancerDefender()
 }
 
 // Instances a decorator given the property tag and attributes from the RCSS file.
-Rocket::Core::Decorator* DecoratorInstancerDefender::InstanceDecorator(const Rocket::Core::String& ROCKET_UNUSED_PARAMETER(name), const Rocket::Core::PropertyDictionary& properties)
+std::shared_ptr<Rocket::Core::Decorator> DecoratorInstancerDefender::InstanceDecorator(const Rocket::Core::String& ROCKET_UNUSED_PARAMETER(name), const Rocket::Core::PropertyDictionary& properties, const Rocket::Core::DecoratorInstancerInterface& interface)
 {
 	ROCKET_UNUSED(name);
 
 	const Rocket::Core::Property* image_source_property = properties.GetProperty(id_image_src);
 	Rocket::Core::String image_source = image_source_property->Get< Rocket::Core::String >();
 
-	DecoratorDefender* decorator = new DecoratorDefender();
+	auto decorator = std::make_shared<DecoratorDefender>();
 	if (decorator->Initialise(image_source, image_source_property->source))
 		return decorator;
 
-	decorator->RemoveReference();
-	ReleaseDecorator(decorator);
-	return NULL;
+	return nullptr;
 }
 
 // Releases the given decorator.

Samples/tutorial/datagrid/src/DecoratorInstancerDefender.h

@@ -26,10 +26,12 @@ public:
 	virtual ~DecoratorInstancerDefender();
 
 	/// Instances a decorator given the property tag and attributes from the RCSS file.
-	/// @param name The type of decorator desired. For example, "background-decorator: simple;" is declared as type "simple".
-	/// @param properties All RCSS properties associated with the decorator.
-	/// @return The decorator if it was instanced successful, NULL if an error occured.
-	Rocket::Core::Decorator* InstanceDecorator(const Rocket::Core::String& name, const Rocket::Core::PropertyDictionary& properties);
+	/// @param[in] name The type of decorator desired. For example, "decorator: simple(...);" is declared as type "simple".
+	/// @param[in] properties All RCSS properties associated with the decorator.
+	/// @param[in] interface An interface for querying the active style sheet.
+	/// @return A shared_ptr to the decorator if it was instanced successfully.
+	std::shared_ptr<Rocket::Core::Decorator> InstanceDecorator(const Rocket::Core::String& name, const Rocket::Core::PropertyDictionary& properties, const Rocket::Core::DecoratorInstancerInterface& interface) override;
+
 	/// Releases the given decorator.
 	/// @param decorator Decorator to release. This is guaranteed to have been constructed by this instancer.
 	void ReleaseDecorator(Rocket::Core::Decorator* decorator);

Samples/tutorial/datagrid/src/main.cpp

@@ -94,9 +94,7 @@ int main(int ROCKET_UNUSED_PARAMETER(argc), char** ROCKET_UNUSED_PARAMETER(argv)
 	Shell::LoadFonts("../../assets/");
 
 	// Load the defender decorator.
-	Rocket::Core::DecoratorInstancer* decorator_instancer = Rocket::Core::Factory::RegisterDecoratorInstancer("defender", new DecoratorInstancerDefender());
-	if (decorator_instancer != NULL)
-		decorator_instancer->RemoveReference();
+	Rocket::Core::Factory::RegisterDecoratorInstancer("defender", std::make_unique<DecoratorInstancerDefender>());
 
 	// Construct the high scores.
 	HighScores::Initialise();

Samples/tutorial/datagrid_tree/data/tutorial.rcss

@@ -1,3 +1,44 @@
+@spritesheet theme 
+{
+	src: ../../../assets/invader.tga;
+
+	title-bar-l: 147px 0px 82px 85px;
+	title-bar-c: 229px 0px  1px 85px;
+	title-bar-r: 231px 0px 15px 85px;
+	
+	window-tl: 0px 0px 133px 140px;
+	window-t:  134px 0px 1px 140px;
+	window-tr: 136px 0px 10px 140px;
+	window-l:  0px 139px 10px 1px;
+	window-c:  11px 139px 1px 1px;
+	window-r:  10px 139px -10px 1px; /* mirrored left */
+	window-bl: 0px 140px 11px 11px;
+	window-b:  11px 140px 1px 11px;
+	window-br: 136px 140px 10px 11px;
+	
+	slidertrack-t: 70px 199px 27px 2px;
+	slidertrack-c: 70px 201px 27px 1px;
+	slidertrack-b: 70px 202px 27px 2px;
+	
+	sliderbar-t:         56px 152px 23px 23px;
+	sliderbar-c:         56px 175px 23px 1px;
+	sliderbar-b:         56px 176px 23px 22px;
+	sliderbar-hover-t:   80px 152px 23px 23px;
+	sliderbar-hover-c:   80px 175px 23px 1px;
+	sliderbar-hover-b:   80px 176px 23px 22px;
+	sliderbar-active-t: 104px 152px 23px 23px;
+	sliderbar-active-c: 104px 175px 23px 1px;
+	sliderbar-active-b: 104px 176px 23px 22px;
+	 
+	sliderarrowdec: 0px 152px 27px 24px;
+	sliderarrowdec-hover: 0px 177px 27px 24px;
+	sliderarrowdec-active: 0px 202px 27px 24px;
+	
+	sliderarrowinc: 28px 152px 27px 24px;
+	sliderarrowinc-hover: 28px 177px 27px 24px;
+	sliderarrowinc-active: 28px 202px 27px 24px;
+}
+
 body
 {
 	font-family: Delicious;
@@ -7,37 +48,22 @@ body
 	color: white;
 }
 
-@decorator window : tiled-box 
-{
-	top-left-image: ../../../assets/invader.tga 0px 0px 133px 140px;
-	top-right-image: ../../../assets/invader.tga 136px 0px 146px 140px;
-	top-image: ../../../assets/invader.tga stretch 134px 0px 135px 140px;
-	bottom-left-image: ../../../assets/invader.tga 0px 140px 11px 151px;
-	bottom-right-image: ../../../assets/invader.tga 136px 140px 146px 151px;
-	bottom-image: ../../../assets/invader.tga stretch 11px 140px 12px 151px;
-	left-image: ../../../assets/invader.tga stretch 0px 139px 10px 140px;
-	center-image: ../../../assets/invader.tga stretch 11px 139px 12px 140px;
-}
-
 body.window
 {
-	decorator: window;
 	padding: 10px 15px;
+	
+	decorator: tiled-box(
+		window-tl, window-t, window-tr, 
+		window-l, window-c, window-r,
+		window-bl, window-b, window-br
+	);
 }
-
 div#title-bar
 {
 	position: absolute;
 	top: -43px;
 }
 
-@decorator title-bar : tiled-horizontal 
-{
-	left-image: ../../../assets/invader.tga 147px 0px 229px 85px;
-	center-image: ../../../assets/invader.tga stretch 229px 0px 230px 85px;
-	right-image: ../../../assets/invader.tga 231px 0px 246px 85px;
-}
-
 div#title-bar span
 {
 	padding-left: 85px;
@@ -49,7 +75,8 @@ div#title-bar span
 	font-weight: bold;
 
 	text-shadow: 2px 2px black;
-	decorator: title-bar;
+	
+	decorator: tiled-horizontal( title-bar-l, title-bar-c, title-bar-r );
 }
 
 div#content
@@ -62,43 +89,19 @@ div#content
 
 scrollbarvertical
 {
-	width: 27px;
 	margin-top: -6px;
 	margin-bottom: -6px;
 	margin-right: -11px;
-}
-
-@decorator slidertrack : tiled-horizontal 
-{
-	top-image: ../../../assets/invader.tga 56px 199px 83px 201px;
-	center-image: ../../../assets/invader.tga stretch 56px 201px 83px 202px;
-	bottom-image: ../../../assets/invader.tga 56px 203px 83px 204px;
+	width: 27px;
 }
 
 scrollbarvertical slidertrack
 {
-	decorator: slidertrack;
-}
-
-@decorator sliderbar : tiled-horizontal 
-{
-	top-image: ../../../assets/invader.tga 56px 152px 79px 175px;
-	center-image: ../../../assets/invader.tga stretch 56px 175px 79px 175px;
-	bottom-image: ../../../assets/invader.tga 56px 176px 79px 198px;
+	decorator: tiled-vertical( slidertrack-t, slidertrack-c, slidertrack-b );
 }
-
-@decorator sliderbar-hover : sliderbar
-{
-	background-top-image-s: 80px 103px;
-	background-center-image-s: 80px 103px;
-	background-bottom-image-s: 80px 103px;
-}
-
-@decorator sliderbar-active : sliderbar
+scrollbarvertical slidertrack:active
 {
-	background-top-image-s: 104px 127px;
-	background-center-image-s: 104px 127px;
-	background-bottom-image-s: 104px 127px;
+	image-color: #aaa;
 }
 
 scrollbarvertical sliderbar
@@ -107,17 +110,17 @@ scrollbarvertical sliderbar
 	width: 23px;
 	min-height: 46px;
 
-	decorator: sliderbar;
+	decorator: tiled-vertical( sliderbar-t, sliderbar-c, sliderbar-b );
 }
 
 scrollbarvertical sliderbar:hover
 {
-	decorator: sliderbar-hover;
+	decorator: tiled-vertical( sliderbar-hover-t, sliderbar-hover-c, sliderbar-hover-b );
 }
 
 scrollbarvertical sliderbar:active
 {
-	decorator: sliderbar-active;
+	decorator: tiled-vertical( sliderbar-active-t, sliderbar-active-c, sliderbar-active-b );
 }
 
 scrollbarvertical sliderarrowdec,
@@ -129,26 +132,26 @@ scrollbarvertical sliderarrowinc
 
 scrollbarvertical sliderarrowdec
 {
-	decorator: image( ../../../assets/invader.tga 0px 152px 27px 176px );
+	decorator: image( sliderarrowdec );
 }
 scrollbarvertical sliderarrowdec:hover
 {
-	decorator: image( ../../../assets/invader.tga 0px 177px 27px 201px );
+	decorator: image( sliderarrowdec-hover );
 }
 scrollbarvertical sliderarrowdec:active
 {
-	decorator: image( ../../../assets/invader.tga 0px 202px 27px 226px );
+	decorator: image( sliderarrowdec-active );
 }
 
 scrollbarvertical sliderarrowinc
 {
-	decorator: image( ../../../assets/invader.tga 28px 152px 55px 176px );
+	decorator: image( sliderarrowinc );
 }
 scrollbarvertical sliderarrowinc:hover
 {
-	decorator: image( ../../../assets/invader.tga 28px 177px 55px 201px );
+	decorator: image( sliderarrowinc-hover );
 }
 scrollbarvertical sliderarrowinc:active
 {
-	decorator: image( ../../../assets/invader.tga 28px 202px 55px 226px );
+	decorator: image( sliderarrowinc-active );
 }

Samples/tutorial/datagrid_tree/data/tutorial.rml

@@ -3,6 +3,31 @@
 	<link type="text/template" href="template.rml"/>
 	<title>Datagrid Tutorial</title>
 	<style>
+		@spritesheet datagrid-theme
+		{
+			src: ../../../assets/invader.tga;
+			
+			datagridbody-tl: 281px 275px 11px 9px;
+			datagridbody-t:  292px 275px 1px 9px;
+			datagridbody-tr: 294px 275px 11px 9px;
+			datagridbody-l:  281px 283px 11px 1px;
+			datagridbody-c:  292px 283px 1px 1px;
+			datagridbody-bl: 281px 285px 11px 11px;
+			datagridbody-b:  292px 285px 1px 11px;
+			datagridbody-br: 294px 285px 11px 11px;
+			
+			datagridheader-l: 127px 192px 16px 31px;
+			datagridheader-c: 143px 192px 2px 31px;
+			datagridheader-r: 145px 192px 15px 31px;
+			
+			datagridexpand: 3px 232px 17px 17px;
+			datagridexpand-hover: 21px 232px 17px 17px;
+			datagridexpand-active: 39px 232px 17px 17px;
+			datagridexpand-collapsed: 3px 250px 17px 17px;
+			datagridexpand-collapsed-hover: 21px 250px 17px 17px;
+			datagridexpand-collapsed-active: 39px 250px 17px 17px;
+		}
+	
 		body
 		{
 			width: 400px;
@@ -35,32 +60,13 @@
 			decorator: defender( ../../../assets/high_scores_alien_3.tga );
 		}
 		
-		@decorator datagridheader : tiled-horizontal 
-		{
-			left-image: ../../../assets/invader.tga 127px 192px 143px 223px;
-			center-image: ../../../assets/invader.tga stretch 143px 192px 145px 223px;
-			right-image: ../../../assets/invader.tga 145px 192px 160px 223px;
-		}
-		
 		datagridheader
 		{
 			width: auto;
 			height: 25px;
 			padding: 5px 10px 0px 10px;
 		
-			decorator: datagridheader;
-		}
-		
-		@decorator datagridbody : tiled-box 
-		{
-			top-left-image: ../../../assets/invader.tga 281px 275px 292px 284px;
-			top-right-image: ../../../assets/invader.tga 294px 275px 305px 284px;
-			top-image: ../../../assets/invader.tga stretch 292px 275px 293px 284px;
-			bottom-left-image: ../../../assets/invader.tga 281px 285px 292px 296px;
-			bottom-right-image: ../../../assets/invader.tga 294px 285px 305px 296px;
-			bottom-image: ../../../assets/invader.tga stretch 292px 285px 293px 296px;
-			left-image: ../../../assets/invader.tga stretch 281px 283px 292px 284px;
-			center-image: ../../../assets/invader.tga stretch 292px 283px 293px 284px;
+			decorator: tiled-horizontal( datagridheader-l, datagridheader-c, datagridheader-r );
 		}
 		
 		datagridbody
@@ -72,7 +78,11 @@
 			margin-right: 3px;
 			padding: 0px 4px 4px 4px;
 			
-			decorator: datagridbody;
+			decorator: tiled-box(
+				datagridbody-tl, datagridbody-t, datagridbody-tr, 
+				datagridbody-l, datagridbody-c, auto,  /* auto mirrors left */
+				datagridbody-bl, datagridbody-b, datagridbody-br
+			);
 		}
 		
 		datagrid datagridrow:nth-child(even)
@@ -80,25 +90,6 @@
 			background: #FFFFFFA0;
 		}
 		
-		@decorator expand : image {
-			image: ../../../assets/invader.tga 3px 232px 20px 249px;
-		}
-		@decorator expand-hover : expand {
-			icon-image-s: 21px 38px;
-		}
-		@decorator expand-active : expand {
-			icon-image-s: 39px 56px;
-		}
-		@decorator collapse : expand {
-			icon-image-t: 39px 56px;
-		}
-		@decorator collapse-hover : expand-hover {
-			icon-image-t: 39px 56px;
-		}
-		@decorator collapse-active : expand-active {
-			icon-image-t: 39px 56px;
-		}
-		
 		datagridexpand
 		{
 			display: block;
@@ -107,32 +98,32 @@
 			height: 17px;
 			width: 17px;
 			
-			decorator: expand;
+			decorator: image( datagridexpand );
 		}
-		
+
 		datagridexpand:hover
 		{
-			decorator: expand-hover;
+			decorator: image( datagridexpand-hover );
 		}
-		
+
 		datagridexpand:active
 		{
-			decorator: expand-active;
+			decorator: image( datagridexpand-active  );
 		}
-		
+
 		datagridexpand.collapsed
 		{
-			decorator: collapse;
+			decorator: image( datagridexpand-collapsed );
 		}
-		
+
 		datagridexpand.collapsed:hover
 		{
-			decorator: collapse-hover;
+			decorator: image( datagridexpand-collapsed-hover );
 		}
-		
+
 		datagridexpand.collapsed:active
 		{
-			decorator: collapse-active;
+			decorator: image( datagridexpand-collapsed-active  );
 		}
 	</style>
 </head>

Samples/tutorial/datagrid_tree/src/DecoratorInstancerDefender.cpp

@@ -25,20 +25,18 @@ DecoratorInstancerDefender::~DecoratorInstancerDefender()
 }
 
 // Instances a decorator given the property tag and attributes from the RCSS file.
-Rocket::Core::Decorator* DecoratorInstancerDefender::InstanceDecorator(const Rocket::Core::String& ROCKET_UNUSED_PARAMETER(name), const Rocket::Core::PropertyDictionary& properties)
+std::shared_ptr<Rocket::Core::Decorator> DecoratorInstancerDefender::InstanceDecorator(const Rocket::Core::String& ROCKET_UNUSED_PARAMETER(name), const Rocket::Core::PropertyDictionary& properties, const Rocket::Core::DecoratorInstancerInterface& interface)
 {
 	ROCKET_UNUSED(name);
 
 	const Rocket::Core::Property* image_source_property = properties.GetProperty(id_image_src);
 	Rocket::Core::String image_source = image_source_property->Get< Rocket::Core::String >();
 
-	DecoratorDefender* decorator = new DecoratorDefender();
+	auto decorator = std::make_shared<DecoratorDefender>();
 	if (decorator->Initialise(image_source, image_source_property->source))
 		return decorator;
 
-	decorator->RemoveReference();
-	ReleaseDecorator(decorator);
-	return NULL;
+	return nullptr;
 }
 
 // Releases the given decorator.

Samples/tutorial/datagrid_tree/src/DecoratorInstancerDefender.h

@@ -26,10 +26,12 @@ public:
 	virtual ~DecoratorInstancerDefender();
 
 	/// Instances a decorator given the property tag and attributes from the RCSS file.
-	/// @param name The type of decorator desired. For example, "background-decorator: simple;" is declared as type "simple".
-	/// @param properties All RCSS properties associated with the decorator.
-	/// @return The decorator if it was instanced successful, NULL if an error occured.
-	Rocket::Core::Decorator* InstanceDecorator(const Rocket::Core::String& name, const Rocket::Core::PropertyDictionary& properties);
+	/// @param[in] name The type of decorator desired. For example, "decorator: simple(...);" is declared as type "simple".
+	/// @param[in] properties All RCSS properties associated with the decorator.
+	/// @param[in] interface An interface for querying the active style sheet.
+	/// @return A shared_ptr to the decorator if it was instanced successfully.
+	std::shared_ptr<Rocket::Core::Decorator> InstanceDecorator(const Rocket::Core::String& name, const Rocket::Core::PropertyDictionary& properties, const Rocket::Core::DecoratorInstancerInterface& interface) override;
+
 	/// Releases the given decorator.
 	/// @param decorator Decorator to release. This is guaranteed to have been constructed by this instancer.
 	void ReleaseDecorator(Rocket::Core::Decorator* decorator);

Samples/tutorial/datagrid_tree/src/main.cpp

@@ -98,9 +98,7 @@ int main(int ROCKET_UNUSED_PARAMETER(argc), char** ROCKET_UNUSED_PARAMETER(argv)
 	Shell::LoadFonts("../../assets/");
 
 	// Load the defender decorator.
-	Rocket::Core::DecoratorInstancer* decorator_instancer = Rocket::Core::Factory::RegisterDecoratorInstancer("defender", new DecoratorInstancerDefender());
-	if (decorator_instancer != NULL)
-		decorator_instancer->RemoveReference();
+	Rocket::Core::Factory::RegisterDecoratorInstancer("defender", std::make_unique<DecoratorInstancerDefender>());
 
 	// Add the ship formatter.
 	HighScoresShipFormatter ship_formatter;

Samples/tutorial/template/data/tutorial.rcss

@@ -1,3 +1,18 @@
+@spritesheet theme 
+{
+	src: ../../../assets/invader.tga;
+
+	window-tl: 0px 0px 133px 140px;
+	window-t:  134px 0px 1px 140px;
+	window-tr: 136px 0px 10px 140px;
+	window-l:  0px 139px 10px 1px;
+	window-c:  11px 139px 1px 1px;
+	window-r:  10px 139px -10px 1px; /* mirrored left */
+	window-bl: 0px 140px 11px 11px;
+	window-b:  11px 140px 1px 11px;
+	window-br: 136px 140px 10px 11px;
+}
+
 body
 {
 	font-family: Delicious;
@@ -7,21 +22,13 @@ body
 	color: white;
 }
 
-@decorator window : tiled-box 
-{
-	top-left-image: ../../../assets/invader.tga 0px 0px 133px 140px;
-	top-right-image: ../../../assets/invader.tga 136px 0px 146px 140px;
-	top-image: ../../../assets/invader.tga stretch 134px 0px 135px 140px;
-	bottom-left-image: ../../../assets/invader.tga 0px 140px 11px 151px;
-	bottom-right-image: ../../../assets/invader.tga 136px 140px 146px 151px;
-	bottom-image: ../../../assets/invader.tga stretch 11px 140px 12px 151px;
-	left-image: ../../../assets/invader.tga stretch 0px 139px 10px 140px;
-	center-image: ../../../assets/invader.tga stretch 11px 139px 12px 140px;
-}
-
 body.window
 {
-	decorator: window;
+	decorator: tiled-box(
+		window-tl, window-t, window-tr, 
+		window-l, window-c, window-r,
+		window-bl, window-b, window-br
+	);
 }
 
 div

Source/Core/Lua/ElementStyleProxy.cpp

@@ -118,7 +118,7 @@ int ElementStyleProxy__pairs(lua_State* L)
 
     if(it != it_end)
     {
-		const String& key = (*it).first;
+		const String& key = Rocket::Core::StyleSheetSpecification::GetPropertyName((*it).first);
 		const Property& property = (*it).second;
 		String val;
         property.definition->GetValue(val, (*it).second);