I briefly touched on this in my previous post, “Publishing a release version of a Flex project”, but I thought it was important enough to dedicate a new entry to.
If you are just getting started with Flex Builder 3 (or Flex in general), or are migrating from Flex Builder 2 or Flex Builder 3 beta 1, the steps to enable the “view source” context menu in your Flex applications has changed somewhat.
Currently (as of Flex Builder 3 beta 2), if you want to enable view source, you can do so in the “Export Release Version” dialog box (found by selecting Project > Export Release Version from the main menu), and clicking the “Enable view source” check box in the View source section. If you want to specify which files are included/excluded, simply click on the Choose Source Files button and check or uncheck files at your leisure. For example, in some of my examples, I may not include fonts which I downloaded elsewhere from the Internet. So I would go into the Export Release Version dialog box, click on Choose Source Files and deselect the fonts and then publish my Flex application. Of course, I always include a note explaining where you can obtain the specific fonts I used, but it makes it so developers visit the site, check out the copyright information, and sends a bit of traffic to the font makers site. But I digress… Back in the Publish Application Source dialog box (which can be found by clicking the Choose Source Files buton in the Export Release Version dialog box, whew!), you can also specify where the generated source files will be copied to. By default the files will be placed in a folder named /srcview/ within your /bin-release/ folder of the published project files.
There you have it. Publishing your application source files with Flex Builder 3 (beta 2). Most, if not all, of the SWFs on this site should have view source enabled. Simply right-click on a SWF file and select View Source from the context menu. This allows you to view a nicely formatted/colored version of the source code, as well as download the source files as a handy ZIP file, or click on a link to download the Flex 2/3 SDK.
And remember, “sharing is caring”(tm).
Thanks. Is this “Enable view source” only available in Flex Builder or is it also available in the free SDK?
Dylan,
As far as I understand (and I could be wrong), yes and no.
If you want to generate the nicely formatted “view source” HTML output, you’d need to use Flex Builder. But if you want to generate your own HTML/source, you can simply set the Application tag’s viewSourceURL property (See Application viewSourceURL entry in LiveDocs). This should enable the “View Source” right-click context menu item, but it is up to you to generate the target HTML.
Hope that helps,
Peter
Please forgive a stupid question: Now what? That is, once Flex has produced a slew of source-related files in the src sub-folder of the bin-release folder, what additional step are necessary to make that source viewable?
For example, consider the project foo, defined by foo.mxml. Exporting the release version as described above produces foo.swf. To embed foo.swf in the web page bar.html, I need to (a) copy foo.swf on a web server (say, www.example.com/mySWFs/foo.swf) and (b) add the following text to bar.html:
Which is great, but…foo.swf’s source is all still sitting on my hard drive’s bin-release folder.
So, what exactly do I need to copy from foo’s bin-release folder to www.example.com, and what HTML do I need to add to bar.html, to make it possible to view foo.SWF’s source from within bar.html?
Thanks! :-)
— Jim