Volta XUL Application
Hi,
I just want to let you guys know that I was able to create a simple hello world type application in .net that compiles in javascript with the volta bits, then gets executed by the Mozilla plateform as a xul application! Pretty cool.
For now I had to manually include the scripts and copy the generated js to the appropriate folders, etc. What I'll do next is try to make the integrated debugging work. To that end I didn't see any call to the entry point in the built project (only there in the deployed project). Am I right to think that the debugging works by running on the compiled application and any DOM interraction that happens in the app is replicated / communicated to the browser window? Any hint would be appreciated.
Finally for a future release it would be good if the concept of DomDocument was separated from the concept of a HtmlDocument. Right now there is a single Document class that serves both purposes. Your code would be cleaner if the OwnerDocument property of the DomNode classes returned a DomDocument and the HtmlElement class returned an HtmlDocument. That way the system can be extensible and I could create a XulDocument class and related elements...
Keep up the good work,
Charles
All Replies
Care to drop some breadcrumbs for those of us following behind ?? So we can see step by step what you did.
Hi,
I uploaded the code here and I'm deploying the application here (firefox required of course).
Here are the steps required to make it work:
-
Download and extract the code
-
Download and extract xulrunner and add it to the PATH.
-
Open the hello2 solution and deploy to the $code/pub folder
-
Copy all the folders in the $code/pub folder except the bin folder (make sure not to select compact.js and loader.js)
-
Paste in the $code/chrome/content folder
-
Execute $code/RUN.bat (it may give an error the first time, just reclick on it).
Here are the things I had to do to make this work:
- I manually included in the xul file the code to call the assembly's entry point (see main.js and main.xul)
-
I modified the loader.js to get the file directly, not through jsFile.aspx. (I commented the if(OnServer) branches)
-
I modified the compact.js to alter the prototypes of XULElement and XULDocument in addition to the html equivalent. I also added a test because document.getElementByName does not exists for xul documents.
-
In the main.designer.cs I commented out the StartPage assembly attribute because the compiler tries to find the body element of the page which obviously does not exist for xul documents.
-
I guess that's it
As for debugging support unless the helpful volta people can give me some pointers it will be very difficult to figure out how it works.
Regards,
Charles
-
Integrated debugging works! The app starts within firefox instead of launched by xulrunner but that's the best I can do I think.
Here's what was involved for anyone interrested:
-
setting firefox as the startup browser...
-
adding <!--<body></body>--> at the end of the xul file. (Luckily the volta code is dum enough to insert it's javascript in the comment
-
Use the StartPage attribute and set it to the xul file (Main.xul)
-
I renamed my modifed compat2.js and updated the script reference in the xul file
-
With reflector I dissasembled the VoltaWebServer and added code to send the Content-Type
application/vnd.mozilla.xul+xmlwhen the served file ends with .xul -
I replaced $voltaDir/VoltaWebServer with my compiled server.
At this point you can start the application and hit a breakpoint placed in Main.cs line 14 (var button = ...) You cannot continue because GetById tries to create a .net instance based on the node type. In this case it does not recognize the button tag so it creates a DomNode which then gets casted as an HtmlElement which result in an invalid cast exception... Here's how to fix that:-
I created the following classes to handle XUL:-
Application (eqv of Browser) -
Button (xul element button) -
Window (inherit from html.window - will contain xul specific methods like OpenDialog) -
Form (eqv of Page, xul element window) -
XulDocument (inherit from Document - reimplements GetByID and monstruous js case) -
XulElement (inherit from HtmlElement, base class for xul tags)
-
-
Add compact2.js to the solution and mark it as an embedded resource. -
Add these 2 lines to assemblyinfo.cs:-
[assembly: ScriptReference("compact2.js", Condition = "!IE")] -
[assembly: VoltaFile("compact2.js")]
-
That it! You can now place a breakpoint in the button click delegate and it will be hit when you click on the xul app button.
Although this works, it would be better if the Document class was split into two as mentionned in the first post. Right now my code isn't very clean since it has to inherit from the html stuff to work.Another suggestion is to generate the GetByID javascript switch statement by using reflection to find all classes marked with a DomNodeAttribute or something...Regards,Charles Verdon-
Hi,
For anyone that want to try this, I made a small application available here that configures your system, generates VS projects according to different templates (empty, blank form, hello world) and publishes a xulrunner compatible application once you are complete.
The download contains a sample application: a simple calc-like calculator (See online here). The code of the calculator is available for Win Forms and for XUL and there's also a unit test project. I also included the code of the volta xul library. Right now it's pretty bare bone and only includes the classes / methods needed for the sample.
Regards,
CharlesHi Charles,
Very Cool, this is awesome!
I'll communicate your suggestions on the DOM to the rest of the team.
Regarding the body. The deployment simply looks for </body> tag to insert the bootstrap script as the last content on the page.
The way debugging works is that when firefox (or IE) is launched, the volta plugin (or browser helper object) is activated with the debugging assembly and the generated script in the page initializes the plugin which loads and executes the manged code. Looks like plugins in firefox run for Xul apps too
Thanks,
Danny
- Thanks,
The plugin loads because the app is loaded within firefox. This works only for simple apps that do not require security elevation for file access and such. Ideally xulrunner should launch the application but I didn't investigate on how I can install the volta plugin in xulrunner. The next missing piece in that scenario is to make F5 run "xulrunner -app Application.ini" instead of launching firefox.
As you pointed out I don't see any reason why this would not work for developping firefox extensions. I haven't tried it yet though.
As for the <body> stuff it works when F5 is pressed but not when the project is published. The reason is that there is also some javascript generated in that situation which breaks my comment:
<!--<body><![if !IE]><script src="compact2.js"></script><![endif]><![if !IE]><script src="compact.js"></script><![endif]><script src="res\System_Core_Resources.js"></script><script type="text/javascript" language="javascript" src="loader.js"> </script>
<script type="text/javascript"><!--
SearchPaths = ["./"];
var a = LoadAssembly("application1, Version=0.0.1.0, Culture=neutral, PublicKeyToken=null");
var oldLoadHandler = window.onload;
window.onload = function() { if (oldLoadHandler != null) {oldLoadHandler();} a.EntryPoint(); };
// --></script></body>-->
To work around this one of the step of the Publish function of the little application I created and linked above is to remove this whole mess. The entry point is called directly from the onload event generated by the project generator.
Regards,
Charles - I just want to add that I posted the download on the MSDN Code Gallery to try it out. It's available here: http://code.msdn.microsoft.com/voltaxul
Charles
