0

absolute newbie needs help with a series of images and pagination

I've looked at the sample widgets and thus far don't see one that does what I need it to do. Here's a rough example of what I need to do on my main view...

[ top of interface with home button and logo]
[ title of section - recent videos ]
[ a large image with arrows left and right ]
[ title of image ]
[ oooooooooooo (pagination dots) ]

I can't figure out how to do this. I think I need a grid and pagination, but can't find an example. Can someone point me in the right direction? So far I just have this:

                 this.controls.pageindicator = new KONtx.control.PageIndicator({
id: "recent_videos.PageIndicator",
styles:{
vAlign: "bottom",
vOffset: "this.height"  
}
}).appendTo(this); 

and that doesn't even show up. Thanks!

by
2 Replies
  • Hey Julie,

    Were you able to get this problem resolved?  What you're proposing seems pretty doable.  Depending on your intentions for this widget, you may not even need a grid/pagination.  Essentially, if you want to load all the data upfront and allow the user to quickly switch from image to image, a grid may be more up your alley.  But if you prefer a nonexistant initial load with small loads on every arrow click, you can skip the grid/pagination entirely.  

    Here is some working code from an image grid I am using:
    --------------------- C O D E ------------------------------------------------------------------------
    //FIRST, The control.  This is init in the createView function
    this.controls.photoGrid = new KONtx.control.Grid({
            columns: 3,
            rows: 3,
            carousel: true,
    cellCreator: this._photoCellCreator,
    cellUpdater: this._photoCellUpdater,
            styles: {
    height:275,
    //vOffset:this.controls.citySelector_con.outerHeight,
    width: this.width,
    zOrder:2,
            },
            manageWaitIndicator: true
        }).appendTo(this.controls.photo_con);

    //The cellCreator function is called to "build" the grid.  First create the cell object then fill it as you would any other control.
    _photoCellCreator: function() {
    var cell = new KONtx.control.GridCell({
                styles: {
                        height: KONtx.utility.scale(18),
                        width: this.width,
                },
                events: {
    onSelect: function(event) {
                //store the photo info for the next view.  Avoid this.persist which gave issues whn viewing multiple photos
                photoInfo = {
                    'targetIndex' : this.GRIDINDEX,
                'targetID' : this.ID,
                    'targetURL' : this.URL,
                    'targetUID' : this.UID,                
                        };
               
                photoInfo=JSON.stringify(photoInfo);
                KONtx.messages.store('currentPhoto', photoInfo);
                KONtx.application.loadView('view-FullPhoto');
    }
    }
        });       
    cell.cell_img = new KONtx.element.Image({
    src:'',
    styles:{
    hAlign:'center',
    vAlign:'center',
    }
            }).appendTo(cell);
    return cell;
        },
    //This is the cellUpdater function.  this function is invoked via     a call tot the grid's changeDataset function.  This will fill each cell with content
    _photoCellUpdater: function(cell, dataitem) {
    cell.cell_img.src=dataitem.thumbURL;
    cell.GRIDINDEX=dataitem.gridIndex
    cell.URL=dataitem.url;
    cell.ID=dataitem.id;
    cell.UID=dataitem.uid;
        },
    //This is the code where I build my photo's dataset and apply it to the grid.
    //It's part of a larger function but should show how I took data, built the ARRAY for the gridUpdate and use the changeDataset function

    for(var nona in photoData){
         photo_ar[nona]={
    "id":photoData[nona].id,
    "gridIndex" : nona,
    "thumbURL":photoData[nona].thumbUrl+'/225',
    "uid":photoData[nona].uid,
    "url" : photoData[nona].publicUrl+'/15',//photoData[nona].thumbUrl+'/619',
        };
    }
    photosData=JSON.stringify(photo_ar);
    KONtx.messages.store('photostripData', photosData);
    this.self.controls.photoGrid.changeDataset(photo_ar)--------------------- C O D E ------------------------------------------------------------------------

    Sorry  for the wall of text.  If you haven't developed a solution, hopefully this will point you in the right direction :)
    QUOTE(Julie @ 1 Sep 2011 9:50 AM)
    I've looked at the sample widgets and thus far don't see one that does what I need it to do. Here's a rough example of what I need to do on my main view...

    [ top of interface with home button and logo]
    [ title of section - recent videos ]
    [ a large image with arrows left and right ]
    [ title of image ]
    [ oooooooooooo (pagination dots) ]

    I can't figure out how to do this. I think I need a grid and pagination, but can't find an example. Can someone point me in the right direction? So far I just have this:

                     this.controls.pageindicator = new KONtx.control.PageIndicator({
    id: "recent_videos.PageIndicator",
    styles:{
    vAlign: "bottom",
    vOffset: "this.height"  
    }
    }).appendTo(this); 

    and that doesn't even show up. Thanks!
    0
  • Oops, I forgot one thing.  If you are intent on using the pagination control or find it up your alley, you will need to use the  attachAccessories command to make it usable:

    this.controls.resultsPager = new KONtx.control.PageIndicator({
            styles: {
                    vOffset: this.controls.resultsGrid.outerHeight
            }  
    }).appendTo(this.controls.results_con);
    this.controls.resultsGrid.attachAccessories(this.controls.resultsPager);

    Of course, you can continue to control the pager like any other control
    QUOTE(buddy @ 22 Sep 2011 9:17 AM)
    Hey Julie,

    Were you able to get this problem resolved?  What you're proposing seems pretty doable.  Depending on your intentions for this widget, you may not even need a grid/pagination.  Essentially, if you want to load all the data upfront and allow the user to quickly switch from image to image, a grid may be more up your alley.  But if you prefer a nonexistant initial load with small loads on every arrow click, you can skip the grid/pagination entirely.  

    Here is some working code from an image grid I am using:
    --------------------- C O D E ------------------------------------------------------------------------
    //FIRST, The control.  This is init in the createView function
    this.controls.photoGrid = new KONtx.control.Grid({
            columns: 3,
            rows: 3,
            carousel: true,
    cellCreator: this._photoCellCreator,
    cellUpdater: this._photoCellUpdater,
            styles: {
    height:275,
    //vOffset:this.controls.citySelector_con.outerHeight,
    width: this.width,
    zOrder:2,
            },
            manageWaitIndicator: true
        }).appendTo(this.controls.photo_con);

    //The cellCreator function is called to "build" the grid.  First create the cell object then fill it as you would any other control.
    _photoCellCreator: function() {
    var cell = new KONtx.control.GridCell({
                styles: {
                        height: KONtx.utility.scale(18),
                        width: this.width,
                },
                events: {
    onSelect: function(event) {
                //store the photo info for the next view.  Avoid this.persist which gave issues whn viewing multiple photos
                photoInfo = {
                    'targetIndex' : this.GRIDINDEX,
                'targetID' : this.ID,
                    'targetURL' : this.URL,
                    'targetUID' : this.UID,                
                        };
               
                photoInfo=JSON.stringify(photoInfo);
                KONtx.messages.store('currentPhoto', photoInfo);
                KONtx.application.loadView('view-FullPhoto');
    }
    }
        });       
    cell.cell_img = new KONtx.element.Image({
    src:'',
    styles:{
    hAlign:'center',
    vAlign:'center',
    }
            }).appendTo(cell);
    return cell;
        },
    //This is the cellUpdater function.  this function is invoked via     a call tot the grid's changeDataset function.  This will fill each cell with content
    _photoCellUpdater: function(cell, dataitem) {
    cell.cell_img.src=dataitem.thumbURL;
    cell.GRIDINDEX=dataitem.gridIndex
    cell.URL=dataitem.url;
    cell.ID=dataitem.id;
    cell.UID=dataitem.uid;
        },
    //This is the code where I build my photo's dataset and apply it to the grid.
    //It's part of a larger function but should show how I took data, built the ARRAY for the gridUpdate and use the changeDataset function

    for(var nona in photoData){
         photo_ar[nona]={
    "id":photoData[nona].id,
    "gridIndex" : nona,
    "thumbURL":photoData[nona].thumbUrl+'/225',
    "uid":photoData[nona].uid,
    "url" : photoData[nona].publicUrl+'/15',//photoData[nona].thumbUrl+'/619',
        };
    }
    photosData=JSON.stringify(photo_ar);
    KONtx.messages.store('photostripData', photosData);
    this.self.controls.photoGrid.changeDataset(photo_ar)--------------------- C O D E ------------------------------------------------------------------------

    Sorry  for the wall of text.  If you haven't developed a solution, hopefully this will point you in the right direction :)
    QUOTE(Julie @ 1 Sep 2011 9:50 AM)
    I've looked at the sample widgets and thus far don't see one that does what I need it to do. Here's a rough example of what I need to do on my main view...

    [ top of interface with home button and logo]
    [ title of section - recent videos ]
    [ a large image with arrows left and right ]
    [ title of image ]
    [ oooooooooooo (pagination dots) ]

    I can't figure out how to do this. I think I need a grid and pagination, but can't find an example. Can someone point me in the right direction? So far I just have this:

                     this.controls.pageindicator = new KONtx.control.PageIndicator({
    id: "recent_videos.PageIndicator",
    styles:{
    vAlign: "bottom",
    vOffset: "this.height"  
    }
    }).appendTo(this); 

    and that doesn't even show up. Thanks!
    0

Recent Posts

in Getting Started / Beginners - Yahoo! TV Widgets