Home > Flex 4 Examples, Flex Gotchas > Flex 4 <s:Rect/> height limit of 10,000?

Flex 4 <s:Rect/> height limit of 10,000?

In my post about vertical scroll speed I show a code example of a scroller with several nested groups. A typical design of websites these days is to have a content area in the middle with an ever-expanding height and some sort of repeating background or colors on the sides – Just look at the layout of the majority of blogs, including my own.

Writing a flex app with the same design where you can scroll a lot of content vertically with a solid background color is a pretty typical use-case, but you will quickly find a limitation with using the primitive class Rect as a background: maxHeight = 10,000.

I’ve slightly modified my example from the vertical scroll speed post to demonstrate the layout I’m talking about:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   width="100%" height="100%">
	
	<s:Scroller left="0" right="0" top="0" bottom="0">
		<s:Group left="0" right="0" top="0" bottom="0" horizontalCenter="0">
			<s:Group id="grp" left="300" right="300" top="0" bottom="0" horizontalCenter="0">
				<s:Rect left="0" right="0" top="0" bottom="0" id="rect">
					<s:fill>
						<s:SolidColor color="0xFF00FF" alpha=".4"/>
					</s:fill>
				</s:Rect>
				<s:VGroup left="0" right="0" top="0" bottom="0" horizontalAlign="center" paddingBottom="100" paddingLeft="100" paddingRight="100" paddingTop="100">
					<s:Label text="I need to be scrolled, man!" height="50"/>
					<s:Label text="I need to be scrolled, man!" height="50"/>
					<s:Label text="I need to be scrolled, man!" height="50"/>
					<!-- ... More ... A lot more ... -->
				</s:VGroup>
			</s:Group>
		</s:Group>
	</s:Scroller>
	<s:Label text="Pixel area: {rect.width * rect.height}"/>
</s:Application>

Run that application with more labels until the Rect is truncated. In case you were wondering, UIComponent sets maxHeight for you to 10,000 by default.

An easy fix is highlighted below:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   width="100%" height="100%">
	
	<s:Scroller left="0" right="0" top="0" bottom="0">
		<s:Group left="0" right="0" top="0" bottom="0" horizontalCenter="0">
			<s:Group id="grp" left="300" right="300" top="0" bottom="0" horizontalCenter="0">
				<s:Rect left="0" right="0" top="0" bottom="0" id="rect" maxHeight={Infinity}>
					<s:fill>
						<s:SolidColor color="0xFF00FF" alpha=".4"/>
					</s:fill>
				</s:Rect>
				<s:VGroup left="0" right="0" top="0" bottom="0" horizontalAlign="center" paddingBottom="100" paddingLeft="100" paddingRight="100" paddingTop="100">
					<s:Label text="I need to be scrolled, man!" height="50"/>
					<s:Label text="I need to be scrolled, man!" height="50"/>
					<s:Label text="I need to be scrolled, man!" height="50"/>
					<!-- .... More ... A lot more ... -->
				</s:VGroup>
			</s:Group>
		</s:Group>
	</s:Scroller>
	<s:Label text="Pixel area: {rect.width * rect.height}"/>
</s:Application>
Advertisements
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: