- Download the server side code
- Download the iOS client application
This is the second of a two-part tutorial on creating a simple iOS app that connects to a LoopBack server application to perform create, read, update, and delete (CRUD) operations.
If you haven't already done so, read part one before continuing.
Add navigation control
To add a navigation control to your app:
- Select Books Collection View Controller.
- Click Editor > Embed In > Navigation Controller. This will add a Navigation Item under the Books Collection View Controller, as shown below.
- Select the new Navigation Item and name it "Books Collection" in the attribute inspector.
Implement the Add Book interface
To add the interface elements that enable a user to add a book:
- From the object library in lower right corner of the XCode window, select Bar Button Item.
- Drag and drop it to the top right corner of the app shown in the XCode storyboard.
- In the attribute inspector change Identifier to Add, as shown below.
- Right click the Add bar button and Control-drag the circle next to action to the Books Collection View Controller. Select 'modal' as action.
Add another View Controller
When the user clicks the "+" button you want the app to show a screen to add a book to the collection. To do that you need to add another View Controller:
- Drag a View Controller element from the Object Library into the storyboard.
- Name this View Controller "Add Book".
- Now connect the "+" button from the Books Collection View Controller to this screen: Control-dragg the "+" button from the Books Collection View Controller to the Add Books View Controller. This creates a segue.
- Select modal as segue type.
Implement the segue action by adding the following code to
ViewController.m
:ViewController.m... @implementation ViewController //Add these 3 lines - (IBAction)unwindToList:(UIStoryboardSegue *)segue { } ... - (void)viewDidLoad
Add navigation to View Controller
Now add navigation to the "Add Books" View Controller as follows:
- Select the Add Book View Controller.
- Choose Editor > Embed In > Navigation Controller.
- Name this Navigation Controller "AddBook".
Add elements to Add Books sceen
Add a Done and Cancel button to the Add Books screen as follows:
- In the AddBook scene, select Navigation Item.
- In the Object Library, drag and drop two Bar Button Items to the scene.
- Select each Bar Button Item and in the attribute inspector change their identifiers to "Done" and "Cancel".
- Control-drag the Done button to the green exit button below the View Controller.
- Select unwindToList as Segue Action.
- Repeat the above two steps for the Cancel button.
Add new class files
Add a new class for the Add Book ViewController as follows:
- In the XCode menu, choose File > New > File....
- Select Objective-C class and click Next.
- In the Choose options for your new file screen, change Class name to "AddNewBookViewController."
- Click Create to add two new files to your project:
AddNewBookViewController.h
andAddNewBookViewController.m
.
Connect class to View Controller
Connect the AddNewBookViewController class to the View Controller for Add New Book.
Add Text Fields from the Object Library to the Add View Screen. Add one Text Field for each of the five properties: title, author, description, totalPages and genre. Your screen should look like the screenshot below:
To connect the Text fields to your view controller:
Select the Title text field in your storyboard.
Control-drag from the text field on your canvas to the code displayed in the editor on the right, stopping at the line just below the
@interface
line inAddNewBookViewController
.m
.
In the dialog that appears, for Name, type "titleField."
Leave the rest of the options as they are. Your screen should look like this:
Do the same for the other text fields.
To connect the Done button to your view controller:
Select the Done button in your storyboard.
Control-drag from the Done button on your canvas to the code display in the editor on the right, stopping the drag at the line just below your
textField
properties inAddNewBookViewController
..m
In the dialog that appears, for Name, type "doneButton."
Leave the rest of the options as they are. Your dialog should look like this:
Now add functionality to the class to save the book when the user adds one:
#import <UIKit/UIKit.h> #import "ViewController.h" ...
#import "AddNewBook.h" #import "ViewController.h" #define prototypeName @"books" @interface AddNewBook () @property (weak, nonatomic) IBOutlet UITextField *titleField; @property (weak, nonatomic) IBOutlet UITextField *authorField; @property (weak, nonatomic) IBOutlet UITextField *genreField; @property (weak, nonatomic) IBOutlet UITextField *descriptionField; @property (weak, nonatomic) IBOutlet UITextField *totalPagesField; @property (weak, nonatomic) IBOutlet UIBarButtonItem *doneButton; @end @implementation AddNewBookViewController - (void) prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender { void (^saveNewErrorBlock)(NSError *) = ^(NSError *error){ NSLog(@"Error on save %@", error.description); }; void (^saveNewSuccessBlock)() = ^(){ UIAlertView *messageAlert = [[UIAlertView alloc]initWithTitle:@"Successfull!" message:@"You have add a new book" delegate:nil cancelButtonTitle:@"OK" otherButtonTitles:nil]; [messageAlert show]; }; if (sender != self.doneButton) return; if (self.titleField.text.length > 0) { NSLog(@"%@",self.titleField.text); LBModelRepository *newBook = [[AppDelegate adapter] repositoryWithModelName:prototypeName]; //create new LBModel of type LBModel *model = [newBook modelWithDictionary:@{ @"title" : self.titleField.text, @"author" : self.authorField.text, @"genre" : self.genreField.text, @"totalPages" : self.totalPagesField.text, @"description" : self.descriptionField.text }]; [model saveWithSuccess:saveNewSuccessBlock failure:saveNewErrorBlock]; } else { UIAlertView *messageAlert = [[UIAlertView alloc]initWithTitle:@"Missing Book Title!" message:@"You have to enter a book title." delegate:nil cancelButtonTitle:@"OK" otherButtonTitles:nil]; [messageAlert show]; } } ....(ctd)
Run the build and try it out. You should be able to add a new book and refresh to fetch all books.
Attachments:














