Archive

Archive for the ‘Flex 4 Examples’ Category

DropDownController PopupAnchor

November 8, 2011 Leave a comment

Lets pretend you have a popup that you want to show when a button is clicked, as in the following example:

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication 
	xmlns:fx="http://ns.adobe.com/mxml/2009"
	xmlns:mx="library://ns.adobe.com/flex/mx"
	xmlns:s="library://ns.adobe.com/flex/spark">
	
	<s:Button 
		label="Some Button that pops something up"
		horizontalCenter="0"
		verticalCenter="0"
		click="popup.displayPopUp = true;"/>

	<s:PopUpAnchor 
		id="popup"
		right="0"
		bottom="0">
		<s:Group>
			<s:Rect 
				width="50"
				height="50">
				<s:fill>
					<s:SolidColor color="0xFF00FF"/>
				</s:fill>
			</s:Rect>
		</s:Group>
	</s:PopUpAnchor>

</s:WindowedApplication>

How do you easily manage when the popup is closed in this case?
Read more…

Garbage Collection Strategy Reiterated

November 7, 2011 1 comment

A new article was recently published on adobe’s devnet providing another recap of how memory is managed by Flash. I wanted to reiterate the importance of diligently clearing the stack memory of references to the heap memory in order to minimize the work of the collector in the Mark and Sweep phase.

You, as the developer, can optimize your code by helping the Mark and Sweep phases of garbage collection occur less often. By keeping your stack references cleared of objects on the heap, the zero count table algorithm can clean up the memory before mark and sweep has to occur.

ButtonBar radio logic hack

September 30, 2011 Leave a comment

Update: Set the requireSelection property to true.

When the button bar is used as a navigation tool for a set of tabs, it doesn’t make sense for the selected button to be unselected if the user clicks on it.

It is also fairly typical for a result handler of the IndexChangeEvent.CHANGED to utilize the button bar’s selectedItem property to access a piece of data. This causes runtime errors when the selected item is no longer selected because of a re-click on the selected button.

Read more…

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.

Read more…

Simple TLF Text Editor

I found a great TLF editor that is simple and to the point, it is under the MIT license, and is of course open source.

I don’t remember the combination of search terms to find it, but I’ve looked for something like this before and was unable to find it despite it being written in Q3 last year. The other examples that I’ve seen are way too heavy or are just plain bad.

Flex 4 Vertical Scroll Speed

May 18, 2011 9 comments

By default, scrolling content when using the Scroller component occurs very slowly – Even down to 1px per event.

Try running the following example:

<?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" minWidth="955" minHeight="600">
	<s:Scroller width="100%" height="100%">
		<s:Group width="100%" height="100%">
			<s:Group width="100%" height="100%">
				<s:VGroup width="100%" height="100%" horizontalAlign="center">
					<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"/>
					<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"/>
					<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"/>
					<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"/>
					<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"/>
					<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"/>
					<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"/>
					<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"/>
					<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"/>
					<s:Label text="I need to be scrolled, man!" height="50"/>
					<s:Label text="I need to be scrolled, man!" height="50"/>
				</s:VGroup>
				<s:layout>
					<s:VerticalLayout paddingBottom="100" paddingLeft="100" paddingRight="100" paddingTop="100"/>
				</s:layout>
			</s:Group>
		</s:Group>
	</s:Scroller>
</s:Application>

In order to bring scrollable content using a Scroller up to normal web standards (say 50px or 100px per event) with a setup like the above, you have to override the VScrollbar and assign a custom skin to the scroller that uses the override.

Read more…

Categories: Flex 4 Examples

DropdownList labelDisplay tooltip

February 22, 2011 1 comment

If you would like to have the DropdownList display a tooltip for the selected item on the labelDisplay component, you have to override the spark DropDownList and set the tooltip on the DropDownList itself rather than the label display.

package
{
	import mx.core.mx_internal;
	
	import spark.components.DropDownList;
	
	use namespace mx_internal;
	
	public class DropDownList extends spark.components.DropDownList
	{
		public function DropDownList()
		{
			super();
		}
		
		override mx_internal function updateLabelDisplay(displayItem:*=null):void
		{
			super.updateLabelDisplay(displayItem);
			
			if ( labelDisplay != null )
			{
				toolTip = labelDisplay.text;
			}
		}
	}
}