We will switch between two images with a timer. So let first load a picture located in the "Resources" folder.
var mainBundle = [CPBundle mainBundle];
var path = [mainBundle pathForResource:@"PLL_0018_550_368.jpg"];
image1 = [[CPImage alloc] initWithContentsOfFile:path size:CGSizeMake(550, 368)];
We decide not to show a shadow around the picture and choose not to scale the picture too (see the documentation to discover other options). By modifying the frame of the image view, we are sure to see all the image.
imageView = [[CPImageView alloc] initWithFrame:CGRectMake(0, 0, 200, 200)];
[imageView setHasShadow:NO];
[imageView setImageScaling:CPScaleNone];
var imageSize = [image1 size];
[imageView setFrameSize:imageSize];
[imageView setImage:image1];
In order to be able to resize the browser window and continue to see all image part, we will embed the CPImageView in a CPScrollView.
scrollView = [[CPScrollView alloc] initWithFrame:CGRectMake(0, 0, CGRectGetWidth([contentView bounds]), CGRectGetHeight([contentView bounds]))];
[scrollView setAutoresizingMask: CPViewWidthSizable | CPViewHeightSizable];
[scrollView setAutohidesScrollers:YES];
[scrollView setDocumentView:imageView];
Let's play with CPTimer a little. We will ask the timer to call our switchImage: method every 2 seconds. In order to pass information with the timer, we create a dictionary and pass it as the user info of the timer. You will see soon how to retrieve this information.
var objects = [[CPArray alloc] initWithObjects:[CPNumber numberWithLong:0], nil];
var keys = [[CPArray alloc] initWithObjects:@"currentIndex", nil];
var dict = [[CPDictionary alloc] initWithObjects:objects forKeys:keys];
timer = [CPTimer scheduledTimerWithTimeInterval:2 target:self selector:@selector(switchImage:) userInfo:dict repeats:YES];
So let implement our switchImage: method. We first retrieve our hand build dictionary. This enable us to get the current index. We can change the image displayed by our image view. Don't forget to update the dictionary, so the timer continue to pass our valuable information.
-(void)switchImage:(CPTimer)aTimer
{
// debugger;
var dict = [aTimer userInfo];
var currentIndex = [[dict objectForKey:@"currentIndex"] longValue];
if (currentIndex == 0)
{
[imageView setImage:image2];
currentIndex = 1;
[dict setObject:[CPNumber numberWithLong:currentIndex] forKey:@"currentIndex"];
}
else
{
[imageView setImage:image1];
currentIndex = 0;
[dict setObject:[CPNumber numberWithLong:currentIndex] forKey:@"currentIndex"];
}
}
To finish with this short tutorial, we decide to embeded the application in an iframe to be able to show you two information about cappuccino web framework.
We will continue to play with the GUI (CPCollectionView and CPCollectionViewItem) and Drag & Drop.
If you'd like to see the complete code listing from the tutorial, you can download it all in a single file: Tutorial5.zip. The web application is available online: Tutorial5. The embeded application in a iframe can be found here : Tutorial5 with iframe.