Not really interested in writing it from scratch. I agree what you wrote is
what I'd prefer to do, and the way I've always done it.
If you don't mind, here is some code I've written to handle forms. The
essential form and RPC code is pretty much an example I copied off the
net... Please ignore the fact that I'm using RPC-SYNC instead of ASYNC. I've
highlighted what I think is the relevant portions of the code, aside from
creating the form itself.
If all you're doing is putting together a request to the backend, I agree,
it's very simple. It's working with the form model that apparently
complicates things. I will happily stipulate that there could easily be
something I'm missing or have overlooked in my efforts to figure it all out.
But what I needed / wanted to do was get the form model, add some additional
parameters to it (my "crud" parameters, which I want / use on the backend)
and then send it over. And that's where it stopped being simple for me.
/*I am HAPPY to LEARN-- I'm ALL EARS-- what should I do different from what
I'm doing to accomplish this? It has nothing to do with the backend. My
backend code works beautifully and I'm very happy with it for the moment. My
issue is on the front-end, on the Qooxdoo / JS side. How do I get the form
model, add additional parameters, and then pass it into the UriParameter
serializer in a simpler, easier way???*/
I am not being in the slightest way facetious or sarcastic in my request--
it is a genuine question. I do not have a lot of JS experience. I am
well-versed in programming in a variety of other languages but this is my
first really big, major JS project.
John
The Form Part:
qx.Class.define("reilly.ui.form.Test",
{
extend : reilly.ui.form.Generic,
properties :
{
},
events :
{
},
construct : function()
{
this.base(arguments);
this.setService('new');
this.setUrl("MY_BACKEND_URL");
this.setCrudMode("new");
this.setCrudName("test");
* // set up model for form
var myData = {
id : "__NEWID__", // serial
name : "testname", // varchar
network_id : null, // integer
quantity : "6" // integer
};
var formModel = qx.data.marshal.Json.createModel( myData );*
//--------------------------------------------------------------------------------
// ID Field
this.add(new qx.ui.form.TextField().set({readOnly: true}),
"Id", null, "id");
//--------------------------------------------------------------------------------
// NAME Field
this.add(new qx.ui.form.TextField().set({required: true}),
"Name", null, "name");
//--------------------------------------------------------------------------------
// NETWORK_ID Field
// lookup data for selectbox control
var rpc = new reilly.db.reibase.Lookup();
rpc.setService("lookup");
rpc.setName("MyShinyObject");
rpc.setUrl("URL_TO_MY_BACKEND");
var lookup_data = rpc.execute();
//--------------------------------------------------------------------------------
// use lookup date to populate selectbox control
var network_id = this._getSelectBox(rpc.getDisplay(),
lookup_data);
this.add(network_id, "Network", null, "network_id");
//--------------------------------------------------------------------------------
// QUANTITY Field
this.add(new qx.ui.form.TextField().set({required: true}),
"Quantity", null, "quantity");
//--------------------------------------------------------------------------------
// save button
this.addButton(this._getButton("Cancel", "onCancel"));
this.addButton(this._getButton("Save", "onSubmit"));
//--------------------------------------------------------------------------------
* // create form controller & model
var formCtlr = new qx.data.controller.Form(formModel, this);
this.initController(formCtlr);
this.initModel(formModel);*
/*
// alter binding for 'device' control
formCtlr.addBindingOptions(network_id, {
converter: function(data) {
var model = network_id.getModel();
for (var i = 0; i < model.getLength(); i++)
{
if (model.getItem(i).getId() ==
data) {
return model.getItem(i);
}
}
}
},
{
converter: function(data) {
return data.getId();
}
});
*/
},
members :
{
}
});
The "Generic" Part, handles setting up form and RPC on the Qooxdoo / JS
side:
qx.Class.define("reilly.ui.form.Generic",
{
extend : qx.ui.form.Form,
properties :
{
url: { init: null }, // back-end service url
crudMode: { init: null },
crudName: { init: null },
controller : { deferredInit : true },
model : { deferredInit : true },
service : { init: "read" } // service name for backend
},
events :
{
"onSubmit" : "qx.event.type.Data", // called when Save /
Submit button pressed
"onCancel" : "qx.event.type.Data", // called when Cancel
button pressed
"onFinish" : "qx.event.type.Data" // called when form action
is complete
},
construct : function()
{
this.base(arguments);
},
members :
{
_getSelectBox : function(display_field, data)
{
// set up device type combo box
var selectbox = new
qx.ui.form.SelectBox().set({required: true});
if (display_field) { // multi-dimensional data
// new qx.data.controller.List(new
qx.data.Array(data), selectbox); // bind list model to selectbox-list
var selectboxModel =
qx.data.marshal.Json.createModel(data);
new qx.data.controller.List(selectboxModel,
selectbox, display_field); // bind list model to selectbox-list
}
else {
new qx.data.controller.List(new
qx.data.Array(data), selectbox); // bind list model to selectbox-list
// var selectboxModel =
qx.data.marshal.Json.createModel(data);
// new
qx.data.controller.List(selectboxModel, selectbox); // bind list model to
selectbox-list
}
return selectbox;
},
_getButton : function(caption, fire_event_name,
listen_event_name)
{
var button = new qx.ui.form.Button(caption);
if (!listen_event_name) { listen_event_name =
"execute"; } // default listener event name
button.addListener(listen_event_name, function(e) {
this.fireDataEvent(fire_event_name, this);
}, this);
return button;
},
*
//---------------------------------------------------------------------
// Manage RPC Calls
//---------------------------------------------------------------------*
//----------------------------------------------------------------------
* _getService : function(item)
{*
try { // try to get the service name
*var service = item.getService();*
qx.core.Init.getApplication().debug("RPC
Service will be: " + service);
*return service;*
}
catch (exc) { // don't care what the error is, just
don't bomb
qx.core.Init.getApplication().debug("Item
has no service property: " + exc);
}
return "echo";
},
//----------------------------------------------------------------------
_callRpcAsync : function(handler, service, url, params) //
asynchronous model
{
var rpc = new qx.io.remote.Rpc(url, service);
try {
return rpc.callAsync(handler, service,
qx.util.Serializer.toUriParameter(params));
}
catch (exc) {
qx.core.Init.getApplication().debug("Exception occured during RPC-ASYNC
call: " + exc);
}
},
//----------------------------------------------------------------------
* _callRpcSync : function(service, url, params) //
synchronous model
{
var rpc = new qx.io.remote.Rpc(url, service);
try {
// var results = rpc.callSync(service,
qx.util.Serializer.toUriParameter(params));
var uriParams =
qx.util.Serializer.toUriParameter(params);
var results = rpc.callSync(service,
uriParams);
qx.core.Init.getApplication().getMainWindow().logEntry(results);
return results;
}
catch (exc) {
qx.core.Init.getApplication().debug("Exception occured during RPC-SYNC call:
" + exc);
}
},*
_enumProperties : function(caption, obj) // we can use this
to enumerate properties of an object
{
qx.core.Init.getApplication().getMainWindow().logEntry(caption);
var properties =
qx.util.PropertyUtil.getAllProperties(obj.constructor);
for (var name in properties) {
var value = obj["get" +
qx.lang.String.firstUp(name)]();
qx.core.Init.getApplication().getMainWindow().logEntry("Property name [" +
name + "] = [" + value + "]");
}
},
* _objToArray : function(obj)
{
var arry = {};
var properties =
qx.util.PropertyUtil.getAllProperties(obj.constructor);
for (var name in properties) {
if (properties[name].group != undefined) {
continue;
}
var value = obj["get" +
qx.lang.String.firstUp(name)]();
//
qx.core.Init.getApplication().getMainWindow().logEntry("Property name [" +
name + "] = [" + value + "]");
arry[name] = value;
}
return arry;
},*
//----------------------------------------------------------------------
* _handleSubmit : function(e)
{
var item = e.getData();
qx.core.Init.getApplication().debug("Model: " +
item.getModel());
qx.core.Init.getApplication().getMainWindow().logEntry(item.getModel());
var service = this._getService(item);
/var model = item.getModel();/
var arry = this._objToArray(model);
arry._crudMode = this.getCrudMode();
arry._crudName = this.getCrudName();
var new_model = qx.data.marshal.Json.createModel(
arry, true );
// this._enumProperties("Our new model...",
new_model);
this._callRpcSync(service, this.getUrl(),
new_model);
}*
}
});
--
View this message in context:
http://qooxdoo.678.n2.nabble.com/Need-help-with-Models-please-tp7581630p7581689.html
Sent from the qooxdoo mailing list archive at Nabble.com.
------------------------------------------------------------------------------
Don't let slow site performance ruin your business. Deploy New Relic APM
Deploy New Relic app performance management and know exactly
what is happening inside your Ruby, Python, PHP, Java, and .NET app
Try New Relic at no cost today and get our sweet Data Nerd shirt too!
http://p.sf.net/sfu/newrelic-dev2dev
_______________________________________________
qooxdoo-devel mailing list
qooxdoo-devel@lists.sourceforge.net
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
