Adding a node detail view to the HelloRepo application

This task shows you how to extend the HelloRepo example to include a node detail view.

This tutorial shows you how to add a node detail view controller to the HelloRepo application. The basic code is modified to include the ability to select a node from the list displayed in the main table view. Once a node has been selected from the main table view, details about that node will be displayed in a new table view. A navigation controller is used to switch from one view to the next - that is from the main table view to the node detail table view. To implement the new node detail view you will add two new files to the project: DocumentTableViewController.h and DocumentTableViewController.m.

Preparing the AppDelegate code

This task shows you how to prepare the AppDelegate code. In the modified version of HelloRepo you will have a navigation controller, the main table HelloRepo view controller that lists nodes, and then when a node is selected a new table view controller will load to display node details. The AppDelegate needs to keep track of the main view controller, and the navigation controller, as well as the main window. These can be most conveniently held as properties within the AppDelegate object.

Open AppDelegate.h in Xcode. Modify the code so it is the same as the following:


#import <UIKit/UIKit.h>

@class ViewController;

@interface AppDelegate : UIResponder <UIApplicationDelegate>

@property (strong, nonatomic) UIWindow *window;
@property (strong, nonatomic) UIViewController *viewController;
@property (strong, nonatomic) UINavigationController *navController;

@end

This adds three properties to keep track of the window, the main view controller and the navigation controller.

Now open AppDelegate.m into Xcode (you can do this by simply clicking on it in the navigation view).

Modify the AppDelegate.m code so that is the same as the following:


#import "AppDelegate.h"
#import "HelloRepoViewController.h"

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
    self.viewController = [[HelloRepoViewController alloc] init];
    self.navController = [[UINavigationController alloc] initWithRootViewController:self.viewController];
    self.window.rootViewController = self.navController;
    [self.window makeKeyAndVisible];
    
    return YES;
}

@end

This code creates the main window, the HelloRepo view controller and the navigation controller and stores pointers to them in the AppDelegate object. This makes it easier to refer to these objects in the HelloRepo code. The code initializes the navigation controller with the HelloRepo view controller, and makes the navigation controller the root view controller.

Adding the node detail controller

This task shows you how to add the node detail view controller.

CAUTION:

In this tutorial, you will not implement all the necessary code to display the node details, as this is the subject of later tutorials. For this reason you will receive two warnings when you compile the code described here. In both case these warnings are due to #warning statements in generated code. These warnings will be removed in later tutorials.

Note: In this step it is very important to ensure that the class created is a subclass of UITableViewController. When you create this class you must select UITableViewController from the Subclass of drop-down listbox.
In Xcode, right-click the HelloRepo group (groups are identified by a folder icon) and select New File....
Select Objective-C class and click Next.
Enter the class name as DocumentTableViewController and select UITableViewController from the Subclass of drop-down listbox. Ensure that both checkboxes are clear (you are not targeting iPad or using XIBs). Click Next. Then click Create.
Xcode will create two new files in your project: DocumentTableViewController.h and DocumentTableViewController.m. This class will be a subclass of UITableViewController.

Check the file DocumentTableViewController.h. The contents should be as follows:

              
#import <UIKit/UIKit.h>

@interface DocumentTableViewController : UITableViewController

@end

Note: In particular, note that the new class is a subclass of UITableViewController.

Note: When this controller is ultimately created you will need to pass it two pieces of information: the node that has just been selected in the main view, and the current session object. To do this you can create an initialization method to receive this information and set two instance variables. The selected node is passed so it is possible to determine which node to fetch details for. The session object is used by methods that return services.
First set up the header file DocumentTableViewController.h. Open DocumentTableViewController.h in Xcode.

Modify DocumentTableViewController.h so it matches the following code:

              
#import <UIKit/UIKit.h>

#import "AlfrescoSession.h"
#import "AlfrescoNode.h"

@interface DocumentTableViewController : UITableViewController

@property (strong, nonatomic) SkyVaultNode *node;
@property (strong, nonatomic) id<AlfrescoSession> session;

- (id)initWithSession:(id<AlfrescoSession>)createdSession andNode:(AlfrescoNode *)nodeToBeDisplayed;

@end

This includes necessary header files, adds a couple of properties to store the selected node and current session, and adds a prototype for the new initialization method.

Now, add the initialization method itself. Open DocumentTableViewController.m and add the following method:


- (id)initWithSession:(id<AlfrescoSession>)createdSession andNode:(AlfrescoNode *)nodeToBeDisplayed
{
    if ((self = [super init]))
    {
        self.node = nodeToBeDisplayed;
        self.session = createdSession;       
    }
    return self;
}

Now clean out unnecessary code. Load DocumentTableViewController.m in Xcode. Navigate to the method - (BOOL)tableView:(UITableView *)tableView canEditRowAtIndexPath:(NSIndexPath *)indexPath. You will see that this method and several methods after it are already commented out. These are used for editable tables. As we will not be using this feature in this tutorial, the following methods can safely be removed:
- - (BOOL)tableView:(UITableView *)tableView canEditRowAtIndexPath:(NSIndexPath *)indexPath
- - (void)tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle
- - (void)tableView:(UITableView *)tableView moveRowAtIndexPath:(NSIndexPath *)fromIndexPath toIndexPath:(NSIndexPath *)toIndexPath
- - (BOOL)tableView:(UITableView *)tableView canMoveRowAtIndexPath:(NSIndexPath *)indexPath
Test your code by doing a Product > Build. Everything should compile without error - although you will receive several warnings due to warning pragmas in code that was created automatically by Xcode. You will add code to fix this in later tutorials. You can run the code, but as yet the new DocumentTableViewController has not be linked to from the main table view code.

You have created the barebones table view controller that will be used to display node details. As yet it has little functionality. The next step is to hook in the row selection code, so that when a node is selected in the main table view, the node detail view (DocumentTableViewController) can be loaded, and node details subsequently displayed.

How to add disclosure indicators to table cells in the main view

This task shows you how to add disclosure indicators to the rows in a table view. In this case the table view is the main table view used to display a list of nodes found in the root directory of your repository.

CAUTION:

In this task you need to switch back to working with the file HelloRepoViewController.m.

Open HelloRepoViewController.m and navigate to the tableView:cellForRowAtIndexPath: method. Identify the if statement within the method.

Modify the if block in the code so that it matches the following:


if (cell == nil)
{
    cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
    cell.accessoryType =  UITableViewCellAccessoryDisclosureIndicator;
}

The second statement is the one that adds the disclosure indicator.

Build and run your code. You will see that a disclosure indicator is now added on the far right of each table cell (it looks like a greater-than sign). This provides a hint to the user that additional information will be displayed if this cell is selected.

Adding row selection in the table view

This task shows you how to add the ability to select a table row. Currently HelloRepo displays a list of nodes in the repository root in the main table view (HelloRepoViewController). The next step is to add the ability to select a node and have specific details about the node displayed in a new table view, the DocumentTableViewController view. In this task you will continue to work with HelloRepoViewController.m

You will need to reference the AppDelegate and DocumentTableViewController classes from your code, so their header files need to be included into HelloRepoViewController.m. Open HelloRepoViewController.m and at the top of the file add the following imports:
```
#import "DocumentTableViewController.h"
#import "AppDelegate.h"

            
```
Still in HelloRepoViewController.m, navigate to #pragma mark - Rotation at the bottom of the file. Before this point in the code add the following code:
```
#pragma mark - TableView delegate

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    // Obtain the node for the selected row
    SkyVaultNode *node = [self.nodes objectAtIndex:indexPath.row];
    
    // Obtain a pointer to the AppDelegate instance 
    AppDelegate *delegate =(AppDelegate *)[[UIApplication sharedApplication] delegate];
        
    // Create and initialize the new node detail view controller
    DocumentTableViewController *documentTableViewController = [[DocumentTableViewController alloc] initWithSession:self.session andNode:node];
    
    // push onto UINavigationController's stack
    [delegate.navController pushViewController:documentTableViewController animated:YES];
}              
              

            
```
When a row in the table view is selected the node corresponding with that location is stored in the pointer variable node. The code then obtains the app delegate object so that its properties, in particular the navigation controller instance, can be accessed. The new node view (DocumentTableViewController) is then created - this is where details about the node will be displayed. Note the new view is initialized with details of the selected node and the current session. The session object will be used later to retrieve SkyVault services, so that node details can be retrieved and then displayed. The code then pushes the node detail view onto the navigation controller's stack. This has the effect that when a node is selected, a new view slides into position and will ultimately (in later tutorials) display node information.

You can compile and run your code at this point. The list of nodes in your repository root will be displayed as before. However, you will now see a disclosure indicator by each node. If you select a node, a new view slides into position. This will be used in subsequent tutorials to display information about the node.

In this tutorial you extended HelloRepo to include a node detail view.

Search form