HP webOS Developer Blog

With the upcoming release of the Pre 3 and TouchPad, we will have two new webOS devices that offer different screen sizes and resolutions than we’ve had before. While these devices will be able to scale & display current apps correctly, developers who want to take advantage of the additional screen real estate will still need to update their apps accordingly. For orientation-independent devices like the TouchPad, it’s becoming especially important to ensure applications also scale & display correctly based on device orientation. One way to obtain this result is by using the CSS3 flexible box layout model.

The flexible box layout allows us to specify the size of an element, in relation to its parent and siblings. Using this method would enable us to create an application design that bases its size on the viewable screen area, rather than the application content. This allows for a dynamic application layout – regardless of screen size, resolution, or orientation. A benefit of this is that it is all contained in our CSS, meaning we don’t have to bother with the overhead of adding javascript event listeners to perform actions when size or orientation changes take place.

To demonstrate, let’s create a simple 3-column layout with the following properties:
- Column A will be a fixed width of 40px
- Column B & C will span equally to fit the rest of the viewable area

Create a scene with the following markup:

Scene View

<div class="content">
	<div class="fixed colorLight">A</div>
	<div class="flexed colorMedium">B</div>
	<div class="flexed colorDark">C</div>
</div>

Now let’s add the CSS that will give us the results we want:

CSS

body, html {
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
}

.content {
	display: -webkit-box;
	-webkit-box-orient: horizontal;
}

.fixed {
	width: 40px;
}

.flexed {
	margin: 0px;
	padding: 0px;
	-webkit-box-flex: 1;
}

.colorLight { background-color: #A6687B; }
.colorMedium { background-color: #8C605F; }
.colorDark { background-color: #735E5A; }

This gives us a horizontally-flexible layout. We should take notice of the following lines in particular:

display: -webkit-box;
This is our new display type. This specifies that all children within this element will have the ability to be flexed.

-webkit-box-orient: horizontal;
The direction this box will allow its children to span (options: horizontal, vertical).

-webkit-box-flex: 1;
This is the size of our flex box. If we chose to give column B a flex value of “1″ and column C a flex value of “2″, then column C would span to be twice the width of column B.

Now that we have an understanding of how flex boxes work, let’s modify our code to include a header, footer, and content area that also spans vertically.

Scene View

<div class="container">
	<div class="header">Header</div>
	<div class="content">
		<div class="fixed colorLight">A</div>
		<div class="flexed colorMedium">B</div>
		<div class="flexed colorDark">C</div>
	</div>
	<div class="footer">Footer</div>
</div>

CSS

body, html {
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
}

.container {
	position: fixed;
	height: 100%;
	width: 100%;
	display: -webkit-box;
	-webkit-box-orient: vertical;
}

.header, .footer {
	background-color: #32403C;
	height: 40px;
	width: 100%;
	margin: 0;
	line-height: 40px;
	vertical-align: middle;
	text-align: center;
	color: #FFF;
}

.content {
	display: -webkit-box;
	-webkit-box-orient: horizontal;
	-webkit-box-flex: 1;
}

.fixed {
	width: 40px;
}

.flexed {
	margin: 0px;
	padding: 0px;
	-webkit-box-flex: 1;
}

.colorLight { background-color: #A6687B; }
.colorMedium { background-color: #8C605F; }
.colorDark { background-color: #735E5A; }

Lastly, let’s add some code to our scene’s setup method that allows our application to be freely oriented.

Assistant

MyAssistant.prototype.setup = function() {
	this.controller.stageController.setWindowOrientation("free");
}

We now have a flexible layout that accommodates any size device or orientation.