Good Evening Everyone, Я начинаю с QooxDoo, и я пытаюсь изучить его, преобразовывая некоторые из моих HTML, JavaScript и CGI-работы в qx. Это не производственные приложения/страницы/формы, их никто не использует, их единственная цель - улучшить и развлечь меня.
При повороте одного из моих старых примеров HTML FORM в решение QX я дошел до того, что документация Qooxdoo (pdf, поставляемая с QooxDoo) недостаточно, чтобы объяснить или помочь, что я пытаюсь сделать. Я надеюсь, что сообщество поможет мне в этом вопросе с примером или с указателем на объяснение.Как отправить форму qooxdoo в cgi-скрипт для обработки?
Вот пример 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 для обработки. То есть, реплицируя функцию линии <form action="webformprocess.cgi" method="POST"> из формы HTML. Я читал часы о проверке формы и сериализации, а также синхронных и асинхронных методах и моделях и привязках, но они не охватывали то, что я ищу. Я также подумал, что я искал неправильную вещь и вместо того, чтобы отправлять форму в свой 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);
Вы, вероятно, следует написать, какие вещи вы на самом деле пытались и не смогли (предполагая, что вы не только читать об этом), так люди могли принять это во внимание. OTOH, вы, вероятно, могли бы сварить свой примерный код, например. просто текстовое поле и кнопка отправки, чтобы создать код, необходимый для понимания проблемы. – ThomasH
Point принят. Я бы действительно упростил образец кода. На самом деле, у меня даже есть базовая версия формы с двумя полями, и я должен был использовать это в качестве примера. Еще один урок! ;-) – Keve
Если вы все еще задаетесь вопросом, что происходит: ваш браузер мог заблокировать междоменный запрос. – sinni800