barebones minimal example: using XUL to http POST

Question

I am trying to figure out if XUL is a good candidate for GUI forms in intranet apps.

It's been difficult to find anyone who actually uses it though. Therefore I thought I'd ask for a hello world style example.

Suppose I have a php page that does nothing but display any content sent to it via HTTP POST. (e.g., http://mysite.com/postdumper.php)

Can anyone show me the bare minimum code it would take to create an XUL form that collects firstname, lastname, and age, and allows me to POST that to the URL above?

Any links or Fine Manuals or references that give such an example are more than welcome.

Answer 1

Create a series of < textbox>'s, add a submit < button>, and after reading the data from the textboxes, send it using xmlhttprequest. You can use GET or POST.

Answer 2

you can use plain old xhtml forms provided that you use its namespace in XUL since it is XML.

Answer 3

I use it for an intranet application and have done that for a few years now. It can be hard to start with, but once you understand a few things it's easy to make it work for you.

1. Forgot almost everything you knew about HTML. It's NOT HTML and there are alot of things you can't do the old way, but then there are an incredible amount of other things you can do instead.

2. Everything communication wise is done with javascript, and not forms.

3. Overlays have nothing to do with div's. But it's hugely useful for splitting up a design for larger projects.

4. If an XUL page is not correctly formated in all tags, the page won't even display.

There is a google groups where the main purpose is to discuss remote XUL : http://groups.google.com/group/remotexul

It's not quite active yet, but more members are more than welcome :)

Here is an minimal example:

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window id="yourwindow" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"&gt;
<script language="javascript">
    function send()
    {
        var firstName = document.getElementById('firstName').value;
        var lastName = document.getElementById('lastName').value;
        var age = document.getElementById('age').value;
        var postData = "firstName="+firstName;
        postData += "&amp;lastName="+lastName;
        postData += "&amp;age="+age;

        var req = new XMLHttpRequest();
        req.open("POST", "/test.php", false);
        req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

        req.send(postData);
        alert(req.responseText);

    }
</script>
<hbox>
    <vbox>
     <hbox>
      <label value="First Name" control="firstName"/>
      <textbox id="firstName"/>
     </hbox>
     <hbox>
      <label value="Last Name" control="lastName"/>
      <textbox id="lastName"/>
     </hbox>
     <hbox>
      <label value="Age" control="age"/>
      <textbox id="age" value="30" type="number"/>
     </hbox>
     <button onclick="send()" label="Send"/>
    </vbox>
</hbox>
</window>

I would also like to stress that you should look into sending data back and forth between XUL and PHP using a XMLRPC or JSON framework instead. JSON support will come as built-in in Firefox 3.5.

Another things is that until Firefox 3.5 arrives you cannot do cross-site XMLHttpRequest's unless you do some configuration in about:config. Which means that only xul on mysite.com can send requests to mysite.com/postdump.php.