Developing an OpenSocial Gadget within Visual Studio - visual-studio

Question

We are about to implement a bunch of OpenSocial gadgets. They are not going to be run on Facebook or any other social network but rather on our own internal Apache Shindig server. (We embed these gadgets using iframes in a normal ASP.NET MVC cshtml view)
According to http://docs.opensocial.org/display/OSREF/OpenSocial+Tutorial, the structure of a gadget is like so:
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Hello World!">
<Require feature="opensocial-0.8" />
</ModulePrefs>
<Content type="html">
<![CDATA[
Hello, world!
]]>
</Content>
</Module>
Whereas the HTML, CSS and JS are embedded within the in the tag. If we want to develop a file like this in XML format in Visual Studio, it renders Syntax Highlighting, IntelliSense, IntelliTrace and JavaScript debugging impossible. That's not very comfortable.
Question 1: Do you know of any usable(!) extension for Visual Studio that re-enables all these features for these OpenSocial XML gadgets?
Question 2: Or if not, have any of you ever tried the same and found a good way to work around these hurdles?
Update: We have done a proof-of-concept of using a post build step that takes a plain HTML file, a plain JS file, and an XML skeleton and merges them into a gadget. In debug mode we might conceivably include the plain files directly while in the deployment process we call Shindig with the merged XML file from the post build step:
if (#Html.IsDebugMode())
{
<iframe src="/Gadgets/HelloWorld.html"/>
}
else
{
<iframe src="http://example.org/shindig?url=http://example.org/Gadgets/Merged/HelloWorld.xml"/>
}
This is how the solution works:
Add a Gadgets\HelloWorld.js file
Add a Gadgets\HelloWorld.html file that includes the js file.
Add a Gadgets\HelloWorld.xml file with the gadget XML but with an empty <Content> tag.
Create a CSHTML page with an iframe that includes the plain HTML file in Debug mode but includes the Gadget in Release mode.
Define a Post Build Event that reads the contents of HelloWorld.html and pastes it into the Content tag of the XML. In addition it reads the JS code from the JS file and replaces the script inclusion <script src="HelloWorld.js" /> in the HTML by an inline JavaScript <script>...</script> with the respective code.
Advantages:
Clean separation of logic (JS file), presentation (HTML file) and metadata (XML file).
Complete Visual Studio HTML authoring support when working on the HTML.
Complete Javascript authoring support when working on the JS.
Tools such as JSLint can be used to check the JavaScript style.
Caveats:
In Debug mode, if we call Shindig to render the gadget, we don't have a way to open the JavaScript in Visual Studio and setting a breakpoint. However, if any error occurs in the JS code, Visual Studio will open a view on the JS code and mark the erroneous line. Once that view is open, we can use it for setting break points, too. Live editing is not possible though because the original JS file only gets merged into the XML in the course of the build process.
On the other hand, if we include the plain HTML file as an iframe instead of having Shindig render it, we gain the possibility of live-editing and debugging directly in the respective files. But of course all of the Shindig features are not effective. In particular, all the scripts automatically added by Shindig are missing or have to be included by hand.
Ideally every change in the HTML or JS file while running the application in debug mode would immediately update the merged Gadget XML file, thus allowing life editing even when using Shindig.

Answer 1

A2: You can develop your javascript in a separated js file and just include it in the gadget xml as you would with html file contain a js include. Further more, you can use frames inside your gadget html, but that will may prevent you from using some of the js API available from Shindig.