Resolution Based Theming

Applications can easily take the display resolution into account when creating their theme. UI code should not have any concept of model type or name. Resolution dimensions should suffice.

Landscape vs Portrait

Throughout your code you can check the display type by calling Fields.isLandscape(). Portrait devices will include the Pearl types and upright Storm. All others should fall under landscape. This function simply compares the width against the height.

Using the theme.xml

Style attributes and images can be retrieved differently depending on the display resolution. By adding the screen parameter to the style element, you can specify different resolution restrictions. An asterisk character can be used as a wild card.

Acceptable values are: #x#, *x#, #x*, *x*

In the following example resolution restrictions are used for both style attributes and images.

<class name="ArtGallery">
	<style>
		<attribute name="canvas-size">150</attribute>
		<attribute name="canvas-size" screen="240x*">125</attribute>
		<attribute name="canvas-size" screen="480x*">175</attribute>
	</style>
	<images>
		<image name="side-banner">side-banner.png</image>
		<image name="side-banner" screen="*x240">side-banner-240.png</image>
		<image name="side-banner" screen="*x260">side-banner-260.png</image>
		<image name="side-banner" screen="*x320">side-banner-320.png</image>
		<image name="side-banner" screen="*x360">side-banner-360.png</image>
	</images>
</class>

You can retrieve the values as normal by calling one of the StyleManager.getValue(String) functions. Images are retrieved using StyleManager.getImagePath(String). For speed sake, it is best to cache these values from the applyComputedStyle() method.