Добрый вечер всем, я новичок в QooxDoo, и я пытаюсь изучить его, преобразовав некоторые из моих работ HTML, JavaScript и CGI в qx. Это не производственные приложения/страницы/формы, их никто не использует, их единственная цель — улучшить и развлечь меня.
Превращая один из моих старых примеров HTML-ФОРМ в решение QX, я дошел до того, что документация Qooxdoo ( pdf, прилагаемый к QooxDoo), недостаточно, чтобы объяснить или помочь в том, что я пытаюсь сделать. Я надеюсь, что сообщество может помочь мне в этом вопросе с примером или указателем на объяснение.
Вот образец 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);
