晚上好，每个人， 我是QooxDoo的初学者，我试图通过将我的一些HTML，JavaScript和CGI工作转换为qx来学习它。这些不是生产应用程序/页面/表单，没有人使用它们，它们的唯一目的是改善和娱乐我 在将我的旧示例HTML FORMs转换为QX解决方案时，我得到了Qooxdoo文档（QooxDoo附带的pdf）不足以解释或帮助我尝试做的事情。我希望社区可以通过一个例子或一个解释指针帮助我完成这一点。
以下是HTML表单示例：
<?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>
以下是处理表单的示例perl CGI脚本：
#!/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";
最后，这里是将HTML表单转换为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
我的麻烦在于我无法弄清楚如何将qx表单数据发送到我的perl cgi进行处理。也就是说，从HTML表单复制<form action="webformprocess.cgi" method="POST">行的功能。我已经阅读了关于表单验证和序列化以及同步和异步方法以及模型和绑定的小时数，但这些并没有涵盖我正在寻找的内容。我还认为我正在寻找错误的东西而不是将表格提交给我的CGI脚本，这应该以完全不同的方式完成。
任何了解该主题的人，请给我一个正确的方向！
更改/更新＃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);
答案 0 :(得分：1)
您建议的方法是：
为表单创建一个控制器
var controller = new qx.data.controller.Form(null, urlap);
从控制器获取数据模型
var model = controller.createModel();
获取此数据的POST表示
var params = qx.util.Serializer.toUriParameter(model);
将此数据与HTTP请求一起使用
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();
（我还没有对此进行过测试，你可能需要调整一些参数）。
HTH