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:<br><br><div>this.controls.resultsPager = new KONtx.control.PageIndicator({<div> styles: {<div> vOffset: this.controls.resultsGrid.outerHeight<div> } <div>}).appendTo(this.controls.results_con);<div>this.controls.resultsGrid.attachAccessories(this.controls.resultsPager);<br><br>Of course, you can continue to control the pager like any other control<br><div class="quote "><div class="quotetop ">QUOTE<cite>(buddy @ 22 Sep 2011 9:17 AM)</cite><blockquote class="quotemain">Hey Julie,<br><br>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. <br><br>Here is some working code from an image grid I am using:<br> --------------------- C O D E ------------------------------------------------------------------------<br>//FIRST, The control. This is init in the createView function<br><div>this.controls.photoGrid = new KONtx.control.Grid({<div> columns: 3,<div> rows: 3,<div> carousel: true,<div><span class="Apple-tab-span" style="white-space:pre;"> </span>cellCreator: this._photoCellCreator,<div><span class="Apple-tab-span" style="white-space:pre;"> </span>cellUpdater: this._photoCellUpdater,<div> styles: {<span class="Apple-tab-span" style="white-space:pre;"> </span><div><span class="Apple-tab-span" style="white-space:pre;"> </span>height:275,<div><span class="Apple-tab-span" style="white-space:pre;"> </span>//vOffset:this.controls.citySelector_con.outerHeight,<div><span class="Apple-tab-span" style="white-space:pre;"> </span>width: this.width,<div><span class="Apple-tab-span" style="white-space:pre;"> </span>zOrder:2,<div> },<div> manageWaitIndicator: true<div> }).appendTo(this.controls.photo_con);<div><br>//The cellCreator function is called to "build" the grid. First create the cell object then fill it as you would any other control.<br>_photoCellCreator: function() {<div><span class="Apple-tab-span" style="white-space:pre;"> </span>var cell = new KONtx.control.GridCell({<div> styles: {<div> height: KONtx.utility.scale(18),<div> width: this.width,<div> },<div> events: {<div><span class="Apple-tab-span" style="white-space:pre;"> </span>onSelect: function(event) {<div> <span class="Apple-tab-span" style="white-space:pre;"> </span>//store the photo info for the next view. Avoid this.persist which gave issues whn viewing multiple photos<div> <span class="Apple-tab-span" style="white-space:pre;"> </span>photoInfo = {<div> <span class="Apple-tab-span" style="white-space:pre;"> </span>'targetIndex' : this.GRIDINDEX,<div> <span class="Apple-tab-span" style="white-space:pre;"> </span>'targetID' : this.ID,<div> <span class="Apple-tab-span" style="white-space:pre;"> </span>'targetURL' : this.URL,<div> <span class="Apple-tab-span" style="white-space:pre;"> </span>'targetUID' : this.UID, <span class="Apple-tab-span" style="white-space:pre;"> </span><div> };<div> <span class="Apple-tab-span" style="white-space:pre;"> </span><div> <span class="Apple-tab-span" style="white-space:pre;"> </span>photoInfo=JSON.stringify(photoInfo);<div> <span class="Apple-tab-span" style="white-space:pre;"> </span>KONtx.messages.store('currentPhoto', photoInfo);<div> <span class="Apple-tab-span" style="white-space:pre;"> </span>KONtx.application.loadView('view-FullPhoto');<div><span class="Apple-tab-span" style="white-space:pre;"> </span>}<div><span class="Apple-tab-span" style="white-space:pre;"> </span>}<div> }); <div><span class="Apple-tab-span" style="white-space:pre;"> </span>cell.cell_img = new KONtx.element.Image({<div><span class="Apple-tab-span" style="white-space:pre;"> </span>src:'',<div><span class="Apple-tab-span" style="white-space:pre;"> </span>styles:{<div><span class="Apple-tab-span" style="white-space:pre;"> </span>hAlign:'center',<div><span class="Apple-tab-span" style="white-space:pre;"> </span>vAlign:'center',<div><span class="Apple-tab-span" style="white-space:pre;"> </span>}<div> }).appendTo(cell);<div><span class="Apple-tab-span" style="white-space:pre;"> </span>return cell;<div> },<div>//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<div>_photoCellUpdater: function(cell, dataitem) {<br><div><span class="Apple-tab-span" style="white-space:pre;"> </span>cell.cell_img.src=dataitem.thumbURL;<div><span class="Apple-tab-span" style="white-space:pre;"> </span>cell.GRIDINDEX=dataitem.gridIndex<div><span class="Apple-tab-span" style="white-space:pre;"> </span>cell.URL=dataitem.url;<div><span class="Apple-tab-span" style="white-space:pre;"> </span>cell.ID=dataitem.id;<div><span class="Apple-tab-span" style="white-space:pre;"> </span>cell.UID=dataitem.uid;<div> },<div>//This is the code where I build my photo's dataset and apply it to the grid.<br>//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<br><br><div>for(var nona in photoData){<div> photo_ar[nona]={<div><span class="Apple-tab-span" style="white-space:pre;"> </span>"id":photoData[nona].id,<div><span class="Apple-tab-span" style="white-space:pre;"> </span>"gridIndex" : nona,<div><span class="Apple-tab-span" style="white-space:pre;"> </span>"thumbURL":photoData[nona].thumbUrl+'/225',<div><span class="Apple-tab-span" style="white-space:pre;"> </span>"uid":photoData[nona].uid,<div><span class="Apple-tab-span" style="white-space:pre;"> </span>"url" : photoData[nona].publicUrl+'/15',//photoData[nona].thumbUrl+'/619',<div> };<div>}<br>photosData=JSON.stringify(photo_ar);<div>KONtx.messages.store('photostripData', photosData);<div>this.self.controls.photoGrid.changeDataset(photo_ar)--------------------- C O D E ------------------------------------------------------------------------<br><br>Sorry for the wall of text. If you haven't developed a solution, hopefully this will point you in the right direction :)<br><div class="quote "><div class="quotetop ">QUOTE<cite>(Julie @ 1 Sep 2011 9:50 AM)</cite><blockquote class="quotemain">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...<br><br>[ top of interface with home button and logo]<br>[ title of section - recent videos ]<br>[ a large image with arrows left and right ]<br>[ title of image ]<br>[ oooooooooooo (pagination dots) ]<br><br>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:<br><br><div> this.controls.pageindicator = new KONtx.control.PageIndicator({<div><span class="Apple-tab-span" style="white-space:pre;"> </span>id: "recent_videos.PageIndicator",<div><span class="Apple-tab-span" style="white-space:pre;"> </span>styles:{<div><span class="Apple-tab-span" style="white-space:pre;"> </span>vAlign: "bottom",<div><span class="Apple-tab-span" style="white-space:pre;"> </span>vOffset: "this.height" <div><span class="Apple-tab-span" style="white-space:pre;"> </span>}<div><span class="Apple-tab-span" style="white-space:pre;"> </span><span class="Apple-tab-span" style="white-space:pre;"> </span>}).appendTo(this); <br><br>and that doesn't even show up. Thanks!</div></div></div></div></div></div></div></blockquote></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></blockquote></div></div></div></div></div></div></div></div>
