Starter Step

Thumbnail Viewer for Titanium Mobile

Posted on: February 23, 2011

We have started looking at Appcelerator’s Titanium Mobile SDK for developing iPhone and Android apps using Javascript…unfortunately they still have a ways to go with the promise of being cross-platform in supporting iPhone and Android with a single code base.  However if you are just targeting iPhone, then you must take a look at the latest Titanium 1.6 SDK.

We did however find a vital UI component missing from Titanium – the ability to view remote images (thumbnails) in a grid-like fashion with built in paging.  We knew that this would be a showstopper for us so I took a stab at building my own by wiring together pieces of the current Titanium UI components.  To try it out just follow the getting started instructions on Appcelerator’s site and then copy and paste the code below into the app.js file that is generated for you.  Please note that this only works on a Mac since it’s targeting the iPhone.  And it’s not the prettiest code and could use some refactoring before going prime-time.

The thumbnail viewer requires a plixi user id.  It uses this id to call the plixi api and retrieve a user’s uploaded photos for viewing as thumbnails.  The example below uses Arsenio Hall’s plixi id 🙂

function createThumbnailViewer(props) {

 var that = {};
 var xhr = Titanium.Network.createHTTPClient();

 var photosWindow = Titanium.UI.createWindow({
   fullscreen:false,
   backgroundColor:'#fff',
   title:props.title
 });
 that.window = photosWindow;

 var refreshButton = Ti.UI.createButton({
   title:'Refresh',
   width:40,
   height:30
 });
 var photosContainer = Titanium.UI.createView();

 var imageUrlLists = [];
 var index = -1;
 var total = 0;

 var heightSpacer = 3.5;
 var widthSpacer = 8;
 var topOffset = heightSpacer;
 var imageDim = 70;
 var pageSize = 20;
 for (var i = 0,count = pageSize; i < count; i += 4) {
   var leftOffset = widthSpacer;
   for (var j = 0; j < 4; j++) {
     var photoView = Ti.UI.createImageView({
       top:topOffset,
       left:leftOffset,
       height:imageDim,
       width:imageDim
     });
     photosContainer.add(photoView);
     leftOffset += imageDim + widthSpacer;
   }
   topOffset += imageDim + heightSpacer;
 }

 photosWindow.add(photosContainer);

 var flexSpace = Titanium.UI.createButton({
   systemButton:Titanium.UI.iPhone.SystemButton.FLEXIBLE_SPACE
 });

 var previousButton = Ti.UI.createButton({
   title:'Prev',
   width:50,
   height:10
 });
 previousButton.addEventListener('click', function() {
   previous();
 });
 var nextButton = Ti.UI.createButton({
   title:'Next',
   width:50,
   height:10
 });
 nextButton.addEventListener('click', function() {
   next();
 });
 var nativespinner = Titanium.UI.createButton({
   systemButton:Titanium.UI.iPhone.SystemButton.SPINNER
 });

 var labelContainer = Ti.UI.createView({width:100,height:20});

 var label = Ti.UI.createLabel({
 color:'#fff'
 });

 labelContainer.add(label);

 photosWindow.toolbar = [previousButton, flexSpace, labelContainer, flexSpace, nextButton];

 refreshButton.addEventListener('click', function() {
   that.start();
 });

 that.start = function() {
   index = -1;
   imageUrlLists = [];
   total = 0;
   next();
 }

 photosWindow.rightNavButton = refreshButton;

 function next() {
   index++;
   if (index >= imageUrlLists.length) {
     load();
   } else {
     applyImageUrls();
   }
 }

 function previous() {
   index--;
   if (index >= 0) {
     applyImageUrls();
   }
 }

 function applyImageUrls() {
   var imageUrlList = imageUrlLists[index];
   label.text = (index * pageSize + imageUrlList.length) + " of " + total;
   var photos = photosContainer.children;
   var i = 0,count = imageUrlList.length;
   while (i < count) {
     photos[i].image = imageUrlList[i];
     i++;
   }
   if (count < pageSize) {
     while (i < pageSize) {
       photos[i].image = null;
       i++;
     }
   }
   previousButton.enabled = index > 0;
   nextButton.enabled = imageUrlLists.length * pageSize <= total;
 }

 function load() {
   xhr.onload = function() {
     var json = JSON.parse(this.responseText);
     var list = json.List;
     total = json.CollectionCount;
     var imageUrlList = [];
     var i = 0, count = list.length;
     while (i < count) {
       imageUrlList[i] = list[i].ThumbnailUrl;
       i++;
     }
     imageUrlLists[index] = imageUrlList;
     photosWindow.toolbar = [previousButton, flexSpace, labelContainer, flexSpace, nextButton];
     applyImageUrls();
   };
   previousButton.enabled = false;
   nextButton.enabled = false;
   photosWindow.toolbar = [previousButton, flexSpace, nativespinner, flexSpace, nextButton];
   var url = "http://api.plixi.com/api/tpapi.svc/json/users/"+props.plixiUserId+"/photos?getcount=true&ps=" + pageSize + "&ind=" + (index * pageSize);
   Ti.API.info("Calling url  = " + url);
   xhr.open("GET", url);
   xhr.send();
 }
 return that;
}

var thumbnailViewer = createThumbnailViewer({
 plixiUserId:'6236650',
 title:'Aresenio Hall'
});

var navGroup = Ti.UI.iPhone.createNavigationGroup({
 window:thumbnailViewer.window
});

var main = Ti.UI.createWindow();
main.add(navGroup);
main.open();

thumbnailViewer.start();
Advertisements

4 Responses to "Thumbnail Viewer for Titanium Mobile"

Hello. I like this blog, as i wanted to get my photos from a db in a grid format. i dont understand though what this plixiUserId is, can you please explain or refer me to a link. thanks

carah
carahdose@gmail.com

Hello, how would I make these load from a local file?

Nice, need something like this, altough i need to extend it with a fullview. 🙂 Thanks.

how can i have the same result with just a remote folder?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


  • Dave: I can tell you're a ruby guy because you forgot the 'return' keyword. Thanks for the tip though!
  • Chandrashekhar H M: Hi, Thanks its working fine in iOS 6 but not in iOS 7.0. Any Suggestion on this.
  • Coeur: To change a rootViewController, without all this TVNavigationController : myNewRoot = [[UIViewController alloc] init]; myNavigationController.view
%d bloggers like this: