Appcelerator Titanium Scrollview Swipe functionality

I have recently started looking into the development of Appcelerator titanium for iphone and ipad. I have been finding the tool great for RAD development of mobile applications. The major problem i have faced with this platform is the memory management stuff. The inbuilt memory management is something quite unsatisfactory. Today I am going to discuss one such problem that I faced with appcelerator.

I wanted to have a simple functionality of swiping through the images in appcelerator, something that is very common in appcelrator. So I decided to use the most obvious choice ScrollableView. But on using the scrollableview the memory started shouting since I had approximately 150 - 200 images. Now the question was how to do this, I spent around 4 days searching blogs and all, but no answers. So I decided to find a solution.

The simplest logical answer was to have three imageviews in the scrollview each at index 0, 1, 2. The image displayed on the screen is always at index 1. Now on the swipe of right to left you should remove the view at position 0 and assign the view at position 1 to position 0, the view at position 2 to position 1 and the view that was at position 0 to position 2 and provide the view with new image. Similarly follow the reverse case for swiping form left to right. Attached is my code of App.js

// this sets the background color of the master UIView (when there are no windows/tab groups on it)

Titanium.UI.setBackgroundColor('#000');

//

// create base UI tab and root window

//

var win1 = Titanium.UI.createWindow({

title:'Tab 1',

backgroundColor:'#fff'

});

var imageViewArray = [];

var imageNameArray = [];

var nextImageIndex;

for(var i = 0; i < 3 ; i++){

var imageView1 = Titanium.UI.createImageView({

//image: imagePath

});

imageViewArray[i] = imageView1;

}

var scrollingView = Titanium.UI.createScrollableView({

//contentWidth:1280,

//contentHeight:450,

views:imageViewArray,

width: 310,

height: 450,

top: 5,

left: 5,

borderWidth: 2,

borderColor: '#000'

});

scrollingView.addEventListener('scroll', function(e){

Ti.API.info("C=" + e.currentPage);

Ti.API.info("N=" + nextImageIndex);

if(e.currentPage == 2 && nextImageIndex < imageNameArray.length - 2)

{

//Setting the current page to 1 will allow the smooth swipe functionality

scrollingView.currentPage = 1;

nextImageIndex += 1;

var vw = scrollingView.views[0];

imageViewArray[0] = scrollingView.views[1];

imageViewArray[1] = scrollingView.views[2];

scrollingView.removeView[vw];

vw.image=imageNameArray[nextImageIndex + 1];

imageViewArray[2] = vw;

scrollingView.views = imageViewArray;

}

else if(e.currentPage == 0 && nextImageIndex > 1)

{

nextImageIndex -= 1;

scrollingView.currentPage = 1;

var vw = scrollingView.views[2];

imageViewArray[1] = scrollingView.views[0];

imageViewArray[2] = scrollingView.views[1];

scrollingView.removeView[vw];

vw.image=imageNameArray[nextImageIndex - 1];

imageViewArray[0] = vw;

scrollingView.views = imageViewArray;

}

});

//get the config from config.xml

/*
Sample xml nodes
<root>
 <items>
  <item>True-Blood.jpg</item>
  <item>2219-true-blood.jpg</item>
  <item>true-blood-20080905051323782_640w.jpg</item>
 </items>
</root>
*/

var f = Titanium.Filesystem.getFile(Titanium.Filesystem.resourcesDirectory, '320x480/images.xml');

var contents = f.read();

var xmlObject = Ti.XML.parseString(contents.text);

var imageNode = xmlObject.documentElement.getElementsByTagName("item");

for(var i = 0; i < imageNode.length; i++)

{

var imagePath = '320x480/' + imageNode.item(i).text;

imageNameArray[i] = imagePath;

}

scrollingView.views[0].image = imageNameArray[0];

scrollingView.views[1].image = imageNameArray[1];

scrollingView.views[2].image = imageNameArray[2];

nextImageIndex = 1;

win1.add(scrollingView);

win1.open();

I believe this is an alternative to the memory leak. Appcelerator team should provide the ultimate solution to this problem.

Please let me know if you find any issues with this. If my post helps you, dont forget to thank me ;)

Enjoy Coding

Shakil Bharucha

Wadhvana Sarovar and Targod Dam

.
We started on a winter morning from Baroda at 6 in the morning. The destination for the day was Wadhvana Sarovar (lake), near by dabhoi town around 35 kms from Baroda. These lake is the 2nd largest water body around Baroda after Ajwa Sarovar. The lake was built by the Great Maharaja of Baroda Sir Sayaji Rao Gayakwad. The lake is famous for the migratory birds that migrate here from different part of world. The lake is accessible from two roads best way is get inside the town of dabhoi and ask for directions. The 2nd way, via shyamli village on dabhoi - bodeli rd. is not recomonded for visiters visiting via cars, since there are a lot of thorn plants which will scratch your cars.

Once you are on the lake there are three watch towers. If you access the lake via dabhoi town you ll reach the center watch tower. Guides, bird books and binocular are available over there. Go to the right most watch tower its the best place to see the birds. We just loved the calm and peace on the lonely lake and heard a lot of chirping of the birds.

Best time to visit these place is in the month of december to february. You Can find a lot of species of birds here. With the help of students of faculty of arts they have created an interpretation centre where we can get the knowledge of the birds like where the come from and how to identify them. Its not very big but worth a visit.

Our next destination for the day was Targod dam. It is on the Dabhoi - Bodeli road around 60 kms from Baroda. Just around 10 kms before Bodeli town, there is cross road for going to targod. The cross road leads you directly to the dam, It is around 15 kms inside the deep forest and last 8 - 10 kms was preety bad road. But it was worth a visit, it is lonely and undiscovered. It has got a perfect scenery. We discovered a small waterfall from the reservior and took a nice bath over there, we hadnt expected much from here but it was a really nice place to visit.