Things are getting pretty exciting here at MLB.com as we are nearing the end of development of the new MLB.TV Media Player. It is 4:30 in the morning and all the devs are here in the MLB offices in Chelsea to launch the PUBLIC BETA for the first game of the World Baseball Classic.

That's it folks! The player is officially in the wild! You can check out the launch page here. If you're up at this crazy hour like we are, the link to the opening Japan vs. China game is at the bottom.

I'm not posting how to do it for list, as that's not what i was working on - but it should be fairly straight forward and should use very similar (if not the same code).

 
override public function scrollToIndex(index:int):Boolean{
//super.scrollToIndex(index);
var newVPos:int;
var newHPos:int;
 
var firstIndex:int = scrollPositionToIndex(horizontalScrollPosition, verticalScrollPosition);
var numItemsVisible:int = ((listItems.length - offscreenExtraRowsTop - offscreenExtraRowsBottom) *
(listItems[0].length - offscreenExtraColumnsLeft - offscreenExtraColumnsRight));
if (index >= firstIndex + numItemsVisible || index < firstIndex)
{
newVPos = Math.min(indexToRow(index), maxVerticalScrollPosition);
newHPos = Math.min(indexToColumn(index), maxHorizontalScrollPosition);
 
try
{
iterator.seek(CursorBookmark.FIRST, scrollPositionToIndex(horizontalScrollPosition, verticalScrollPosition));
//super.horizontalScrollPosition = newHPos;
//super.verticalScrollPosition = newVPos;
 
var p:Parallel = new Parallel(this);
var ap:AnimateProperty = new AnimateProperty(this);
var ap2:AnimateProperty = new AnimateProperty(this);
ap.property = 'verticalScrollPosition';
ap2.property = 'horizontalScrollPosition';
 
ap.toValue = newVPos;
ap2.toValue = newHPos;
 
p.addChild(ap);
p.addChild(ap2);
 
p.play();
 
}
catch(e:ItemPendingError)
{
}
return true;
}
return false;
}
 

NEW VERSION OF COMPONENT RELEASED HERE

This is a project that I released a while ago when i was keeping the blog at blog.3r1c.net. I've since expanded and want to release it again, as I know people used it, and they may have lost the source.
This component allows you to flow child containers logically in a vertical or horizontal manner. Try to click the buttons inside the container, and watch how they animate to a larger size, and the rest of the items flow gracefully. In the following demo you can also adjust the vertical scroll position, horizontal scroll position, width and height of the container on the fly, and watch all of the children dynamically update.

Here is the source
and
Here is the demo

Feel free to use this in any project you want, but if you do gimme a link in here cuz I'd love to see it in the wild!

Thanks again and feel free to leave comments

Eric

Please tell me if there is a better way to do this, as this is both a bit convolluted, complicated, and subject to change at any time. It also requires you to use two excluded classes, and an mx_internal variable. That being said, this is how I approached it.

        import mx.core.mx_internal;
	import mx.managers.PopUpManagerImpl;
	import mx.core.Singleton

	use namespace mx_internal;

       PopUpManagerImpl(Singleton.getInstance("mx.managers::IPopUpManager")).mx_internal::modalWindowClass = SomeClass;

Please note that you have to import and use mx_internal. You also have to import PopUpManagerImpl, as this is where the variable is defined. And you must also import Singleton, which is how the flex framework accesses singleton implementations within the framework. Once you've done this, you can access the 'modalWindowClass' mx_internal property on PopUpManagerImpl, and set it to your own modal class. When this is done, anytime you add a pop up, the modal blocker will use this class.

Any questions, or SUGGESTIONS on how to do this better, please comment below

When you're within an item renderer where you want to know more about it's parent list, or underlying collection, IDropInListItemRenderer can be invaluable to you.  Once implemented, a BaseListData object is automatically passed into any item renderer that implements it.   From BaseListData a lot of things are available.  The following code shows a lot of things you can access from it.  For a more in depth description, check out the language reference BaseListData.

public function set listData(value:BaseListData):void
		{
 
			if(!value)return;
 
			var lb:ListBase = (_value.owner as ListBase);
			var collection:ListCollectionView = (lb.dataProvider as ListCollectionView)
			var total:Number = collection.length;
			var index:Number = lb.itemRendererToIndex(this as IListItemRenderer);
		}

If you have any comments or questions leave them below

A metatag that is rarely talked about in the Flex world is the [Mixin] tag.  This tags primary use is to create static code blocks to initialize parts of your application.  It is run when the SystemManager first becomes available.  So about as early in the the application startup process as you can get.  Access to the SystemManager at early stages of application startup can be invaluable.  Luckily, it is really easy to write a mixin. And is done in the following manner.

[Mixin]
public class MyMixinExample{

                 /**
		 * called due to the fact that i've used the [Mixin] metatag
		 * @param systemManager
		 *
		 */
		public static function init (systemManager:ISystemManager):void{
			//do stuff
		}

When the application starts up, if you have a [Mixin] tag at the beginning of the class, it looks for a static 'init' function, and passes the SystemManager as an argument to the function.  Very simple, infinitely useful.

If you have any questions or comments feel free to leave them below.

There are some cases when you'll want to be aware of all SystemManagers in your flex application (like when you load child applications).

This can be done fairly easily with the following code

import mx.managers.SystemManagerGlobals;
//top level list of system managers
			var systemManagers:Array = SystemManagerGlobals.topLevelSystemManagers;
			//length for efficiency
			var lng:int = systemManagers.length;
			for(var i:int = 0; i < lng; i ++){
                                       //type with a wildcard because we may encounter systemManager or windowed system manager
					var sm:* = systemManagers[i];
					//logic
				}
	  		}

This is the same logic that adobe uses to access these within the framework

See them HERE

This class allows you to embed anchors into your application much like in HTML.  It allows you to anchor to a dynamic point or UIComponent within a container.  Since you construct the anchor manager you can dynamically create managers for many different containers across the application.  You can also pass in whether to animate the scrolling, where to anchor (nearest edge, top, middle, or bottom), duration, and the easing algorithm to use.  You can also add events to the anchorManager that will tell you when it is scrolling, and when the scrolling has finished.

The example I've posted HERE shows all of these features, try to click on the button that you're anchored to to dynamically move it around.  The manager will know this and anchor to the new position the next time.

I've also posted the source and the sample application HERE.

This will result in just a scroll bar and no arrows if you add this in a css that you import into your application.  If done in this way, it will globally affect your application.

ScrollBar {
 
      upArrowSkin: ClassReference(null);
      downArrowSkin: ClassReference(null);   
 
}