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;
			}
		}
	}
}

Flex 4 List remembering verticalScrollPosition

June 18, 2010 22 comments

A simple requirement, but ~6 hours of frustration.

All I wanted to do was to remember the scroll position that the user was at after an update of the dataprovider items on a list occurred. I had a solution in flex 3 for the (Advanced)DataGrid control that listened for a scroll event and remembered the last known scroll position that would then be set in commit properties after the dataProvider for the grid dispatched a COLLECTION_CHANGE event.

Naturally, I started with that same solution on the Flex 4 list. It was a little trickier, discovering that no event was fired from the list when a scroll event occurred. It turns out that in the skin class, you have to listen to the vertical scroll bar on the scroller object, but this of course is entirely dependent on where your scroller or viewport container that handles scrolling lives, regardless of skinclass.

Read more…

Object/Dictionary Reference counting and Memory Management

March 7, 2010 Leave a comment

Since it is such an important topic and such a problem for the community, I thought I would make another post pertaining to optimizing for the garbage collector.

I was looking for information in the object/dictionary docs completely unrelated to memory management, but ran across this statement:

As long as any reference to the object exists, the garbage collection system will not recover the memory that the object occupies. If the value of myObject is changed such that it points to a different object or is set to the value null, the memory occupied by the original object becomes eligible for garbage collection, but only if there are no other references to the original object.

Wow.

Yes, you do need to explicitly set all non-simple types to null and splice/delete array indices and hash key entries.

Read more…

Using Spark skins to style Halo components

February 9, 2010 3 comments

Most of the halo components in the flex framework have a skin style. Sometimes it is labeled skin, others with border-skin, and if no general one skin style for the component exists, there are typically skin styles for individual pieces.

Lets use the halo vertical scroll bar as an example (svn) (zip) (swf):
Read more…