iPhone Application Development : Building a Multi-View Tab Bar Application (part 3) - Implementing the Volume View

3/19/2011 4:37:36 PM

Implementing the Volume View

In the volume view, the application will accept input for the dimensions of a box (length, width, height) and a sphere (radius) and calculate the volume of the object based on these values. The interface elements will be largely identical to the area view but will require an additional field (height) for the box calculation. Begin the implementation by editing the VolumeViewController header.

Adding Outlets and Actions

With the exception of some terminology changes required by our switch from 2D to 3D, the outlets and actions that will be required in the volume view should be very familiar:

boxWidth (UITextField): Field for entering the width of a box

boxLength (UITextField): Field for entering the length of a box

boxHeight (UITextField): Field for entering the height of a box

sphereRadius (UITextField): Field for entering the radius of a sphere

boxResult (UILabel): The calculated area of the rectangle

sphereResult (UILabel): The calculated area of the circle

summaryViewController (SummaryViewController): The instance of the summary view

calculate (method): Performs the area calculation

hideKeyboard (method): Hides the onscreen keyboard

Edit the VolumeViewController.h file to include the necessary outlets and actions for the view. When finished, your code should look like Listing 4.

Listing 4
 2: #import "SummaryViewController.h"
4: @interface VolumeViewController : UIViewController {
5: IBOutlet UITextField *boxWidth;
6: IBOutlet UITextField *boxHeight;
7: IBOutlet UITextField *boxLength;
8: IBOutlet UITextField *sphereRadius;
9: IBOutlet UILabel *boxResult;
10: IBOutlet UILabel *sphereResult;
11: IBOutlet SummaryViewController *summaryViewController;
12: }
14: @property (retain, nonatomic) UITextField *boxWidth;
15: @property (retain, nonatomic) UITextField *boxHeight;
16: @property (retain, nonatomic) UITextField *boxLength;
17: @property (retain, nonatomic) UITextField *sphereRadius;
18: @property (retain, nonatomic) UILabel *boxResult;
19: @property (retain, nonatomic) UILabel *sphereResult;
21: -(IBAction)calculate:(id)sender;
22: -(IBAction)hideKeyboard:(id)sender;
24: @end

Because of the similarity to the area view, we won’t go into detail on the individual lines. Let’s move on to the volume view itself.

Creating the View

Like the layout of the area view, the volume view will collect data, provide the user with a Calculate button and, of course, display the results. Figure 9 shows a finished version of the view.

Figure 9. Once again, collect data, calculate, and provide the results!

By the Way

The volume view includes images to help users identify the values that they will need to enter. If you didn’t drag the SphereVolume.png and BoxVolume.png images to your Xcode resources when building the area view, this is a good time to add them!

Open VolumeView.xib in Interface Builder and drag four text fields to the view. For the volume calculations, three fields should be grouped for length, width, and height of the box. A single field is all that is required for the sphere. Be sure to set the field attributes so that the keyboard displayed is a number pad. Add labels to the view to identify each of the fields for the user.

Position two additional UILabel instances below the box/sphere input fields—these will be used for the output of the calculations. Be sure to clear the default contents of these labels, or set them to 0. Using the Attributes Inspector (Command+1), size all the labels and fields appropriately.

To add the images, drag image views from the Library to the view. Set the contents of the image views by opening the Attributes Inspector (Command+1) for each view and choosing the BoxVolume.png or SphereVolume.png images.

Finish the view by adding two buttons: the Calculate button at the bottom of the view and the invisible button used to hide the keyboard. Remember to expand the “hide keyboard” button to fill the view and send it to the back. Open the Attributes Inspector (Command+1) for the button, and choose Custom for the button type to make the button invisible.

Connecting Outlets and Actions

Connect the fields, labels, and buttons in Interface Builder to the appropriate outlets that you created in the VolumeViewController.h file. Control-drag from the File’s Owner icon in the Document window to each of the input fields and output labels; choose the appropriate outlet when prompted.

To connect the button controls to the actions, Control-drag from the two UIButton instances to the File’s Owner, choosing the fitting calculate and hideKeyboard method when prompted.

Implementing the Volume Calculation Logic

Switch back to Xcode and edit the VolumeViewController.m file. As before, define the Pi constant at the top of the file:

#define Pi 3.1415926

Next, use the @synthesize directive to create the getters and setters after the @implementation directive:

@synthesize boxWidth;
@synthesize boxHeight;
@synthesize boxLength;
@synthesize sphereRadius;
@synthesize boxResult;
@synthesize sphereResult;

Create and edit the calculate method to determine the volume of the two shapes. For the box, this is length×width×height, and for the sphere, 4/3×Pi×R^3. Use the results to populate the boxResult and sphereResult labels in the view. Our implementation of this method is provided in Listing 5.

Listing 5.
-(IBAction)calculate:(id)sender {
float floatBoxResult=[boxWidth.text floatValue]*
[boxLength.text floatValue]*[boxHeight.text floatValue];
float floatSphereResult=(4/3)*Pi*[sphereRadius.text floatValue]*
[sphereRadius.text floatValue]*[sphereRadius.text floatValue];
NSString *stringBoxResult=[[NSString alloc]
NSString *stringSphereResult=[[NSString alloc]
initWithFormat:@"%1.2f", floatSphereResult];
[stringBoxResult release];
[stringSphereResult release];

[summaryViewController updateTotal];

By the Way

Because only the logic for the calculations has changed, you should refer to the area view calculation for a detailed description of the methods used here.

Add the hideKeyboard method so that the user can dismiss the onscreen keyboard by touching the background of the view:

-(IBAction)hideKeyboard:(id)sender {
[boxWidth resignFirstResponder];
[boxLength resignFirstResponder];
[boxHeight resignFirstResponder];
[sphereRadius resignFirstResponder];

Finally, release the objects in the dealloc method:

- (void)dealloc {
[boxWidth release];
[boxHeight release];
[boxLength release];
[sphereRadius release];
[boxResult release];
[sphereResult release];
[super dealloc];
  •  iPhone Application Development : Building a Multi-View Tab Bar Application (part 2) - Implementing the Area View
  •  iPhone Application Development : Building a Multi-View Tab Bar Application (part 1)
  •  Windows Phone 7 Development : Working with Video (part 2) - Coding the Application
  •  Windows Phone 7 Development : Working with Video (part 1)
  •  Windows Phone 7 Development : Plotting an Address on a Bing Maps Map and Working with the Bing Maps Service
  •  Windows Phone 7 Development : Using GeoCoordinateWatcher and the Bing Maps Control to Track Your Movements
  •  iPhone Application Development : Creating a Multi-View Toolbar Application (part 3) - Adding Toolbar Controls
  •  iPhone Application Development : Creating a Multi-View Toolbar Application (part 2) - Instantiating the View Controllers
  •  iPhone Application Development : Creating a Multi-View Toolbar Application (part 1)
  •  Windows Phone 7 Development : Using Location Services - Simulating the Location Service
  •  Introducing the Windows Phone Location Service and Mapping APIs
  •  iPhone Application Development : Implementing a Custom Picker View (part 4) - Tweaking the Picker UI
  •  iPhone Application Development : Implementing a Custom Picker View (part 3) - Reacting to a Picker View Choice
  •  iPhone Application Development : Implementing a Custom Picker View (part 2)
  •  iPhone Application Development : Implementing a Custom Picker View (part 1)
  •  Windows Phone 7 Development : Isolated Storage - Working with Isolated Storage Settings
  •  Mobile Application Security : WebOS Security - Permissions and User Controls
  •  Mobile Application Security : WebOS Security - Code Security
  •  Windows Phone 7 Development : Working with Isolated Directory Storage (part 2)
  •  Windows Phone 7 Development : Working with Isolated Directory Storage (part 1)
    Top 10
    Exchange Server 2007 : Configure the Client Access Server - Enable POP3 and IMAP4
    Separating BPM and SOA Processes : Example-Process for Handling Credit Card Disputes
    Exchange Server 2007 : Administrate Transport Settings - Set Transport Rules
    Windows System Programming : Registry Management
    Programming with DirectX : Shading and Surfaces - Implementing Texture Mapping (part 1) - 2D Texture Mapping Demo
    Caching User Controls
    Multifaceted Tests : Attempting PHP Include File Injection Interactively & Creating Decompression Bombs
    Cloud Application Architectures : Machine Image Design
    iPhone 3D Programming : Textures and Image Capture - Texture Compression with PVRTC
    Most View
    Becoming an Excel Programmer : Macros and Security
    Working with Basic and Dynamic Disks
    Securing Data from the DBA
    Windows Phone 7 Development : Working with Video (part 1)
    Windows Server 2008 : Installing and Configuring Websites (part 2) - Configuring IIS 7.5 Website Properties
    SQL Server 2008 : Implementing Objects - Understanding DDL and DML Language Elements
    Hacking - Overlooking the Obvious
    Microsoft XNA Game Studio 3.0 : Getting Player Input - Adding Vibration
    .NET Compact Framework : Drawing Text
    Programming with DirectX : Game Math - Bounding Geometry (part 2) - Bounding Spheres & Bounding Hierarchies
    Integrating Office Communications Server 2007 in an Exchange Server 2010 Environment - Understanding Microsoft’s Unified Communications Strategy
    Exchange Server 2010 : Backup and Disaster Recovery Planning
    Windows 7 : Maintaining Your System Configuration (part 1) - Configuring the Computer Name and Membership
    SharePoint 2010 : SQL Backup Tools
    Configuring Server Roles in Windows 2008 : New Roles in 2008
    Windows Phone 7 Development : Push Notifications - Introducing the Push Notifications Architecture
    High Availability in Exchange Server 2010 : Exchange Server database technologies
    Create, Read, and Write a Binary File
    Monitoring a SharePoint 2010 Environment : Using the SharePoint Health Analyzer
    Building LOB Applications : Implementing CRUD Operations in WCF Data Services