You are here

Modifying HelloRepo to display node information

This task shows you how to extend the HelloRepo example to display node information.
This tutorial shows you how to display basic node information. You will use the node view you created in the previous tutorial (DocumentTableViewController), but did not yet populate.

Setting up DocumentTableViewController.h

In this task you will set up DocumentTableViewController.h before working on the main code. The main task here is to ensure the required header files are included, and some useful properties are created.
  1. Open the file DocumentTableViewController.h in Xcode. After the #import statements you added in the previous tutorial, add the following import.

    
    #import "AlfrescoDocumentFolderService.h"
    
                

    So your #imports look like the following:

    
    #import <UIKit/UIKit.h>
    
    #import "AlfrescoSession.h"
    #import "AlfrescoNode.h"
    #import "AlfrescoDocumentFolderService.h"
    
                

    The SkyVaultDocumentFolderService class needs to be included as this service will be used to retrieve information about the selected node.

  2. Next you need to add a property to store the SkyVaultDocumentFolderService instance that will be required. You will need to add the following code below the properties you added in the previous tutorial:

                  
    @property (strong, nonatomic) SkyVaultDocumentFolderService *documentFolderService;              
                  
                

    The DocumentTableViewController.h code should now be as follows:

                  
    #import <UIKit/UIKit.h>
    
    #import "AlfrescoSession.h"
    #import "AlfrescoNode.h"
    #import "AlfrescoDocumentFolderService.h"
    
    @interface DocumentTableViewController : UITableViewController
    
    @property (strong, nonatomic) SkyVaultNode *node;
    @property (strong, nonatomic) id<AlfrescoSession> session;
    @property (strong, nonatomic) SkyVaultDocumentFolderService *documentFolderService;
    
    - (id)initWithSession:(id<AlfrescoSession>)createdSession andNode:(AlfrescoNode *)nodeToBeDisplayed;
    
    @end              
                  
                
You have now modified DocumentTableViewController.h to include the new property documentFolderService, which will be used to store an instance pointer to the SkyVaultDocumentFolderService. The Document Folder Service will be used to retrieve information about the selected node.

Further cleanup of DocumentTableViewController.m

There is some further cleanup of the code in DocumentTableViewController.m that you can do. There are bits of code in there that you are not going to require for the purposes of this tutorial. When you created the new Objective-C class DocumentTableViewController in the previous tutorial, you selected it to be a subclass of UITableViewController, this causes Xcode to add in various stub methods that you will not require for this tutorial. It is therefore easier to remove the code that is not required, so make the file easier to work with.
  1. Open DocumentTableViewController.m into Xcode. Navigate to the method - (id)initWithStyle:(UITableViewStyle)style, which will be the first method definition. Remove this method completely. You do not need this method as this view is initialized with the method initWithSession:andNode:
  2. Navigate to #pragma mark - Table view delegate at the bottom of DocumentTableViewController.m.

    You are not going to need this method as it is a callback used when a row is selected. In this view you don't need to carry out any specific actions if a row is selected, you are just going to view information about the node selected in the previous view.

  3. Remove the following code:

                  
    #pragma mark - Table view delegate
    
    - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
    {
        // Navigation logic may go here. Create and push another view controller.
        /*
         <#DetailViewController#> *detailViewController = [[<#DetailViewController#> alloc] initWithNibName:@"<#Nib name#>" bundle:nil];
         // ...
         // Pass the selected object to the new view controller.
         [self.navigationController pushViewController:detailViewController animated:YES];
         */
    }
                  
                  
                
  4. Navigate to the method - (void)viewDidLoad. You will see commented out code within the method. Remove the following code completely:

                  
        // Uncomment the following line to preserve selection between presentations.
        // self.clearsSelectionOnViewWillAppear = NO;
     
        // Uncomment the following line to display an Edit button in the navigation bar for this view controller.
        // self.navigationItem.rightBarButtonItem = self.editButtonItem;              
                  
                

    This code will not be required for the purposes of this tutorial. The application does not need to deal with row selections in this particular view, and no table items will be edited.

    The - (void)viewDidLoad method should now match the following code:

                  
     - (void)viewDidLoad
    {
        [super viewDidLoad];
    
    }             
                  
                
You now have the DocumentTableViewController.m source file with unnecessary code removed. This will make it easier to work with.

How to set the navigation controller title for the node detail view

In this task you will see how to set a title for the node detail view.
  1. Open DocumentTableViewController.m in Xcode and navigate to the - (void)viewDidLoad method. Modify the code to match the following:

                  
    - (void)viewDidLoad
    {
        [super viewDidLoad];
        self.title = @"Node Details";
    
    }              
                

    This will change the text in the navigation controller to indicate the nature of the current view.

  2. Build and run your code to check that the title is being set correctly. You will need to first select a node in the main view. When the next view slides into position the title will be set correctly to "Node Details".
The title of the node detail view has now been set appropriately.

Settings section headings for the node detail view

In this task you will set section headings for the node detail view.
Open DocumentTableViewController.m in Xcode and navigate to #pragma mark - Table view data source. Add the following method just below the #pragma line:

              
- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section 
{
    
    NSString *heading = [[NSString alloc] init];

    switch (section) 
    {
        case 0:
            heading = @"Summary";
            break;
        case 1:
            heading = @"General";
            break;
        case 2:
            heading = @"Comments";
            break;
        case 3:
            heading = @"Tags";
            break;
        case 4:
            heading = @"Versions";
            break;
        default:
            break;
    }
    
    return heading;
}              
              
            

From this you can see there will be sections in the table for a summary, and general information. Also comments, tags, and document versions will be displayed for the node if available.

The headings for each table section have been set. There are a few more changes to be made before you can build and run this code.

Add code to return the number of table sections

In this task you will add code to correctly return the number of table sections.
Open DocumentTableViewController.m in Xcode and navigate to - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView. Modify the method to match the following code:

              
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
    // Return the number of sections.
    return 5;
}              
              
            

There are going to be five table sections in this view, so 5 is returned.

You have added code to ensure the correct number of sections in the table has been returned.

Add code to return the number of rows in each table view section

Open DocumentTableViewController.m in Xcode and navigate to - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section. Modify the method to match the following code:

              
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    NSInteger numRows;
    
    switch (section) {
        case 0: // Summary section
            numRows = 3;
            break;
        case 1: // General section
            numRows = 1;
            break;
        case 2: // Comments section
            numRows = 1;
            break;
        case 3: // Tags section
            numRows = 1;
            break;
        case 4: // Versions section
            numRows = 1;
            break;
        default:
            numRows = 0;
            break;
    }
    
    return numRows;
}

            

How to add code to set cell content

In this task you add code to populate cells in the table view with content. This involves writing code in the tableView:cellForRowAtIndexPath: to determine which cell is being redrawn, and then setting the appropriate content. The code identifies the table section being drawn, and then the specific row within that section, and then retrieves and sets the content accordingly.
  1. Open DocumentTableViewController.m in Xcode and navigate to - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath. Modify the method to match the following code:

                  
    - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
    {
        static NSString *CellIdentifier = @"Cell";
        UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
        
        // Configure the cell...
        if (cell == nil)
        {
            cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
            
            // SECTION 0 - Summary
            
            if (indexPath.section == 0) {
                
                switch (indexPath.row) {
                    case 0:
                        cell.textLabel.text = self.node.name;
                        break;
                        
                    case 1:
                        if (self.node.isDocument == TRUE)
                        {
                            cell.textLabel.text = @"isDocument == TRUE";
                        }
                        else if (self.node.isFolder == TRUE)
                        {
                            cell.textLabel.text = @"isFolder == TRUE";
                        }
                        else
                        {
                            cell.textLabel.text = @"Not document or folder.";
                        }
                        break;
                        
                    case 2:
                        cell.textLabel.text = @"Latest version label will go here";
                        break;
                        
                    default:
                        break;
                }
                
            }
            
            
            // SECTION 1 - General
            
            if (indexPath.section == 1)
            {
                cell.textLabel.text = @"General info will go here.";
            }
            
            // SECTION 2 - Comments
            
            
            if (indexPath.section == 2)
            {
                cell.textLabel.text = @"Comments will go here.";
            }
            
            
            // SECTION 3 - Tags
            
            if (indexPath.section == 3)
            {
                cell.textLabel.text = @"Tags will go here.";
            }
            
            // SECTION 4 - Versions
            
            if (indexPath.section == 4)
            {
                cell.textLabel.text = @"Versions will go here.";
            }
            
        }
        
        return cell;
    }
    
    
                

    This code sets the cell text depending on which row is being drawn. Note that for the general, comments, tags, and versions sections you just set placeholder text. More useful code will be added for these sections in later tutorials.

    For now, focus on the following snippet for the summary section:

                  
            if (indexPath.section == 0) {
                
                switch (indexPath.row) {
                    case 0:
                        cell.textLabel.text = self.node.name;
                        break;
                        
                    case 1:
                        if (self.node.isDocument == TRUE)
                        {
                            cell.textLabel.text = @"isDocument == TRUE";
                        }
                        else if (self.node.isFolder == TRUE)
                        {
                            cell.textLabel.text = @"isFolder == TRUE";
                        }
                        else
                        {
                            cell.textLabel.text = @"Not document or folder.";
                        }
                        break;
                        
                    case 2:
                        cell.textLabel.text = @"Latest version label will go here";
                        break;
                        
                    default:
                        break;
                }
                
            }              
                  
                

    There are three rows in this section. The first row (case 0) will display the node name. The second row (case 1) will display whether the node is a document, a folder, or something else. The third row (case 2) will be used to display the version label for the latest version of the document, but currently is a placeholder - this feature will be added in a later tutorial.

  2. Build and run your code. When you select a node you will now see something similar to the following:

You have now added code to retrieve three node properties, and set these values to three rows in the Summary section of the node detail view.

In this tutorial you added code to HelloRepo to display node information in a new view.