Below is a detailed step guide to using this ant script. This does not show Flex Builder usage although I can't imagine it being much different.

The top part fo the script contains changeable properties that can be used to customise the output HTML to suit your needs or alternatively look at the how-to's below.

Installation

To install the ant script download the zip file and extract to your project folder root. You should now have an ant folder containing the viewsrc.xml file and a viewsrclib folder in your project root.

How to add the Ant file to external run configuration

Click on the arrow next to the Green play icon with the little toolbox. Select External Tools Configuration.


External Run Configurations



External Tools Configuration Dialog

• Double click on the Ant Build tree to create a new run configuration
• In the Main tab click on Browse Workspace and browse to the ant folder
  
• To run the Ant script click on the arrow next to the green play icon and toolbox and select your Ant script.
  

How to update the title?

Update the value attribute in the property project.title as shown below.

	<!-- Project title -->
	<property name="project.title" value="Project Title | Page Source" />

How to exclude folders

Create a new exclude property with the value attribute specifying which folder to ignore. Below is an example of a excluding Tweener, PV3D and a framework.

	<!-- Folders to exclude -->
	<property name="exclude.folder.1" value="caurina" />
	<property name="exclude.folder.2" value="org" />
	<property name="exclude.folder.3" value="fl" />
	<property name="exclude.folder.4" value="nochump" />
	<property name="exclude.folder.5" value="com/blitzagency" />
	<property name="exclude.folder.6" value="com/wezside/framework" />

How to create a context menu item in Actionscript

private function setContextMenu():void
{
	var cmItemCopyright:ContextMenuItem = new ContextMenuItem( Version.COPYRIGHT, true, false );
	var cmItemBuild:ContextMenuItem = new ContextMenuItem( Version.BUILD_VERSION, false, false );
	var viewSrc:ContextMenuItem = new ContextMenuItem( "View Source", false, true );
	viewSrc.addEventListener( ContextMenuEvent.MENU_ITEM_SELECT, viewSrcClick );
	
	var cm:ContextMenu = new ContextMenu();
	cm.customItems = [viewSrc, cmItemCopyright, cmItemBuild ];
	cm.hideBuiltInItems();
	contextMenu = cm;			 
}

private function viewSrcClick( event:ContextMenuEvent ):void
{
	if ( event.target.caption == "View Source" )
		navigateToURL( new URLRequest( "viewsrc/" ));
}

Updating the colour scheme

Updating the colour scheme is easy. Just change the CSS of the tempate index.html file. To view the alternative Kuler scheme simply do the following:

• Open index.html in viewsrc/lib/
• Update the css href to css/index.css to load a darker scheme

Download the script here »

Example

To see the result visit my site at wezside.co.za and right click - select View Source.