Hi Christopher,
wow, that was fast. Thank you so much. I will look into this and give it
a try as soon as I can!
Regards
Ingo
On 02/01/2013 07:22 PM, Christopher Zündorf wrote:
> The checkbox problem was solved with:
> af5abf92837255b6b60d30832a63d2a07cd7ae42
>
> Here are some snippets I use for using the checkbox inside a List:
>
> The model of the list is a qx.data.Array which contains several data beans
> "newGameModelObject" which has a property "checked".
>
> If you change the "checked" property, the list should automatically re-render
> because of the "changeBubble" event.
> For firing the "changeBubble" event, the data bean has to include the mixin
> "MEventBubbling", and the property apply method has to be
> "_applyEventPropagation"
>
> qx.Class.define("newGameModelObject",
> {
> extend : qx.core.Object,
> include : [qx.data.marshal.MEventBubbling],
>
> properties :
> {
> checked :
> {
> check :"Boolean",
> init : false,
> apply : "_applyEventPropagation"
> }
> }
> });
>
>
> And here is the list's configureItem part I used:
>
> this.__list = new qx.ui.mobile.list.List({
> configureItem : function(item, data, row)
> {
> [...]
>
> var checkBox = new qx.ui.mobile.form.CheckBox(data.getChecked());
> checkBox.addListener("changeValue", function(evt){
> var item4change = self.__list.getModel().getItem(row);
> item4change.setChecked(evt.getData());
> });
>
> item.addToButtonContainer(checkBox);
> },
>
> createItemRenderer : function() {
> return new renderer.Button();
> }
> }
> );
>
> You have to create the checkBox on configureItem and add it into the
> ButtonContainer.
> Then you have to listen to "changeValue" event on it and change the checked
> state of the row item.
> Now the model updates itself and triggers a re-rendering of the list >> the
> checkbox displays the new state.
>
> Hope that helps to finally solve your problem.
>
> Greetz Christopher
>
>
>
>
>
>
>
>
>
> Am 31.01.2013 um 21:17 schrieb Ingo Bürk:
>
> Oh... I just found out by accident that there is no instance for every item,
> all list items share the same renderer instance. Oh man, what a
> misunderstanding! I guess in that case I don't have a choice but to traverse
> the list for the <selectedIndex>-th checkbox.
>
> On 01/31/2013 08:38 PM, Christopher Zündorf wrote:
>
> You can manage that by modifying your "configureItem" method.
>
> Here is the renderer I wrote and how to use it:
>
> this.list = new qx.ui.mobile.list.List({
> configureItem : function(item, data, row)
> {
>
> item.setTitle("title");
> item.setSubtitle("subtitle");
> item.setSelectable(false);
> item.setShowArrow(false);
>
> var button = new qx.ui.mobile.form.Button("buttontext");
> button("tap",function() {
> console.log("works");
> },this);
>
> item.addToButtonContainer(button);
> },
>
> createItemRenderer : function() {
> return new mssa.renderer.Bills();
> }
> }
> );
>
> qx.Class.define("renderer.Button",
> {
> extend : qx.ui.mobile.list.renderer.Abstract,
>
>
> /*
>
> *****************************************************************************
> CONSTRUCTOR
>
> *****************************************************************************
> */
>
> construct : function(layout)
> {
> this.base(arguments, layout || new qx.ui.mobile.layout.HBox().set({
> alignY : "middle"
> }));
> this._init();
> },
>
>
>
>
> /*
>
> *****************************************************************************
> MEMBERS
>
> *****************************************************************************
> */
>
> members :
> {
> __image : null,
> __title : null,
> __subtitle : null,
> __rightContainer : null,
> __buttonContainer : null,
>
>
> /**
> * Returns the image widget which is used for this renderer.
> *
> * @return {qx.ui.mobile.basic.Image} The image widget
> */
> getImageWidget : function() {
> return this.__image;
> },
>
>
> /**
> * Returns the title widget which is used for this renderer.
> *
> * @return {qx.ui.mobile.basic.Label} The title widget
> */
> getTitleWidget : function() {
> return this.__title;
> },
>
>
> /**
> * Returns the subtitle widget which is used for this renderer.
> *
> * @return {qx.ui.mobile.basic.Label} The subtitle widget
> */
> getSubtitleWidget : function()
> {
> return this.__subtitle;
> },
>
>
> /**
> * Sets the source of the image widget.
> *
> * @param source {String} The source to set
> */
> setImage : function(source)
> {
> this.__image.setSource(source)
> },
>
>
> /**
> * Sets the value of the title widget.
> *
> * @param title {String} The value to set
> */
> setTitle : function(title)
> {
> this.__title.setValue(title);
> },
>
>
> /**
> * Sets the value of the subtitle widget.
> *
> * @param subtitle {String} The value to set
> */
> setSubtitle : function(subtitle)
> {
> this.__subtitle.setValue(subtitle);
> },
>
>
> /**
> * Sets the value of the subtitle widget.
> *
> * @param subtitle {String} The value to set
> */
> addToButtonContainer : function(widget)
> {
> this.__buttonContainer.add(widget);
> },
>
>
> /**
> * Inits the widgets for the renderer.
> *
> */
> _init : function()
> {
> this.__image = this._createImage();
> this.add(this.__image);
>
> this.__rightContainer = this._createRightContainer();
> this.add(this.__rightContainer, {flex:1});
>
> this.__buttonContainer = this._createButtonContainer();
> this.add(this.__buttonContainer,{flex:0});
>
> this.__title = this._createTitle();
> this.__rightContainer.add(this.__title);
>
> this.__subtitle = this._createSubtitle();
> this.__rightContainer.add(this.__subtitle);
> },
>
>
> /**
> * Creates and returns the right container composite. Override this to
> adapt the widget code.
> *
> * @return {qx.ui.mobile.container.Composite} the right container.
> */
> _createRightContainer : function() {
> return new qx.ui.mobile.container.Composite(new
> qx.ui.mobile.layout.VBox());
> },
>
>
> /**
> * Creates and returns the button container composite. Override this to
> adapt the widget code.
> *
> * @return {qx.ui.mobile.container.Composite} the right container.
> */
> _createButtonContainer : function() {
> return new qx.ui.mobile.container.Composite(new
> qx.ui.mobile.layout.HBox());
> },
>
>
> /**
> * Creates and returns the image widget. Override this to adapt the
> widget code.
> *
> * @return {qx.ui.mobile.basic.Image} the image widget.
> */
> _createImage : function() {
> var image = new qx.ui.mobile.basic.Image();
> image.setAnonymous(true);
> image.addCssClass("list-itemimage");
> return image;
> },
>
>
> /**
> * Creates and returns the title widget. Override this to adapt the
> widget code.
> *
> * @return {qx.ui.mobile.basic.Label} the title widget.
> */
> _createTitle : function() {
> var title = new qx.ui.mobile.basic.Label();
> title.setWrap(false);
> title.addCssClass("list-itemlabel");
> return title;
> },
>
>
> /**
> * Creates and returns the subtitle widget. Override this to adapt the
> widget code.
> *
> * @return {qx.ui.mobile.basic.Label} the subtitle widget.
> */
> _createSubtitle : function() {
> var subtitle = new qx.ui.mobile.basic.Label();
> subtitle.setWrap(false);
> subtitle.addCssClass("subtitle");
> return subtitle;
> },
>
>
> // overridden
> reset : function()
> {
> this.__image.setSource(null);
> this.__title.setValue("");
> this.__subtitle.setValue("");
> this.__buttonContainer.removeAll();
> }
> },
>
> /*
>
> *****************************************************************************
> DESTRUCTOR
>
> *****************************************************************************
> */
>
> destruct : function()
> {
> this._disposeObjects("__image", "__title", "__subtitle",
> "__rightContainer", "__buttonContainer");
> }
> });
>
>
> Am 31.01.2013 um 20:29 schrieb Ingo Bürk:
>
> Hi Christopher,
>
> using the css class sure is possible. However, while I'm able to control the
> HTML element of selected items, it won't allow me to actually control the
> list item (in this case the CheckBoxListItem instance), but I was wondering
> if there's a way to do that? It just feels "hacky" to filter for a css class,
> get the corresponding <li> element and then select the checkbox within that
> element. I'd rather control the qx instance.
>
> Also I was wondering how you managed to add events to your buttons in the
> button list. If that's not a problem for the project you wrote it for, maybe
> you could share the implementation of that list? I sure could learn from it.
>
> Thank your for all you help so far.
>
> Kind Regards
> Ingo
>
>
> On 01/31/2013 01:52 PM, Christopher Zündorf wrote:
>
> As a quick fix, you could use the "selected" state of the menu as a
> indicator, which list item is selected.
>
> The css class
>
> "item-selected"
>
> on the list item could help you. You can take a part of the implementation of
> qx.ui.mobile.dialog.Menu for this purpose.
>
> Greetz Christopher
>
>
> Am 31.01.2013 um 10:28 schrieb Ingo Bürk:
>
> Hi Christopher,
>
> I'm aware that the native box is intended to be hidden. I just pointed out
> that it is at least there, but the replacement-box isn't. As for the
> container: I had already tried that and it didn't change anything. I should
> have mentioned that, sorry. Adding buttons, labels etc. instead of a checkbox
> works fine, by the way. Only checkboxes (and radio buttons) seem to have a
> problem.
>
> Regards
> Ingo
>
> On 01/31/2013 10:23 AM, Christopher Zündorf wrote:
>
> Hi again,
>
> I have had a look at your example, and your problem.
>
> First: the native checkbox input is intended to be hidden. In many browser
> the checkbox styling can not be changed, and that is why we have an overlay
> for this checkbox with CSS pseudo elements.
>
> You problem might be caused by the fact that your check box is not wrapped by
> a composite container. Without the container, the label and the sublabel
> takes the whole space of the list item entry.
>
> I written a renderer for an application which display buttons inside a list
> item. The important methods are:
>
> [...]
> extend : qx.ui.mobile.list.renderer.Abstract,
> [...]
> /**
> * Inits the widgets for the renderer.
> *
> */
> _init : function()
> {
> this.__image = this._createImage();
> this.add(this.__image);
>
> this.__rightContainer = this._createRightContainer();
> this.add(this.__rightContainer, {flex:1});
>
> this.__buttonContainer = this._createButtonContainer();
> this.add(this.__buttonContainer,{flex:0});
>
> this.__title = this._createTitle();
> this.__rightContainer.add(this.__title);
>
> this.__subtitle = this._createSubtitle();
> this.__rightContainer.add(this.__subtitle);
> },
> [...]
> /**
> * Creates and returns the button container composite. Override this to
> adapt the widget code.
> *
> * @return {qx.ui.mobile.container.Composite} the right container.
> */
> _createButtonContainer : function() {
> return new qx.ui.mobile.container.Composite(new
> qx.ui.mobile.layout.HBox());
> },
> [...]
>
>
> Please try to wrap your checkbox by a composite, just like in the example.
> That might help solving your problem.
>
> Greetz Christopher
>
>
>
>
> Am 30.01.2013 um 20:24 schrieb Ingo Bürk:
>
> http://www.airblader.de/qxCheckBoxList/index.html
> <http://www.airblader.de/qxCheckBoxList/index.html#><http://www.airblader.de/qxCheckBoxList/index.html#><http://www.airblader.de/qxCheckBoxList/index.html#><http://www.airblader.de/qxCheckBoxList/index.html#><http://www.airblader.de/qxCheckBoxList/index.html#><http://www.airblader.de/qxCheckBoxList/index.html#><http://www.airblader.de/qxCheckBoxList/index.html#><http://www.airblader.de/qxCheckBoxList/index.html#>
>
>
>
>
>
>
> ------------------------------------------------------------------------------
> Everyone hates slow websites. So do we.
> Make your web apps faster with AppDynamics
> Download AppDynamics Lite for free today:
> http://p.sf.net/sfu/appdyn_d2d_jan
>
>
>
> _______________________________________________
> qooxdoo-devel mailing list
> [email protected]<mailto:[email protected]><mailto:[email protected]><mailto:[email protected]><mailto:[email protected]><mailto:[email protected]><mailto:[email protected]><mailto:[email protected]>
> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
>
>
> ------------------------------------------------------------------------------
> Everyone hates slow websites. So do we.
> Make your web apps faster with AppDynamics
> Download AppDynamics Lite for free today:
> http://p.sf.net/sfu/appdyn_d2d_jan_______________________________________________
> qooxdoo-devel mailing list
> [email protected]<mailto:[email protected]><mailto:[email protected]><mailto:[email protected]>
> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
>
>
>
>
>
>
> ------------------------------------------------------------------------------
> Everyone hates slow websites. So do we.
> Make your web apps faster with AppDynamics
> Download AppDynamics Lite for free today:
> http://p.sf.net/sfu/appdyn_d2d_jan
>
>
>
> _______________________________________________
> qooxdoo-devel mailing list
> [email protected]<mailto:[email protected]><mailto:[email protected]><mailto:[email protected]>
> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
>
>
> ------------------------------------------------------------------------------
> Everyone hates slow websites. So do we.
> Make your web apps faster with AppDynamics
> Download AppDynamics Lite for free today:
> http://p.sf.net/sfu/appdyn_d2d_jan_______________________________________________
> qooxdoo-devel mailing list
> [email protected]<mailto:[email protected]>
> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
>
>
>
>
>
>
> ------------------------------------------------------------------------------
> Everyone hates slow websites. So do we.
> Make your web apps faster with AppDynamics
> Download AppDynamics Lite for free today:
> http://p.sf.net/sfu/appdyn_d2d_jan
>
>
>
> _______________________________________________
> qooxdoo-devel mailing list
> [email protected]<mailto:[email protected]>
> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
>
>
> ------------------------------------------------------------------------------
> Everyone hates slow websites. So do we.
> Make your web apps faster with AppDynamics
> Download AppDynamics Lite for free today:
> http://p.sf.net/sfu/appdyn_d2d_jan_______________________________________________
> qooxdoo-devel mailing list
> [email protected]
> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
>
>
>
>
> ------------------------------------------------------------------------------
> Everyone hates slow websites. So do we.
> Make your web apps faster with AppDynamics
> Download AppDynamics Lite for free today:
> http://p.sf.net/sfu/appdyn_d2d_jan
>
>
> _______________________________________________
> qooxdoo-devel mailing list
> [email protected]
> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
------------------------------------------------------------------------------
Everyone hates slow websites. So do we.
Make your web apps faster with AppDynamics
Download AppDynamics Lite for free today:
http://p.sf.net/sfu/appdyn_d2d_jan
_______________________________________________
qooxdoo-devel mailing list
[email protected]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
