I’ve been asked a few times how to create a tabbed iphone application with a lobby like feel like the Facebook iPhone app. Well here is a walk through that will hopefully get you started in your application creation.
First step, Open Xcode
Next Select File| New project | Window Based Application
A window will pop up asking for a name of the project. Lets name the project LobbyTest. This will create a basic iPhone application containing the following objects:
CoreData.framework
CoreGraphics.framework
Foundation.framework
UIKit.framework
Lobbytest-info.plist
LobbyTest.app
LobbyTest.xcdatamodel
LobbyTest_prefix.pch
LobbyTestAppDelegate.h
LobbyTestAppDelegate.m
Main.m
MainWindow.xib
Lobby Test First Screen
Now press the Build and Go button at the top of the screen (hint look for the green button with the hammer) You should see the following blank application.
Blank Application that looks like a flash lite
Horray! You have just created a simple iPhone app called Flashlite. Yes I’m serious, someone actually took this simple app and put it in the App Store. See how easy this is J. Ok, so you want to do a little more? Let continue.
Open the Classes folder and double click on the LobbyTestAppDelegate.h file. You should see the following code:
//
// LobbyTestAppDelegate.h
// LobbyTest
//
// Created by your name on XX/XX/09.
// Copyright __MyCompanyName__ 2009. All rights reserved.
//
@interface LobbyTestAppDelegate : NSObject <UIApplicationDelegate> {
NSManagedObjectModel *managedObjectModel;
NSManagedObjectContext *managedObjectContext;
NSPersistentStoreCoordinator *persistentStoreCoordinator;
UIWindow *window;
}
@property (nonatomic, retain, readonly) NSManagedObjectModel *managedObjectModel;
@property (nonatomic, retain, readonly) NSManagedObjectContext *managedObjectContext;
@property (nonatomic, retain, readonly) NSPersistentStoreCoordinator *persistentStoreCoordinator;
@property (nonatomic, retain) IBOutlet UIWindow *window;
- (NSString *)applicationDocumentsDirectory;
@end
You will now need to add the TabBarController to this code. This will allow you to have Tabs on the bottom of your main lobby page for navigation. The variable to be added under the *window variable is UITabBarController *tabbarController;
We will also need to add an outlet to the Delegate so we can add our new tabbarController to the main window. This outlet is defined under the *window outlet as the following:
@property (nonatomic, retain) IBOutlet UITabBarController *tabbarController;
We will build the actual controller shortly. Here is the code now for the LobbyTestAppDelegate.h file.
@interface LobbyTestAppDelegate : NSObject <UIApplicationDelegate> {
NSManagedObjectModel *managedObjectModel;
NSManagedObjectContext *managedObjectContext;
NSPersistentStoreCoordinator *persistentStoreCoordinator;
UIWindow *window;
UITabBarController *tabbarController;
}
@property (nonatomic, retain, readonly) NSManagedObjectModel *managedObjectModel;
@property (nonatomic, retain, readonly) NSManagedObjectContext *managedObjectContext;
@property (nonatomic, retain, readonly) NSPersistentStoreCoordinator *persistentStoreCoordinator;
@property (nonatomic, retain) IBOutlet UIWindow *window;
@property (nonatomic, retain) IBOutlet UITabBarController *tabbarController;
- (NSString *)applicationDocumentsDirectory;
@end
Ok, now lets update the LobbyTestAppDelegate.m file. What we want to do is load the tabbarcontroller after the MainWindow.xib has finished loading. First we need to add our variable to the synthesized variables of our object.
@synthesize window, tabbarController;
We then look for a method called applicationDidFinishLaunching.
- (void)applicationDidFinishLaunching:(UIApplication *)application {
// Override point for customization after app launch
[window makeKeyAndVisible];
}
We need to modify this code to include a sleep timer and our new tabbarcontroller object. The sleep timer will be used to display a splash screen before showing our new tabbarcontroller.
- (void)applicationDidFinishLaunching:(UIApplication *)application {
//Sleep for splash screen
sleep(2);
NSLog(@”Creating tabBarController…..”);
[window addSubview:[tabbarController view]];
// Override point for customization after app launch
[window makeKeyAndVisible];
}
Now, select the Resources folder and double click the MainWindow.xib. This will open the Interface builder application. This is the application we use to make the visual changes to our application using a GUI interface. It is kind of strange to get used to making code changes in XCode then switching to Interface Builder for visual changes. However you will get used to doing it, trust me.
You should see an interface that looks similar to this.
This looks like fun doesn't it?
In the above image I have already added the tab bar controller so don’t be alarmed if you don’t see it on yours. You will add it now by opening the Library, selecting the Controllers folder, and selecting the Tab Bar Controller object. Drag the object under the Window object in the MainWindow.xib window.
Now lets look at the Inspector tool and select the Application Connections tab. We will then select the File’s Owner object in the MainWindow.xib window. We will need to map a new reference object to the LobbyTest App Delegate. We do this by selecting the little circle next to the New Referencing Object text in the Inspector tool and dragging it to the delegate object in the MainWindow.xib.
Next we will create a connection between the LobbyTest App Delegate and our new tabbarcontroller object variable. First select the LobbyTest App Delegate under the MainWindow.xib window. Now if we look at the Inspector window we should see two Oulets and one Referencing Outlet listed. We will now need to select the little circle next to the tabbarController outlet and drag it over to the new Tab bar Controller that we placed under our Window object earlier.
Your windows should now look like mine above. Select File | Save. Switch back to the XCode window and select Build and Go. You should see an interface similar to this.
Ok, now that we have our two tabs displaying, we will need to add our view windows and fancy it up a bit with custom buttons and a cool splash screen. We will talk about this in our next article.
Since my router was already setup from my AT&T configuration, I thought I was set. Well, I was wrong…..so wrong.
