Добър вечер на всички, аз съм начинаещ с 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);
