getRIAed

Adding custom path to viewSource option of your flex application

Posted by ravi | Posted in Application, Customization, flex | Posted on 23-06-2009

0

Ok. Today i was trying to export the release build of a simple example i’ve done with the View Source option enabled. But the problem is the source path can only be relative to bin-release which wont work with the perma link system that i’m using with my wordpress blog which creates virtual links.

At first i thought of giving a custom path value to the viewSourceURL property of the Application tag like this:

viewSourceURL="http://ravimarella.com/getriaed/flexSource/Custom_View_Source_Publishing/index.html">

and just export the release build without selecting the view source option. But the problem with this is Flex Builder automatically deletes the viewSourceURL variable and its value once it publishes the release build. So my options are to place the above code intact and just the debug version of the swf. But the debug version contain lot of unnecessary info and adds up to the file size ultimately. So this is the solution i came up with:

1. Add a new Right Click Context Menu item on the application’s CreationComplete event like this:

private function init():void
{
var viewSourceItem:ContextMenuItem = new ContextMenuItem("View Source", true);
var contextMenuCustomItems:Array = application.contextMenu.customItems;
contextMenuCustomItems.push(viewSourceItem);
viewSourceItem.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, showSource);
}
private function showSource(event:Event):void
{
navigateToURL(new URLRequest("http://ravimarella.com/getriaed/flexSource/Custom_View_Source_Publishing/index.html"),"_blank");
}

What this will do is add a new menuitem to the menu that appears when you Righ Click or Ctrl_+Click on Mac called “View Source” and up on clicking this menu item navigates to the URL mentioned. The menuitem name can be named ofcourse as anything you want.

2. Export the release build with viewsource option enabled. This step is just to gather the source files. You can skip this step and select the source files your self and place them in a single folder. I prefer the first method as flex published the index.html and uses a clean interface to navigate through and download different items of your source.

3. Now, you can edit the source code exported to remove the viewSourceURL option just for the sake of your users or keep it intact if you dont prefer to take the extra step and let your users see the extra ViewSource option which is not the one that you are actually using. Note that flex renames creates your mxml files as .mxml.html files…so to remove that ViewSourceURL option, just open the main application mxml file in any text editor and remove the code pertaining to the ViewSourceURL.

Now just upload the source code folder contents in the exactly same URL as mentioned above by you.

Thats it…now you are ready with a Custom and absolute path for your Source code.

Here is sample that i’ve done:

Right Click any where on the application and click View Source option to see the source…

REMEMBER, you’ve to export the release build twice…first time with the source code export option selected and second time without the sourcecode option so that the default viewsource option wont show up on right click…