0
안녕하세요 모두 저는 QooxDoo의 초보자이며 HTML, JavaScript 및 CGI 작업 중 일부를 qx로 변환하여 배우려고합니다. 이들은 제작 응용 프로그램/페이지/양식이 아니며 아무도 사용하지 않습니다. 유일한 목적은 나를 향상시키고 즐겁게하는 것입니다.
Qooxdoo Documentation (QooxDoo와 함께 제공되는 pdf)이 내가 시도하려는 것을 설명하거나 돕기에 충분하지 않은 시점에서 나의 오래된 예제 HTML 서식 중 하나를 QX 솔루션으로 바꾼다. 커뮤니티가 예를 들어 설명의 포인터를 사용하여이 지점을 통해 나를 도울 수 있기를 바랍니다. 여기 처리를 위해 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>
그리고 여기 형태로 처리하는 샘플 펄 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);
당신은 아마 당신이 실제로 시도하고 실패하는 것을 (당신은 단지 그것에 대해 읽어 보지 않았 가정하여)를 작성해야하므로 사람들은 이것을 고려할 수 있습니다. OTOH, 당신은 아마 당신의 샘플 코드를 아래로 끓일 수 있습니다. 단지 텍스트 필드와 제출 버튼을 사용하여 문제를 이해하는 데 필요한 코드를 파악할 수 있습니다. – ThomasH
포인트가 찍혔습니다. 실제로 샘플 코드를 단순화해야합니다. 사실, 두 필드 만있는 양식의 기본 버전을 가지고 있기 때문에이를 예제로 사용해야합니다. 배운 또 다른 교훈! ;-) – Keve
아직도 무슨 일이 일어나고 있는지 궁금하다면 브라우저가 도메인 간 요청을 차단했을 수 있습니다. – sinni800