(For more resources related to this topic, see here.)

Overview of the technologies

The BatteryMonitor application makes reference to two very important frameworks to allow for drawing of graphics to the iOS device’s view, as well as composing and sending of e-mail messages, directly within the application.

In this article, we will be making use of the Core Graphics framework that will be responsible for handling the creation of our battery gauge to allow the contents to be filled based on the total amount of battery life remaining on the device. We will then use the MessageUI framework that will be responsible for composing and sending e-mails whenever the application has determined that the battery levels fall below the 20 percent threshold. This is all handled and done directly within our app.

We will make use of the UIDevice class that will be used to gather the device information for our iOS device. This class enables you to recover device-specific values, including the model of the iOS device that is being used, the device name, and the OS name and version. We will then use the MFMailComposeViewController class object to directly open up the e-mail dialog box within the application.

The information that you can retrieve from the UIDevice class is shown in the following table:

For more information on the UIDevice class, you can refer to the Apple Developer Documentation that can be found and located at the following URL: https://developer.apple.com/library/ios/#DOCUMENTATION/UIKit/Reference/UIDevice_Class/Reference/UIDevice.html.

Building the BatteryMonitor application

Monitoring battery levels is a common thing that we do in our everyday lives. The battery indicator on the iPhone/iPad lets us know when it is time for us to recharge our iOS device. In this section, we will look at how to create an application that can run on an iOS device to enable us to monitor battery levels on an iOS device, and then send an e-mail alert when the battery levels fall below the threshold.

We first need to create our BatteryMonitor project. It is very simple to create this in Xcode. Just follow the steps listed here.

1. Launch Xcode from the /Xcode4/Applications folder.

2. Choose Create a new Xcode project, or File | New Project.

3. Select the Single View Application template from the list of available templates.

4. Select iPad from under the Device Family drop-down list.

5. Ensure that the Use Storyboard checkbox has not been selected.

6. Select the Use Automatic Reference Counting checkbox.

7. Ensure that the Include Unit Tests checkbox has not been selected.

8. Click on the Next button to proceed with the next step in the wizard.

   

9. Enter in BatteryMonitor as the name for your project.

10. Then click on the Next button to proceed with the next step of the wizard.

11. Specify the location where you would like to save your project.

12. Then, click on the Save button to continue and display the Xcode workspace environment.

Now that we have created our BatteryMonitor project, we need to add the MessageUI framework to our project. This will enable us to send e-mail alerts when the battery levels fall below the threshold.

Adding the MessageUI framework to the project

As we mentioned previously, we need to add the MessageUI framework to our project to allow us to compose and send an e-mail directly within our iOS application, whenever we determine that our device is running below the allowable percentage.

To add the MessageUI framework, select Project Navigator Group, and follow the simple steps outlined here:

1. Click and select your project from Project Navigator.

2. Then, select your project target from under the TARGETS group.

3. Select the Build Phases tab.

4. Expand the Link Binary With Libraries disclosure triangle.

5. Finally, use + to add the library you want.

6. Select MessageUI.framework from the list of available frameworks.

Now that we have added MessageUI.framework into our project, we need to start building our user interface that will be responsible for allowing us to monitor the battery levels of our iOS device, as well as handle sending out e-mails when the battery levels fall below the agreed threshold.

Creating the main application screen

The BatteryMonitor application doesn’t do anything at this stage; all we have done is created the project and added the MessageUI framework to handle the sending of e-mails when our battery levels are falling below the threshold.

We now need to start building the user interface for our BatteryMonitor application. This screen will consist of a View controller, and some controls to handle setting the number of bars to be displayed, as well as whether the monitoring of the battery should be enabled or disabled.

1. Select the ViewController.xib file from Project Navigator.

2. Set the value of Background of the View controller to read Black Color.

3. Next, from Object Library, select-and-drag a (UILabel) Label control, and add this to our view.

4. Modify the Text property of the control to Battery Status:.

5. Modify the Font property of the control to System 42.0.

6. Modify the Alignment property of the control to Center.

7. Next, from Object Library, select-and-drag another (UILabel) Label control, and add this to our view directly underneath the Battery Status label.

8. Modify the Text property of the control to Battery Level:.

9. Modify the Font property of the control to System 74.0.

10. Modify the Alignment property of the control to Center.

Now that we have added our label controls to our view controller, our next step is to start adding the rest of our controls that will make up our user interface. So let’s proceed to the next section.

Adding the Enable Monitoring UISwitch control

Our next step is to add a switch control to our view controller; this will be responsible for determining whether or not we are to monitor our battery levels and send out alert e-mails whenever our battery life is running low on our iOS device. This can be achieved by following these simple steps:

1. From Object Library, select-and-drag a (UILabel) Label control, and add this to the bottom right-hand corner of our view controller.

2. Modify the Text property of the control to Enable Monitoring:.

3. Modify the Font property of the control to System 17.0.

4. Modify the Alignment property of the control to Left.

5. Next, from Object Library, select-and-drag a (UISwitch) Switch control to the right of the Enable Monitoring label.

   

6. Next, from the Attributes Inspector section, change the value of State to On.

7. Then, change the value of On Tint to Default.

   

Now that we have added our Enable Monitoring switch control to our BatteryMonitor View controller, our next step is to add the Send E-mail Alert switch that will be responsible for sending out e-mail alerts if it has determined that the battery levels have fallen below our threshold. So, let’s proceed with the next section.

Adding the Send E-mail Alert UISwitch control

Now, we need to add another switch control to our view that will be responsible for sending e-mail alerts. This can be achieved by following these simple steps:

1. From Object Library, select-and-drag another (UILabel) Label control, and add this underneath our Enable Monitoring label.

2. Modify the Text property of the control to Send E-mail Alert:.

3. Modify the Font property of the control to System 17.0.

4. Modify the Alignment property of the control to Left.

5. Next, from Object Library, select-and-drag a (UISwitch) Switch control to the right of the Send Email Alert label.

6. Next, from the Attributes Inspector section, change the value of State to On.

7. Then, change the value of On Tint to Default.

   To duplicate a UILabel and/or UISwitch control and have them retain the same attributes, you can use the keyboard shortcut Command + D. You can then update the Text label for the newly added control.

Now that we have added our Send E-mail Alert button to our BatteryMonitor view controller, our next step is to add the Fill Gauge Levels switch that will be responsible for filling our battery gauge when it has been set to ON.

Adding the Fill Gauge Levels UISwitch control

Now, we need to add another switch control to our view that will be responsible for determining whether our gauge should be filled to show the amount of battery remaining. This can be achieved by following these simple steps:

1. From Object Library, select-and-drag another (UILabel) Label control, and add this underneath our Send E-mail Alert label.

2. Modify the Text property of the control to Fill Gauge Levels:.

3. Modify the Font property of the control to System 17.0.

4. Modify the Alignment property of the control to Left.

5. Next, from Object Library, select-and-drag a (UISwitch) Switch control to the right of the Fill Gauge Levels label.

6. Next, from the Attributes Inspector section, change the value of State to On.

7. Then, change the value of On Tint to Default.

Now that we have added our Fill Gauge Levels switch control to our BatteryMonitor view controller, our next step is to add the Increment Bars stepper that will be responsible for increasing the number of bar cells within our battery gauge.