How do I submit a qooxdoo form to a cgi-script for processing?

StackOverflow https://stackoverflow.com/questions/20164829

  •  04-08-2022
  •  | 
  •  

Question

Good Evening Everyone, I am a beginner with QooxDoo and I am trying to learn it by converting some of my HTML, JavaScript and CGI work to qx. These are not production applications/pages/forms, nobody uses them, their only purpose is to improve and amuse me.
While turning one of my old example HTML FORMs into a QX solution I got to a point where the Qooxdoo Documentation (the pdf that comes with QooxDoo) is not enough to explain or help what I am attempting to do. I hope the community can help me through this point with an example or with a pointer to an explanation.

Here is the sample HTML form:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title>
</head>
<body>
    <br />
    <form action="webformprocess.cgi" method="POST">
        Town/City:<input name="fTown" size="30" /> <br />
        Your name:<input name="fName" size="20" value="John" />
            <font size="-1"><i>Yes, this field comes with a default value.</i></font><br />
        <br />
        <fieldset>
            <legend>Pick a colour:</legend>
            <input name="fColour" type="radio" value="red" />red<br />
            <input name="fColour" type="radio" value="white" />white<br />
            <input name="fColour" type="radio" value="green" />green<br />
        </fieldset>
        <br />
        <fieldset>
            <legend>What transportation do you like?</legend>
            <input name="fTransport" type="checkbox" value="car" />car<br />
            <input name="fTransport" type="checkbox" value="tram" />tram<br />
            <input name="fTransport" type="checkbox" value="bycicle" />bycicle<br />
        </fieldset>
        <br />
        <input type="submit" label="Mehet..." />
    </form>
    <br />
</body>
</html>

And here is the sample perl CGI script that processes the form:

#!/usr/bin/perl

use strict;
use POSIX qw(strftime);
use CGI ':standard';
use CGI::Carp qw(fatalsToBrowser);

my $form_town = param('fTown');
unless (defined $form_town) { $form_town = 'WAS UNDEFINED'; }

my $form_name = param('fName');
unless (defined $form_name) { $form_name = 'WAS UNDEFINED'; }

my $form_colour = param('fColour');
unless (defined $form_colour) { $form_colour = 'WAS UNDEFINED'; }

my $form_transport = param('fTransport');
unless (defined $form_transport) { $form_transport = 'WAS UNDEFINED'; }

print "Content-type: text/html\n\n";
print "<pre>\n";
print "<p> town = $form_town .</p>\n";
print "<p> name = $form_name .</p>\n";
print "<p> colour = $form_colour .</p>\n";
print "<p> transport = $form_transport .</p>\n";
print "</pre>\n";

Finally, here is how far I got with turning the HTML form into QooxDoo:

/**
 * This is the main application class of your custom application "urlap_qx"
 */
qx.Class.define("urlap_qx.Application",
{
  extend : qx.application.Standalone,



  /*
  *****************************************************************************
     MEMBERS
  *****************************************************************************
  */

  members :
  {
    /**
     * This method contains the initial application code and gets called 
     * during startup of the application
     * 
     * @lint ignoreDeprecated(alert)
     */
    main : function()
    {
      // Call super class
      this.base(arguments);

      // Enable logging in debug variant
      if (qx.core.Environment.get("qx.debug"))
      {
        // support native logging capabilities, e.g. Firebug for Firefox
        qx.log.appender.Native;
        // support additional cross-browser console. Press F7 to toggle visibility
        qx.log.appender.Console;
      }

      /*
      -------------------------------------------------------------------------
        Below is your actual application code...
      -------------------------------------------------------------------------
      */

        // Create a form named "urlap".
        var urlap = new qx.ui.form.Form();

        //Basic input fields without headline.
        var fTown = new qx.ui.form.TextField("Bristol,UK");
        urlap.add(fTown, "Town/City");

        var fName = new qx.ui.form.TextField();
        urlap.add(fName, "Your name");


        // Radio buttons.
        urlap.addGroupHeader("Pick a colour:");
        var fColour1 = new qx.ui.form.RadioButton();
        var fColour2 = new qx.ui.form.RadioButton();
        var fColour3 = new qx.ui.form.RadioButton();
        urlap.add(fColour1, "Red");
        urlap.add(fColour2, "White");
        urlap.add(fColour3, "Green");
        new qx.ui.form.RadioGroup(fColour1, fColour2, fColour3);

        // Checkboxes.
        urlap.addGroupHeader("What transportation do you like?");
        var fTransport1 = new qx.ui.form.CheckBox();
        var fTransport2 = new qx.ui.form.CheckBox();
        var fTransport3 = new qx.ui.form.CheckBox();
        urlap.add(fTransport1, "car");
        urlap.add(fTransport2, "tram");
        urlap.add(fTransport3, "bycicle");

        var sendButt = new qx.ui.form.Button("Submit");
        sendButt.addListener("execute", function() {
            if (urlap.validate()) {
                alert("This is where it was supposed to send data to my CGI-script for processing...");
            }
        }, this);
        urlap.addButton(sendButt);

        this.getRoot().add(new qx.ui.form.renderer.Single(urlap), {left: 10, top: 10});

    } // end_main()
  } // end_members:
}); // end_qx_class_define

My trouble is that I am unable to figure out how to send the qx form data to my perl cgi for processing. That is, replicating the function of the <form action="webformprocess.cgi" method="POST"> line from the HTML form. I have read hours about form validation and serialization and synchronous and asynchronous methods and models and binding, but these did not cover what I am looking for. I also considered that I am looking for the wrong thing and instead of submitting the form to my CGI script this should be done in an entirely different way.
Anyone with an understanding of the topic, please give me a kick in the right direction!

Change/update #1 

var sendButt = new qx.ui.form.Button("Submit");
sendButt.addListener("execute", function() {
    if (urlap.validate()) {
        //alert("Attempting to POST the Form ...");
        var vezerlo = new qx.data.controller.Form(null, urlap);
        var adatmodell = vezerlo.createModel();
        var parameterek = qx.util.Serializer.toUriParameter(adatmodell);
        var igeny = new qx.io.request.Xhr("http://my.websrv.tld/folder/webformprocess.cgi");
        igeny.setMethod("POST");
        igeny.setRequestData(parameterek);
        // Listeners to give feedback...
        igeny.addListener("success", function() {
            alert("Request succeeded.");
        }, this);
        igeny.send();
        alert("Send complete.");
    }
}, this);
urlap.addButton(sendButt);
Was it helpful?

Solution

qooxdoo offers a lot of machinery to handle form data in all kinds of ways, so that's probably confusing. That the documentation doesn't offer a simple and straight-forward sample for your kind of scenario doesn't help, either (I encourage you to open a bug to that end with qooxdoo).

The suggested way in your case would be:

  • create a controller for your form

    var controller = new qx.data.controller.Form(null, urlap);

  • get a data model from the controller

    var model = controller.createModel();

  • get a POST representation for this data

    var params = qx.util.Serializer.toUriParameter(model);

  • use this data with an HTTP request

    var request = new qx.io.request.Xhr("webformprocess.cgi");
request.setMethod("POST");
request.setRequestData(params); // maybe this could take model directly...
// you might want to add listeners to give feedback
// request.addListener("success" , ...); ...
request.send();

(I haven't tested this, you might have to fiddle with some of the parameters).

HTH

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top