Viewing Flex Source in a Flash Application

It can be very helpful when a Flash application used as a demonstration or as an illustration of a Flex concept makes its source code readily available for viewing. You can determine if this is the case for a Flash application by right-clicking in an area on the web page that you know to be running in the Flash player. If source code viewing is enabled, the right-click will result in a window like that shown in the next screen snapshot (click on all images in the blog to see larger versions).



When source code view is not enabled, the "View Source" option will not be available when you right-click on the Flash player rendered area of the web page. An example of this is shown in the next screen snapshot.



When one clicks on the "View Source" option, the content of the pointed at URL is displayed in the browser. So, how is the URL specified for which page content is rendered when "View Source" is selected? In MXML, this is accomplished with the viewSourceURL attribute of the MXML root Application tag. A code snippet of this is shown next.

<mx:Application
          xmlns:mx="http://www.adobe.com/2006/mxml"
          xmlns:flash.display="flash.display.*"
          width="500" height="300"
          applicationComplete="doSomething();"
          viewSourceURL="C:\flexExamples\ViewSourceExample\ViewMySource.mxml">

In this code snippet, the URL is local (note the C:\), so I must compile the Flex application that includes this with the -use-network=false option. When I compile the application with this Application opening tag and run the application, I can right-click on the Flash Player section and select "View Source." A separate web browser opens up with the source code of this application.

It is extremely important to note that, in the case shown above, there is no guarantee that the URL pointed in the viewSourceURL attribute actually points to the source MXML code of this application. In fact, it can point at anything, including the C:\ drive of the local machine. If it was expressed simply as viewSourceURL="C:\\" and run, the "View Source" option would actually show a directory listing for the C: drive on that machine. In other words, there is no check or assurance that the file pointed to by the viewSourceURL points to MXML code or even something that exists. That is your job as the developer to ensure the URL is correct.

In many cases, one does not want the URL to point to the local filesystem, but instead wants the URL to point to an online resource accessible via the HTTP protocol.

The code below shows how the URL can reference an online resource via the HTTP protocol.

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                xmlns:flash.display="flash.display.*"
                width="500" height="300"
                applicationComplete="doSomething();"
                viewSourceURL="http://livedocs.adobe.com/flex/3/langref/">

This code example also shown that there is no verification that the pointed to URL actually relates to the application. The example above will compile and run fine (assuming that the -use-network option has been removed or set to false). One will even be able to "View Source" with the normal right-click and selection, but will then be taken to the Flex 3 Language Reference provided in the URL rather than the actual source code for the application.

There are several implications to the fact that viewSourceURL can point at any link regardless of any on no relationship of the linked to content to the application. The most obvious is that even well-intentioned developers may have their applications linking to incorrect or outdated versions of the source code. Another implication is that the only way to turn off the ability to view the source code is to remove the viewSourceURL attribute from the Application tag. The most important implication is that there is no enforced connection between the URL whose content is rendered and the application's actual source code unless the developer makes it so.

There are several resources covering the ability to make Flex and ActionScript source code available for viewing. These include Flex Builder documentation on Publishing Application Source Code, Viewing the Application Source Code, Flex 2 Beta ViewSource, and viewSourceURL: Publish Source in Flex.