For everyone interested I suggest to get the sources from the sample project hosted on a github. This project references ios-datatable project using a git submodule.

Download details

git clone git://github.com/xperienced/ios-dataview.git
cd ios-dataview
git submodule init
git submodule update

The result of running just a few lines of a code should be the following:

Just to give you an idea how easy it is to build a slider cell, look at the following line of a code:

XPSliderDataCell *cell4 = [[XPSliderDataCell alloc] initWithText:@"Sample slider" value:.5f];

More to come…

There is more than just displaying, the library will also support the following:

• 2-way data binding – so you can bind your classes / properties to Data Cells and those properties will be displayed and updated by changes in data cell,
• Events through delegates and blocks – so you can react on changes in data cells.

Let me know if you have any other requests and if you like the project or want to contribute – do let me know. Thanks!

So instead I started to build small projects (modules) that are one purpose only. If you need something bigger, take few of them and include it in your project, want to keep them up to date – include it as git submodule and pull the updates directly from github. If you want to contribute – fork the project on a github and do send me a pull request.

So far I only managed to start and include a sample project (not complete yet) that I use to generate a settings-like interface. It has a much nicer API than raw UITableView and it allows you to rapidly build data-driven, table based applications.

Major release will presumably come in few weeks, but in the meantime you can get an early look on what is going on there:

• ios-datatable is the first small library (I will blog about it in my next idevblogaday post)
• ios-dataview is a sample project that is using ios-datatable and it includes a reference to it as a submodule.

Coming soon:

• cocos2d-puzzlemvc
• cocos2d-resourceloader

1. We implemented the Model which helps us encapsulate the logic of a game that is not polluted with other concerns (like display),
2. We implemented the Controller that handles the user interaction (and updates the model),
3. We implemented the View which responsibility is ONLY to display the current state of a model.

• cocos2d meets MVC part 1,
• cocos2d meets MVC part 2

Updating the Model

When the user touches the toolbox item and then touches the space on a game board we want that the game piece represented by a toolbox item will be placed on a game board at touch position. In the previous part we already implemented touchedAtRow method in GameBoardViewDelegate. We will extend this protocol and add additional method for handling toolbox item selection.

@protocol GameBoardViewDelegate
 
- (void)gameBoard:(GameBoard *)gameBoard touchedAtRow:(int)row column:(int)column;
- (void)gameBoard:(GameBoard *)gameBoard toolboxItemTouchedAtIndex:(int)index;
 
@end

We need to change the implementation of our touches handler, so that we now detect whether we clicked on a toolbox or on a game board.

- (void)ccTouchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    UITouch *touch = [touches anyObject];
    CGPoint point = [self convertTouchToNodeSpace:touch];
 
    // touched on a game board
    if (CGRectContainsPoint(gameBoardRectangle, point)) {
        int row, column;
        // calculate row and column based on a touch coordinate
        // ...
        // call controller
        [self.delegate gameBoard:self.gameBoard touchedAtRow:row column:column];
    }
    // touched on a toolbox
    else if (CGRectContainsPoint(toolboxRectangle, point)) {
        int index;
        // calculate toolbox item index based on a touch coordinate
        [self.delegate gameBoard:self.gameBoard toolboxItemTouchedAtIndex:index];
    }
}

Handling events on the Controller side is easy, first of all we extend the Model to keep the state of our model and allows us to modify the state based on user touches. Our interface will look something like this (implementation details omitted for clarity):

@interface GameBoard : NSObject {
// ...
}
 
// ...
- (void)putGamePiece:(GamePiece *)gamePiece row:(int)row column:(int)column;
- (GamePiece *)getGamePieceFromToolboxItemAtIndex:(int)index;
@end

Then we finish the implementation of GameBoardViewDelegate in GameBoardController and handle our events accordingly.

- (void)gameBoard:(GameBoard *)aGameBoard toolboxItemTouchedAtIndex:(int)index {
    // keep the toolbox selection state in the Model
    gameBoard.selectedToolboxItemIndex = index;
}
 
- (void)gameBoard:(GameBoard *)aGameBoard touchedAtRow:(int)row column:(int)column {
    // if the toolbox item is selected move item from toolbox to game board
    if (gameBoard.selectedToolboxItemIndex != -1) {
        GamePiece *gamePiece = [gameBoard getGamePieceFromToolboxItemAtIndex:gameBoard.selectedToolboxItemIndex];
        [gameBoard putGamePiece:gamePiece row:row column:column];
    }
}

What we achieved so far is that when the user touches on of the toolbox item and then touches the space on a game board the Model gets updated reflecting the desired game board state.

Notifying the View about the changes in the Model

In order to reflect the state of the Model in the View we need to send some notifications so when the Model gets changed the View will be able to react upon it.

We do this the same way we notify the Controller about the View changes. We start from the delegate declaration inside the  Model.

@protocol GameBoardDelegate;
@interface GameBoard : NSObject
// ...
@property (nonatomic, assign)
id<GameBoardDelegate> delegate;
// ...
@end
 
@protocol GameBoardDelegate
- (void)gameBoard:(GameBoard *)gameBoard didPutGamePiece:(GamePiece *)gamePiece row:(int)row column:(int)column;
@end
 
@implementation GameBoard
 
- (void)putGamePiece:(GamePiece *)gamePiece row:(int)row column:(int)column {
    // ...
    // store game piece
    // notify that the game piece was put on a gameboard
    [delegate gameBoard:self didPutGamePiece:gamePiece row:row column:column];
}
 
@end

The last part is the implementation of GameBoardDelegate in the GameBoardView so that when the game piece is put on a game board the View will put a CCSprite at a given position.

@interface GameBoardView : CCLayer
// ...
@end
 
@implementation GameBoardView
 
- (id)initWithGameBoard:(GameBoard *)aGameBoard delegate:(id)aDelegate {
    if ((self = [super init])) {
        // retain gameboard
        self.gameBoard = aGameBoard;
        self.gameBoard.delegate = self;
 
        // assign delegate
        self.delegate = aDelegate;
    }
}
 
- (void)gameBoard:(GameBoard *)gameBoard didPutGamePiece:(GamePiece *)gamePiece row:(int)row column:(int)column {
    // create CCSprite and put it on a game board at corresponding position
    CCSprite *gamePieceSprite = [CCSprite spriteWithFile:fileName];
    // ...
    [self addChild:gamePieceSprite];
}
 
@end

Summary

All the pieces are now connected together. The interaction between the Model, the Controller and the View conforms to MVC paradigm:

• The View handles the touches and notifies the Controller,
• The Controller reacts upon the user touches and updates the Model,
• The model updates its state, does the logic and tells the View that it has been changed,
• The View updates itself based on the current Model state.

Introducing model

In the previous part we introduced the View and the Controller. To comply with MVC paradigm we need to add a model which will represent the current state of a game board. Our implementation now should contain the following classes:

1. GameBoardView - the View,
2. GameBoardController - the Controller.
3. GameBoard – the Model.

Model implementation

GameBoard implementation

Our requirement (described in the first part) is that:

…A game board is defined by a number of rows and columns, which may vary for different application levels.

We implement it in the following way:

@interface GameBoard : NSObject {
    NSInteger numberOfRows;
    NSInteger numberOfColumns;
}
 
- (id)initWithRows:(NSInteger)aNumberOfRows columns:(NSInteger)aNumberOfColumns;
 
@property (nonatomic) NSInteger numberOfRows;
@property (nonatomic) NSInteger numberOfColumns;
 
@end

Please notice that the model extends NSObject – the model should contain just the state of a game board (and the methods to update this state) – we shouldn’t put any view related concerns here.

GameBoardView implementation

We need to modify the View and pass it the Model, we do this in initWithGameBoard method.

@interface GameBoardView : CCNode {
    GameBoard *gameBoard;
}
 
@property (nonatomic, retain) GameBoard *gameBoard;
 
- (id)initWithGameBoard:(GameBoard *)aGameBoard;
 
@end

Our implementation of a GameBoardView can look like this (rendering game board spaces omitted to simplify the code):

- (id)initWithGameBoard:(GameBoard *)aGameBoard {
    if ((self = [super init])) {
        // retain gameboard
        self.gameBoard = aGameBoard;
 
        // render gameboard background
        CCSprite *gameboardSprite = [CCSprite spriteWithFile:@"gameboard.png"];
        gameboardSprite.anchorPoint = CGPointMake(0, 0);
 
        [self addChild:gameboardSprite];
 
        // render spaces
        for (int i = 0; i < gameBoard.numberOfRows; i++) {
            for (int j = 0; j < gameBoard.numberOfColumns; j++) {
                // position and render game board spaces
            }
        }
    }
 
    return self;
}

GameBoardController

Finally the implementation of an init method in the Controller should be updated – the View needs to have the GameBoard model injected in its init method so we construct the game board in Controller (just for now) and pass it to the View (later on we will create a game board based on a level definition).

- (id)init {
    if ((self = [super init])) {
        // initialize model
        gameBoard = [[GameBoard alloc] initWithRows:7 columns:9];
 
        // initialize view
        view = [[GameBoardView alloc] initWithGameBoard:gameBoard];
 
        [self addChild:view];
    }
 
    return self;
}

Handling touches

GameBoardView updates

In order to handle touches we need to slightly modify the View. We make it extend CCLayer instead of CCNode to have a possibility to handle touch events inside of it:

@interface GameBoardView : CCLayer {
...
}

The View itself should not be responsible for handling the actions that are results of user interaction with the game board so we will pass it to the Controller using protocol.

@protocol GameBoardViewDelegate
- (void)gameBoard:(GameBoard *)gameBoard touchedAtRow:(int)row column:(int)column;
@end

We also modify the init method of a GameBoardView so we can pass a delegate object that will be responsible for handling the touches:

- (id)initWithGameBoard:(GameBoard *)aGameBoard delegate:(id)aDelegate;

And the implementation is:

- (void)ccTouchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    UITouch *touch = [touches anyObject];
    CGPoint point = [self convertTouchToNodeSpace:touch];
 
    // calculate row and column touched by the user and call a delegate method
    // ...
    [self.delegate gameBoard:self.gameBoard touchedAtRow:row column:column];
}

GameBoardController updates

GameBoardController will be responsible for handling user touches, so we need to implement a GameBoardViewDelegate in a GameBoardController:

@interface GameBoardController : CCNode

- (void)gameBoard:(GameBoard *)gameBoard touchedAtRow:(int)row column:(int)column {
    // do the game logic here and update view accordingly
}

The last step is to modify the View initialization in the following way (in init method):

// initialize view
view = [[GameBoardView alloc] initWithGameBoard:gameBoard delegate:self];

Summary

In this part we implemented the Model and we did the necessary steps to make it visible to the View and to Controller. We also setup an indirect link between the View and the Controller so if the user touches the space on a game board the Controller will be able to handle the action according to game rules. The next part will cover:

• Updating the Model inside the Controller,
• Notifying the View about the changes in the Model.