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!
