<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/12/01/determining-the-first-visible-item-in-a-flex-tree-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
		layout="vertical"
		verticalAlign="middle"
		backgroundColor="white" viewSourceURL="srcview/index.html">

	<mx:Script>
		<![CDATA[
			import mx.events.FlexEvent;
			import mx.events.ScrollEvent;
			import mx.utils.ObjectUtil;

			private function tree_creationComplete(evt:FlexEvent):void {
				tree.expandChildrenOf(xmlDP, true);
				getFirstVisibleTreeItem();
			}

			private function tree_scroll(evt:ScrollEvent):void {
				getFirstVisibleTreeItem();
			}

			private function getFirstVisibleTreeItem():void {
				node = tree.firstVisibleItem as XML;
			}
		]]>
	</mx:Script>

	<mx:XML id="node" />

	<mx:XML id="xmlDP">
		<node>
			<node label="1.a" />
			<node label="1.b" />
			<node label="1.c">
				<node label="1.c.i" />
				<node label="1.c.ii" />
				<node label="1.c.iii" />
				<node label="1.c.iv" />
				<node label="1.c.v" />
			</node>
			<node label="1.d" />
			<node label="1.e">
				<node label="1.e.i" />
				<node label="1.e.ii" />
				<node label="1.e.iii">
					<node label="1.e.iii.A" />
				</node>
				<node label="1.e.iv" />
			</node>
			<node label="1.f" />
		</node>
	</mx:XML>

	<mx:ApplicationControlBar dock="true">
		<mx:Form styleName="plain">
			<mx:FormItem label="Tree firstVisibleItem label:">
				<mx:Label text="{node.@label}" fontWeight="bold" />
			</mx:FormItem>
		</mx:Form>
	</mx:ApplicationControlBar>

	<mx:HDividedBox width="100%">
		<mx:Tree id="tree"
				dataProvider="{xmlDP}"
				labelField="@label"
				showRoot="false"
				width="50%"
				rowCount="6"
				scroll="tree_scroll(event);"
				creationComplete="tree_creationComplete(event);" />

		<mx:TextArea id="textArea"
				width="50%"
				height="100%"
				editable="false"
				text="{node.toXMLString()}" />
	</mx:HDividedBox>

</mx:Application>
