0

Sidebarview Scrollbar needed

HI,

I am new in YDK development.

I am having a problem with sidebarview. I create a list of buttons on sidebar dynamically. Typically it may be 20-100 items. So when I create 100 buttons, I cannot see all the buttons in my simulator sidebar view. That is, I need to add the scrollbar to my sidebar view. How can I add scroll to my side bar view?

by
2 Replies
  • QUOTE (Mahatab @ Mar 19 2011, 08:54 PM) <{POST_SNAPBACK}>
    HI,

    I am new in YDK development.

    I am having a problem with sidebarview. I create a list of buttons on sidebar dynamically. Typically it may be 20-100 items. So when I create 100 buttons, I cannot see all the buttons in my simulator sidebar view. That is, I need to add the scrollbar to my sidebar view. How can I add scroll to my side bar view?

    You'll want to use a grid that will contain the text buttons and then attach a page indicator to the grid to allow you to page through the dataset (the text buttons, in this case). You can see some sample code in the Toolbox widget that comes bundled with the wdk. I've altered that code to use text buttons and a page indicator.

    First, open the file ~/TVWidgets/Konfabulator-Latest-540/data/Widgets/Installed/com.yahoo.widgets.tv.toolbox.widget/Contents/Javascript/views/ToolboxGridTestView.js in a text editor.

    Put the following code after the listGrid definition:

    CODE
            this.controls.pager = new KONtx.control.PageIndicator({
    styles: {
    vOffset: this.controls.listGrid.outerHeight
    }
    }).appendTo(this);
    this.controls.listGrid.attachAccessories(this.controls.pager);


    Replace the _cellCreator and _cellUpdater definitions with the following:

    CODE
            _cellCreator: function() {
    var cell = new KONtx.control.GridCell({
    styles: {
    height: KONtx.utility.scale(35),
    width: this.width,
    },
    events: {
    onSelect: function(event) {
    log("You selected Button with original 'i' # of: " + this.originalButtonNumber);
    }
    }
    });
    cell.textLabel = new KONtx.control.TextButton({
    styles: {
    color: '#FFFFFF',
    fontSize: KONtx.utility.scale(18),
    }
    }).appendTo(cell);
    return cell;
    },

    _cellUpdater: function(cell, dataitem) {
    cell.textLabel.setText(dataitem.label);
    cell.originalButtonNumber = dataitem.buttonNumber;
    },


    Save the file and reload the Latest Production simulator.

    That should get you started.
    0
  • Thank you very much. It really helped me a lot.
    0

Recent Posts

in Design / Interaction - Yahoo! TV Widgets