How to listen to model change

classic Classic list List threaded Threaded
9 messages Options
Reply | Threaded
Open this post in threaded view
|

How to listen to model change

halcwb
Using the below code:

// Create a model for the combo
var comboModel = qx.data.marshal.Json.createModel([]);
// Create a combo and controller using the combo model
var combo = new qx.ui.form.ComboBox();
var comboCtrl = new qx.data.controller.List(comboModel, combo);

// Create a textfield
var textf = new qx.ui.form.TextField();

// Create a model for the select
var selectModel = qx.data.marshal.Json.createModel([
  {
    label: 'Select 1', data: '1'
  },
  {
    label: 'Select 2', data: '2'
  }
]);
// Create a selectbox and controller using the select model
var select = new qx.ui.form.SelectBox();
var selectCtrl = new qx.data.controller.List(null, select);
// Map the model to the select box
selectCtrl.setDelegate({
  bindItem: (ctrl, item, indx) =>
  {
    ctrl.bindProperty("label", "label", null, item, indx);
    ctrl.bindProperty("data", "model", null, item, indx);
  }
});
selectCtrl.setModel(selectModel);

// Create a model for the form
var formModel = qx.data.marshal.Json.createModel({
  text: null,
  combo: null,
  select: null
});
// Create a form to hold the textfield and combo
// and a controller using the form model
var form = new qx.ui.form.Form();
form.add(textf, "Text", null, 'text');
form.add(combo, "Combo", null, 'combo');
form.add(select, "Select", null, 'select');
var frmCtrl = new qx.data.controller.Form(formModel, form);

// Create a renderer for the form
// and add the form to the window
// using a vbox layout
var rend = new qx.ui.form.renderer.Single(form);
var wnd = new qx.ui.window.Window();
wnd.setLayout(new qx.ui.layout.VBox());
wnd.add(rend);

// Show the window
wnd.show();

// Add items to the comboModel
comboModel.push('Test');
comboModel.push('Test2');

// Get the model after the user changed
// the view, reflecting these changes
formModel.addListener('changeModel', () => {
  console.log(qx.util.Serializer.toJson(formModel));
});

I get:

024216 qx.event.Manager: There is no event handler for the event 'changeModel' on target 'qx.data.model.combo"select"text[453-0]'!
Native.js (line 59)
"changeModel|bubble|1174"

When make some changes in the view, there is no triggering of the event handler. When I just run the console.log code, however, I get the expected result.
Reply | Threaded
Open this post in threaded view
|

Re: How to listen to model change

halcwb
OK, I could not find a way to listen to the model directly, however, with the code below I get a nice and clean separation of concerns to implement a mvc approach:

// View model
// Create a model for the combo
var comboModel = qx.data.marshal.Json.createModel([]);
// Create a model for the select
var selectModel = qx.data.marshal.Json.createModel([
  {
    label: 'Select 1', data: '1'
  },
  {
    label: 'Select 2', data: '2'
  }
]);
// Create a model for the form
var formModel = qx.data.marshal.Json.createModel({
  text: null,
  combo: null,
  select: null
});


// Create the view
// Create a combo list
var combo = new qx.ui.form.ComboBox();
// Create a textfield
var textf = new qx.ui.form.TextField();
// Create a select list
var select = new qx.ui.form.SelectBox();
// Create the form to hold the fields
// Add listeners to the items to trigger the change message
_.chain([combo, textf, select])
 .each((item) => {
  item.addListener('focusout', () => {
    console.log('change', item);
    var msg = new qx.event.message.Message();
    msg.setName('formItemChange');
    msg.setSender(item);
    qx.event.message.Bus.dispatch(msg);
  });
});
var form = new qx.ui.form.Form();
form.add(textf, "Text", null, 'text');
form.add(combo, "Combo", null, 'combo');
form.add(select, "Select", null, 'select');
// Create a renderer for the form
// and add the form to the window
// using a vbox layout
var rend = new qx.ui.form.renderer.Single(form);
var wnd = new qx.ui.window.Window();
wnd.setLayout(new qx.ui.layout.VBox());
wnd.add(rend);
wnd.setComboModel = (model) => {
  var comboCtrl = new qx.data.controller.List(model, combo);

};
wnd.setSelectModel = (model) => {
  // Create a selectbox and controller using the select model
  var selectCtrl = new qx.data.controller.List(null, select);
  // Map the model to the select box
  selectCtrl.setDelegate({
    bindItem: (ctrl, item, indx) =>
    {
      ctrl.bindProperty("label", "label", null, item, indx);
      ctrl.bindProperty("data", "model", null, item, indx);
    }
  });
  selectCtrl.setModel(model);
};
wnd.setFormModel = (model) => {
  // Create a form to hold the textfield and combo
  // and a controller using the form model
  var frmCtrl = new qx.data.controller.Form(model, form);
};


// Controller
// Set the model to the view
wnd.setComboModel(comboModel);
wnd.setSelectModel(selectModel);
wnd.setFormModel(formModel);

// Show the window
wnd.show();

// Add items to the comboModel
comboModel.push('Test');
comboModel.push('Test2');

// Get the model after the user changed
// the view, reflecting these changes
qx.event.message.Bus.subscribe('formItemChange', () => {
  console.log(qx.util.Serializer.toJson(formModel));
});

The code above is not 'packaged' in separate classes, but that is trivial to do. Note that the 'view' and the 'model' are completely unaware of each other. The 'controller' part does the controlling bit of view and model.
Reply | Threaded
Open this post in threaded view
|

Using Qooxdoo Desktop to make a Facebook app

Peter Caffin
Hi guys,

I already have a Qooxdoo Desktop site I have written. I would like to
add Facebook functionality to it. I've not done this before, and I
haven't been able to find any documentation or discussion of it online.

Without changing anything, the desktop site loads OK in the Facebook
canvas, no problems.

To do more, eg, to bring up a Facebook dialog box etc, Facebook has some
code you'd normally add to your index.html to load the Javascript API
https://connect.facebook.net/en_US/sdk.js

See http://paste.tclers.tk/3399?v=raw for the index.html with the
Facebook API stuff I've added to my project.

Two questions:

(a) Should that Facebook code be somewhere else or is this fine?

(b) From within the source of my script (which builds in this case to
script/au_js.js), should I be able to just call Facebook functions (eg,
to get the Facebook user's ID, etc) as Facebook documents them, or will
I need to perform some extra steps?

Any assistance very much welcomed.

Thanks.



------------------------------------------------------------------------------
New Year. New Location. New Benefits. New Data Center in Ashburn, VA.
GigeNET is offering a free month of service with a new server in Ashburn.
Choose from 2 high performing configs, both with 100TB of bandwidth.
Higher redundancy.Lower latency.Increased capacity.Completely compliant.
http://p.sf.net/sfu/gigenet
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: How to listen to model change

John Spackman-3
In reply to this post by halcwb
Looking at your first post, the reason that “changeModel” was not supported is because formModel will have events for changing each individual property, not an event for any/all changes to the properties; so for this code:

var formModel = qx.data.marshal.Json.createModel({
 text: null,
 combo: null,
 select: null
});

you get an object that has three properties, each with it’s own changeXxxx event (ie changeText, changeCombo, changeSelect).  Here’s a reworked version of your code: http://tinyurl.com/m4cpatx

In your second post, you seem to be using underscore or something as well as manually triggering the change events - that’s really not a good way to do it, plus IMHO underscore is completely unnecessary to run parallel with Qooxdoo.  

Two things that might help in the future are to provide examples in the playground (see the above link) and to write in Javascript, not typescript/coffeescript/etc - it’s much easier to understand and help feedback examples if it can just be copy & pasted into the playground as a working example

John

On 20 Jan 2015, at 19:37, halcwb <[hidden email]> wrote:

OK, I could not find a way to listen to the model directly, however, with the
code below I get a nice and clean separation of concerns to implement a mvc
approach:

// View model
// Create a model for the combo
var comboModel = qx.data.marshal.Json.createModel([]);
// Create a model for the select
var selectModel = qx.data.marshal.Json.createModel([
 {
   label: 'Select 1', data: '1' 
 },
 {
   label: 'Select 2', data: '2'
 }
]);
// Create a model for the form
var formModel = qx.data.marshal.Json.createModel({
 text: null,
 combo: null,
 select: null
});


// Create the view
// Create a combo list
var combo = new qx.ui.form.ComboBox();
// Create a textfield
var textf = new qx.ui.form.TextField();
// Create a select list
var select = new qx.ui.form.SelectBox();
// Create the form to hold the fields
// Add listeners to the items to trigger the change message
_.chain([combo, textf, select])
.each((item) => {
 item.addListener('focusout', () => {
   console.log('change', item);
   var msg = new qx.event.message.Message();
   msg.setName('formItemChange');
   msg.setSender(item);
   qx.event.message.Bus.dispatch(msg);
 });
});
var form = new qx.ui.form.Form();
form.add(textf, "Text", null, 'text');
form.add(combo, "Combo", null, 'combo');
form.add(select, "Select", null, 'select');
// Create a renderer for the form 
// and add the form to the window
// using a vbox layout
var rend = new qx.ui.form.renderer.Single(form);
var wnd = new qx.ui.window.Window();
wnd.setLayout(new qx.ui.layout.VBox());
wnd.add(rend);
wnd.setComboModel = (model) => {
 var comboCtrl = new qx.data.controller.List(model, combo);

};
wnd.setSelectModel = (model) => {
 // Create a selectbox and controller using the select model
 var selectCtrl = new qx.data.controller.List(null, select);
 // Map the model to the select box
 selectCtrl.setDelegate({
   bindItem: (ctrl, item, indx) =>
   {
     ctrl.bindProperty("label", "label", null, item, indx);
     ctrl.bindProperty("data", "model", null, item, indx);
   }
 });
 selectCtrl.setModel(model);
};
wnd.setFormModel = (model) => {
 // Create a form to hold the textfield and combo
 // and a controller using the form model
 var frmCtrl = new qx.data.controller.Form(model, form);
};


// Controller
// Set the model to the view
wnd.setComboModel(comboModel);
wnd.setSelectModel(selectModel);
wnd.setFormModel(formModel);

// Show the window
wnd.show();

// Add items to the comboModel
comboModel.push('Test');
comboModel.push('Test2');

// Get the model after the user changed 
// the view, reflecting these changes
qx.event.message.Bus.subscribe('formItemChange', () => {
 console.log(qx.util.Serializer.toJson(formModel));
});

The code above is not 'packaged' in separate classes, but that is trivial to
do. Note that the 'view' and the 'model' are completely unaware of each
other. The 'controller' part does the controlling bit of view and model.



--
View this message in context: http://qooxdoo.678.n2.nabble.com/How-to-listen-to-model-change-tp7586702p7586706.html
Sent from the qooxdoo mailing list archive at Nabble.com.

------------------------------------------------------------------------------
New Year. New Location. New Benefits. New Data Center in Ashburn, VA.
GigeNET is offering a free month of service with a new server in Ashburn.
Choose from 2 high performing configs, both with 100TB of bandwidth.
Higher redundancy.Lower latency.Increased capacity.Completely compliant.
http://p.sf.net/sfu/gigenet
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel


------------------------------------------------------------------------------
New Year. New Location. New Benefits. New Data Center in Ashburn, VA.
GigeNET is offering a free month of service with a new server in Ashburn.
Choose from 2 high performing configs, both with 100TB of bandwidth.
Higher redundancy.Lower latency.Increased capacity.Completely compliant.
http://p.sf.net/sfu/gigenet
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: How to listen to model change

halcwb
John Spackman-3 wrote
Looking at your first post, the reason that “changeModel” was not supported is because formModel will have events for changing each individual property, not an event for any/all changes to the properties; so for this code:

var formModel = qx.data.marshal.Json.createModel({
 text: null,
 combo: null,
 select: null
});

you get an object that has three properties, each with it’s own changeXxxx event (ie changeText, changeCombo, changeSelect).  Here’s a reworked version of your code: http://tinyurl.com/m4cpatx <http://tinyurl.com/m4cpatx>

In your second post, you seem to be using underscore or something as well as manually triggering the change events - that’s really not a good way to do it, plus IMHO underscore is completely unnecessary to run parallel with Qooxdoo.  

Two things that might help in the future are to provide examples in the playground (see the above link) and to write in Javascript, not typescript/coffeescript/etc - it’s much easier to understand and help feedback examples if it can just be copy & pasted into the playground as a working example

John
you get an object that has three properties, each with it’s own changeXxxx event (ie changeText, changeCombo, changeSelect).  Here’s a reworked version of your code: http://tinyurl.com/m4cpatx <http://tinyurl.com/m4cpatx>

Nice, thanks.

In your second post, you seem to be using underscore or something as well as manually triggering the change events - that’s really not a good way to do it, plus IMHO underscore is completely unnecessary to run parallel with Qooxdoo. 

1. Why is it completely unnecessary to use underscore? I use it a lot to get some functional programming done in javascript (p.s. javascript essentially is a functional programming language). I don't see any of the functionality offered by underscore in qooxdoo, so, why not use this lib?
2. Why is it not good to enable loose coupling using the message system instead of manually attaching event handlers? This is a well known pattern. For example, I can now have multiple objects subscribing to the same message, without those objects to require any direct knowledge of the sender. IMHO, this is, another, right way to do this.

Two things that might help in the future are to provide examples in the playground (see the above link) and to write in Javascript, not typescript/coffeescript/etc - it’s much easier to understand and help feedback examples if it can just be copy & pasted into the playground as a working example

I think coffeescript is more readable, but that of course is quite personal. I will (and have) use the javascript versions in the future.

Regards -- Casper
Reply | Threaded
Open this post in threaded view
|

Re: How to listen to model change

John Spackman-3
1. Why is it completely unnecessary to use underscore? 

I don’t see the need for using it - I’m no expert on underscore but looking through the API again there’s nothing in there that I miss.  If you want to load another library that’s up to you.  

2. Why is it not good to enable loose coupling using the message system
instead of manually attaching event handlers?

You’re using a long winded way of achieving something simple that is already done by the framework; this code:

 item.addListener('focusout', () => {
   console.log('change', item);
   var msg = new qx.event.message.Message();
   msg.setName('formItemChange');
   msg.setSender(item);
   qx.event.message.Bus.dispatch(msg);
 });
});

fires a change event every time the user leaves the field regardless of whether it has changed or not (so I’d suggest that’s a bug), and implies that a global message type of “formItemChange” is enough to be unique within the application for all subscribers to listen to.  I would have thought that if you have more than just a few fields in your application this could become difficult to manage.

Anyway, the message you are passing refers to the UI widget and not the model object which means that your event handler is pretty close coupled to the exact UI implementation - you can’t change the widgets without impacting your event handler logic, and you can’t have multiple UIs refer to the same model object (e.g. a wizard or detail view as well as a summary view).

IMHO it is generally more useful to have events on a particular model object (ie not a global broadcast), in which case this code is more useful:
formModel.addListener(“changeText”, function(evt) {
  console.log(“formModel.text changed to “ + evt.getData());
});

You’re right that if you need to broadcast a global change where the subscription is not to any specific object then using qx.event.message.Bus is a valid pattern, although that didn’t appear to be what you were trying to achieve.  

/Two things that might help in the future are to provide examples in the
playground (see the above link) and to write in Javascript, not
typescript/coffeescript/etc - it’s much easier to understand and help
feedback examples if it can just be copy & pasted into the playground as a
working example/

I think coffeescript is more readable, but that of course is quite personal.
I will (and have) use the javascript versions in the future.

The playground does not support coffeescript, and while people on the list use coffeescript/typescript (and presumably others) the main language is native javascript and you’re more likely to get help on specific examples if you stick to it because the playground makes it much easier to exchange ideas.  Personally I find it off putting because it’s an unfamiliar syntax but that doesn’t mean you shouldn’t use it.

John



------------------------------------------------------------------------------
New Year. New Location. New Benefits. New Data Center in Ashburn, VA.
GigeNET is offering a free month of service with a new server in Ashburn.
Choose from 2 high performing configs, both with 100TB of bandwidth.
Higher redundancy.Lower latency.Increased capacity.Completely compliant.
http://p.sf.net/sfu/gigenet
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: How to listen to model change

halcwb
John Spackman-3 wrote
> 1. Why is it completely unnecessary to use underscore?

I don’t see the need for using it - I’m no expert on underscore but looking through the API again there’s nothing in there that I miss.  If you want to load another library that’s up to you.  
Pfew, I am glad I am allowed to do this.

Thanks for the tips -- Casper
Reply | Threaded
Open this post in threaded view
|

Bump!: Using Qooxdoo Desktop to make a Facebook app

Peter Caffin
In reply to this post by Peter Caffin
Hi folks,

I originally asked on the Qooxdoo Facebook page, and they recommended to
ask here.

There were no replies when I asked here back in January. Hope someone
might have some suggestions now...


Thanks.

-------- Forwarded Message --------
Subject: [qooxdoo-devel] Using Qooxdoo Desktop to make a Facebook app
Date: Wed, 21 Jan 2015 12:05:08 +0800
From: Peter Caffin <[hidden email]>
Reply-To: qooxdoo Development <[hidden email]>
To: [hidden email]

Hi guys,

I already have a Qooxdoo Desktop site I have written. I would like to
add Facebook functionality to it. I've not done this before, and I
haven't been able to find any documentation or discussion of it online.

Without changing anything, the desktop site loads OK in the Facebook
canvas, no problems.

To do more, eg, to bring up a Facebook dialog box etc, Facebook has some
code you'd normally add to your index.html to load the Javascript API at
https://connect.facebook.net/en_US/sdk.js

See http://paste.tclers.tk/3399?v=raw for the index.html with the
Facebook API stuff I've added to my project.

Two questions:

(a) Should that Facebook code be somewhere else or is this fine?

(b) From within the source of my script (which builds in this case to
script/au_js.js), should I be able to just call Facebook functions (eg,
to get the Facebook user's ID, etc) as Facebook documents them, or will
I need to perform some extra steps?

Any assistance very much welcomed.

Thanks.



------------------------------------------------------------------------------
New Year. New Location. New Benefits. New Data Center in Ashburn, VA.
GigeNET is offering a free month of service with a new server in Ashburn.
Choose from 2 high performing configs, both with 100TB of bandwidth.
Higher redundancy.Lower latency.Increased capacity.Completely compliant.
http://p.sf.net/sfu/gigenet
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel



------------------------------------------------------------------------------
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: Bump!: Using Qooxdoo Desktop to make a Facebook app

Mustafa Sak-5
Hi Peter,

sorry for not answering to your question before.

Well, first of all qooxdoo is at the end just an EcmaScript (alias JavaScript) library, so every other library can be used together with qooxdoo. Depending on the integration of facebook lib, you should be able to get access to their api through a  global object. If the fb lib was loaded inside a closure, you have to make the fb object available for qooxdoo. I would just bind the the fb object with an static name member defined in one of your qx classes.

Dank & Gruß
Mustafa Sak
Softwareentwickler
Mail Development
1&1 Mail & Media Development & Technology GmbH | Brauerstraße 48 | 76135 Karlsruhe | Germany
Phone: +49 721 91374-6977
E-Mail: [hidden email] | Web: www.1und1.de


-----Ursprüngliche Nachricht-----
Von: Peter Caffin [mailto:[hidden email]]
Gesendet: Mittwoch, 17. Juni 2015 12:00
An: qooxdoo Development
Betreff: [qooxdoo-devel] Bump!: Using Qooxdoo Desktop to make a Facebook app

Hi folks,

I originally asked on the Qooxdoo Facebook page, and they recommended to ask here.

There were no replies when I asked here back in January. Hope someone might have some suggestions now...


Thanks.

-------- Forwarded Message --------
Subject: [qooxdoo-devel] Using Qooxdoo Desktop to make a Facebook app
Date: Wed, 21 Jan 2015 12:05:08 +0800
From: Peter Caffin <[hidden email]>
Reply-To: qooxdoo Development <[hidden email]>
To: [hidden email]

Hi guys,

I already have a Qooxdoo Desktop site I have written. I would like to
add Facebook functionality to it. I've not done this before, and I
haven't been able to find any documentation or discussion of it online.

Without changing anything, the desktop site loads OK in the Facebook
canvas, no problems.

To do more, eg, to bring up a Facebook dialog box etc, Facebook has some
code you'd normally add to your index.html to load the Javascript API at
https://connect.facebook.net/en_US/sdk.js

See http://paste.tclers.tk/3399?v=raw for the index.html with the
Facebook API stuff I've added to my project.

Two questions:

(a) Should that Facebook code be somewhere else or is this fine?

(b) From within the source of my script (which builds in this case to
script/au_js.js), should I be able to just call Facebook functions (eg,
to get the Facebook user's ID, etc) as Facebook documents them, or will
I need to perform some extra steps?

Any assistance very much welcomed.

Thanks.



------------------------------------------------------------------------------
New Year. New Location. New Benefits. New Data Center in Ashburn, VA.
GigeNET is offering a free month of service with a new server in Ashburn.
Choose from 2 high performing configs, both with 100TB of bandwidth.
Higher redundancy.Lower latency.Increased capacity.Completely compliant.
http://p.sf.net/sfu/gigenet
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel



------------------------------------------------------------------------------
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel

------------------------------------------------------------------------------
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel