Back to Design / Interaction - Yahoo! TV Widgets Forum
0

composite widgets and focus

I want to create a composite UI element. This is a class that provides a reusable layout of labels and buttons which can be placed inside a sidebar (or I suppose a full-screen view).

The current version of it looks like this:
CODE
var BTVOfferingWidget = new KONtx.Class(
{
    ClassName: 'BTVOfferingWidget',
    Extends: KONtx.element.Container,

    config: {
        focus: true
    },

    placeholder: 0,
    _createContent: function()
    {
        log("BTVOfferingWidget._createContent()");

        this.controls = {};

        var optionArray = this.config.optionArray;

        var l1 = this.controls.l1 = new KONtx.element.Text({
            data: this.config.debugLabel,
            styles: {
                wrap:true,
                width: this.width,
                color: '#d0ffd0',
                vOffset: 0//this.menuTitle.outerHeight
            }
        }).appendTo(this);

        log("encoding options ["+optionArray.length+"]");

        this.controls.toggle = new KONtx.control.ToggleButton({
            label: "Encoding: ",
            value: "0",
            options: optionArray,
            styles: {
                vOffset: l1.outerHeight,
                width: this.width
            }
        }).appendTo(this);

    }
}
    );

My problems with it currently are
1) the ToggleButton inside can't receive focus.
2) I have to manually call _createContent

I have experimented with deriving from a KONtx.element.Container and a KONtx.control.Button

The YWE Developer Guide has no examples of creating your own reusable composite widgets and browsing the source for existing widgets does not exactly make things obvious.

PageIndicator isn't a composite widget. Neither is Grid. Dialogs appear to be from Mars. The keyboard looks like it should be composite, but the source for ReuseKeyboard.js makes my head spin. There are many other elements and controls I have not yet experimented with enough to know if they could be considered composite widgets.


What is the YWE idiom for reusable composite interface elements?

by
Report Abuse
5 Replies
  • This is what I use for composite components and it works fine for me. I have a grid I append in the _createContent method, and I can receive focus. Granted, I have never tried a ToggleButton as you are. The KONtx.control.Header uses this same pattern, but does only append Text.

    You do not want to set focus to true as in your example because you are saying that you want the entire container to be able to receive focus, when all you want are the elements inside to receive focus.

    CODE
    CompositeComponent = new KONtx.Class({
    	ClassName : 'CompositeComponent',
    	Extends : KONtx.element.Container,

    	initialize : function() {
    		this.parent();
    		this._createContent();
    	},

    	_createContent : function() {
               // Add components in here            
           }
    })
    Report Abuse
    0
  • Someone posted their own controls here:
    http://developer.yahoo.net/forum/index.php...mp;hl=Community

    I don't know if this is the "right" way to do it but it may provide some examples.
    Report Abuse
    0
  • I think what you have is right. The issue is the "Focus: true" on the container. The Toggle Button cannot gain Focus because the Container stealing the show.

    Have you tried turning the focus off on the Container?

    There is a longer route which is changing the focus manually during the Container.onFocus()

    Something like
    CODE
    var BTVOfferingWidget = new KONtx.Class(
    {
        ClassName: 'BTVOfferingWidget',
        Extends: KONtx.element.Container,

        config: {
            focus: false
        },

        onFocus: function(){

    }

        placeholder: 0,
        _createContent: function()
        {
            .......

            this.controls.toggle = new KONtx.control.ToggleButton({
                label: "Encoding: ",
                value: "0",
                options: optionArray,
                styles: {
                    vOffset: l1.outerHeight,
                    width: this.width
                }
            }).appendTo(this);

        }
    }
        );
    Report Abuse
    0
  • Use something this. Hopefully, this gets you pointed in the right direction.

    [RANT] It is dumb we cannot edit our other posts.... [RANT]

    CODE
    var BTVOfferingWidget = new KONtx.Class(
    {
        ClassName: 'BTVOfferingWidget',
        Extends: KONtx.element.Container,

        config: {
            focus: true
        },

        onFocus: function(){
        this.controls.toggle.focus();
    }

        placeholder: 0,
        _createContent: function()
        {
            .......

            this.controls.toggle = new KONtx.control.ToggleButton({
                label: "Encoding: ",
                value: "0",
                options: optionArray,
                styles: {
                    vOffset: l1.outerHeight,
                    width: this.width
                }
            }).appendTo(this);

        }
    }
        );
    Report Abuse
    0
  • [RANT] It is dumb we cannot edit our other posts.... [RANT]

    Agree. Want me to fix it for you?

    -Jeremy
    Report Abuse
    0
Ask a Question

Recent Posts

in Design / Interaction - Yahoo! TV Widgets