Here’s how you can add a spinner to show the user an update is happening.

Hook up the refresh button

Control drag the refresh button into your custom view.

Then just hook up as follows:

ViewController.m

- (IBAction)refresh:(id)sender {

    // replace right bar button 'refresh' with spinner
    UIActivityIndicatorView *spinner = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleGray];
    [spinner startAnimating];
    self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView:spinner];

    // how we stop refresh from freezing the main UI thread
    dispatch_queue_t downloadQueue = dispatch_queue_create("flickr downloader", NULL);
    dispatch_async(downloadQueue, ^{
        NSArray *photos = [FlickrFetcher recentGeoreferencedPhotos];

        // do any UI stuff on the main UI thread
        dispatch_async(dispatch_get_main_queue(), ^{
            // put rightbar button back
            self.navigationItem.rightBarButtonItem = sender; // sender because that's the element that called us by clicking refresh
            self.photos = photos;
        });

    });
    dispatch_release(downloadQueue);

}

For the complete story on this demo checkout Lecture 10 52min mark of Paul Hegarty’s iPhone App Dev course.

What is Grand Central Dispatch.

Is a C API.
Basic idea is you have queues of operations.
Operations are specificed using blocks.
Most queues run serially (a true queue).

The operations are going to be pulled off the queue and run in some other thread.

There is no guarantee about where and when is will happen.
Good thing is that if your operation blocks, only that queue will block.
Other queues (like the main UI queue) will continue to run.

So we are going to queue up blocks things that take a long time to run in other threads, and from those threads we’ll queue up blocks back on the main ui thread to update the ui.

Example assume we fetched an image from the network:

-(void)viewWillAppear:(BOOL) animated
{
   NSData *imageData = [NSData dataWithContentsOfURL:networkURL]; // long time!
   UIImage *image = [UIImage imageWithData:imageData];
   self.imageView.image = image;
   self.imageView.frame = CGRectMake(0,0, image.size.width, image.size.height);
   self.scrollView.contentSize = image.size;
}

We don’t want the fetching of that image happening on the main queue. UI will be non-responsive.

And any rendering of the main ui, needs to be done on the main ui thread.

So we are going to need x2 queues.
One to do the long work of getting the image.
Another to update the UI.

-(void)viewWillAppear:(BOOL) animated
{

   dispatch_queue_t downloadQueue = dispatch_queue_create(“image loader”, NULL);
   dispatch_async(downloadQueue, ^{	
      NSData *imageData = [NSData dataWithContentsOfURL:networkURL]; // long time!
      dispatch_async(dispatch_get_main_queue(), ^ {
         UIImage *image = [UIImage imageWithData:imageData];
         self.imageView.image = image;
         self.imageView.frame = CGRectMake(0,0, image.size.width, image.size.height);
         self.scrollView.contentSize = image.size;
      });
   });
   dispatch_release(downloadQueue);
}

This is the power of GCD. You can think linearly about your program right in time. Run times linear here.

What is a block?

Is a chunk of code that is usually inlined, but can be passed around like an argument to methods.
It’s very smart about local variables, referenced objects.

What does it look like?

Here’s a method I want to pass a block to:

[aDictionary enumerateKeysAndObjectUsingBlock:^(id key, id value, BOOL *stop) {
NSLog(@"value for key %@ is %@", key, value);
if (([@"ENOUGH" isEqualToString:key]) {
*stop = YES;
}
}];

This method exists in NSDictionary. It basically enumerates through each element in a Dictionary and allows you to pass it a block with will be applied on each element.

Block starts with magical caret ^. Means a block.

Can use local variables declared before the block inside the block

double stopValue = 53.5;
[aDictionary enumerateKeysAndObjectUsingBlock:^(id key, id value, BOOL *stop) {
NSLog(@"value for key %@ is %@", key, value);
if (([@"ENOUGH" isEqualToString:key] || ([value doubleValue] == stopValue) {
*stop = YES;
}
}];

But they are read only.
Unless you put underbar underbar – then it becomes read/write.

__block BOOL stoppedEarly = NO;
double stopValue = 53.5;
[aDictionary enumerateKeysAndObjectUsingBlock:^(id key, id value, BOOL *stop) {
stoppedEarly = YES; // this is legal now
}];

What about objects messaged inside the block?

NSString *stopkey = [@"Enough uppercaseString];
…
if ([stopKey isEqualToString: key] ||

Any outside pointers are held onto strong by the block until the block goes off the heap.
So if the block needs it, it keeps it.

typedefs

To make our lives easier we sometimes user typedefs with blocks.

typedef double (^unary_operation_t)(double op);

_t is convention for telling us it’s a type (takes a double returns a double).

Now we can declare a variable of that type called square:

unary_operation_t square;
square = ^(double operand) { // value of square is a block
return operand * operand;
}

Now we can use:

double sequareOfFive = square(5.0);

We could then use the unary_operation_t to define a method

@property (nonatomic, strong) NSMutableDictionary *unaryOperations;
typedef double (^unary_operation_t)(double op);
-(void) addUnaryOperation: (NSString *)op whichExecutesBlock:(unary_operation_t)opBlock {
[self.unaryOperations setObject:opBlock forKey:op];
}

What this does is associate a block with an operation and store it in a dictionary.

Look at how beautifully these reads though:

addUnaryOperation (a string called op) whichExecutesBlock: unary_operation_t

Really nice syntax the way you can define variables right beside the variable declarations themselves.

Blocks are managed in iOS5 by ARC (so you don’t have to worry about memory management around these).

Then we could use this later on like:

-(double)performOperation:(NSString *)operation
{
unary_operation_t unaryOp = [self.unaryOperations objectForKey:operation];
if (unaryOp) {
self.operand = unaryOp(self.operand);
}
}

We don’t always typedef

When a block is an argument to a method and is used immediately, often there is no typedef. We just inline it.

-(void)enerateKeysAndObjectsUsingBlock:(void (^)(id key, id obj, BOOL *stop))block;

Here block is the local variable name.

Some shorthand allowed when defining a block

1. You do not have to declare the return type if it can be inferred.
2. If there are no args don’t need parentheses.

NSNumber *secret = [NSNumber numberWithDouble:42.0];
[brain addUnaryOperation:@”MoLtUaE” whichExecutesBlock:^(double operand) {
return operand * [secret doubleValue];
}];

And

[UIView animateWithDuration:5.0 animations:^{
view.opactity = 0.5;
}];

No args to this block. No need to say ^() { …}

Memory Cycles (bad thing)

What if you had a block that referred to itself?

@property (nonatomic, strong) NSArray *myBlocks;

[self.myBlocks addObject:^() {
[self doSomething];
}];

The block here has a strong pointer to itself.
But self has a strong point to block (through it’s property!).

This is a serious problem.

Neither self non block can ever escape the heap now because they will both be pointing to each other.
Called a memory “cycle”.

There is a magic underbar underbar weak.
Says this variable is weak.

__weak Myclass *weakSelf = self;
[self.myBlocks addObject:^() {
[weakSelf doSomething];
}];

Solves the problem because now the block only has a weak pointer to self.
Self still has a strong point to the block, but that’s OK.

When do we use blocks in iOS?

Enumeration
View animations
Sorting
Notification (when something happens execute this block)
Error handlers
Completion handlers

But mostly it’s for multithreading. Do this using GCD (Grand Central Dispatch).

After you’ve created a blank single view project with an ImaginariumViewController….

Drag an Image View into the ViewController view area.

Drag an image into your project.

Add image to display.

Note – it will automatically scale the image to fit the view (will change the aspect ratio).

Change to only show top left

Now the image aspect ratio is respected, but the image is so big we only start showing the top left. So now we’ll add a scroll bar.

Select the image view (use doc view pop out on right of story board if you need to make sure you have the right view).

And click Editor -> Embed In -> Scroll View

Note how imageView is now embedded in scrollView.

Our scroll view struts and springs are now out of wack.

Fix them so they expand and use the entire area.

If we run this now we’ll see our image but no scrolling.

ScrollView has to have it’s content size set.

This scroll view currently doesn’t know how big an area to scroll over. So we need to set it (set the content area, and then set the frame of the image view so it’s in the right spot).

Going to talk to these guys from our ViewController. Therefore we need outlets.

Note you can drag the outlets from the docView we saw earlier.
Call them imageView and scrollView and stick them in the private interface of the ViewController.

Note when you do this it will auto create the synthesize and it will also add itself to the ViewDidUnload() the low memory thing.

Now use viewDidLoad to set your content size (the size of the image) and it’s frame to be the full size.

ImaginariumViewController.m

-(void)viewDidLoad
{
    [super viewDidLoad];
    self.scrollView.contentSize = self.imageView.image.size;
    self.imageView.frame = CGRectMake(0, 0, self.imageView.image.size.width, self.imageView.image.size.height);
}

Now when we run should work.

Bonus points – zoom

So how to we get this thing to zoom?

Set the min and max zoom on the scrollView.

Set the delegate.

@interface ImaginariumViewController()  

Implement the zoom method.

-(UIView *) viewForZoomingInScrollView:(UIScrollView *)scrollView
{
    // return which subview we want to zoom
    return self.imageView;
}

Now set ourselves as the delegate.

-(void)viewDidLoad
{
    [super viewDidLoad];
    self.scrollView.delegate = self;

Note you can also set the delegate entirely within the story board using the doc view by dragging the scrollView to the controller.

Should now be able to zoom.

Code in it’s entirety.

ImaginariumViewController.m

#import "ImaginariumViewController.h"

@interface ImaginariumViewController()  <UIScrollViewDelegate>
@property (weak, nonatomic) IBOutlet UIImageView *imageView;
@property (weak, nonatomic) IBOutlet UIScrollView *scrollView;
@end

@implementation ImaginariumViewController
@synthesize imageView;
@synthesize scrollView;

-(void)viewDidLoad
{
    [super viewDidLoad];
    self.scrollView.delegate = self;
    self.scrollView.contentSize = self.imageView.image.size;
    self.imageView.frame = CGRectMake(0, 0, self.imageView.image.size.width, self.imageView.image.size.height);
}

-(UIView *) viewForZoomingInScrollView:(UIScrollView *)scrollView
{
    // return which subview we want to zoom
    return self.imageView;
}

- (void)viewDidUnload {
    [self setImageView:nil];
    [self setScrollView:nil];
    [super viewDidUnload];
}
@end

Say we have a View (FaceView) which knows how to draw a happy face but the level of it’s happiness (or smile) is currently hardwired to be 0 (not very happy).

And we’d like some externtal delegate to be able to set it for us.

Because Views can’t talk directly to controllers in iOS one way to do this is using protocols and delegates.

The view defines a protocol, which the controller implements thereby acting as the datasource for the view. Here’s how you hook it up.

1. Define the protocol and property.

FaceView.h

#import <UIKit/UIKit.h> 

@class FaceView;

@protocol FaceViewDataSource
- (float)smileForFaceView:(FaceView *)sender;
@end

@interface FaceView : UIView
@property (nonatomic, weak) IBOutlet id  dataSource;
@end

FaceView.m

@implementation FaceView
@synthesize dataSource = _dataSource;

What this basically says is create a protocol called smileForFaceView which returns a float (our smiliness) and takes as an input ourselves as the sender.

And then make that a publicly consumable property that others can register themselves for.

2. Use the delegate in your implementation.

For us our delegate is going to be used when we draw the smile in our drawRect function. So we replace the hard coded smile with:

FaceView.m

    //float smile = 100;
    float smile = [self.dataSource smileForFaceView:self];

3. Set controller as delegate.

So now FaceView is hooked up to use it’s delegate. Now we need to set our controller up to act as the delegate. This means having our controller say that they implement our FaceView protocol.

We could put in in our header file but because it’s private to our controller we stick it in our private interface.

HappinessViewController.m

@interface HappinessViewController() <FaceViewDataSource>

4. Do the implementation.

HappinessViewController.m

- (float)smileForFaceView:(FaceView *)sender {
    // set smile
}

5. Set delegate to be the controller.

Good time to do this is in the setter for our view in our controller.

HappinessViewController.m

-(void) setFaceView:(FaceView *)faceView
{
    _faceView = faceView;
    self.faceView.dataSource = self;
}

Voila! Now our controller is hooked up and ready to serve our view as it’s datasource.

Test

Add a button called refresh that when pressed sets the happiness.

- (IBAction)refresh:(id)sender {
    self.happiness = 100;
}

Should now see smile instead of frown (default of 0).

How could we do it?

Add segues.

While holding down the ‘control’ key we can drag from the buttons on the left MVC to the MVC on the right and select the ‘push’ model.

Give segues identifier names.

Assign each segue a name so we can tell one from the other (i.e Happy, Sad).

Add Navigation Controller.

If you ran this now it wouldn’t work. Segues only work when they are within some kind of navigation controller.

Click on the MVC on the left (the one that is going to start the application and go)

Editor -> Embed in -> Navigation Controller

If you run now you should see transitions when you click on Happy/Sad buttons.

Prepare for segue

To pass data to our new MVC we need to set stuff up in our prepareForSeque method.

DoctorViewController.m

#import "DoctorViewController.h"
#import "HappinessViewController.h"

@implementation DoctorViewController

-(void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender
{
    NSLog(@"prepareForSegue: %@", segue.identifier);

    if ([segue.identifier isEqualToString:@"Happy"]) {
        [segue.destinationViewController setHappiness:100];
    } else if ([segue.identifier isEqualToString:@"Sad"]) {
        [segue.destinationViewController setHappiness:0];
    }
}

@end

In here the segue.destinationViewController points to the ViewController we are going to navigate to and it is of type ‘id’ (a special type in iOS objective C which could be any object).

Because we know where we are navigating to HappinessViewController we can treat segue.destinationViewController as if it were our HappinessViewController and call methods on it like setHappiness.

That’s how we pass data from one MVC to another. Through the segue by calling set property methods directly on our new ViewController.

And we can test that this gets passed by placing a log call in our HappinessViewController.

HappinessViewController.m

-(void)setHappiness:(int)happiness
{
    _happiness = happiness;
    NSString* result = [NSString stringWithFormat:@"%d", happiness];
    NSLog(@"Got happy %@", result);
    self.display.text = result; 
}

Now there’s one bug I haven’t been able to figure out yet. Which is how to refresh the view once it gets set here.

The self.display label is nil but once I figure it out I will come back up here and update.

For a much better walk through of who segues work check out Paul Hegarty’s Lecture 6 as part of the Stanford iPhone class series.

CircleViewController.h

#import <UIKit/UIKit.h>

@interface CircleViewController : UIViewController
@property (nonatomic) int radius; // 1 small circle, 100 big
@end

And synthesize it in our code .m file.

CircleViewController.m

#import "CircleViewController.h"
@implementation CircleViewController
@synthesize radius = _radius;
@end

You can also optionally reset your view for display if you model changes like so:

-(void)setHappiness:(int)happiness
{
    NSLog(@"setHappiness: %@", @"1");
    _happiness = happiness;
    [self.faceView setNeedsDisplay];
}

1. Create the View Controller.

Drag View Controller control onto story board.

Create View Controller class.

Assign the class to the controller.

2. Create the View.

Drag generic view onto View Controller.

Create View class.

Assign view class to generic view.

3. Connect View Controller to View.

Do this via a private interface on the View Controller. Note this property has an IBOutlet marker to support XCode dragging of controller onto view.

PhotoViewController.m

#import "PhotoViewController.h"
#import "PhotoView.h"

@interface PhotoViewController()
@property (nonatomic, weak) IBOutlet PhotoView *photoView;
@end

@implementation PhotoViewController
@synthesize photoView = _photoView;
@end

Now go back to the story board and, holding down the ‘control’ key, drag the yellow circle with the white paper inside up into the view.

Optional: Move AppDelegate classes to Supporting Files.

You don’t really need these cluttering up your file structure so you can optionally move them into ‘Supporting Files’.

That’s it! You’ve now got a controller hooked up to it’s view.

do the following.

Adobe illustrator CS5

Draw a square.

Open the gradient window (Window -> Gradient)

Click the gradient box (will apply black to white gradient).

Open the color pallette (Window -> Color) and get both the color and gradient window on screen at the same time (tricky because Adobe UI is terrible).

Once you’ve got them both up, click and drag the colors you want for your gradient from the color palette down to the ends of the gradient.

Transform and slim the gradient until your happy. Save this image somewhere you can access from your website. Remember to reduce the size of your canvas (Shift -O) to make sure your image is slim when you export it.

CSS

Now apply the following CSS to the body of your website:

body {
		background-image: url('../images/bg_body.png');
		background-repeat: repeat-x;
		background-color: #c9efed;
		height: 100%;
}

This takes the gradient we just created, and repeats it across the screen and applies a default color to anything below your gradient image where is runs out.

Voila! That’s it. You’ve now got a nice background to build off of.

Here’s an excerpt:

The Louvre Museum has 8.5 million visitors per year. This blog was viewed about 77,000 times in 2011. If it were an exhibit at the Louvre Museum, it would take about 3 days for that many people to see it.

Click here to see the complete report.