Sunday, January 25, 2009
at
5:41 PM
|
Now I'd like to explore a little bit more of the basics and create another simple application. This application is from a tutorial I just read with a few modifications for things that I thought were a little bit confusing. This application involves the simple use of a Model-View-Controller methodology. The model is mostly taken care of by the framework itself, so this focuses on the controller and the view. Let's create the view first.
First open up XCode and create a new Window-Based project. Call it whatever you like, I called mine HelloUniverse2. The first thing we are going to create is a view. An IPhone application has only one window (MainWindow.xib) and to see additional views you must add them as subviews to the main window. Double click on MainWindow.xib to open the Interface Builder.
Depending on how things are set up you might see a few different things. What you should definitely see is a window that says MainWindow.xib. There are four objects in that window, File's Owner, First Responder, something that involves the name of your project, and Window. File's Owner and First Responder we will probably learn more about later, but from what I understand, they are "proxy objects" which apparently means they are a bridge between the nib file (the user interface we create) and the application (the code we write).
For now, let's make a new view. To do that go to File --> New and choose View. A new window similar to the previous one will pop-up but instead of four items it will have three and one of them is View. You can save this view. I saved it as HelloView like in the tutorial I followed. You should probably save the file somewhere in your project folder. You'll be given the choice to add it to your project which you obviously want to do. Then you'll be brought back to XCode where you should drag the file into your resources folder.
Go back to the Interface Builder so that we can decorate our view. Go to Tools --> Library so we can see all of the available goodies. Let's get a label, two text fields, and a button and drag them onto the View. Now we can change some of the properties of our items using the Inspector window. If the Inspector window isn't already showing up go to Tools-->Inspector. The tools menu lists four inspector types underneath Inspector. These correspond to the four tabbed buttons in the main Inspector window. They are attributes, connections, size, and identity.
Let's mess around with the first text field first. Click the text field on the View and go to the Attribute Inspector (Tools --> Attribute Inspector or click the first tab button in the Inspector window). For Placeholder, type First Name. Make sure Clear When Editing Begins is checked. Under Text Input Traits, select Words for Capitalize and Name Phone Pad for Type. Repeat the same thing for the second text field except call the Placeholder, Last Name. Then double click on the button and type something clever. Save the view (File-->Save) and we're done here for now.
We've made the view, now we have to make the controller. Luckily most of the work is done behind the scenes so we are going to just make a subclass of an existing controller. To do this go to File --> New File and in Cocoa Touch Classes we are going to select UIViewController subclass. This is an example of inheritance. UIViewController is a method provided by the Cocoa framework to handle most of the things we need to do. We are going to build upon the functionality of the UIViewController without reinventing the wheel so to speak.
Go to the header file (.h) for the file that you just created. Mine is HelloViewController.h. In here we are going to create variables to link the view to the controller. Make your header file look like the one in the image. The line beginning with @interface specifies the name of our class as a subclass of UIViewController. is a protocol which we will need later to make the textfield behave properly. The lines starting with IBOutlet declare variables for the items that we set up in the Interface Builder. IBOutlet means that it is accessible in the Interface Builder. NSString creates string objects for the text that we will pull from the text fields. We also set some properties for the variables that we created. Nonatomic seems to be what we'll use most and should be like that for most applications. Retain means that the object will retain its value on assignment. I believe copy means that it will create a copy of this object on assignment but I'm not sure. The final declaration is a method for handling the button press. IBAction lets us see this method in the Interface Builder. The name of the function is displayMessage and it takes an id object as a parameter.
Now that we've created the header file we get to provide implementation for it just as we would in C++. So open up the .m file and look at this source code (too much code for an image). To initialize our variables we use the @synthesize keyword. Now we are going to provide the implementation for the displayMessage method. The idea is that when the user clicks the button we want the label to show whatever it was that was in the textfields. The code itself is pretty self-explanatory give or take some syntax. Remember, there is no garbage collection so we have to manage our own memory to avoid leaks. We also create a textFieldShouldReturn method. This is why we used to allow us to write this method. This method says that if the textfield is one of ours that we created, when we press return, we should give up control of it. Without this, the typing pad will stay open.
We're not done yet. We still have to add the view we just made to the main view. To do that go to the AppDelegate.h file and add a variable declaration for HelloViewController. Then in the .m file we need to actually provide the implementation to link the view with the main window. Once again, the code is pretty self-explanatory except for the syntax. We're using a bundle. I'm not too sure what it means but perhaps I'll figure it out later.
That's all of the code that we have to write. We still have to link up all of the visual items with their variable names that we've given them. To do this, we go back into the Interface Builder. Click on the File's Owner so the Hello View Inspector appears and click on the Identity tab (the i button on the top right of the Inspector window) and select HelloViewController for the class. We've now connected the view controller to the proxy object. Now we must connect the view to the view controller. While still having File's Owner selected, click on the Connection Inspector (the arrow button) and drag the circle next to the view variable to the actual view. Also drag the circles for our textfields and label and buttons to the ones on screen. And that's it, we should be done. Save your work and go back to XCode, compile and run, and you should have a working app!
First open up XCode and create a new Window-Based project. Call it whatever you like, I called mine HelloUniverse2. The first thing we are going to create is a view. An IPhone application has only one window (MainWindow.xib) and to see additional views you must add them as subviews to the main window. Double click on MainWindow.xib to open the Interface Builder.
Depending on how things are set up you might see a few different things. What you should definitely see is a window that says MainWindow.xib. There are four objects in that window, File's Owner, First Responder, something that involves the name of your project, and Window. File's Owner and First Responder we will probably learn more about later, but from what I understand, they are "proxy objects" which apparently means they are a bridge between the nib file (the user interface we create) and the application (the code we write).
For now, let's make a new view. To do that go to File --> New and choose View. A new window similar to the previous one will pop-up but instead of four items it will have three and one of them is View. You can save this view. I saved it as HelloView like in the tutorial I followed. You should probably save the file somewhere in your project folder. You'll be given the choice to add it to your project which you obviously want to do. Then you'll be brought back to XCode where you should drag the file into your resources folder.
Go back to the Interface Builder so that we can decorate our view. Go to Tools --> Library so we can see all of the available goodies. Let's get a label, two text fields, and a button and drag them onto the View. Now we can change some of the properties of our items using the Inspector window. If the Inspector window isn't already showing up go to Tools-->Inspector. The tools menu lists four inspector types underneath Inspector. These correspond to the four tabbed buttons in the main Inspector window. They are attributes, connections, size, and identity.Let's mess around with the first text field first. Click the text field on the View and go to the Attribute Inspector (Tools --> Attribute Inspector or click the first tab button in the Inspector window). For Placeholder, type First Name. Make sure Clear When Editing Begins is checked. Under Text Input Traits, select Words for Capitalize and Name Phone Pad for Type. Repeat the same thing for the second text field except call the Placeholder, Last Name. Then double click on the button and type something clever. Save the view (File-->Save) and we're done here for now.
We've made the view, now we have to make the controller. Luckily most of the work is done behind the scenes so we are going to just make a subclass of an existing controller. To do this go to File --> New File and in Cocoa Touch Classes we are going to select UIViewController subclass. This is an example of inheritance. UIViewController is a method provided by the Cocoa framework to handle most of the things we need to do. We are going to build upon the functionality of the UIViewController without reinventing the wheel so to speak.
Go to the header file (.h) for the file that you just created. Mine is HelloViewController.h. In here we are going to create variables to link the view to the controller. Make your header file look like the one in the image. The line beginning with @interface specifies the name of our class as a subclass of UIViewController. Now that we've created the header file we get to provide implementation for it just as we would in C++. So open up the .m file and look at this source code (too much code for an image). To initialize our variables we use the @synthesize keyword. Now we are going to provide the implementation for the displayMessage method. The idea is that when the user clicks the button we want the label to show whatever it was that was in the textfields. The code itself is pretty self-explanatory give or take some syntax. Remember, there is no garbage collection so we have to manage our own memory to avoid leaks. We also create a textFieldShouldReturn method. This is why we used
Posted by
JP
0 comments:
Post a Comment