Monday, May 20, 2013

We'll have the portrait view in another tutorial which will be a continuation of this landscape tutorial of UISplitViewController.

/*Note: This works in OS versions greater than or equal to iOS 6.0OS versions less than iOS 6.0 has a different look in its UIPopoverController and doesn't support Landscape Orientation.*/

I studied UISplitViewController by creating a Master Detail Application Template. For sure, you will also be able to understand by looking at its code. For those who want to do it themselves (not just merely creating a Master Detail Application), just follow this tutorial.

1. Create an Empty Application Template.

Select iPad for our Device Family.

2. Add a New File, subclass of UITableViewController, check "With XIB for user interface." This is the view on the left area of our application.

3. Create another File, subclass UIViewController. This is for the bigger area (right panel) of our application. I named it "Detail" view because it acts and shows the detailed view of the cell selected in our tableview (left area).

4. Create a UISplitViewController property in our AppDelegate.h file.

Synthesize the splitViewController property and import the two new files we created from steps 2 and 3 in AppDelegate.m file.

5. Go to AppDelegate.m file and update the didFinishLaunchingWithOptions method such that:

Create an instance of the two new classes we created.

Allocate and initialize the splitViewController.

Set the view controllers of our splitViewController.

@[menuVC, detailVC] is just the same as saying [[NSArrayalloc] initWithObjects: menuVC, detailVC, nil];

Set the rootViewController of our window to splitViewController.

Hit Run button and you should see something like this.

6. Open PopMenuViewController.h and create a PopMenuDetailViewController property. This will be our "link" to the two view controllers.

Open PopMenuViewController.m file and synthesize the PopMenuDetailViewController property. Also, create an array for our the list that we will be showing in our tableView.

By the way, UIPopoverController is only available in iPad. If you want to make something like this in your iPhone application, you may use third party libraries like WEPopoverController. Download it from github.

Thursday, May 9, 2013

Now that iPhone 5 is in the market, we have to make sure that our apps are compatible to both 3.5-inch screens and 4-inch screens.

That's easy!

Just check the "Use Autolayout" in our Interface Builder and it will automatically make our 3.5-inch screens compatible to 4-inch screens.

Now, wait!

"Use Autolayout" is useful if the minimum OS requirement is iOS 6 and up. What if your application's minimum OS requirement is, for example, iOS 4.3 and up? You can't use the "Use Autolayout" because your app will definitely crash if you run it in <iOS 6 devices (even in your simulator).

This is what will happen if you use Autolayout and you're running your app in < i0S 6

The Good News is we have a simple solution for that!

1. First, I created a simple "Single View Application" project. View size is set to Retina 3.5 Full Screen.

Here's how my simple app looks like. No functions, just a simple user interface. We expect that what we see in our Interface Builder, that's what it should also look like when we run it in 3.5-inch screens.

2. Change the Device from 3.5-inch to 4-inch. Make sure that you're in the menu of the iOS Simulator.

If you run the app again in 4-inch screen, this is how it will look like. Everything looks sort of okay. Some of you might really find your UI not in their right places when you run it in a 4-inch screen.

3. Go back to your project and click the view and look for the "Autosizing" function (violet box).

If you can't find the "Autosizing" function and you find this instead (Content Hugging Priority, Constratins, etc)

Go to the first tab of the "Utilities Area" (Right panel) and UNcheck the "Use Autolayout".

Once done unchecking the "Use Autolayout," you should be able to see the Autosizing function on the fifth tab.

Now, we're ready...

4. Click the View and change the Autosizing such that it will look like this. Tap or click all the vertical and horizontal lines in the inner and outer area of the box.

This means that we want our view to extend or expand its width and height depending on the size of the screen.

5. Next, click the Navigation Bar at the top with the segment control.

This means that we want our Navigation Bar to stick on top and extend its width depending on size of screen. We don't, or rather, we can't tap the inner vertical line of the box.. that means that we cannot change the height of the navigation bar. (And this is true since the height of the NavBar will always be 44.)

6. Same goes for the Label "Great Day," we want it to stick on top of the screen and extend its width depending on the size of the screen.

7. Next, tap the UIImageView.

The Autosizing means that we want our UIImageView to expand its width and height while still sticking on the top. The left and right lines (outer area of the box) means that the UIImageView will be at the middle of the view.

8. For the two buttons, we want them to be at the bottom always, so...

9. Run your application again both in 3.5inch screens and 4-inch screens.

We will be covering the following topics:
1. Having multiple columns in our table named "SAMPLETABLE".
2. Getting all data in SAMPLETABLE (with multiple columns)
3. Search and return data from our SAMPLETABLE.

1. Let's edit our ViewController.xib such that we can enter information of a person.Change the "keyboard type" of the textfield "Year" so that the user can only input numbers.

2. Create IBOutlet properties for these textfields (and be sure to remove the old IBOutlet we created before for it might cause our program to crash especially that it's no longer connected to any textfields in our view). Synthesize these properties on the Implementation Section.//Interface Section

@property(strong, nonatomic)IBOutletUITextField *firstNameTextField;

@property(strong, nonatomic)IBOutletUITextField *lastNameTextField;

@property(strong, nonatomic)IBOutletUITextField *courseTextField;

@property(strong, nonatomic)IBOutletUITextField *yearTextField;

//Implementation Section

@synthesize firstNameTextField;

@synthesize lastNameTextField;

@synthesize courseTextField;

@synthesize yearTextField;

3. Connect these outlets to our objects in ViewController.xib.

Remember to set our File's Owner as the delegate of our new textfields (for dismissing the keyboard).

Right-click textField and point the delegate to File's Owner.

4. Remember the prepareDatabase() method we had before in ViewController.m? We'll change the part in our sql_stmt (SQL Statement).

Having multiple columns in our table named "SAMPLETABLE" - DONE!

6. In our getTextFromDB method in ListViewController.m, we'll just add a few lines inside our while loop. This loop while (sqlite3_step(statement) == SQLITE_ROW) will continue to go to the next row until there's no more row to go down with.

Again, the 0, 1, 2, 3, and 4 refers to the column number in our query results. So, IF our query statement is SELECT FirstName, LastName FROM SAMPLETABLE we should expect 2 columns in our query results, right? So to get the first name and last name of the result:

NSString * firstName = [[NSStringalloc]

initWithUTF8String:(constchar *) sqlite3_column_text(statement, 0)];

NSString *lastName = [[NSStringalloc]

initWithUTF8String:(constchar *) sqlite3_column_text(statement, 1)];

You may also choose to edit your tableView's cellForRowAtIndexPath method according to your preference.

Getting all data in SAMPLETABLE (with multiple columns) - DONE!

7. Create a new UIViewController class and import this new class to our AppDelegate. Allocate and initialize the new class and add it in tabbarController's array of viewControllers.

You must now have these lines in your appDelegate'sdidFinishLaunchingWithOptions method:

8. Add textfields to our SearchViewController.xib file so the user may choose to search by name, course, or year. Remember also to set the delegates of the textfields to the File's Owner (to dismiss the keyboard).

10. Import sqlite3.h to SearchViewController class. Copy databasePath and myDatabase variables we had from ViewController and ListViewController classes. Create another NSMutableArray for the searchResults.

#import <sqlite3.h>

@property(strong, nonatomic)NSString *databasePath;

@property(nonatomic)sqlite3 *myDatabase;

@property(strong, nonatomic) NSMutableArray *searchResult;

@synthesize databasePath;

@synthesize myDatabase;

@synthesize searchResult;

11. Let's create a findStudent method (IBAction). I basically copied the getTextFromDB() method from ListViewController but we will tweak it a little in the SQL Query. Connect this IBAction to the Search Button in our SearchViewController.xib.

8. Add a textfield and a button to our ViewController.xib file. The user enters any message inside our textfield and when the user taps the button, it will be added to our database.Create an IBOutlet property for our textfield and connect it to our object in our xib file. Remember also to synthesize the UITextField property.