As part of our series on how we built Queued, today we’re going to talk about theming the Queued application, and touch on a few examples of what made putting the skin on Queued so much fun.

The foundation for the beautiful theme for Queued was laid down by colleagues Damon Dimmick and Torrey Rice, and their amazing wireframe and mockup work (respectively) provided the building blocks for laying down Queued’s skin.

Powered by WebKit

One of the advantages to building an Adobe AIR application that we can’t talk enough about is that you only have to develop for one layout engine. Since Adobe uses WebKit to power the AIR runtime, we as developers get to take advantage of all of the mature, feature-rich goodness that comprises WebKit, including some of the things in the WebKit Supported CSS Properties. Additionally, Adobe has a document that describes the extensions to CSS that AIR uses, which my colleague Sam Foster will talk about in greater detail in an upcoming article. In our development process, we found that AIR—while not being able to take advantage of all of the WebKit supported CSS properties—still provided us a good chunk of styling advantages that we were able to implement to make the theming job quicker and easier.

Keeping it Local

One of the things we were able to do with Queued is to take away some of the application’s workload in regards to box art image files. Rather than saturate the wire with this data, we use a local store to house your box art images (along with other data such as preferences, etc.) to help keep Queued’s online presence nimble.

localstore.png

PNG Transparency

Building applications for use with Adobe AIR’s WebKit engine also means that we don’t have to worry about IE 6’s PNG alpha transparency issues. Not having to deal with this thorn in the side allowed us to use drop shadows to our heart’s content, and allowed the movie information pop-up to easily achieve the look we were after in our mockups.

movieinfo.png

CSS 3, How We Love Thee

Every developer on the Queued project remarked how nice it was to have to support only one layout engine; theming Queued has certainly left us spoiled in this regard. When styling Queued, we were also able to take advantage of some of the CSS 3 selectors and properties that are supported by WebKit. One of the things we wanted to do was prevent the user from being able to highlight areas of the application that they really didn’t need to. By using -webkit-user-select, we were able to tailor the user-selectable content to our needs.

textselect.png

html, body, #layoutNode {
	width:100%;
	height:100%;
	overflow:hidden;
	-webkit-user-select:none;
}

#movieInfoDialogNode .info {
	position:absolute;
	top:46px;
	right:8px;
	width:560px;
	height:412px;
	padding-right:40px;
	overflow-y:auto;
	-webkit-user-select:text;
}

#searchResultsList .movie .info {
	display:block;
	position:absolute;
	left:150px;
	right:8px;
	padding-top:7px;
	-webkit-user-select:text;
}

We also took advantage of WebKit’s border-radius support, using it in areas like the search input background.

searchbar.png

#searchBar input {
	width:238px;
	padding:5px 8px;
	outline:none;
	-webkit-border-radius:12px;
	border:1px solid #C60000;
	color: #AFAFAF;
	background:url("../img/searchBg.png") repeat-x left top;
}

To prevent movie titles with really long names from breaking our layout, we used text-overflow. We also used text-overflow in other areas of the application, such as login input.

searchtruncate.png

#searchAutoSuggestList li {
	color:#bf0000;
	margin:0 6px;
	padding:0 3px;
	width:196px;
	white-space: nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	-webkit-text-overflow:ellipsis;
}

Another great example of a CSS 3 property that we were able to use is support for multiple backgrounds. We wanted to style the selected nav element of the application with a “glowing” type of effect coming out from the left and right sides of the element. Rather than having to use multiple divs to get this done, we were able to use multiple backgrounds to produce the effect. The following three images show the selected element with no background image, one background image (positioned top right), and two background images (one positioned top right, the other top left), ultimately providing the glowing effect we had on our mockups.

multiplebg.png

#topMoviesSubNav ul li.selected,
#queSubNav ul li.selected,
#authSubNav ul li.selected,
#prefsSubNav ul li.selected {
	background:url("../img/subMenuActiveBorder.png") repeat-y top right, 
        url("../img/subMenuActiveBorder.png") repeat-y top left;
	position:relative;
}

Conclusion

Theming Queued was a tremendous amount of work, but by taking advantage of local storage, having only one layout engine to work with, and harnessing some of the CSS 3 goodies supported by AIR’s version of WebKit, that workload was decreased. This allowed us to get the job done quicker, and we had a lot of fun along the way.