The MVC Design Pattern The structure of iphone applications is based on the Model-View-Controller (MVC) design pattern because it benefits object-oriented programs in several ways. MVC based programs tend to be more adaptable to changing requirements in other words, they are more easily extensible than programs that do not use MVC. Furthermore, the objects in these programs tend to be more reusable and their interfaces tend to be better defined. In the MVC design pattern, the model layer consists of objects that represent the data your application manages. The objects in this layer should be organized in the way that makes the most sense for the data. External interactions with model objects occur through a well-defined set of interfaces, whose job is to ensure the integrity of the underlying data at all times. The view layer defines the presentation format and appearance of the application. This layer consists of your application s windows, views, and controls. The views can be standard system views or custom views you create. You configure these views to display the data from your model objects in an appropriate way. In addition, your view objects need to generate notifications in response to events and user interactions with that data. The controller layer acts as the bridge between the model and view layers. It receives the notifications generated by the view layer and uses them to make the corresponding changes in the data model. Similarly, if the data in the data layer changes for other reasons (perhaps because of some internal computation loop), it notifies an appropriate controller object, which then updates the views. Developing the icalculator application: Here is a fast overview of what we will do: Creating the project. Implementing the Model Object. Implementing the Controller Object. Implementing the View Object by use of the Interface Builder. Customizing the app delegate to incorporate the view controller object, and add it to the application window. Connecting the view controller to its view. Finalizing the application and setting its icon. Creating the project 1) Launch Xcode. You can find it in the developer folder > Applications > Xcode. 2) Choose File > New Project. 3) Choose from the iphone OS templates.
4) Choose Window-Based Application. 5) Name your project icalculator. Figure 1: New Project.
Figure 2: The icalculator Project. Note: icalculator.app: The application binary, the project s product. It s in red because the product hasn t been built yet. icalculatorappdelegate.h, icalculatorappdelegate.m: The files that implement the application s delegate. MainWindow.xib: The nib file that defines the application s main window. Despite its name, iphone applications normally have only one window. Implementing the Model Object We will create a new class whose instance represents an object of the calculator, follow the following steps: 1) Click on the Classes folder. 2) Choose File > New File. 3) Choose Cocoa Touch Classes > NSObject subclass. 4) Name the class icalculator, make sure that creating the header file option is selected. 5) Insert the following Code into icalculator.h: Figure 3: icalculator.h.
6) Insert the following Code into icalculator Figure 4: icalculator.m part I. Notes for newbies: 1) The retain and release methods are used mainly in the memory management of iphone applications, that s because there isn t any garbage collection in the iphone OS. Thus, memory management is done manually; you can t simply call dealloc to free the resources and references of a certain object, because this object may contain references to other objects that will not be de-allocated, and thus will cause memory leaks, so we use retain which will increment the value of a certain variable for this instantiated object, and release decrements the value, and when it reaches zero, the referenced object is de-allocated.
For more information about this topic, read more about memory management in Objective C++ 2.0. 2) If ( Self = [ super init ] ) What does this mean? This means that init of the parent class NSObject function will be called and if self is not equals to null do the following. Figure 5: icalculator.m part II.
Figure 6: icalculator.m part III. Implementing the controller object: 1) Click on classes. 2) Choose File > New File 3) Choose iphone OS> Cocoa Touch Classes > UIViewController subclass. 4) Name the class icalcviewcontroller. 5) Modify the icalcviewcontroller.h header file as the following:
Figure 7: icalcviewcontroller.h 6) Modify the icalcviewcontroller.m file as the following: Figure 8: icalcviewcontroller.m part I.
Figure 9: icalcviewcontroller.m part II. Implementing the View Object To get users excited about your application, it should have the best user interface possible. Interface Builder allows you to build beautiful, more importantly, useful user interfaces by dragging controls from a library of user-interface elements and laying them out n a view as you want them to appear to the user, your user-interface designs are known nib files. Your application loads these resources at runtime to reconstitute the use interface you designed. This means that you can make substantial changes to the user interface layout (and even some behavior) without having to edit source code. This is the main benefit of the Model-View-Controller paradigm. 1) Expand the Resources folder. 2) Double click on mainwindow.xib and the interface builder will open. 3) From the interface builder choose File > New file. 4) Choose Cocoa Touch and then press on View.
Figure 10: iphone OS UI templates. 5) Choose save, name it as CalcView and navigate till you reach the location of your project and save it under the Resources folder and press ok. 6) Xcode will ask you to update the project to accommodate the new file, confirm this process. 7) Press on the File s Owner icon. a. Choose Tools > Inspector. b. Display the identity pane. c. In the Class text field enter icalcviewcontroller, note that it will auto-complete. And by this way, we ve connected between our view object and the controller object.
Figure 11: calcview s Components. 8) Press on the View icon. a. Choose the Inspector Attribute pane. b. Customize your view as you desire, here we changed the background s color to black. Figure 12: calcview s View designer.
9) Add input and output controls to the view a. Choose tools > Library. b. In the organization pane, select Library > Cocoa Touch Plug-in > Inputs & Values. c. Select the Text Field item and drag it to the View. Figure 13: Drag and drop components. d. Resize the text field, by enlarging it, such that it contained by most of the view s width. Figure 14: resize text field.
e. Display the Inspector Attribute pane. f. Set the text field text to 0. g. Set the alignment to right-align. h. Set the title typeface and size, by setting the focus on the text field in the view > Choose Fonts, set it to bold and size 36. Figure 15: Set font. i. Add a rectangular button. Choose Round Rect Button from the library and drag and drop. In the inspector size pane, set the button s width to 64 and height to 70.
Figure 16: Set font. Connect the button s Touch Down event to the press: action method of the icalcviewcontroller class. Select the button in the view Display the Inspector Attributes pane. Set the title color to black. Set the button title to 7. Set the font size to 48.
Figure 17: Set button attributes. j. Create the button grid: Choose the button from the view. Choose Edit > Duplicate. Position the clone beside the original button. Figure 18: Clone the button.
Select both buttons and do exactly as the previous steps. Figure 19: Clone the two buttons. Select the four buttons and with the same steps we can generate the following view. But by changing the text of each button and making sure that the action event of each button is the press method
Figure 20: The final calculator view. Editing the application delegate: 1) Double click on the icalculatorappdelegate.h to modify it, edit it to look like this:
Figure 21: icalculatorappdelegate.h. 2) Double click on the icalculatorappdelegate.m to modify it, edit it to look like this: Figure 22: icalculatorappdelegate.m. Connecting the View controller to the View As mentioned before, we have connected between the view and the controller, but that was an initial connection.
We have to be more precise, for example we have to mention which controls do certain actions, and which preview certain data, so here is what we have to do: 1. In the CalcView.xib window, select the File s Owner proxy (which represents an instance of the CalcViewController class). 2. In the Inspector Connections pane, connect the displayfield outlet to the text field in the view. Figure 23: Connecting the view with the controller. 3. Connect the view outlet to the view. 4. Save the CalcView.xib file. Note: If you pressed on one of the buttons, you will find that their action event handler is already set, as we set it before during designing the view to the press function. Setting the application icon 1. In Interface Builder, take a snapshot of the Calc button grid: a) Place the pointer at the top-left corner of the grid. b) Press Shift-Comand-4 and hold down the mouse button. c) Drag the pointer to the bottom-right corner of the grid and release the mouse button.
Figure 24: Taking a snapshot. Mac OS X places the snapshot file in your desktop using the name Picture 1.jpg (or a name with a higher number if you ve captured other snapshots). 2. Rename the snapshot file, icon.jpg. 3. In the Groups & Files list, select Resources. 4. Choose Project > Add to Project. 5. Navigate to your Desktop directory and choose icon.jpg. 6. In the dialog that appears, ensure the copy option is selected, and click Add. 7. In the Groups & Files list, double-click Resources > Info.plist. 8. In the editor window, set the value of the Icon file key to icon.jpg,
Figure 24:Info.plist. 9. Save the Info.plist file. Running your application Build your application and run it on your simulator, if you have an iphone connected to Xcode you can choose to deploy and run on it. Please not that, you have to have a developer s certificate from apple to develop for iphones, which will cost you $99 or $299 a year depending on what kind of certificate you want, for more details click here. 10. Download Sample Code