<?xml version="1.0"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Script>
<![CDATA[
import mx.core.FlexGlobals;
import mx.core.UIComponent;
import mx.events.FlexEvent;
import spark.components.View;
import spark.components.ViewNavigatorApplication;
import spark.events.ViewNavigatorEvent;
private var app:ViewNavigatorApplication = FlexGlobals.topLevelApplication as ViewNavigatorApplication;
private var highlight:Sprite;
private function removeHighlight():void
{
if ((highlight != null) && (stage.contains(highlight)))
{
stage.removeChild(highlight);
highlight.graphics.clear();
highlight = null;
}
}
private function highlightObject(o:UIComponent):void
{
removeHighlight();
highlight = new Sprite();
highlight.graphics.beginFill(0xa7cdf0, 0.5);
var p:Point = o.localToGlobal(new Point());
highlight.graphics.drawRect(p.x, p.y, o.width, o.height);
highlight.addEventListener(MouseEvent.CLICK, function(event:MouseEvent):void {
removeHighlight();
});
stage.addChild(highlight);
}
]]>
</fx:Script>
<s:creationComplete>
(parent['document'] as View).addEventListener(ViewNavigatorEvent.REMOVING, function(event:ViewNavigatorEvent):void {
removeHighlight();
});
</s:creationComplete>
<s:Scroller width="100%" height="100%">
<s:VGroup paddingTop="20" paddingLeft="20" paddingRight="20" paddingBottom="20" fontSize="18">
<s:Label text="A MobileApplication contains a ViewNavigator" width="100%" fontSize="18"/>
<s:Button label="Highlight the ViewNavigator" click="highlightObject(app.navigator)"/>
<s:Label text="A ViewNavigator contains an ActionBar and a View" width="100%" paddingTop="20" fontSize="18"/>
<s:Button label="Highlight the ActionBar" click="highlightObject(app.navigator.actionBar)"/>
<s:Button label="Highlight the View" click="highlightObject(app.navigator.activeView)"/>
<s:Label text="An ActionBar contains navigationContent, titleContent or titleDisplay, and actionContent" width="100%" paddingTop="20" fontSize="18"/>
<s:Button label="Highlight the navigationContent" click="highlightObject(app.navigator.actionBar.navigationGroup)"/>
<s:Button label="Highlight the titleContent or titleDisplay" click="highlightObject(app.navigator.actionBar.titleDisplay as UIComponent)"/>
<s:Button label="Highlight the actionContent" click="highlightObject(app.navigator.actionBar.actionGroup)"/>
</s:VGroup>
</s:Scroller>
</s:Group>