Learning Mobile App Development A Hands-on Guide to Building Apps with iOS and Android Jakob Iversen

Learning Mobile App Development A Hands-on Guide to Building Apps with iOS and Android BY Jakob Iversen

Email: Richard@qwconsultancy.com

Chapter 1: Why Mobile Apps?

Overview of Chapter This chapter provides an overview of some of the common issues involved with developing mobile apps. Much of the focus is on the business aspects of developing apps as well as how businesses can employ a mobile strategy to improve business processes. Even for students who may have a lot of experience using their own mobile devices, these business discussions are likely to prove enlightening.

Learning Objectives After completing this chapter, students should be able to do the following: • Discuss the advantages of a mobile device compared to traditional desktops and laptops.

• Explain the major features of mobile devices that distinguish them from traditional computers (small size, hardware sensors, network capability).

• Understand why mobile devices have the potential to disrupt most business sectors.

• Discuss different ways that a mobile app can be used to reach consumers.

• Discuss different ways that an app can create revenue for its developer.

• Explain how a mobile app can be a part of business process transformations.

Suggested Teaching Approaches for the Chapter The chapter introduces a few app examples, but this is a chapter where examples can help illustrate the various concepts. For the discussion on business disruption, a good example is Amazon’s shopping app that enables scanning of bar codes in a regular store—be sure to introduce the term “showrooming” for this.

As you discuss disruption, be sure to consider it from both a constructive and destructive perspective: Some businesses/industries stand to lose, while others stand to benefit. Encourage students to come up with examples of both.

If you can get a guest speaker to talk about how his/her company is thinking about mobile strategy, this would be a great place to fit it in the course.

For students with little business exposure, you should spend some time discussing the business process implications, including Business Process Reengineering and the Productivity Paradox.

If you assign the end-of-chapter exercises as individual homework, you should have students present some of their findings and discuss them as a class.

Answers to End-of-Chapter Exercises 1. Students will provide many different examples. Some obvious candidates include navigation apps, apps such as Instagram that combine hardware features with network connectivity, and games that take advantage of hardware features like the accelerometer. There are also some interesting augmented reality experiments going on.

You might also accept apps that can exist on a traditional platform but are vastly more useful in the mobile space, such as weather apps, travel assistance apps (currency

convertors, language translators, and the like), and e-book reader apps.

2. Students will provide different examples, although this may be more challenging than the first exercise. Savvy students may ask parents and other relatives for input (you might even encourage this). Apps such as Fence Builder Pro and Bossy from the chapter are good examples of this kind of app.

3. Students will provide different examples. If this is difficult for them, you might suggest they look around them. Perhaps their family has a shared wall calendar that could be digitized and put on everyone’s phones. Or they might get assignments at school that can be completed, turned in, and graded using mobile devices.

Suggested Additional Exercises The purpose of exercises in this chapter should be to get students thinking about and discussing the world of apps beyond what is important to their own world.

1. In a small group, brainstorm different ways that a mobile strategy might change the way "business" is done at your school. What would a mobile app for your school do? Who would use it?

2. Research sales statistics of mobile devices compared to PCs. What did you learn from these statistics?

Solutions to Additional Exercises 1. A variation on Exercise 3 in the chapter.

2. Many of the statistics are readily available through Google searches and reported at websites like Engadget and Gizmodo. They should show that Smartphone sales are several times higher than traditional computer sales, and tablets will surpass them in a few years.

Chapter 2: App Design Issues and Considerations Overview of Chapter This chapter discusses issues associated with developing for a mobile platform. It explains the execution life cycle of an app for both Android and iOS and discusses some of the important tasks that should be performed in different phases of the life cycle. The chapter includes the design issues associated with the screen size, connectivity, battery life, and hardware that a successful mobile developer must plan to handle in the app. Major differences between Android and iOS devices are also discussed. The chapter concludes with an introduction to the app that users of this book will build to learn mobile development in both Android and iOS.

Learning Objectives After completing this chapter, students should be able to do the following: • • • • • • •

Explain the phases of the Android and iOS life cycle.

Identify the major tasks that should be performed in different phases of the life cycle.

Identify the issues associated with designing for a very small screen that can change its orientation at any time.

Identify the issues associated with data connections that can be acquired and lost without notice due to changes in the user’s location and configuration of the device.

Explain why designing for battery life is important and identify good practices for ensuring that the app doesn’t unnecessarily drain the battery.

Identify the issues associated with using the hardware and sensors available on mobile devices.

Identify the differences in Android and iOS devices and the potential impact of those differences on an app.

Suggested Teaching Approaches for the Chapter The concept of the app life cycle will likely be new to most students. Careful explanation of each phase is required. Additionally, you may want to have a few small apps available that demonstrate the impact of having code in the wrong phase.

For example, to demonstrate the difference between the iOS viewDidLoad: and viewWillAppear: methods, you could have an app that loads a value in a text box in the viewDidLoad: method, which then does not show up in the text box. Then

move the exact code to the viewWillAppear: method. It now shows in the text box.

Each of the design issues should be discussed thoroughly because they can have a significant impact on the user’s perception of the app. Showing example apps that violate some aspect of the design consideration is a good idea. For screen size, you could look at an application designed for a desktop machine and talk through or demonstrate how you would deal with redesigning the UI for the very small mobile screen. Be sure to pick an application with a significant amount of complexity in its interface. To demonstrate the impact of orientation changes that are not planned for, create an app with a number of widgets and a Save button below all of them in a vertical orientation. Make the save relative to the widget above it. When you run the app and turn the device, the Save button will not be accessible. Even though the tutorials in the book don’t cover how to code for rotation of the screen, it is important to be aware of the issue.

Connectivity issues need a little more coding to demonstrate. We would suggest you perform some operation that gets data from an external source on the main thread.

Run the app in airplane mode to demonstrate how the app is blocked. In contrast, battery issues are easier to demo. Have an Android app start the GPS in the onCreate method, but do not stop it when the life cycle changes (onPause, onStop, or onDestroy). Run the app and then navigate to another app. The GPS icon should remain on in the status bar. You won’t be able to turn it off, and it will continue consuming power until the user turns it off manually. The GPS can also be used to demonstrate life cycle issues. Create an app with two activities. Place a button on the main activity to open the second activity. In the onCreate method of the first activity, turn on the GPS and then turn it off in the onPause method. Run the app, and when the GPS icon starts flashing in the status bar, navigate to the second activity, check that the GPS is not flashing, and then press the Back button.

The first activity will be displayed, but the GPS will not start. It should be turned on and off in the onResume method.

Finally, use the GPS to demonstrate accuracy issues. Code your demo app to display the accuracy of the GPS on the main screen. Run the app and watch how long it takes to acquire a 5-meter accuracy reading versus a much larger error figure.

Demonstrate what a 5-meter accuracy reading means by having four students stand 5 meters from you on four sides. Note that the reading may place the device location anywhere in the area bound by the students. Because accuracies are given in meters and kilometers in the mobile platforms, if you are in the United States, you may need to include a mini-lecture or activity to reinforce how long a few meters and a kilometer are, respectively.

Designing properly for device constraints is extremely important for successful apps. Don’t rush through this chapter, and be sure to reinforce the ideas as you teach the other chapters through the semester.

Answers to End-of-Chapter Exercises 1. Students will have many different examples. Discourage them from using game apps for this exercise because the differences will not be as stark. You may need to have students work together because some will have Android and some iOS devices. Differences should be noted in the interface layout and how commands are issued to the app.

2. In most cases, the screen is the biggest power draw. The operating system will also be high on the list. The last app used extensively should also be near the top of the list.

3. If students open Maps, the GPS icon will be displayed. When they turn it back on, the GPS will be flashing as it reacquires the device’s position. Clicking to the Home screen causes the GPS icon to disappear.

Suggested Additional Exercises 1. Present the students with a traditional desktop app and have them identify how they would redesign the user interface for a mobile device.

2. Have the students find an example of an app that has a good mobile user interface and one that does not have a good one. Have them explain what makes one good and the other not so good.

3. Have the students identify potential uses for the capability to determine where the device is located. For each of these uses, identify the required level of accuracy. Also identify what they could do if the device cannot get the desired level of accuracy. How will they deal with the inherent error within a given level of accuracy?

Solutions to Additional Exercises 1. Students should break functionality into discrete pieces that can be allocated to their own screen. The new design could include a vertical layout that requires scrolling but should not include one that requires horizontal scrolling.

2. Answers will vary, but students should show some attempt at applying the design principles in their evaluation.

3. Answers will vary, but students should identify items that can have large error rates, such as determining the weather conditions in a certain area (1,000 meters this way or that doesn’t matter much) and items that require much more accurate readings, such as identifying whether they are at a previously saved location. a. Following are a few examples: • Weather forecast—precision of a few kilometers.

• Determine the nearest pizza restaurant (or other retail store)—precision in hundreds of meters.

• Send users a message if they are close to a particular store—no more than 100 meters of accuracy.

• Keep track of user’s daily activity—accuracy in tens of meters.

Chapter 3: Using Eclipse for Android Development Overview of Chapter The purpose of this chapter is to introduce students to the Eclipse IDE and to build a simple “Hello World” app. The chapter covers creating an Android project, the components of the project, configuring the Android emulator for running and testing the app, and coding the app.

Learning Objectives After completing this chapter, students should be able to do the following: • •

Explain the major components of an Android app project, including the role they play in an app.

Use Eclipse to create and execute a simple Android app.

Suggested Teaching Approaches for the Chapter Understanding the components of an Android project requires a bit of work. There are a lot of pieces! We would suggest you work through this chapter in front of the class. Be sure to spend a significant amount of time explaining the components, their contribution to the app, and showing them as you build the project.

UI design in Android is more of a challenge than it is in iOS. The interface builder is quirky because of the need for the UI elements to be relative to each other. You will do more on layouts in Chapter 4 but should spend some time introducing the topic.

Pull items from the Palette and demonstrate how they are modified in the related XML. Try adding extra widgets, and lay them out relative to one another. Then delete one of them and show the students how the whole UI changes. Be sure to emphasize the reason for the relative nature of the UI and the importance of understanding the XML to create the design you want.

The code in this chapter is relatively simple. The important concept to get the student to understand is why the button in the layout must be associated with the code and why this must be done in the onCreate method, or the method that does it must be called in the onCreate method.

The emulator can be painfully slow to load on machines that do not have enough horsepower. We suggest you check your lab and teaching machines to determine whether this is an issue. If it is, suggest to your students that they should start the emulator as the first task in any development session.

Answers to End-of-Chapter Exercises 1. The layout of the additional EditText will differ among students. However, each EditText should have a TextView label, one for first name and one for last name. The IDs of the EditText in the XML should reflect their content—for example, @+id/edit_firstname, @+id/edit_lastname.

The Display button code should grab a reference to each EditText, get the values, concatenate them in a string, and enter it into the Hello World TextView: private void initDisplayButton() { Button displayButton = (Button) findViewById(R.id.buttonDisplay); displayButton.setOnClickListener(new OnClickListener () { @Override public void onClick(View arg0) { EditText editFirstName = (EditText) findViewById(R.id.editFirstName); EditText editLastName = (EditText) findViewById(R.id.editLastName); TextView textDisplay = (TextView) findViewById(R.id.textViewDisplay); String nameToDisplay = editFirstName.getText().toString() + " " + editLastName.getText().toString(); textDisplay.setText("Hello " + nameToDisplay); } }); }

2. The layout of the new button will vary among students. The new button should display Clear and the @+id should reflect the button’s purpose. A new method to initialize the button and perform the onClick operations should be added to the code. The method should be called in the activity’s onCreate method: private void initClearButton() { Button clearButton = (Button) findViewById(R.id.buttonClear); clearButton.setOnClickListener(new OnClickListener () { @Override public void onClick(View arg0) { EditText editFirstName = (EditText) findViewById(R.id.editFirstName); EditText editLastName = (EditText) findViewById(R.id.editLastName); TextView textDisplay = (TextView) findViewById(R.id.textViewDisplay); editFirstName.setText(""); editLastName.setText(""); textDisplay.setText("Hello World"); } }); }

3. Have students explain the observed differences and why they chose the AVD they did. Answers will vary.

Suggested Additional Exercises 1. What three components of an Android app could be considered the minimum number required for an app? Why? 2. Explain what a relative layout is. Why is it important for Android development? Why is it a challenge in Android development?

3. Open the Hello World layout file and switch to the XML view. Change <RelativeLayout> to <LinearLayout> and </RelativeLayout> to </LinearLayout>. Note that these should be the first and last lines in the file. Switch to the Graphical Display. What happens? Why? 4. Create a new app with two EditTexts where the user can enter a number in each. It should have four buttons labeled with the four common arithmetic operators, +, -, /, and *. Output the result of using the arithmetic operator on the two numbers to a TextView.

Solutions to Additional Exercises 1. The Android Manifest, src, and res/layout folders. The manifest is required of all Android apps. It is essentially the configuration file for the app. The src folder contains the source code that provides the behavior in any app.

Without at least one src folder class, the app will not run. The res/layout folder contains the files that create the UI for an Android app. Without a UI, the user could not interact with the app. Actually, a layout is not even needed in cases where the app is a service app. However, there is only a very limited need for this type of app.

2. A relative layout is the basis for Android UI development. It creates a UI by displaying widgets (Buttons, EditTexts, and so on) relative to each other and the root layout. It is important because Android devices come in a large number of screen sizes and resolutions. This enables the user to implement a UI that can run on all devices. It is a challenge because the interface builder tool requires that all widgets placed on the layout are relative to something.

It makes assumptions that the designer may not make. It will often require editing the XML to get the exact design desired.

3. The interface will be distorted in some fashion, depending how the UI was laid out when this change was made. A LinearLayout places widgets one directly after another on the screen as they appear in the XML, ignoring margins and any other layout attributes.

4. Create a new app called SimpleCalculator. You will use only one activity, so leave it as MainActivity. The screen should look like the following:

activity_main.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity" > <EditText android:id="@+id/editText1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:layout_centerHorizontal="true" android:layout_marginTop="26dp" android:ems="10" android:inputType="numberSigned" /> <EditText android:id="@+id/editText2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignLeft="@+id/editText1" android:layout_below="@+id/editText1" android:layout_marginTop="90dp" android:ems="10" android:inputType="numberSigned" > <requestFocus /> </EditText> <Button android:id="@+id/buttonDivide" style="?android:attr/buttonStyleSmall" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignTop="@+id/buttonMultiply" android:layout_toRightOf="@+id/buttonMultiply" android:text="/" />

<Button android:id="@+id/buttonAdd" style="?android:attr/buttonStyleSmall" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignTop="@+id/buttonDivide" android:layout_toRightOf="@+id/buttonDivide" android:text="+" /> <Button android:id="@+id/buttonSubtract" style="?android:attr/buttonStyleSmall" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignTop="@+id/buttonAdd" android:layout_toRightOf="@+id/buttonAdd" android:text="-" /> <Button android:id="@+id/buttonMultiply" style="?android:attr/buttonStyleSmall" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignLeft="@+id/editText2" android:layout_below="@+id/editText1" android:layout_marginLeft="18dp" android:layout_marginTop="33dp" android:text="X" /> <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_centerVertical="true" android:text="=" android:textAppearance="?android:attr/textAppearanceLarge" /> <TextView android:id="@+id/textResult" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/textView1" android:layout_centerHorizontal="true" android:layout_marginTop="25dp" android:text="Result" android:textAppearance="?android:attr/textAppearanceLarge" /> </RelativeLayout>

MainActivity.java public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initMultiplyButton(); initDivideButton(); initAddButton(); initSubtractButton(); } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.activity_main, menu); return true; } private void initMultiplyButton() { Button function = (Button) findViewById(R.id.buttonMultiply); function.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { EditText firstNumberEdit = (EditText) findViewById(R.id.editText1); EditText secondNumberEdit = (EditText) findViewById(R.id.editText2); double firstNumber = Double.valueOf(firstNumberEdit.getText().toString()); double secondNumber = Double.valueOf(secondNumberEdit.getText().toString()); double result = firstNumber * secondNumber; TextView txtResult = (TextView) findViewById(R.id.textResult); txtResult.setText(String.valueOf(result)); } }); } private void initDivideButton() { Button function = (Button) findViewById(R.id.buttonDivide); function.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { EditText firstNumberEdit = (EditText) findViewById(R.id.editText1); EditText secondNumberEdit = (EditText) findViewById(R.id.editText2); double firstNumber = Double.valueOf(firstNumberEdit.getText().toString()); double secondNumber = Double.valueOf(secondNumberEdit.getText().toString()); double result = firstNumber / secondNumber; TextView txtResult = (TextView) findViewById(R.id.textResult); txtResult.setText(String.valueOf(result)); }

}); } private void initAddButton() { Button function = (Button) findViewById(R.id.buttonAdd); function.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { EditText firstNumberEdit = (EditText) findViewById(R.id.editText1); EditText secondNumberEdit = (EditText) findViewById(R.id.editText2); double firstNumber = Double.valueOf(firstNumberEdit.getText().toString()); double secondNumber = Double.valueOf(secondNumberEdit.getText().toString()); double result = firstNumber + secondNumber; TextView txtResult = (TextView) findViewById(R.id.textResult); txtResult.setText(String.valueOf(result)); } }); } private void initSubtractButton() { Button function = (Button) findViewById(R.id.buttonSubtract); function.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { EditText firstNumberEdit = (EditText) findViewById(R.id.editText1); EditText secondNumberEdit = (EditText) findViewById(R.id.editText2); double firstNumber = Double.valueOf(firstNumberEdit.getText().toString()); double secondNumber = Double.valueOf(secondNumberEdit.getText().toString()); double result = firstNumber - secondNumber; TextView txtResult = (TextView) findViewById(R.id.textResult); txtResult.setText(String.valueOf(result)); } }); } }

Chapter 4: Android Navigation and Interface Design Overview of Chapter The purpose of this chapter is to learn how to navigate between screens in an Android app and how to develop an interface using the tools provided by Android and the Eclipse IDE.

Learning Objectives After completing this chapter, students should be able to do the following: • • • • • • •

Explain the use of Activities, Layouts, and Intents in interface design and the relationship between them.

Use the Graphical Layout editor in Eclipse to add widgets to the layout.

Modify the layout XML to fine-tune the layout.

Create a custom dialog and have it return data to the main layout.

Create typical interface elements such as navigation bars and toolbars.

Identify and explain the use of TextView, EditText, Button, ToggleButton, ImageButton, and DatePicker widgets.

Create resource elements in resource xml files.

Suggested Teaching Approaches for the Chapter This is a tough chapter to teach without it being very boring! The students need to learn a lot of very specific commands to create coherent screen designs. However, there are a couple of things that you really want to stress. The first of these is the relative nature of the Android layout and the attributes used to make it work.

You probably don’t want to build the whole contact layout in front of the class.

Demonstrate how to position a RelativeLayout within the root layout.

Demonstrate how to add widgets to that layout. Then add a ScrollView and show how to position it relative to the embedded RelativeLayout. Show them what happens if you do not use the layout_above and layout_below attributes (you will probably want some widgets in the ScrollView). Next, add a number of TextView widgets to the ScrollView. Position them relative to one another using the layout_below and layout_toRightOf and layout_toLeftOf attributes. After you have a layout using those attributes, delete the first TextView and show how the layout changes. As you are adding and changing attributes in the widgets, be sure to switch back and forth between the XML and the graphical layout so that students see the changes and impact of the code changes. Unfortunately,

layouts require practice. You should be very familiar with what the XML does and encourage your students to practice, probably by giving them assignments and exercises. I would strongly suggest that you give them time in lab to work through some layout exercises so that you are there to help them when they have problems.

The custom dialog that returns data is also a difficult concept. Talk through the coding and then set debug points in the methods in both the activity and the dialog to show students the progression of the code as the user interacts with the dialog.

This should include breakpoints in the method that creates and displays the dialog fragment in the activity, the method in the dialog that calls the didFinish method, and the didFinish method in the activity.

Answers to End-of-Chapter Exercises 1. Double click the color.xml file. Switch to the XML. Add the following line between the <resources> and </resources> tags: <color name="color_name">#a color value</color>

Some color values you could suggest: Red-#ff0000, Yellow-#FFFF0F, Blue#0000ff.

2. Copy the XML from the contact_activity.xml file for the navigation bar. It should begin with <RelativeLayout> and end with </RelativeLayout> and contain the three ImageButtons. Paste this XML in the layouts associated with each of the other activities (ContactListActivity, ContactMapActivity, and ContactSettingsActivity). The following code is used to get the buttons to work in each of those activities.

Remember that the methods have to be called in the onCreate method.

ContactListActivity private void initListButton() { ImageButton list = (ImageButton) findViewById(R.id.imageButtonList); list.setEnabled(false); } private void initMapButton() { ImageButton map = (ImageButton) findViewById(R.id.imageButtonMap); map.setOnClickListener(new View.OnClickListener() { public void onClick(View v) { Intent intent = new Intent(ContactListActivity.this, ContactMapActivity.class); intent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP); startActivity(intent); } }); } private void initSettingsButton() { ImageButton settings = (ImageButton) findViewById(R.id.imageButtonSettings); settings.setOnClickListener(new View.OnClickListener() { public void onClick(View v) {

Intent intent = new Intent(ContactListActivity.this, ContactSettingsActivity.class); intent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP); startActivity(intent); } }); }

ContactMapActivity private void initListButton() { ImageButton list = (ImageButton) findViewById(R.id.imageButtonList); list.setOnClickListener(new View.OnClickListener() { public void onClick(View v) { Intent intent = new Intent(ContactMapActivity.this, ContactListActivity.class); intent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP); startActivity(intent); } }); } private void initMapButton() { ImageButton map = (ImageButton) findViewById(R.id.imageButtonMap); map.setEnabled(false); } private void initSettingsButton() { ImageButton settings = (ImageButton) findViewById(R.id.imageButtonSettings); settings.setOnClickListener(new View.OnClickListener() { public void onClick(View v) { Intent intent = new Intent(ContactMapActivity.this, ContactSettingsActivity.class); intent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP); startActivity(intent); } }); }

ContactSettingsActivity private void initListButton() { ImageButton list = (ImageButton) findViewById(R.id.imageButtonList); list.setOnClickListener(new View.OnClickListener() { public void onClick(View v) { Intent intent = new Intent(ContactSettingsActivity.this, ContactListActivity.class); intent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP); startActivity(intent); } }); } private void initMapButton() { ImageButton map = (ImageButton) findViewById(R.id.imageButtonMap); map.setOnClickListener(new View.OnClickListener() { public void onClick(View v) {

Intent intent = new Intent(ContactSettingsActivity.this, ContactMapActivity.class); intent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP); startActivity(intent); } }); } private void initSettingsButton() { ImageButton settings = (ImageButton) findViewById(R.id.imageButtonSettings); settings.setEnabled(false); }

3. Add this line to the TableRow that contains the buttons: android:gravity="center_horizontal"

4. Refer to the sidebar in the chapter for the exact code.

Suggested Additional Exercises 1. Modify the DatePicker custom dialog to allow the user to enter the contact’s age. Display the age in a TextView below the contact’s birthday.

The didFinish method will need to be modified to return two values.

2. Create a custom dialog to ask users their relationship to the contact. Use radio buttons to present the following choices: Friend, Family, Co-worker, and Acquaintance. Add a TextView to display the relationship below the contact’s name. Add a button to open the dialog before the relationship TextView. The custom dialog should return the selection when the user taps the OK button on the dialog. It should display Not Set if the user taps the Cancel button.

Solutions to Additional Exercises 1. The answer to this exercise requires changes to the activity_contact.xml, ContactActivity.java, DataPicker.java, and dataselect.xml files. In the activity_contact.xml file, you will have to add two TextViews: one as a label for age and one for the actual age. The dataselect.xml file will need to be changed to a RelativeLayout and include a TextView for the Age: label and an EditText to enter the age. The DatePicker.java file will need to be modified to save and transfer the entered date. The ContactActivity.java file needs code to display the entered age. The code associated with these changes follows: dateselect.xml <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/dateSeletLayout" android:layout_width="match_parent"

android:layout_height="match_parent" > <DatePicker android:id="@+id/birthdayPicker" android:calendarViewShown="false" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" /> <TextView android:id="@+id/textViewAge" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_below="@+id/birthdayPicker" android:layout_marginTop="15dp" android:layout_marginLeft="15dp" android:text="Age:" /> <EditText android:id="@+id/editTextAge" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_toRightOf="@+id/textViewAge" android:layout_alignBottom="@+id/textViewAge" android:layout_marginLeft="10dp" android:ems="4" android:inputType="number" > </EditText> <Button android:id="@+id/btnCancel" style="?android:attr/buttonStyleSmall" android:layout_width="120dp" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_below="@+id/textViewAge" android:layout_marginTop="15dp" android:layout_marginLeft="15dp" android:text="Cancel" /> <Button android:id="@+id/btnOk" style="?android:attr/buttonStyleSmall" android:layout_width="120dp" android:layout_height="wrap_content" android:layout_toRightOf="@+id/btnCancel" android:layout_alignBottom="@+id/btnCancel" android:layout_marginLeft="10dp" android:text="Ok" /> </RelativeLayout>

contact_activity.xml Add the following two widgets after the Change Birthday button:

<TextView android:id="@+id/textAge" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_below="@+id/textBday" android:layout_marginLeft="10dp" android:layout_marginTop="15dp" android:paddingBottom="25dp" android:text="Age:" android:textAppearance="?android:attr/textAppearanceSmall" /> <TextView android:id="@+id/textContactAge" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_toRightOf="@+id/textAge" android:layout_alignBottom="@+id/textAge" android:layout_marginLeft="10dp" android:paddingBottom="25dp" android:text="" android:textAppearance="?android:attr/textAppearanceSmall" />

DatePicker.java public class DatePickerDialog extends DialogFragment { public interface SaveDateListener { void didFinishDatePickerDialog(Time selectedTime, String age); } public DatePickerDialog() { // Empty constructor required for DialogFragment } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { final View view = inflater.inflate(R.layout.dateselect, container); getDialog().setTitle("Select Date"); final DatePicker dp = (DatePicker) view.findViewById(R.id.birthdayPicker); final EditText editAge = (EditText) view.findViewById(R.id.editTextAge); Button saveButton = (Button) view.findViewById(R.id.btnOk); saveButton.setOnClickListener(new OnClickListener() { @Override public void onClick(View arg0) { Time selectedTime = new Time(); selectedTime.set(dp.getDayOfMonth(), dp.getMonth(), dp.getYear()); saveItem(selectedTime, editAge.getText().toString()); } }); Button cancelButton = (Button) view.findViewById(R.id.btnCancel); cancelButton.setOnClickListener(new OnClickListener() { @Override

public void onClick(View v) { // TODO Auto-generated method stub getDialog().dismiss(); } }); return view; } private void saveItem(Time selectedTime, String age) { SaveDateListener activity = (SaveDateListener) getActivity(); activity.didFinishDatePickerDialog(selectedTime, age); getDialog().dismiss(); } }

ContactActivity.Java You need to modify only one method in this file: @Override public void didFinishDatePickerDialog(Time selectedTime, String age) { TextView birthDay = (TextView) findViewById(R.id.textBirthday); TextView textAge = (TextView) findViewById(R.id.textContactAge); birthDay.setText(DateFormat.format("MM/dd/yyyy", selectedTime.toMillis(false)).toString()); textAge.setText(age); }

2. This exercise requires more effort than Exercise 1. In addition to changes to the ContactActivity.java and activity_contact.xml files, you need to create a new layout and Java class for the relationship picker. Name these new files RelationshipDialog.Java and relationshipselect.xml. What follows is the code for these new files and the modifications to the existing files: relationshipselect.xml <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/dateSeletLayout" android:layout_width="match_parent" android:layout_height="match_parent" > <RadioGroup android:id="@+id/radioGroupRelationships" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_alignParentTop="true" android:layout_marginTop="15dp" > <RadioButton android:id="@+id/radioFriend" android:layout_width="wrap_content"

android:layout_height="wrap_content" android:checked="true" android:text="Friend" /> <RadioButton android:id="@+id/radioFamily" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Family" /> <RadioButton android:id="@+id/radioCoWorker" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Co-Worker" /> <RadioButton android:id="@+id/radioAcquaintance" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Acquaintance" /> </RadioGroup> <Button android:id="@+id/btnCancel" style="?android:attr/buttonStyleSmall" android:layout_width="120dp" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_below="@+id/radioGroupRelationships" android:layout_marginLeft="15dp" android:layout_marginTop="15dp" android:text="Cancel" /> <Button android:id="@+id/btnOk" style="?android:attr/buttonStyleSmall" android:layout_width="120dp" android:layout_height="wrap_content" android:layout_alignBottom="@+id/btnCancel" android:layout_marginLeft="10dp" android:layout_toRightOf="@+id/btnCancel" android:text="Ok" /> </RelativeLayout>

RelationshipDialog.Java public class RelationshipDialog extends DialogFragment { public interface SaveRelationshipListener { void didFinishRelationshipPickerDialog(String relationship); void didCancelRelationshipPickerDialog(); } public RelationshipDialog() { // Empty constructor required for DialogFragment

} @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { final View view = inflater.inflate(R.layout.relationshipselect, container); getDialog().setTitle("Select Relationship"); final RadioButton rbFamily = (RadioButton) view.findViewById(R.id.radioFamily); final RadioButton rbFriend = (RadioButton) view.findViewById(R.id.radioFriend); final RadioButton rbCoWorker = (RadioButton) view.findViewById(R.id.radioCoWorker); Button saveButton = (Button) view.findViewById(R.id.btnOk); saveButton.setOnClickListener(new OnClickListener() { @Override public void onClick(View arg0) { String relationship; if (rbFamily.isChecked()) { relationship = "Family"; } else { if (rbFriend.isChecked()) { relationship = "Friend"; } else { if (rbCoWorker.isChecked()) { relationship = "Co-Worker"; } else { relationship = "Acquaintance"; } } } saveItem(relationship); } }); Button cancelButton = (Button) view.findViewById(R.id.btnCancel); cancelButton.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { SaveRelationshipListener activity = (SaveRelationshipListener) getActivity(); activity.didCancelRelationshipPickerDialog(); getDialog().dismiss(); } }); return view; } private void saveItem(String relationship) { SaveRelationshipListener activity = (SaveRelationshipListener) getActivity(); activity.didFinishRelationshipPickerDialog(relationship); getDialog().dismiss(); } }

activity_contact.xml Add the following two widgets to the layout and modify the Address TextView, as shown: <Button android:id="@+id/btnRelationship" style="?android:attr/buttonStyleSmall" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_below="@+id/editName" android:layout_marginLeft="10dp" android:layout_marginTop="15dp" android:text="Relationship" /> <TextView android:id="@+id/textRelationship" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_toRightOf="@+id/btnRelationship" android:layout_alignBaseline="@+id/btnRelationship" android:layout_marginLeft="10dp" android:text="relationship" android:textAppearance="?android:attr/textAppearanceSmall" /> <TextView android:id="@+id/textAddress" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_below="@+id/btnRelationship" android:layout_marginLeft="10dp" android:layout_marginTop="15dp" android:text="Address:" android:textAppearance="?android:attr/textAppearanceSmall" />

ContactActivity.java You need to modify the class declaration and add three methods. Be sure to call the relationship initialization method in the onCreate method.

Class declaration: public class ContactActivity extends FragmentActivity implements SaveDateListener, SaveRelationshipListener {

New methods: private void initRelationshipButton() { Button changeRelationship = (Button) findViewById(R.id.btnRelationship); changeRelationship.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { FragmentManager fm = getSupportFragmentManager();

RelationshipDialog relationshipPickerDialog = new RelationshipDialog(); relationshipPickerDialog.show(fm, "RelationshipPick"); } }); } @Override public void didFinishRelationshipPickerDialog(String relationship) { TextView textRelationship = (TextView) findViewById(R.id.textRelationship); textRelationship.setText(relationship); }

@Override public void didCancelRelationshipPickerDialog() { TextView textRelationship = (TextView) findViewById(R.id.textRelationship); textRelationship.setText("Not Set"); }

Chapter 5: Persistent Data in Android Overview of Chapter The purpose of this chapter is to teach students the different approaches to make data persist in an Android app. The chapter discusses three types of persistent data: database, flat files, and an Android-specific object that enables simple bits of data to persist through the app life cycle. The chapter teaches students how to create and access a SQLite database and how to use the SharedPreferences object to make data persist across the app life cycle.

Learning Objectives After completing this chapter, students should be able to do the following: • • • • •

Identify and describe the uses of SQLite, SharedPreferences, and flat file storage.

Create a database helper object to create and manage a SQLite database.

Create a data source object to enable storage and retrieval of data from a SQLite database.

Use SharedPreferences to store and retrieve data.

Use the debugger to walk through code in the app.

Suggested Teaching Approaches for the Chapter Begin by explaining what data persistence is and why it is important. Next discuss the three types of data persistence available in Android apps. Depending on the level of the student, you may need to spend some time explaining the concept of a relational database.

Next, focus on using SharedPreferences to make a simple piece of data persist.

Create a simple app that has the capability to select screen background color. Show how, even though you store the selection in a variable, the screen goes back to the original when you exit and then return to the app. Next, add code that stores the selection in a SharedPreferences object to demonstrate how the selection now persists. Code for the layout and activity of a simple app that does this is provided at the end of this teaching guide.

When teaching use of the SQLite database, start with the database helper class. This class is used to get a reference to the database every time the database is accessed. If the database does not exist, the onCreate method is executed. It is very important to execute a SQL statement to create the tables needed in this method. If the database version number has been incremented since the last time the database was accessed, the onUpgrade method is executed. Any modifications to table structure

should be performed here. It is instructive to put break points in the onCreate and the onUpgrade methods and walk through the code so students see when each is executed.

Storing and retrieving data is done in the data source class. Explain the Cursor object and its use. Common mistakes made in accessing data with the cursor include not closing it after the data has been retrieved and not moving to the next record in the cursor during retrieval. Demonstrate with the debugger what happens when each of these mistakes occurs. Stress closing the database as soon as all data is retrieved.

Answers to End-of-Chapter Exercises 1. The answer to this exercise requires modification to the activity_contact_settings.xml ContactSettingsActivity.java files. Additionally, you will need to add a color called system_green to the color.xml file. Use #0ca961 as the value for this color (<color name="system_green">#0ca961</color>): Modify the layout file and add the color radio buttons after the current buttons and the scrollview around all the radio buttons. Do not change the navigation bar: <ScrollView android:id="@+id/scrollView1" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_alignParentTop="true" android:layout_above="@+id/navbar" > <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" > <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_alignParentTop="true" android:layout_marginLeft="15dp" android:layout_marginTop="15dp" android:text="Sort Contact By:" android:textAppearance="?android:attr/textAppearanceMedium" /> <RadioGroup android:id="@+id/radioGroup1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_below="@+id/textView1" android:layout_marginLeft="35dp" android:layout_marginTop="10dp" > <RadioButton

android:id="@+id/radioName" android:layout_width="wrap_content" android:layout_height="wrap_content" android:checked="true" android:text="Name" /> <RadioButton android:id="@+id/radioCity" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="City" /> <RadioButton android:id="@+id/radioBirthday" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Birthday" /> </RadioGroup> <TextView android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_below="@+id/radioGroup1" android:layout_marginLeft="15dp" android:layout_marginTop="15dp" android:text="Sort Order:" android:textAppearance="?android:attr/textAppearanceMedium" /> <RadioGroup android:id="@+id/radioGroup2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_marginLeft="35dp" android:layout_marginTop="10dp" android:layout_below="@+id/textView2" > <RadioButton android:id="@+id/radioAscending" android:layout_width="wrap_content" android:layout_height="wrap_content" android:checked="true" android:text="Ascending" /> <RadioButton android:id="@+id/radioDescending" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Descending" /> </RadioGroup> <TextView android:id="@+id/textView3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_below="@+id/radioGroup2" android:layout_marginLeft="15dp" android:layout_marginTop="15dp" android:text="Background Color:" android:textAppearance="?android:attr/textAppearanceMedium" /> <RadioGroup android:id="@+id/radioGroup3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_marginLeft="35dp"

android:layout_marginTop="10dp" android:layout_below="@+id/textView3" > <RadioButton android:id="@+id/radioRed" android:layout_width="wrap_content" android:layout_height="wrap_content" android:checked="true" android:text="Red" /> <RadioButton android:id="@+id/radioWhite" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="White" /> <RadioButton android:id="@+id/radioBlue" android:layout_width="wrap_content" android:layout_height="wrap_content" android:checked="true" android:text="Blue" /> <RadioButton android:id="@+id/radioGreen" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Green" /> </RadioGroup> </RelativeLayout> </ScrollView>

Add a new method called initColorClick() to the ContactSettingsActivity.java file. Don’t forget to call it in the onCreate method: private void initColorClick() { RadioGroup rgSortOrder = (RadioGroup) findViewById(R.id.radioGroup3); rgSortOrder.setOnCheckedChangeListener(new OnCheckedChangeListener() { @Override public void onCheckedChanged(RadioGroup arg0, int arg1) { ScrollView scrollviewobject = (ScrollView) findViewById(R.id.scrollView1); RadioButton rbRed = (RadioButton) findViewById(R.id.radioRed); RadioButton rbWhite = (RadioButton) findViewById(R.id.radioWhite); RadioButton rbBlue = (RadioButton) findViewById(R.id.radioBlue); RadioButton rbGreen = (RadioButton) findViewById(R.id.radioGreen); if (rbRed.isChecked()) { getSharedPreferences("MyContactListPreferences", Context.MODE_PRIVATE).edit().putString("color", "Red").commit(); scrollviewobject.setBackgroundResource(R.color.system_red); } else if (rbWhite.isChecked()) { getSharedPreferences("MyContactListPreferences", Context.MODE_PRIVATE).edit().putString("color", "White").commit(); scrollviewobject.setBackgroundResource(R.color.system_white);

} else if (rbBlue.isChecked()) { getSharedPreferences("MyContactListPreferences", Context.MODE_PRIVATE).edit().putString("color", "Blue").commit(); scrollviewobject.setBackgroundResource(R.color.system_blue); } else if (rbGreen.isChecked()) { getSharedPreferences("MyContactListPreferences", Context.MODE_PRIVATE).edit().putString("color", "Green").commit(); scrollviewobject.setBackgroundResource(R.color.system_green); } } }); }

Add the following code to the initSettings() method in the same file: String selectedColor = getSharedPreferences("MyContactListPreferences", Context.MODE_PRIVATE).getString("color", "None"); ScrollView scrollviewobject = (ScrollView) findViewById(R.id.scrollView1); RadioButton rbRed = (RadioButton) findViewById(R.id.radioRed); RadioButton rbWhite = (RadioButton) findViewById(R.id.radioWhite); RadioButton rbBlue = (RadioButton) findViewById(R.id.radioBlue); RadioButton rbGreen = (RadioButton) findViewById(R.id.radioGreen); if (selectedColor.equalsIgnoreCase("Red")) { rbRed.setChecked(true); scrollviewobject.setBackgroundResource(R.color.system_red); } else if (selectedColor.equalsIgnoreCase("White")) { rbWhite.setChecked(true); scrollviewobject.setBackgroundResource(R.color.system_white); } else if (selectedColor.equalsIgnoreCase("Blue")) { rbBlue.setChecked(true); scrollviewobject.setBackgroundResource(R.color.system_blue); } else if (selectedColor.equalsIgnoreCase("Green")) { rbGreen.setChecked(true); scrollviewobject.setBackgroundResource(R.color.system_green); }

2. For this exercise, you will have to create a new class called ContactAddress.java and add a method to ContactDataSource.java. To make it work, you need to add a button to the ContactActivity screen that executes the new method. The code for these items follows. The modification to the layout for the new button is not included.

ContactAddress.java public class ContactAddress { private int contactID; private String streetAddress; private String city; private String state; private String zipCode; public ContactAddress() { contactID = -1; } public int getContactID() {

return contactID; } public void setContactID(int i) { contactID = i; } public String getStreetAddress() { return streetAddress; } public void setStreetAddress(String s) { streetAddress = s; } public String getCity() { return city; } public void setCity(String s) { city = s; } public String getState() { return state; } public void setState(String s) { state = s; } public String getZipCode() { return zipCode; } public void setZipCode(String s) { zipCode = s; } }

New Method in ContactDataSource.java public boolean updateContactAddress(ContactAddress c) { boolean didSucceed = false; try { Long rowId = Long.valueOf(c.getContactID()); ContentValues updateValues = new ContentValues(); updateValues.put("streetaddress", c.getStreetAddress()); updateValues.put("city", c.getCity()); updateValues.put("state", c.getState()); updateValues.put("zipcode", c.getZipCode()); didSucceed = database.update("contact", updateValues, "_id=" + rowId, null) > 0; } catch (Exception e) { //Do Nothing -will return false if there is an exception } return didSucceed; }

ContactActivity.java Button Code private void initSaveAddressButton() { Button saveButton = (Button) findViewById(R.id.buttonSaveAddress); saveButton.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { hideKeyboard(); ContactAddress newAddress = new ContactAddress(); newAddress.setContactID(currentContact.getContactID()); newAddress.setStreetAddress(currentContact.getStreetAddress());

newAddress.setCity(currentContact.getCity()); newAddress.setState(currentContact.getState()); newAddress.setZipCode(currentContact.getZipCode()); ContactDataSource ds = new ContactDataSource(ContactActivity.this); ds.open(); boolean wasSuccessful = false; if (currentContact.getContactID()!=-1) { wasSuccessful = ds.updateContactAddress(newAddress); } ds.close(); if (wasSuccessful) { //do something if you want } } }); }

3. This exercise primarily requires modifications to the ContactDBHelper.java file. Essentially, the SQL statement that creates the table has to be modified to include the new BFF field. Next, the onUpgrade method has to be altered to add the BFF field. Both approaches are required so that new users of the app get the new database, and current users of the app get the new field but do not lose the data that they currently have. The code for these items follows: private static final String CREATE_TABLE_CONTACT = "create table contact (_id integer primary key autoincrement, " + "contactname text not null, streetaddress text, " + "city text, state text, zipcode text, " + "phonenumber text, cellnumber text, " + "email text, birthday text, contactphoto blob, BFF integer);";

@Override public void onUpgrade(SQLiteDatabase db, int oldVersion, int newVersion) { Log.w(ContactDBHelper.class.getName(),"Upgrading database from version " + oldVersion + " to "+ newVersion + ", adds new fields"); // db.execSQL("DROP TABLE IF EXISTS contact"); // onCreate(db); try { db.execSQL("ALTER TABLE contact ADD COLUMN contactphoto blob"); db.execSQL("ALTER TABLE contact ADD COLUMN BFF integer"); } catch (Exception e) { //do nothing } }

The database version number will have to be incremented to make the onUpgrade method execute. Additional modifications included adding the BFF field to the ContactDataSource.java file’s insertContact and updateContact methods, modification of the Contact object to include the BFF field, and modification to the activity_contact.xml file to include a

TextView for the BFF label and RadioButtonGroup with two RadioButtons (True/False) for data entry (use @+ids in code below). True will return 1 and False will return 0. Finally, the ContactActivity.java file will have to be modified so that the entered BFF is entered in the current Contact object. Do this by adding a method that captures the RadioButton click and enters the correct value in the contact object. Add the following method to the ContactActivity.java file: private void initBFFClick() { RadioGroup rgBFF = (RadioGroup) findViewById(R.id.radioGroupBFF); rgBFF.setOnCheckedChangeListener(new OnCheckedChangeListener() { @Override public void onCheckedChanged(RadioGroup arg0, int arg1) { RadioButton rbTrue = (RadioButton) findViewById(R.id.radioTrue); if (rbTrue.isChecked()) { currentContact.setBFF(1); } else { currentContact.setBFF(0); } } }); }

Suggested Additional Exercises 1. Modify the ContactList app to include a setting that restricts the contacts displayed in the ContactListActivity to a specific city.

2. Note: This is a more challenging exercise. It introduces a new widget, the spinner, which is like a dropdownlistbox. You may want to discuss it first.

Create an app to allow the user to save the restaurant name, dish name, and a rating on a 1 to 5 scale. The database will have a single table with restaurant name, dish name, and rating as fields. Have two screens: one to enter the rating and another to display average rating by restaurant. The two screens should look like the following:

Solutions to Additional Exercises 1. This exercise only requires changes to the ContactSettingsActivity.java and activity_contact_settings.xml files at this time because you have not yet learned how to retrieve an object for display in a list. First, add a TextView and EditText to activity_contact_settings.xml: <TextView android:id="@+id/textView3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_below="@+id/radioGroup2" android:layout_marginLeft="15dp" android:layout_marginTop="15dp" android:text="City:" android:textAppearance="?android:attr/textAppearanceMedium" /> <EditText android:id="@+id/editTextCity" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignBaseline="@+id/textView3" android:layout_alignBottom="@+id/textView3" android:layout_toRightOf="@+id/textView3" android:layout_marginLeft="15dp" android:ems="10" > </EditText>

Next, modify the ContactSettingsActivity.java file to store the selected city in SharedPreferences and display it in the EditText when the activity reopens.

The save is done by adding a method with a TextChangedListener on the EditText: private void initCityChangedEvent(){

final EditText searchCity = (EditText) findViewById(R.id.editTextCity); searchCity.addTextChangedListener(new TextWatcher() { public void afterTextChanged(Editable s) { getSharedPreferences("MyContactListPreferences", Context.MODE_PRIVATE).edit().putString("selectedCity", searchCity.getText().toString()).commit(); } public void beforeTextChanged(CharSequence arg0, int arg1, int arg2, int arg3) { // Auto-generated method stub } public void onTextChanged(CharSequence s, int start, int before, int count) { // Auto-generated method stub } }); }

Add the following to the initSettings() method to display the saved city name: String city = getSharedPreferences("MyContactListPreferences", Context.MODE_PRIVATE).getString("selectedCity", "None"); EditText searchCity = (EditText) findViewById(R.id.editTextCity); searchCity.setText(city);

2. Create a new app called MealRater. You will need two activities: MainActivity and RatingActivity, a data helper object (RatingDBHelper), a data source object (RatingDataSource), and a Rating object. The following is the code for these items: XML for Enter Rating Screen <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context=".MainActivity" > <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Restaurant:" /> <EditText android:id="@+id/editRestaurant" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignLeft="@+id/textView1" android:layout_below="@+id/textView1" android:layout_marginTop="15dp" android:ems="10" android:imeOptions="actionNext" android:inputType="textPersonName" > <requestFocus /> </EditText> <TextView

android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignLeft="@+id/editRestaurant" android:layout_below="@+id/editRestaurant" android:layout_marginTop="15dp" android:text="Dish:" /> <EditText android:id="@+id/editDish" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignLeft="@+id/textView2" android:layout_below="@+id/textView2" android:layout_marginTop="15dp" android:imeOptions="actionNext" android:ems="10" android:inputType="textPersonName" > </EditText> <TextView android:id="@+id/textView3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignLeft="@+id/editDish" android:layout_below="@+id/editDish" android:layout_marginTop="15dp" android:text="Dish:" /> <RadioGroup android:id="@+id/radioGroup1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignLeft="@+id/textView3" android:layout_below="@+id/textView3" android:layout_marginTop="15dp" android:orientation="horizontal" android:layout_centerVertical="true" > <RadioButton android:id="@+id/radio1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:checked="true" android:text="1" /> <RadioButton android:id="@+id/radio2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="2" /> <RadioButton android:id="@+id/radio3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="3" /> <RadioButton android:id="@+id/radio4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="4" /> <RadioButton android:id="@+id/radio5" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="5" /> </RadioGroup>

<Button android:id="@+id/buttonSave" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/radioGroup1" android:layout_centerHorizontal="true" android:layout_marginTop="21dp" android:text="Save" /> <Button android:id="@+id/buttonRatings" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/buttonSave" android:layout_centerHorizontal="true" android:layout_marginTop="34dp" android:text="Ratings" /> </RelativeLayout>

XML for Average Rating Screen <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context=".RatingActivity" > <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Select Restaurant:" /> <Spinner android:id="@+id/spinnerRestaurant" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignLeft="@+id/textView1" android:layout_below="@+id/textView1" android:layout_marginTop="26dp" /> <TextView android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignLeft="@+id/spinnerRestaurant" android:layout_below="@+id/spinnerRestaurant" android:layout_marginTop="25dp" android:text="Average Rating:" /> <TextView android:id="@+id/textRating" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignBaseline="@+id/textView2" android:layout_alignBottom="@+id/textView2" android:layout_marginLeft="42dp" android:layout_toRightOf="@+id/textView1" android:text="0" /> <Button android:id="@+id/buttonEnterRating" android:layout_width="wrap_content" android:layout_height="wrap_content"

android:layout_below="@+id/textView2" android:layout_centerHorizontal="true" android:layout_marginTop="35dp" android:text="Enter Rating" /> </RelativeLayout>

Code for Enter Rating Activity public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initRatingButton(); initSaveButton(); } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.main, menu); return true; } private void initRatingButton() { Button saveButton = (Button) findViewById(R.id.buttonRatings); saveButton.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Intent intent = new Intent(MainActivity.this, RatingActivity.class); intent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP); startActivity(intent); } }); } public void onResume() { super.onResume(); initScreen(); } private void initSaveButton() { Button saveButton = (Button) findViewById(R.id.buttonSave); saveButton.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { EditText editRestaurant = (EditText) findViewById(R.id.editRestaurant); EditText editDish = (EditText) findViewById(R.id.editDish); RadioButton rb1 = (RadioButton) findViewById(R.id.radio1); RadioButton rb2 = (RadioButton) findViewById(R.id.radio2); RadioButton rb3 = (RadioButton) findViewById(R.id.radio3); RadioButton rb4 = (RadioButton) findViewById(R.id.radio4); RadioButton rb5 = (RadioButton) findViewById(R.id.radio5); Rating r = new Rating(); r.setRestaurant(editRestaurant.getText().toString()); r.setDish(editDish.getText().toString()); if (rb1.isChecked()) { r.setRating(1); } else if (rb2.isChecked()) {

r.setRating(2); } else if (rb3.isChecked()) { r.setRating(3); } else if (rb4.isChecked()) { r.setRating(4); } else if (rb5.isChecked()) { r.setRating(5); } boolean wasSuccessful = false; RatingDataSource ds = new RatingDataSource(MainActivity.this); ds.open(); wasSuccessful = ds.insertRating(r); ds.close(); if (wasSuccessful) { initScreen(); } } }); } private void initScreen() { EditText editRestaurant = (EditText) findViewById(R.id.editRestaurant); EditText editDish = (EditText) findViewById(R.id.editDish); RadioGroup rg = (RadioGroup) findViewById(R.id.radioGroup1); editRestaurant.setText(""); editDish.setText(""); rg.clearCheck(); }

Code for Average Rating Activity public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initRatingButton(); initSaveButton(); } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.main, menu); return true; } private void initRatingButton() { Button saveButton = (Button) findViewById(R.id.buttonRatings); saveButton.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Intent intent = new Intent(MainActivity.this, RatingActivity.class); intent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP); startActivity(intent); } });

} public void onResume() { super.onResume(); initScreen(); } private void initSaveButton() { Button saveButton = (Button) findViewById(R.id.buttonSave); saveButton.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { EditText editRestaurant = (EditText) findViewById(R.id.editRestaurant); EditText editDish = (EditText) findViewById(R.id.editDish); RadioButton rb1 = (RadioButton) findViewById(R.id.radio1); RadioButton rb2 = (RadioButton) findViewById(R.id.radio2); RadioButton rb3 = (RadioButton) findViewById(R.id.radio3); RadioButton rb4 = (RadioButton) findViewById(R.id.radio4); RadioButton rb5 = (RadioButton) findViewById(R.id.radio5); Rating r = new Rating(); r.setRestaurant(editRestaurant.getText().toString()); r.setDish(editDish.getText().toString()); if (rb1.isChecked()) { r.setRating(1); } else if (rb2.isChecked()) { r.setRating(2); } else if (rb3.isChecked()) { r.setRating(3); } else if (rb4.isChecked()) { r.setRating(4); } else if (rb5.isChecked()) { r.setRating(5); } boolean wasSuccessful = false; RatingDataSource ds = new RatingDataSource(MainActivity.this); ds.open(); wasSuccessful = ds.insertRating(r); ds.close(); if (wasSuccessful) { initScreen(); } } }); } private void initScreen() { EditText editRestaurant = (EditText) findViewById(R.id.editRestaurant); EditText editDish = (EditText) findViewById(R.id.editDish); RadioGroup rg = (RadioGroup) findViewById(R.id.radioGroup1); editRestaurant.setText(""); editDish.setText(""); rg.clearCheck(); }

Code for RatingDBHelper.java

public class RatingDBHelper extends SQLiteOpenHelper { private static final String DATABASE_NAME = "myratings.db"; private static final int DATABASE_VERSION = 3; // Database creation sql statement private static final String CREATE_TABLE_RATING = "create table rating (_id integer primary key autoincrement, " + "restaurant text not null, dish text not null, " + "rating int);"; public RatingDBHelper(Context context) { super(context, DATABASE_NAME, null, DATABASE_VERSION); } @Override public void onCreate(SQLiteDatabase database) { database.execSQL(CREATE_TABLE_RATING); }

@Override public void onUpgrade(SQLiteDatabase db, int oldVersion, int newVersion) { // do nothing for now } }

Code for RatingDataSource.java public class RatingDataSource { private SQLiteDatabase database; private RatingDBHelper dbHelper; public RatingDataSource(Context context) { dbHelper = new RatingDBHelper(context); } public void open() throws SQLException { database = dbHelper.getWritableDatabase(); } public void close() { dbHelper.close(); } public boolean insertRating(Rating r) { boolean didSucceed = false; try { ContentValues initialValues = new ContentValues(); initialValues.put("restaurant", r.getRestaurant()); initialValues.put("dish", r.getDish()); initialValues.put("rating", r.getRating()); didSucceed = database.insert("rating", null, initialValues) > 0; } catch (Exception e) { e.printStackTrace(); //Do Nothing -will return false if there is an exception } return didSucceed; }

public ArrayList<String> getRestaurant() { ArrayList<String> restaurants = new ArrayList<String>(); try { String query = "Select DISTINCT(restaurant) from rating"; Cursor cursor = database.rawQuery(query, null); cursor.moveToFirst(); while (!cursor.isAfterLast()) { restaurants.add(cursor.getString(0)); cursor.moveToNext(); } cursor.close(); } catch (Exception e) { restaurants = new ArrayList<String>(); } return restaurants; } public String getRating(String selectedRestaurant) { String averageRating = "0"; Cursor cursor = null; try { String query = "SELECT AVG(rating) FROM rating WHERE restaurant ='" + selectedRestaurant + "'"; cursor = database.rawQuery(query, null); if (cursor.moveToFirst()) { averageRating = String.valueOf(cursor.getDouble(0)); } cursor.close(); } catch (Exception e) { cursor.close(); } return averageRating; } }

Code for Rating Object public class Rating { private int ratingID; private String restaurant; private String dish; private int rating; public Rating() { rating = 0; } public int getRatingID() { return ratingID; } public void setRatingID(int i) { ratingID = i; } public String getRestaurant() { return restaurant; } public void setRestaurant(String s) { restaurant = s; } public String getDish() { return dish; }

public void setDish(String s) { dish = s; } public int getRating() { return rating; } public void setRating(int i) { rating = i; } }

Simple App to Demonstrate SharedPreferences Uncomment sharedPreferences lines to get data to persist. activity_main.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/relativeLayout1" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context=".MainActivity" > <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Screen Color:" /> <RadioGroup android:id="@+id/radioGroup1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/textView1" android:layout_marginTop="14dp" android:layout_toRightOf="@+id/textView1" > <RadioButton android:id="@+id/radioGreen" android:layout_width="wrap_content" android:layout_height="wrap_content" android:checked="true" android:text="Green" /> <RadioButton android:id="@+id/radioBlue" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Blue" /> </RadioGroup> </RelativeLayout>

MainActivity.java public class MainActivity extends Activity { private String selectedColor = "None"; @Override

protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // selectedColor = getSharedPreferences("MyColorPreference", Context.MODE_PRIVATE).getString("colorField","None"); initGreenButton(); initBlueButton(); initScreen(); } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.main, menu); return true; } private void initScreen() { RelativeLayout r = (RelativeLayout) findViewById(R.id.relativeLayout1); if (selectedColor.equalsIgnoreCase("Green")) { r.setBackgroundColor(getResources().getColor(R.color.system_green)); } else if (selectedColor.equalsIgnoreCase("Blue")) { r.setBackgroundColor(getResources().getColor(R.color.system_blue)); } } private void initGreenButton() { RadioButton rb = (RadioButton) findViewById(R.id.radioGreen); rb.setOnClickListener(new OnClickListener () { @Override public void onClick(View v) { RelativeLayout r = (RelativeLayout) findViewById(R.id.relativeLayout1); r.setBackgroundColor(getResources().getColor(R.color.system_green)); selectedColor = "Green"; // getSharedPreferences("MyColorPreference", Context.MODE_PRIVATE).edit().putString("colorField", "Green").commit(); } }); } private void initBlueButton() { RadioButton rb = (RadioButton) findViewById(R.id.radioBlue); rb.setOnClickListener(new OnClickListener () { @Override public void onClick(View v) { RelativeLayout r = (RelativeLayout) findViewById(R.id.relativeLayout1); r.setBackgroundColor(getResources().getColor(R.color.system_blue)); selectedColor = "Blue"; // getSharedPreferences("MyColorPreference", Context.MODE_PRIVATE).edit().putString("colorField", "Blue").commit(); } }); } }

color.xml <?xml version="1.0" encoding="utf-8"?> <resources> <color name="system_blue">#0000ff</color> <color name="system_green">#0ca961</color> </resources>

Chapter 6: Lists in Android: Navigation and Information Display Overview of Chapter The objective of this chapter is to teach students how to implement the ubiquitous list. Lists are an effective way to organize and present data in the limited “real estate” of a mobile app. Lists enable the user to scroll through a large data set with relative ease while providing “drill down” capabilities within that data set. This chapter covers the Android widgets and layouts used to display lists and the code to make both simple and complex lists work on an Android device. In the process of demonstrating how to code lists, the chapter also introduces retrieving and deleting data from the database and how to properly use the onResume method to get the app behavior desired.

Learning Objectives After completing this chapter, students should be able to do the following: • • • • • •

Implement a simple list using built-in Android objects and widgets.

Implement a complex list by subclassing built-in Android objects and creating custom list layouts.

Retrieve a set of objects from the database.

Retrieve a single object from the database.

Delete data from the database.

Code the onResume method.

Suggested Teaching Approaches for the Chapter Certainly, most students will be familiar with the list (or table, as they are called on iOS) in a mobile device, but it may pay to spend a few minutes demonstrating list functionality in an existing app. During this demo, be sure to introduce the concept of list item/cell reuse. On neither Android nor iOS are list items (or cells) created for all data in the data set. Instead, as list items scroll off the screen, the objects are moved to reappear with different data as the user scrolls through the list. This is done to limit the amount of memory required for the display. However, it can cause interesting results when a developer wants to go beyond the simple list provided by Android. They will have to plan for this.

Focus on teaching lists first and worry about the database retrievals and deletions later. You will need to create a static set of data for use in the list. You can code this ahead of time and explain it to the students. This will avoid the need to manually

enter a bunch of data into the device to demonstrate list behavior. You can use code like this to create static data for the lists: String[] items = {“item one”, “item two”, “etc.”};

Start with creating a simple list. Create the layout with just a list widget in it and then talk through the code implementation. This should not take much time because there is very little code needed. However, take some time on the adapter and explain how it connects the display to the underlying data. When you think that students understand the role of the adapter and its configuration, you can begin more complex lists. A complex list item can look any way that the developer would like it to look. Additionally, different list items can be used in the same list. It may be useful to refer the students to the FenceBuilder Pro app displayed in Chapter 1 (see Figure 1.2). This figure shows a list with three types of list items in one list. Each list item requires its own layout, and the customer adapter has to contain logic to determine which layout to use to get the list to look as expected.

Concentrate on explaining the custom adapter, particularly the getView method.

This method is initially executed for every item in the data set up to the number that can be displayed on the screen. It is then executed every time scrolling the list brings a new data item on the screen. Note the check to see if the list item view exists before it inflates (creates) a new list item from the layout. Again, this is to prevent using up too much memory for large data sets.

When students are comfortable with lists, focus on data retrieval from the database.

Note the use of a parametized ArrayList to return a set of contacts. ArrayList is used because you cannot predict how many contacts are in the database, so the collection has to be able to expand. Next, demonstrate what happens when you forget to enter the cursor.moveToNext() code in the correct place (you get an infinite loop). Finally, demonstrate what happens when you forget to close the cursor (cursor.close()). This produces an error that is not necessarily fatal the first time it happens but can introduce irregular app behavior.

End your lecture(s) on this chapter by demonstrating the difference between placing code in the onCreate and onResume methods. Enter code that you want to happen every time a screen is displayed in the onCreate method. Execute the code and navigate to another app or screen. Use the Back button to get back (the code won’t execute). Next, move the code to the onResume method and repeat the process (the code will execute).

Answers to End-of-Chapter Exercises 1. Successfully completing this exercise requires modifications to the list_item.xml and ContactAdapter.java files. The required code is presented in the following listings: list_item.xml (new/modified xml)

<TextView android:layout_height="wrap_content" android:layout_width="wrap_content" android:textAppearance="?android:attr/textAppearanceSmall" android:text="Home:" android:layout_marginLeft="15sp" android:layout_alignParentLeft="true" android:id="@+id/textView1" android:layout_below="@+id/textContactName"/> <TextView android:layout_height="wrap_content" android:layout_width="wrap_content" android:textAppearance="?android:attr/textAppearanceSmall" android:text="(999)555-1111" android:layout_marginLeft="2sp" android:id="@+id/textPhoneNumber" android:layout_toRightOf="@+id/textView1" android:layout_alignBaseline="@+id/textView1" /> <TextView android:layout_height="wrap_content" android:layout_width="wrap_content" android:textAppearance="?android:attr/textAppearanceSmall" android:text="Cell:" android:layout_marginLeft="5sp" android:id="@+id/textView2" android:layout_toRightOf="@+id/textPhoneNumber" android:layout_alignBaseline="@+id/textPhoneNumber" /> <TextView android:layout_height="wrap_content" android:layout_width="wrap_content" android:textAppearance="?android:attr/textAppearanceSmall" android:text="(999)555-1111" android:layout_marginLeft="2sp" android:id="@+id/textCellNumber" android:layout_toRightOf="@+id/textView2" android:layout_alignBaseline="@+id/textView2" />

ContactAdapter.java (modified method) @Override public View getView(int position, View convertView, ViewGroup parent) { View v = convertView; try { Contact contact = items.get(position); if (v == null) { LayoutInflater vi = (LayoutInflater) adapterContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE); v = vi.inflate(R.layout.list_item, null); } TextView contactName = (TextView) v.findViewById(R.id.textContactName); TextView contactNumber = (TextView) v.findViewById(R.id.textPhoneNumber); TextView contactCellNumber = (TextView) v.findViewById(R.id.textCellNumber); Button b = (Button) v.findViewById(R.id.buttonDeleteContact); contactName.setText(contact.getContactName()); contactNumber.setText(contact.getPhoneNumber()); contactCellNumber.setText(contact.getCellNumber()); b.setVisibility(View.INVISIBLE); } catch (Exception e) { e.printStackTrace(); e.getCause(); } return v; }

2. This is very similar to Exercise 1. It just requires additional widgets in the item layout and modifications to the adapter to display the data. list_item.xml (new/modified xml) <TextView android:layout_height="wrap_content" android:layout_width="wrap_content" android:textAppearance="?android:attr/textAppearanceLarge" android:text="Contact Name" android:textColor="@color/system_blue" android:layout_marginLeft="15sp" android:layout_alignParentTop="true" android:layout_alignParentLeft="true" android:id="@+id/textContactName" /> <TextView android:layout_height="wrap_content" android:layout_width="wrap_content" android:textAppearance="?android:attr/textAppearanceSmall" android:text="street" android:layout_marginLeft="15sp" android:layout_alignParentLeft="true" android:id="@+id/textStreet" android:layout_below="@+id/textContactName"/> <TextView android:layout_height="wrap_content" android:layout_width="wrap_content" android:textAppearance="?android:attr/textAppearanceSmall" android:text="city" android:layout_marginLeft="5sp" android:layout_toRightOf="@+id/textStreet" android:layout_alignBaseline="@+id/textStreet" android:id="@+id/textCity" android:layout_below="@+id/textContactName"/> <TextView android:layout_height="wrap_content" android:layout_width="wrap_content" android:textAppearance="?android:attr/textAppearanceSmall" android:text="State" android:layout_marginLeft="5sp" android:layout_toRightOf="@+id/textCity" android:layout_alignBaseline="@+id/textCity" android:id="@+id/textState" android:layout_below="@+id/textContactName"/> <TextView android:layout_height="wrap_content" android:layout_width="wrap_content" android:textAppearance="?android:attr/textAppearanceSmall" android:text="55555" android:layout_marginLeft="5sp" android:layout_toRightOf="@+id/textState" android:layout_alignBaseline="@+id/textState" android:id="@+id/textZip" android:layout_below="@+id/textContactName"/> <TextView android:layout_height="wrap_content" android:layout_width="wrap_content" android:textAppearance="?android:attr/textAppearanceSmall" android:text="(999)555-1111" android:layout_marginLeft="15sp" android:layout_alignParentLeft="true" android:id="@+id/textPhoneNumber" android:layout_below="@+id/textStreet"/>

ContactAdapter.java (modified method)

@Override public View getView(int position, View convertView, ViewGroup parent) { View v = convertView; try { Contact contact = items.get(position); if (v == null) { LayoutInflater vi = (LayoutInflater) adapterContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE); v = vi.inflate(R.layout.list_item, null); } TextView contactName = (TextView) v.findViewById(R.id.textContactName); TextView contactNumber = (TextView) v.findViewById(R.id.textPhoneNumber); TextView contactStreet = (TextView) v.findViewById(R.id.textStreet); TextView contactCity = (TextView) v.findViewById(R.id.textCity); TextView contactState = (TextView) v.findViewById(R.id.textState); TextView contactZip = (TextView) v.findViewById(R.id.textZip); Button b = (Button) v.findViewById(R.id.buttonDeleteContact); contactName.setText(contact.getContactName()); contactNumber.setText(contact.getPhoneNumber()); contactStreet.setText(contact.getStreetAddress()); contactCity.setText(contact.getCity()); contactState.setText(contact.getState()); contactZip.setText(contact.getZipCode()); b.setVisibility(View.INVISIBLE); } catch (Exception e) { e.printStackTrace(); e.getCause(); } return v; }

3. This exercise requires modifications to only ContactAdapter.java. However, it may be a bit challenging because students will have to figure out how to alternate the colors. The included solution uses odd/even position to determine color.

ContactAdapter.java @Override public View getView(int position, View convertView, ViewGroup parent) { View v = convertView; try { Contact contact = items.get(position); if (v == null) { LayoutInflater vi = (LayoutInflater) adapterContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE); v = vi.inflate(R.layout.list_item, null); } TextView contactName = (TextView) v.findViewById(R.id.textContactName); TextView contactNumber = (TextView) v.findViewById(R.id.textPhoneNumber); Button b = (Button) v.findViewById(R.id.buttonDeleteContact); contactName.setText(contact.getContactName()); if ((position % 2) == 0) { contactName.setTextColor(Color.BLUE); }

else { contactName.setTextColor(Color.RED); } contactNumber.setText(contact.getPhoneNumber()); b.setVisibility(View.INVISIBLE); } catch (Exception e) { e.printStackTrace(); e.getCause(); } return v; }

Suggested Additional Exercises 1. Create an app to allow the user to save the restaurant name, dish name, and a rating on a 1 to 5 scale. Have two screens: one to enter the rating and another to display the restaurant name and its average rating in a list. The two screens should look like the following:

2. Modify the app created in Additional Exercise 1 so that when users tap a restaurant in the list, another screen lists all the dishes and their ratings for that restaurant. The new activity should look like this:

3. Modify the list item to display the contact’s photo before the contact name.

Solutions to Additional Exercises 1. If you did the Additional Exercise in Chapter 5, you can reuse the rating activity, the data source object, and db helper object. If not, refer to Chapter 5

in the instructor’s manual for this code. You will need to add a new method to the data source object, create a new activity to display the list, create a new layout for the list item, create a new object to move the average ratings between activities, and create a custom adapter. The code for these items follows: list_item.xml <?xml version="1.0" encoding="utf-8"?> <RelativeLayout android:layout_height="match_parent" android:layout_width="match_parent" xmlns:android="http://schemas.android.com/apk/res/android"> <TextView android:layout_height="wrap_content" android:layout_width="wrap_content" android:textAppearance="?android:attr/textAppearanceMedium" android:text="Restaurant Name" android:layout_marginLeft="15sp" android:layout_alignParentTop="true" android:layout_alignParentLeft="true" android:id="@+id/textRestaurantName" /> <TextView android:layout_height="wrap_content" android:layout_width="wrap_content" android:textAppearance="?android:attr/textAppearanceMedium" android:text="Rating:" android:layout_marginRight="5sp" android:layout_alignParentTop="true" android:layout_toLeftOf="@+id/textAverageRating" android:id="@+id/textView1" /> <TextView android:layout_height="wrap_content" android:layout_width="wrap_content" android:textAppearance="?android:attr/textAppearanceMedium" android:text="3.5" android:layout_marginRight="15sp" android:layout_alignParentTop="true" android:layout_alignParentRight="true" android:id="@+id/textAverageRating" /> </RelativeLayout>

activity_restaurant_list.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context=".RestaurantListActivity" > <Button android:id="@+id/buttonEnterRating" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_alignParentBottom="true" android:text="Enter Rating" /> <ListView android:id="@id/android:list" android:layout_width="match_parent" android:layout_height="wrap_content"

android:layout_above="@+id/buttonEnterRating" android:layout_alignParentTop="true" android:layout_alignParentLeft="true" android:layout_marginLeft="15dp" > </ListView> </RelativeLayout>

New Method in RatingDataSource.java public ArrayList<AverageRating> getRatings() { ArrayList<AverageRating> ratings = new ArrayList<AverageRating>(); Cursor cursor = null; try { String query = "SELECT restaurant, AVG(rating) FROM rating GROUP BY restaurant"; cursor = database.rawQuery(query, null); AverageRating r; cursor.moveToFirst(); while (!cursor.isAfterLast()) { r = new AverageRating(); r.setRestaurant(cursor.getString(0)); r.setRating(String.valueOf(cursor.getDouble(1))); ratings.add(r); cursor.moveToNext(); } cursor.close(); } catch (Exception e) { cursor.close(); } return ratings; }

AverageRating.java public class AverageRating { private String restaurant; private String rating; public AverageRating() { rating = "0"; } public String getRestaurant() { return restaurant; } public void setRestaurant(String s) { restaurant = s; } public String getRating() { return rating; } public void setRating(String s) { rating = s; } }

RatingAdapter.java public class RatingAdapter extends ArrayAdapter<AverageRating> { private ArrayList<AverageRating> items; private Context adapterContext; public RatingAdapter(Context context, ArrayList<AverageRating> items) { super(context, R.layout.list_item, items);

adapterContext = context; this.items = items; } @Override public View getView(int position, View convertView, ViewGroup parent) { View v = convertView; try { AverageRating aveRating = items.get(position); if (v == null) { LayoutInflater vi = (LayoutInflater) adapterContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE); v = vi.inflate(R.layout.list_item, null); } TextView restaurant = (TextView) v.findViewById(R.id.textRestaurantName); TextView averageRating = (TextView) v.findViewById(R.id.textAverageRating); restaurant.setText(aveRating.getRestaurant()); averageRating.setText(aveRating.getRating()); } catch (Exception e) { e.printStackTrace(); e.getCause(); } return v; } }

RestaurantListActivity.java public class RestaurantListActivity extends ListActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_restaurant_list); initEnterRatingButton(); } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.restaurant_list, menu); return true; } private void initEnterRatingButton() { Button saveButton = (Button) findViewById(R.id.buttonEnterRating); saveButton.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Intent intent = new Intent(RestaurantListActivity.this, MainActivity.class); intent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP); startActivity(intent); } }); } public void onResume() { super.onResume();

RatingDataSource ds = new RatingDataSource(this); ds.open(); ArrayList<AverageRating> ratings = ds.getRatings(); ds.close(); setListAdapter(new RatingAdapter(this, ratings)); } }

2. This exercise requires adding an activity that lists all the ratings for a specific restaurant. It requires a custom adapter, another customer list item, a new method in the data source object, and a new activity and layout. dish_rating_list_item.xml <?xml version="1.0" encoding="utf-8"?> <RelativeLayout android:layout_height="match_parent" android:layout_width="match_parent" xmlns:android="http://schemas.android.com/apk/res/android"> <TextView android:layout_height="wrap_content" android:layout_width="wrap_content" android:textAppearance="?android:attr/textAppearanceMedium" android:text="Dish" android:layout_marginLeft="15sp" android:layout_alignParentTop="true" android:layout_alignParentLeft="true" android:id="@+id/textDish" /> <TextView android:layout_height="wrap_content" android:layout_width="wrap_content" android:textAppearance="?android:attr/textAppearanceMedium" android:text="3.5" android:layout_marginRight="15sp" android:layout_alignParentTop="true" android:layout_alignParentRight="true" android:id="@+id/textRating" /> </RelativeLayout>

activity_restaurant_ratings_list.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context=".RestaurantRatingsListActivity" > <TextView android:layout_height="wrap_content" android:layout_width="wrap_content" android:textAppearance="?android:attr/textAppearanceMedium" android:text="Restaurant:" android:layout_marginLeft="15sp" android:layout_alignParentTop="true" android:layout_alignParentLeft="true" android:id="@+id/textView1" /> <TextView android:layout_height="wrap_content" android:layout_width="wrap_content" android:textAppearance="?android:attr/textAppearanceMedium" android:text="name"

android:layout_marginLeft="5sp" android:layout_alignParentTop="true" android:layout_toRightOf="@+id/textView1" android:id="@+id/textRestaurantName" /> <ListView android:id="@id/android:list" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_above="@+id/buttonEnterRating" android:layout_below="@+id/textView1" android:layout_marginTop="5dp" android:layout_alignParentLeft="true" android:layout_marginLeft="15dp" > </ListView> <Button android:id="@+id/buttonEnterRating" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_alignParentBottom="true" android:text="Enter Rating" /> </RelativeLayout>

RatingDataSource.java (new method) public ArrayList<Rating> getRestaurantRatings(String selectedRestaurant) { ArrayList<Rating> ratings = new ArrayList<Rating>(); Cursor cursor = null; try { String query = "SELECT restaurant, dish, rating FROM rating WHERE restaurant ='" + selectedRestaurant + "'"; cursor = database.rawQuery(query, null); Rating r; cursor.moveToFirst(); while (!cursor.isAfterLast()) { r = new Rating(); r.setRestaurant(cursor.getString(0)); r.setDish(cursor.getString(1)); r.setRating(cursor.getInt(2)); ratings.add(r); cursor.moveToNext(); } cursor.close(); } catch (Exception e) { cursor.close(); } return ratings; }

RestaurantRatingsAdapter.java public class RestaurantRatingAdapter extends ArrayAdapter<Rating> { private ArrayList<Rating> items; private Context adapterContext; public RestaurantRatingAdapter(Context context, ArrayList<Rating> items) { super(context, R.layout.list_item, items); adapterContext = context; this.items = items; } @Override

public View getView(int position, View convertView, ViewGroup parent) { View v = convertView; try { Rating rating = items.get(position); if (v == null) { LayoutInflater vi = (LayoutInflater) adapterContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE); v = vi.inflate(R.layout.dish_rating_list_item, null); } TextView textDish = (TextView) v.findViewById(R.id.textDish); TextView textRating = (TextView) v.findViewById(R.id.textRating); textDish.setText(rating.getDish()); textRating.setText(String.valueOf(rating.getRating())); } catch (Exception e) { e.printStackTrace(); e.getCause(); } return v; } }

RestaurantRatingsListActivity.java public class RestaurantRatingsListActivity extends ListActivity { String selectedRestaurant = null; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_restaurant_ratings_list); initEnterRatingButton(); Bundle extras = getIntent().getExtras(); if(extras != null) { selectedRestaurant = extras.getString("restaurant"); } } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.restaurant_ratings_list, menu); return true; } private void initEnterRatingButton() { Button saveButton = (Button) findViewById(R.id.buttonEnterRating); saveButton.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Intent intent = new Intent(RestaurantRatingsListActivity.this, MainActivity.class); intent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP); startActivity(intent); } }); } public void onResume() { super.onResume(); RatingDataSource ds = new RatingDataSource(this); ds.open();

ArrayList<Rating> ratings = ds.getRestaurantRatings(selectedRestaurant); ds.close(); TextView textRestaurant = (TextView) findViewById(R.id.textRestaurantName); textRestaurant.setText(ratings.get(0).getRestaurant()); setListAdapter(new RestaurantRatingAdapter(this, ratings)); } }

RestaurantListActivity.java (modified onResume method) public void onResume() { super.onResume(); RatingDataSource ds = new RatingDataSource(this); ds.open(); final ArrayList<AverageRating> ratings = ds.getRatings(); ds.close(); setListAdapter(new RatingAdapter(this, ratings)); ListView listView = getListView(); listView.setOnItemClickListener(new AdapterView.OnItemClickListener() { @Override public void onItemClick(AdapterView<?> arg0, View arg1, int arg2, long arg3) { AverageRating selectedRating = ratings.get(arg2); Intent intent = new Intent(RestaurantListActivity.this, RestaurantRatingsListActivity.class); intent.putExtra("restaurant", selectedRating.getRestaurant()); startActivity(intent); } }); }

3. Adding the photo to the list item requires changes to the item_list.xml and the ContactAdapter.java files. list_item.xml (new/modified xml) <ImageView android:id="@+id/imageViewPhoto" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="15sp" android:layout_alignParentTop="true" android:layout_alignParentLeft="true" android:src="@drawable/photoicon" /> <TextView android:layout_height="wrap_content" android:layout_width="wrap_content" android:textAppearance="?android:attr/textAppearanceLarge" android:text="Contact Name" android:textColor="@color/system_blue" android:layout_marginLeft="15sp" android:layout_alignParentTop="true" android:layout_toRightOf="@+id/imageViewPhoto" android:id="@+id/textContactName" />

<TextView android:layout_height="wrap_content" android:layout_width="wrap_content" android:textAppearance="?android:attr/textAppearanceSmall" android:text="(999)555-1111" android:layout_alignLeft="@+id/textContactName" android:id="@+id/textPhoneNumber" android:layout_below="@+id/textContactName"/>

ContactAdapter.java (modified method) @Override public View getView(int position, View convertView, ViewGroup parent) { View v = convertView; try { Contact contact = items.get(position); if (v == null) { LayoutInflater vi = (LayoutInflater) adapterContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE); v = vi.inflate(R.layout.list_item, null); } TextView contactName = (TextView) v.findViewById(R.id.textContactName); TextView contactNumber = (TextView) v.findViewById(R.id.textPhoneNumber); ImageView iv = (ImageView) v.findViewById(R.id.imageViewPhoto); Button b = (Button) v.findViewById(R.id.buttonDeleteContact); contactName.setText(contact.getContactName()); contactNumber.setText(contact.getPhoneNumber()); if (contact.getPicture() != null) { iv.setImageBitmap(contact.getPicture()); } b.setVisibility(View.INVISIBLE); } catch (Exception e) { e.printStackTrace(); e.getCause(); } return v; }

Chapter 7: Maps and Location in Android Overview of Chapter This chapter introduces students to using device location in an Android app. It covers using the sensors and a map to determine device location, determining GPS coordinates from an address, display locations on a map, and manipulating how the map is viewed. Additionally, it demonstrates how to set up the Eclipse development environment to work with maps in Android.

Learning Objectives After completing this chapter, students should be able to do the following: • • • • • •

Set up maps for Android in the Eclipse environment.

Determine a GPS location from an address.

Use the network and GPS sensors to determine geographic location.

Display a map and mark a location on the map.

Get the device’s geographic location from a map.

Change the type of map that is displayed.

Suggested Teaching Approaches for the Chapter Effective teaching of this chapter requires that you have an Android device to demonstrate with. Maps will not work on the emulator provided with Eclipse. It is also useful to have a device to demonstrate the speed and accuracy of the two location sensors.

A teaching approach that mirrors the progression of the chapter is effective.

Beginning with the Geocoding exercise is useful primarily to begin a discussion on the Global Position System, what the coordinates mean, and why they are important.

Next, demonstrate using the sensors to capture location. Emphasize the importance and meaning of the LocationChangedListener. Demonstrate on a real device how changes in accuracy are interpreted as a change in location. Also emphasize knowing when to turn listening on and off. If an app leaves the GPS on and the user exits the app, the GPS may not be able to be turned off without a reboot of the device.

(You may want to demonstrate this with a device.)

Finally, demonstrate putting markers on maps with information available on touch.

When discussing the sections where you are getting device coordinates from the map and showing the device’s location on the map, it may be useful to point out that

you never explicitly code turning off the GPS. Explain that the map has built-in functionality to do this, unlike activities where you code the access and start of the listeners.

Answers to End-of-Chapter Exercises 1. This requires creation of a new project. The following code is in the project called LocationExercise. It requires modification to the manifest, the main activity layout, and the main activity. The code follows: Add the following two lines to the manifest: <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /> <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

The layout xml should be similar to the following (assumes RelativeLayout root): <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_alignParentTop="true" android:layout_marginLeft="15dp" android:layout_marginTop="15dp" android:textStyle="bold|italic" android:text="Network Sensor:" /> <TextView android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_below="@+id/textView1" android:layout_marginLeft="15dp" android:layout_marginTop="15dp" android:textStyle="bold" android:text="Latitude:" /> <TextView android:id="@+id/textNetworkLatitude" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_toRightOf="@+id/textView2" android:layout_alignBaseline="@+id/textView2" android:layout_marginLeft="15dp" android:text="0" /> <TextView android:id="@+id/textView3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_below="@+id/textView2" android:layout_marginLeft="15dp" android:layout_marginTop="15dp" android:textStyle="bold" android:text="Longitude:" /> <TextView android:id="@+id/textNetworkLongitude" android:layout_width="wrap_content"

android:layout_height="wrap_content" android:layout_toRightOf="@+id/textView3" android:layout_alignBaseline="@+id/textView3" android:layout_marginLeft="15dp" android:text="0" /> <TextView android:id="@+id/textView4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_below="@+id/textView3" android:layout_marginLeft="15dp" android:layout_marginTop="15dp" android:textStyle="bold" android:text="Accuracy:" /> <TextView android:id="@+id/textNetworkAccuracy" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_toRightOf="@+id/textView4" android:layout_alignBaseline="@+id/textView4" android:layout_marginLeft="15dp" android:text="0" /> <TextView android:id="@+id/textView5" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_below="@+id/textView4" android:layout_marginLeft="15dp" android:layout_marginTop="25dp" android:textStyle="bold|italic" android:text="GPS Sensor:" /> <TextView android:id="@+id/textView6" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_below="@+id/textView5" android:layout_marginLeft="15dp" android:layout_marginTop="15dp" android:textStyle="bold" android:text="Latitude:" /> <TextView android:id="@+id/textGPSLatitude" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_toRightOf="@+id/textView6" android:layout_alignBaseline="@+id/textView6" android:layout_marginLeft="15dp" android:text="0" /> <TextView android:id="@+id/textView7" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_below="@+id/textView6" android:layout_marginLeft="15dp" android:layout_marginTop="15dp" android:textStyle="bold" android:text="Longitude:" /> <TextView android:id="@+id/textGPSLongitude" android:layout_width="wrap_content"

android:layout_height="wrap_content" android:layout_toRightOf="@+id/textView7" android:layout_alignBaseline="@+id/textView7" android:layout_marginLeft="15dp" android:text="0" /> <TextView android:id="@+id/textView8" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_below="@+id/textView7" android:layout_marginLeft="15dp" android:layout_marginTop="15dp" android:textStyle="bold" android:text="Accuracy:" /> <TextView android:id="@+id/textGPSAccuracy" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_toRightOf="@+id/textView8" android:layout_alignBaseline="@+id/textView8" android:layout_marginLeft="15dp" android:text="0" />

Add the following methods to the main activity. Include the variable declarations after the class declaration: LocationManager locationManager; LocationListener gpsListener; LocationListener networkListener; public void onResume() { super.onResume(); try { locationManager = (LocationManager) getBaseContext().getSystemService(Context.LOCATION_SERVICE); gpsListener = new LocationListener() { public void onLocationChanged(Location location) { TextView txtLatitude = (TextView) findViewById(R.id.textGPSLatitude); TextView txtLongitude = (TextView) findViewById(R.id.textGPSLongitude); TextView txtAccuracy = (TextView) findViewById(R.id.textGPSAccuracy); txtLatitude.setText(String.valueOf(location.getLatitude())); txtLongitude.setText(String.valueOf(location.getLongitude())); txtAccuracy.setText(String.valueOf(location.getAccuracy())); } public void onStatusChanged(String provider, int status, Bundle extras) {} public void onProviderEnabled(String provider) {} public void onProviderDisabled(String provider) {} }; networkListener = new LocationListener() { public void onLocationChanged(Location location) { TextView txtLatitude = (TextView) findViewById(R.id.textNetworkLatitude); TextView txtLongitude = (TextView) findViewById(R.id.textNetworkLongitude); TextView txtAccuracy = (TextView) findViewById(R.id.textNetworkAccuracy);

txtLatitude.setText(String.valueOf(location.getLatitude())); txtLongitude.setText(String.valueOf(location.getLongitude())); txtAccuracy.setText(String.valueOf(location.getAccuracy())); } public void onStatusChanged(String provider, int status, Bundle extras) {} public void onProviderEnabled(String provider) {} public void onProviderDisabled(String provider) {} }; locationManager.requestLocationUpdates(LocationManager.GPS_PROVIDER,0, 0, gpsListener); locationManager.requestLocationUpdates(LocationManager.NETWORK_PROVIDER,0, 0, networkListener); } catch (Exception e) { Toast.makeText(getBaseContext(), "Error, Location not available",Toast.LENGTH_LONG).show(); } } public void onPause() { try { locationManager.removeUpdates(gpsListener); locationManager.removeUpdates(networkListener); } catch (Exception e) { e.printStackTrace(); } super.onPause(); }

2. This requires modification to the layout of the main screen, creation of a new variable and method in the main activity, and adding the method call to the onLocationChanged methods in the onResume method.

Add the following to the layout: <TextView android:id="@+id/textView9" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_below="@+id/textView8" android:layout_marginLeft="15dp" android:layout_marginTop="15dp" android:textStyle="bold|italic" android:text="Best Location:" /> <TextView android:id="@+id/textView10" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_below="@+id/textView9" android:layout_marginLeft="15dp" android:layout_marginTop="5dp" android:textStyle="bold" android:text="Latitude:" /> <TextView

android:id="@+id/textBestLatitude" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_toRightOf="@+id/textView10" android:layout_alignBaseline="@+id/textView10" android:layout_marginLeft="15dp" android:text="0" /> <TextView android:id="@+id/textView11" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_below="@+id/textView10" android:layout_marginLeft="15dp" android:layout_marginTop="5dp" android:textStyle="bold" android:text="Longitude:" /> <TextView android:id="@+id/textBestLongitude" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_toRightOf="@+id/textView11" android:layout_alignBaseline="@+id/textView11" android:layout_marginLeft="15dp" android:text="0" /> <TextView android:id="@+id/textView12" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_below="@+id/textView11" android:layout_marginLeft="15dp" android:layout_marginTop="5dp" android:textStyle="bold" android:text="Accuracy:" /> <TextView android:id="@+id/textBestAccuracy" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_toRightOf="@+id/textView12" android:layout_alignBaseline="@+id/textView12" android:layout_marginLeft="15dp" android:text="0" />

Add the following variable declaration after the activity class declaration: Location currentBestLocation = null;

Add the following method to the main activity: private void getBestLocation(Location newLocation) { if (currentBestLocation == null) { currentBestLocation = newLocation; } else if (newLocation.getAccuracy() <= currentBestLocation.getAccuracy()) { currentBestLocation = newLocation; } else if (newLocation.getTime() - currentBestLocation.getTime() > 5*60*1000) { currentBestLocation = newLocation; }

TextView txtLatitude = (TextView) findViewById(R.id.textBestLatitude); TextView txtLongitude = (TextView) findViewById(R.id.textBestLongitude); TextView txtAccuracy = (TextView) findViewById(R.id.textBestAccuracy); txtLatitude.setText(String.valueOf(currentBestLocation.getLatitude())); txtLongitude.setText(String.valueOf(currentBestLocation.getLongitude())); txtAccuracy.setText(String.valueOf(currentBestLocation.getAccuracy())); }

Add the following method call to the onLocationChanged events of both the GPS listener and the network listener: getBestLocation(location);

3. The modifications for this are fairly simple. The first step is to import a .png file into one of the drawable folders. To do this, right-click the drawable folder and select Import.

The next step is to change this line in the ContactMapActivity.java file from this: googleMap.addMarker(new MarkerOptions().position(point).title(currentContact.getContactName()).snippet(add ress));

to this: googleMap.addMarker(new MarkerOptions().position(point).icon(BitmapDescriptorFactory.fromResource(R.drawab le.Name of icon added)).title(currentContact.getContactName()).snippet(address));

The size of the image will have an impact on how much of the map it covers.

You should make sure it is of reasonable size.

4. This solution requires changes only to the ContactMapActivity.java file. First, move the following to class variables: LatLngBounds.Builder builder = new LatLngBounds.Builder(); int measuredWidth = 0; int measuredHeight = 0;

This requires you to remove their declaration later in the code. Next, add the following code to the end of the onCreate method: googleMap.setMyLocationEnabled(true); googleMap.setOnMyLocationChangeListener(new OnMyLocationChangeListener() { @Override public void onMyLocationChange(Location location) { LatLng point = new LatLng(location.getLatitude(),location.getLongitude()); builder.include(point); googleMap.addMarker(new MarkerOptions().position(point).title("Me")); googleMap.animateCamera(CameraUpdateFactory.newLatLngBounds(builder.build( ),measuredWidth, measuredHeight, 100));

} });

Suggested Additional Exercises 1. Modify the map so that a tap centers the map on the location tapped.

2. Modify the map so that holding down on the map will place a marker in the location that was pressed. Make the marker display “I’m here” when the marker is tapped.

Solutions to Additional Exercises 1. This exercise requires the implementation of an OnMapClickListener by the class, adding the onMapClick method, and then capturing the clicked coordinates and moving the map center to those coordinates. First, modify the class declaration to tell the activity to implement the listener: public class ContactMapActivity extends FragmentActivity OnMapClickListener {

implements

You will have to import the OnMapClickListener interface and then add the unimplemented method. The unimplemented method is onMapClick and is most easily added by hovering over the underlined class name after you import the interface and selecting Add from the drop down. The method will be added at the end of the file. Modify it so that it looks like the following: @Override public void onMapClick(LatLng point) { googleMap.animateCamera(CameraUpdateFactory.newLatLng(point)); }

The click passes the clicked point to this method. All you have to do is tell the map to move to that point. The only remaining step is to add the onMapClickListener to the map. Find the code in the onCreate method that instantiates the map and add the listener after that line (if you do it before, the app will crash): googleMap = ((SupportMapFragment)getSupportFragmentManager().findFragmentById(R.id.map)).getMa p(); googleMap.setOnMapClickListener(this);

2. Putting a marker on the map at the location of a long click follows a similar approach as in Additional Exercise 1. First, tell the class to implement the OnMapLongClickListener: public class ContactMapActivity extends FragmentActivity OnMapLongClickListener {

implements

Next, add the unimplemented method and modify it to look like the following: @Override public void onMapLongClick(LatLng point) { googleMap.addMarker(new MarkerOptions().position(point).title("I'm here!")); }

Finally, add the onMapLongClickListener to the map: googleMap.setOnMapLongClickListener(this);

Chapter 8: Access to Hardware and Sensors in Android Overview of Chapter The goal of this chapter is to help students learn how to interact with the hardware features of an Android device through an app that they have created. The chapter covers using sensors to collect information about the device’s internal state and to access information about the device’s current environment. The chapter also covers accessing hardware features of the device, such as the camera, through an app.

Learning Objectives After completing this chapter, students should be able to do the following: •

• • •

Describe the purpose and use of Manager, SensorEvent, SensorEventListener, IntentFilter, and BroadcastReceiver objects.

Implement an app that can access and use data from device sensors.

Implement an app that can access and use the phone and camera hardware features of a device.

Store and retrieve bitmap data in a SQLite database.

Suggested Teaching Approaches for the Chapter This chapter is best taught with a real device to demonstrate the results of the code because the emulator cannot emulate many of the sensors. There are three general ways that an Android app accesses hardware features of the device. It is important to get students to understand when each is used. Monitoring hardware events, such as changes in battery status or incoming calls, texts, and so on, requires registering a BroadcastReceiver to listen and respond to the event and applying an IntentFilter to the BroadcastReceiver so that it responds only to the desired event. Getting information from a sensor requires getting a reference to the desired sensor and then registering a SensorEventListener with the SensorManager that tells the sensor manager which listener to notify for each sensor. Finally, using hardware features such as the phone and camera requires starting Intents configured to start the desired feature. If you want to use some of these hardware features entirely within the app rather than starting the service outside the app, you often need to use a PendingIntent (explained in the solution to Exercise 3 in this manual).

The best way to teach this is to demonstrate it. Work through the exercises in the chapter using Debug so that students can see how the required parts of using hardware and sensors work together to achieve the correct result. You may want to demonstrate what happens when you don’t include a required permission in the manifest. (The app will crash when you try to access the hardware.)

Answers to End-of-Chapter Exercises 1. Add a TextView to the toolbar with ID: textProximity. Add the following code to the onCreate method: SensorManager mSensorManager = (SensorManager)getSystemService(SENSOR_SERVICE); Sensor proximitySensor = mSensorManager.getDefaultSensor(Sensor.TYPE_PROXIMITY); if (proximitySensor != null) { mSensorManager.registerListener(mySensorEventListener, proximitySensor, SensorManager.SENSOR_DELAY_FASTEST); } else { Toast.makeText(this, "Proximity sensor not found",Toast.LENGTH_LONG).show(); //3 }

Add the following method to the class: private SensorEventListener mySensorEventListener = new SensorEventListener() { public void onAccuracyChanged(Sensor sensor, int accuracy) {

}

@Override public void onSensorChanged(SensorEvent event) { TextView txtProximity = (TextView) findViewById(R.id.textProximity); if (event.sensor.getType() == Sensor.TYPE_PROXIMITY); txtProximity.setText(String.valueOf(event.values[0])); } };

2. This exercise requires modification to ContactActivity.java. In the initCallFunction() method, modify the cell phone EditText so that it calls a method to send a text message: editCell.setOnLongClickListener(new OnLongClickListener() { @Override public boolean onLongClick(View arg0) { textContact(currentContact.getCellNumber()); return false; } });

Then add the following method: private void textContact(String phoneNumber) { Intent intent = new Intent(Intent.ACTION_VIEW); intent.setData(Uri.parse("sms:" + phoneNumber)); startActivity(intent); }

3. This exercise is also somewhat difficult. It requires registering a BroadcastReceiver to listen for incoming text messages. The BroadcastReceiver then reads the incoming text and displays it in a Toast. First, add two class variables to the ContactActivity.java file: SMSToaster smsReceiver; IntentFilter intentFilter;

Next add an onResume and an onPause() method to register the BroadcastReceiver and unregister it: @Override public void onResume() { super.onResume(); smsReceiver = new SMSToaster(); intentFilter = new IntentFilter(); intentFilter.addAction("android.provider.Telephony.SMS_RECEIVED"); intentFilter.setPriority(999); registerReceiver(smsReceiver, intentFilter); } @Override public void onPause() { super.onPause(); // Unregister the SMS receiver unregisterReceiver(smsReceiver); }

Next, create the SMSToaster class in the activity to listen for broadcasts from the messaging system: private class SMSToaster extends BroadcastReceiver { @Override public void onReceive(Context context, Intent intent) { //---get the SMS message passed in--if (intent.getAction().equals("android.provider.Telephony.SMS_RECEIVED")) { Bundle bundle = intent.getExtras(); SmsMessage[] msgs = null; String receivedMessage = ""; if (bundle != null) { //---retrieve the SMS message received--Object[] pdus = (Object[]) bundle.get("pdus"); msgs = new SmsMessage[pdus.length]; for (int i=0; i<msgs.length; i++){ msgs[i] = SmsMessage.createFromPdu((byte[])pdus[i]); receivedMessage += msgs[i].getMessageBody().toString(); }

Toast.makeText(getApplicationContext(), receivedMessage, Toast.LENGTH_LONG).show(); } } } }

Finally, add the following two permissions to the manifest: <uses-permission android:name="android.permission.READ_SMS"/> <uses-permission android:name="android.permission.RECEIVE_SMS"/>

4. This is a relatively simple exercise. It requires the following modifications to mySensorEventListener: if (azimut >= 337 || azimut < 22) { direction = "N"; } else if (azimut >= 292 && azimut < 337) { direction = "NW"; } else if (azimut >= 247 && azimut < 292) { direction = "W"; } else if (azimut >= 202 && azimut < 247) { direction = "SW"; } else if (azimut >= 157 && azimut < 202) { direction = "S"; } else if (azimut >= 112 && azimut < 157) { direction = "SE"; } else if (azimut >= 67 && azimut < 112) { direction = "E"; } else { direction = "NE"; }

Suggested Additional Exercises 1. Write an app that displays the sensors available on an Android device.

2. Write an app that displays how close the device is to another object.

3. Add a long-click event to the email EditText in ContactActivity.java. Code the event to open an email client with the contact’s email address as the To address. Add the message Sent from MyContactList to the body of the email.

4. Modify the app to open a dialog to enter a text message that will be sent from the app instead of opening the text message service.

Solutions to Additional Exercises 1. A very simple app that just requires one activity and associated layout. activity_main.xml <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Available Sensors:" /> <ListView android:id="@id/android:list" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignLeft="@+id/textView1"

android:layout_below="@+id/textView1" android:layout_marginTop="15dp" > </ListView>

MainActivity.java public class MainActivity extends ListActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); SensorManager mSensorManager = (SensorManager)getSystemService(SENSOR_SERVICE); List<Sensor> sensorList = mSensorManager.getSensorList( Sensor.TYPE_ALL); ArrayList<String> sensorNames = new ArrayList<String>(); for (int i = 0; i<sensorList.size(); i++) { Sensor currentSensor = sensorList.get(i); sensorNames.add(currentSensor.getName()); } setListAdapter(new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, sensorNames)); }

2. Another simple app. activity_main.xml <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Light Level:" /> <TextView android:id="@+id/textLight" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_toRightOf="@+id/textView1" android:layout_alignBaseline="@+id/textView1" android:layout_marginLeft="5dp" android:text="level" />

MainActivity.java public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); SensorManager mSensorManager = (SensorManager)getSystemService(SENSOR_SERVICE); Sensor proximitySensor = mSensorManager.getDefaultSensor(Sensor.TYPE_LIGHT); if (proximitySensor != null) { mSensorManager.registerListener(mySensorEventListener, proximitySensor, SensorManager.SENSOR_DELAY_FASTEST); } else {

Toast.makeText(this, "Light sensor not found",Toast.LENGTH_LONG).show(); } } private SensorEventListener mySensorEventListener = new SensorEventListener() { public void onAccuracyChanged(Sensor sensor, int accuracy) {

}

@Override public void onSensorChanged(SensorEvent event) { TextView txtLight = (TextView) findViewById(R.id.textLight); if (event.sensor.getType() == Sensor.TYPE_LIGHT) txtLight.setText(String.valueOf(event.values[0])); } }; }

3. To complete this exercise, you will need to modify the initCallFunction method and the setForEditing method in ContactActivity.java. You will also have to add a method to this file. setForEditing method First, delete this line from the method: editEmail.setEnabled(enabled);

Next, modify the if (enabled) block of code to look like the following: if (enabled) { editName.requestFocus(); editPhone.setInputType(InputType.TYPE_CLASS_PHONE); editCell.setInputType(InputType.TYPE_CLASS_PHONE); editEmail.setInputType(InputType.TYPE_TEXT_VARIATION_EMAIL_ADDRESS); } else { ScrollView s = (ScrollView) findViewById(R.id.scrollView1); s.fullScroll(ScrollView.FOCUS_UP); s.clearFocus(); editPhone.setInputType(InputType.TYPE_NULL); editCell.setInputType(InputType.TYPE_NULL); editEmail.setInputType(InputType.TYPE_NULL); }

Then edit the initCallFunction by adding the following code: EditText editEmail = (EditText) findViewById(R.id.editEMail); editEmail.setOnLongClickListener(new OnLongClickListener() { @Override public boolean onLongClick(View arg0) { sendMail(currentContact.getEMail()); return false; } });

Finally, add the following method: private void sendMail(final String eMailAddress) { Intent email = new Intent(Intent.ACTION_SEND); email.putExtra(Intent.EXTRA_EMAIL, new String[]{ eMailAddress}); email.putExtra(Intent.EXTRA_TEXT, "Sent from MyContactList"); email.setType("message/rfc822"); startActivity(Intent.createChooser(email, "Choose an Email client :")); }

4. This exercise is quite difficult because it introduces a few items not covered in the book. Begin with the solution to Exercise 2. Then modify the textContact method with the following code: private void textContact(String phoneNumber) { final int SENT = 1; // Set a dialog to get the text message from the user AlertDialog.Builder builder = new AlertDialog.Builder(this); builder.setTitle("Enter Text Message"); // The following code puts an EditText in the dialog final EditText input = new EditText(this); input.setInputType(InputType.TYPE_CLASS_TEXT); builder.setView(input); // Set up the buttons builder.setPositiveButton("OK", new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialog, int which) { // Get the message from the EditText String m_Text = input.getText().toString(); // A PendingIntent is set up to notify the messaging service to use your app’s permissions to send the text. If you use an intent, it will use its own permissions.

PendingIntent sent = ContactActivity.this.createPendingResult(SENT, new Intent(), PendingIntent.FLAG_UPDATE_CURRENT); // Get the text Messaging service and the telephone service managers.

You use the telephone service to get the telephone number of the device that is running your app so that the message has a from number.

SmsManager smsManager = SmsManager.getDefault(); TelephonyManager tm = (TelephonyManager) getSystemService(TELEPHONY_SERVICE); String p = tm.getLine1Number(); // Send the message smsManager.sendTextMessage(phoneNumber, tm.getLine1Number(), m_Text, sent, null); } }); builder.setNegativeButton("Cancel", new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialog, int which) { dialog.cancel(); } }); builder.show();

}

Finally, you need to add a permission to the manifest to allow your app to get the device’s phone number: <uses-permission android:name="android.permission.READ_PHONE_STATE"/>

Chapter 9: Using Xcode for iOS Development Overview of Chapter The purpose of this chapter is to introduce students to the Xcode IDE and have them create a simple Hello World App.

Learning Objectives After completing this chapter, students should be able to do the following: • •

Explain the major components of an iOS app project, including the role they play in an app.

Use Xcode to create and execute a simple iOS app.

Suggested Teaching Approaches for the Chapter If your students don’t have experience working on a Mac, you will probably have to spend some time familiarizing them with the environment. Following are a couple of notable pitfalls: •

•

Watch out for full screen mode—Newcomers to Macs often hit the full screen button in the top-right corner of every window, which hides the menu and puts the window in its own space. Showing students how to deal with this and, most importantly, how to get out of this mode is time well spent.

Don’t double-click—In Xcode, you don’t double-click a file to open it.

Double-clicking will pop it out in its own window.

Because this chapter can be covered when students have no Objective-C experience, we recommend covering this chapter before getting into detail with Objective-C in Appendix C. In our experience, it works well when the instructor demonstrates how to use a new piece of software while the students watch/listen without trying to follow along. We suggest you work through the chapter in front of the class. This will allow you to spend extra time demonstrating Xcode, and how to navigate around this very powerful IDE. When you’ve created the project, be sure to spend some time going through the various parts that are included in the project template (see the "Project Settings" section in the chapter).

Most of the chapter is about creating the UI for a very simple app by dragging UI elements onto the canvas. Be sure to spend extra time on the wiring of outlets and actions. It’s very important that students understand this approach to relating UI elements to code. If you have students experienced with other platforms, such as Java and .NET, they may require a bit of "unlearning."

If you wish, you can spend some time talking about the code, but this will be described in more detail in later chapters and the Objective-C appendix.

The section “Dismissing the Keyboard” enables you to discuss in more detail how events are sent and received, as well as some important Xcode skills. The Quick Reference on dismissing the keyboard is handy for students to keep bookmarked for future chapters.

Answers to End-of-Chapter Exercises 1. This requires adding a field for the last name along with an outlet. If students rename the original name field, they should be careful to use Xcode’s refactor action to rename, because the name of the outlet is also stored in the XML file describing the UI. In addition, the code for the showOutput: method should be changed to the following: - (IBAction)showOutput:(id)sender { NSString *firstName = [_txtName text]; NSString *lastName = [_txtLastName text]; NSString *output = [NSString stringWithFormat:@"Hello %@ %@!", firstName, lastName]; _lblOutput.text = output; }

2. Here’s the code for the updated showOutput: method (assuming Exercise 1 was done): - (IBAction)showOutput:(id)sender { NSString *firstName = [_txtName text]; NSString *lastName = [_txtLastName text]; NSString *output; if(firstName.length > 0 && lastName.length > 0){ output = [NSString stringWithFormat:@"Hello %@ %@!", firstName, lastName]; } else { output = @"Hello World!"; } _lblOutput.text = output; }

3. No answer for this exercise. You could ask students to submit a screenshot of their changes to the UI. 4. Action added to LMAViewController.h: - (IBAction)sayHelloWorld:(id)sender;

Code for the new method in LMAViewController.m:

- (IBAction)sayHelloWorld:(id)sender { _lblOutput.text = @"Hello World!"; }

5. No answer for this exercise. You could have students write up a description of what happened, and what would be a better approach. We don’t cover rotation in this book, but you can use this to discuss the importance of dealing with rotation.

6. No answer for this exercise. You could have students write up a description of their experience.

7. Control-drag from button to View Controller in the Dock, and choose showOutput:. This is what the Connections Inspector should look like for one of the buttons—notice that the Touch Up Inside event has two methods associated:

8. No answer. Dismissing the keyboard should not require anything special if the event used in showOutput: was [self.view endEditing:YES];.

Suggested Additional Exercises 1. What happens when you rotate the device/simulator? Was this what you would expect? How might you fix this?

2. Use a graphics program of your choice to create an app icon and launch screen for the Hello World! app.

3. Create a new app with two text fields where the user can enter a number in each. Include four buttons labeled with the four common arithmetic operators: +, -, /, and *. Output the result of using the arithmetic operator on the two numbers to a label.

Solutions to Additional Exercises 1. In landscape mode, the controls stay on the left side of the screen, and when the keyboard is shown, the Tap Here button may be partially covered. The usability problems aren’t huge, but it would look nicer to have the controls centered and the button visible along with the keyboard. The real solution is to use autolayout, which isn’t covered in the book, but students may suggest a variety of solutions, such as moving the controls further up on the screen or placing the button next to the name field.

2. Answers will vary.

3. Screenshot of app (will look different from different students):

Code of LMAViewController.h: // // // // // // //

LMAViewController.h SimpleCalculator Created by Jakob Iversen on 10/3/13.

Copyright (c) 2013 Learning Mobile Apps. All rights reserved.

#import <UIKit/UIKit.h>

@interface LMAViewController : UIViewController @property (weak, nonatomic) IBOutlet UITextField *txtNumber1; @property (weak, nonatomic) IBOutlet UITextField *txtNumber2; @property (weak, nonatomic) IBOutlet UILabel *lblOutput; - (IBAction)addition:(id)sender; - (IBAction)subtraction:(id)sender; - (IBAction)division:(id)sender; - (IBAction)multiplication:(id)sender; @end

Code of LMAViewController.m—note that this version works only on integers and doesn’t catch or deal with any kind of exception, including division by 0: // // // // // // //

LMAViewController.m SimpleCalculator Created by Jakob Iversen on 10/3/13.

Copyright (c) 2013 Learning Mobile Apps. All rights reserved.

#import "LMAViewController.h" @interface LMAViewController () @end @implementation LMAViewController - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib. } - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; // Dispose of any resources that can be recreated. } - (IBAction)addition:(id)sender { int number1 = [_txtNumber1.text intValue]; int number2 = [_txtNumber2.text intValue]; int result = number1 + number2; _lblOutput.text = [NSString stringWithFormat:@"%d + %d = %d", number1, number2, result]; } - (IBAction)subtraction:(id)sender { int number1 = [_txtNumber1.text intValue]; int number2 = [_txtNumber2.text intValue]; int result = number1 - number2; _lblOutput.text = [NSString stringWithFormat:@"%d - %d = %d", number1, number2, result];

} - (IBAction)division:(id)sender { int number1 = [_txtNumber1.text intValue]; int number2 = [_txtNumber2.text intValue]; int result = number1 / number2; _lblOutput.text = [NSString stringWithFormat:@"%d / %d = %d", number1, number2, result]; } - (IBAction)multiplication:(id)sender { int number1 = [_txtNumber1.text intValue]; int number2 = [_txtNumber2.text intValue]; int result = number1 * number2; _lblOutput.text = [NSString stringWithFormat:@"%d * %d = %d", number1, number2, result]; } @end

Chapter 10: iOS Navigation and Interface Design Overview of Chapter The purpose of this chapter is to learn how to enable navigation between screens in an iOS app and how to develop an interface using the tools provided by iOS and Xcode.

Learning Objectives After completing this chapter, students should be able to do the following: • • • • • •

Explain how Tab Bar and Navigation Controllers are used to support navigation between different screens in an iOS app.

Use Storyboard to design apps with multiple screens using both Tab Bar and Navigation Controllers.

Use the Interface Builder to design and create individual screens in iOS apps using the standard UI controls.

Modify properties of the UI elements.

Use the Asset Catalog to add and organize image assets for an iOS app.

Identify and explain the use of various standard UI elements: Label, Button, Text field, Segmented Control, DatePicker, and Scroll View.

Suggested Teaching Approaches for the Chapter If you have students with little experience with iOS, you may have to spend some time demonstrating how the Tab Bar and Navigation Controller work in different apps. You can use Game Center and Contacts as shown in the book, but there are plenty of other options, such as Settings (Navigation Controller), App Store (Tab Bar), Twitter (Tab Bar), and so on. You can have students suggest other apps to look at.

The purpose of the chapter is for students to learn to design iOS apps by using View Controllers and UI Views, such as Buttons, Labels, and Text fields. This is done using the Storyboard feature in Xcode, so you should spend some time demonstrating how to work with Storyboards. The most challenging part of this is finding out where to make changes to settings.

You’ll also want to make sure students understand how to use the Asset Catalog. In the tutorial, we include only a 1x version of the images needed for the Tab Bar navigation. If you’re able to find/create icons in both 1x and 2x resolutions, you should demonstrate how to add the 2x images as well. To drive home the difference

between 1x and 2x, you could pull in different pictures into the 1x and 2x slot to make it easier to see which devices pick up which version.

As you set up the Navigation Controller, spend some time discussing the difference between the Title on the Navigation Controller and the Navigation Item and where each shows up in the screens when running the app. Figure 10.19 shows the title of the Contact View Controller’s Navigation Item (Contact) next to the title of the Birthdate View Controller (Pick Birthdate).

If you have students with limited programming experience, you should spend extra time explaining the code in Listing 10.3. It’s a relatively complex if-else statement with a couple for loops using fast enumeration to iterate over a collection of text fields.

It takes time to become familiar with where to make changes in Xcode, so be sure to set aside lab time for students to work on creating the app in the tutorial, as well as additional exercises and assignments.

Answers to End-of-Chapter Exercises 1. Here are steps to add another Tab: a. Drag a View Controller onto the Storyboard canvas. b. Select the entire Tab Bar Controller Scene and Control-drag from the screen canvas to the new View Controller. c. Select View Controllers under Relationship Segue. d. The Tab can be customized by setting the Title of the Item at the bottom of the new View Controller, or choose a standard Identifier (in the attached solution, I picked the Featured Identifier). e. Set the title of the View Controller by selecting it in the first entry underneath the Scene in the Dock.

2. Steps to solve this problem: a. Drag a Label to the top of the Contact Scene, changing the text to Edit Mode. b. Drag a switch next to the label. c. Add an outlet for the switch called swEditMode. d. Switch to the Connections Inspector. e. Select the Segmented Control and remove the connections. f. Delete the Segmented Control. g. Select the Switch and drag from Value Changed in the Connections Inspector to the Switch. h. Drag from Value Changed to the Switch and choose changeEditMode in the pop-up menu. i. Make the changes to changeEditMode, as shown here: - (IBAction)changeEditMode:(id)sender { NSArray *textFields = @[_txtName, _txtAddress, _txtCity, _txtState, _txtZip, _txtPhone, _txtCell, _txtEmail];

//

if (!_swEditMode.isOn){ _sgmtEditMode.selectedSegmentIndex == 0){ for (UITextField *txtfield in textFields) { [txtfield setEnabled:NO]; [txtfield setBorderStyle:UITextBorderStyleNone]; } [_btnChange setHidden:YES]; } else //if (_sgmtEditMode.selectedSegmentIndex == 1) { for (UITextField *txtfield in textFields) { [txtfield setEnabled:YES]; [txtfield setBorderStyle:UITextBorderStyleRoundedRect]; } [_btnChange setHidden:NO]; }

}

3. Steps to solve this problem: a. Change the Contact Label to First Name: and make the Text Field smaller. b. Select both the Label and Text Field, and option-drag to the right to make a copy. Then change the copied label to Last Name:. c. Rename the outlet for the First Name Text Field from txtName to txtFirstName (right-click the outlet and select Refactor > Rename). d. Add outlet for the Last Name Text Field named txtLastName. e. Add txtLastName to the list of text fields in the changeEditMode: method: NSArray *textFields = @[_txtFirstName, _txtLastName, _txtAddress, _txtCity, _txtState, _txtZip, _txtPhone, _txtCell, _txtEmail];

f. Test by running the app and see that the Text Field is activated and deactivated with the switch.

4. Steps to solve this problem: a. Choose the Date Picker and change the following settings: • Date: Custom Date—set the resulting field to the Birthday of the student.

• Minimum Date: Set to 1/1/1980.

• Maximum Date: Set to 1/1/2000. b. Test by running the app and checking that the proper dates are selected. The Picker displays dates outside of the chosen range, but will spin back to allow only dates inside the range.

Suggested Additional Exercises 1. Change the Labels for the remaining text fields on the Contacts screen to be Placeholder text, similar to the City, State, and Zip fields. What are advantages and disadvantages to using Labels vs. Placeholder text?

2. Drag the 20-gear2 image into the 2x spot in the Asset Catalog. Run the app and observe the effect. What happened? Why? 3. Drag one of the other Glyphish icons into the 2x spot next to 20-gear2 in the Asset Catalog. Run the app and observe the effect. What happened? Why? Try swapping the two icons between the 1x and 2x spots.

4. Change contentSize for the Scroll View (Listing 10.1) to (320, 200) and run the app. Then change to (320, 700). Observe the effects and explain what happened. Determine the best value in your opinion for contentSize. Describe why you picked that value.

Solutions to Additional Exercises 1. Advantages: Lighter look to the finished UI, fewer controls to create.

Disadvantages: May not be able to identify what a particular field is for when editing the Contact after data has been filled in (for example, how to see the difference between Cell phone and Home phone when both are filled in?).

2. When running the app, the gear icon becomes smaller. This is because iOS expects a high-resolution image, and because this has low resolution, the result is that it doesn’t occupy as much space.

3. With two different icons, the one in the 2x slot will show up when you're running the app on a retina display. But it will be smaller than the icon in the 1x spot. This can be a little difficult to test because Xcode doesn’t have a nonretina Simulator option by default.

4. When the value in the y-axis is set low, the area that scrolls is fairly small, whereas the large value allows for scrolling the content way off the screen.

Students are likely to choose different values for the optimal value, but should relate to the usability of the app, so it likely will be around 500.

Chapter 11: Persistent Data in iOS Overview of Chapter The purpose of this chapter is to teach students the different approaches to make data persist in an iOS app. The chapter discusses two types of persistent data: Core Data and User Defaults, which is an iOS-specific object that enables simple bits of data to persist through the app life cycle. The chapter teaches students how to create and access a Core Data database and how to use the NSUserDefaults object to make data persist across the app life cycle.

In addition, this chapter includes the important Delegate pattern, which is used throughout iOS to allow one object to call methods on another object.

Learning Objectives After completing this chapter, students should be able to do the following: • • • • •

Identify and describe the uses of Core Data and User Defaults to store data.

Create a data structure using the Core Data model editor.

Use the Delegate pattern to pass data between View Controllers.

Read data from the user interface and save to Core Data.

Use a Picker View and implement protocols to implement the functionality of the Picker.

Suggested Teaching Approaches for the Chapter Note that the tutorial for this chapter specifies that the students start with a new, empty app. We believe the steps are carefully described in the book, but you should make sure students end up with a running version of the app after making the changes in Listing 11.1. Alternatively, you can direct them to the starter project on GitHub for Chapter 11.

This chapter sets up the connection between the Date Controller and the Contacts Controller by using the Delegate Pattern. This is not a simple concept to understand, so you should spend some time explaining how this works. If you have students with a strong background in object-oriented programming, it shouldn’t be too difficult for them to grasp the concept. Otherwise, you may have to spend some time on it.

It’s not too complicated what we do with the Core Data Model Editor. If you have students with a strong background in databases, you may want to expand on the database aspect of the chapter to work on multiple entities. It’s basically designing relational databases. You may also want to spend some time covering the concept of an entity class, because this is relevant in many other contexts as well. (Here, it’s the NSManagedObject that is created just after Figure 11.7.)

Note that this chapter adds only the functionality to save data to Core Data. Reading it back again is covered in Chapter 12. However, you can show the data by examining the resulting SQLite database file. We recommend the SQLite extension for the Firefox browser as an easy way to explore the data in the file.

The chapter also covers the Delegate pattern, which is used extensively in iOS, so spending some time on this will be valuable. You may want to draw out on the board what code goes where, as well as discuss how the Delegate pattern is valuable because you can switch the delegate to another object, or objects of the same class may have different delegates. As you continue through the book, you will see many instances of setting an object as a delegate of another object. You should remind students that this all started in this chapter.

Answers to End-of-Chapter Exercises 1. Edit the following line of code to viewDidLoad: in LMASettingsController.m, adding the last two items (must be exact names of attributes in the Core Data model): sortOrderItems = @[@"contactName", @"city", @"birthday", @"state", @"streetAddress"];

2. Steps to solve: a. Declare constant string for sort fields. Add this line to Constants.h: extern NSString *const kSortFields;

and this line to Constants.m: NSString *const kSortFields = @"sortFields";

b. Add code to applicationDidFinishLaunchingWithOptions: in LMAAppDelegate to initialize settings file: - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { //Set default settings NSUserDefaults *settings = [NSUserDefaults standardUserDefaults]; if([settings objectForKey:kSortField] == nil) { [settings setObject:@"city" forKey:kSortField]; } if([settings objectForKey:kSortDirectionAscending] == nil){ [settings setBool:YES forKey:kSortDirectionAscending]; } //Add this code: if([settings objectForKey:kSortFields] == nil){ [settings setObject:@[@"contactName", @"city", @"birthday", @"state", @"streetAddress"] forKey:kSortFields]; } [settings synchronize]; NSLog(@"Sort direction: %c", [settings boolForKey:kSortDirectionAscending]); NSLog(@"Sort field: %@", [settings objectForKey:kSortField]); return YES;

}

c. Rearrange viewDidLoad: in LMASettingsController.m to use the array from the settings file: - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. //set the UI based on values in NSUserDefaults NSUserDefaults *settings = [NSUserDefaults standardUserDefaults]; sortOrderItems = [settings objectForKey:kSortFields]; //@[@"contactName", @"city", @"birthday", @"state", @"streetAddress"]; _pckSortField.dataSource = self; _pckSortField.delegate = self; BOOL sortAscending =[settings boolForKey:kSortDirectionAscending]; [_swAscending setOn:sortAscending]; NSString *sortField = [settings objectForKey:kSortField]; int i = 0; for (NSString *field in sortOrderItems) { if([field isEqualToString:sortField]) { [_pckSortField selectRow:i inComponent:0 animated:NO]; } i++; } [_pckSortField reloadComponent:0]; }

3. Solutions will vary.

4. Steps to implement: a. Add two segmented controls to the Settings Scene. b. Add outlets, naming them sgmtSortOrder and sgmtSortDirection. c. The sort direction segmented control’s segments can be added in Interface Builder by replacing First and Second with Ascending and Descending. d. Connect the segmented control to the sortDirectionChanged: method. e. Change sortDirectionChanged:, as follows: - (IBAction)sortDirectionChanged:(id)sender { NSUserDefaults *defaults = [NSUserDefaults standardUserDefaults]; BOOL sortAscending; if([_sgmtSortOrder selectedSegmentIndex] == 1){ sortAscending = YES; } else { sortAscending = NO; } [defaults setBool:sortAscending forKey:kSortDirectionAscending]; }

f. Change viewDidLoad: to remove references to the Picker and Switch and instead populate the Segmented Controls with the values from NSUserDefaults: - (void)viewDidLoad

{ [super viewDidLoad]; // Do any additional setup after loading the view. //set the UI based on values in NSUserDefaults NSUserDefaults *settings = [NSUserDefaults standardUserDefaults]; //Get sort order items from NSUserDefaults sortOrderItems = [settings objectForKey:kSortFields]; //@[@"contactName", @"city", @"birthday", @"state", @"streetAddress"]; //Populate Segmented Control with values read from NSUserDefaults int n = 0; for (NSString *sortField in sortOrderItems) { [_sgmtSortOrder insertSegmentWithTitle:sortField atIndex:n animated:NO]; n++; } //remove original segments [_sgmtSortOrder removeSegmentAtIndex:[sortOrderItems count] animated:NO]; [_sgmtSortOrder removeSegmentAtIndex:[sortOrderItems count] animated:NO]; // // _pckSortField.dataSource = self; // _pckSortField.delegate = self; //Set currently selected segment based on the sort field in settings NSString *sortField = [settings objectForKey:kSortField]; int i = 0; for (NSString *item in sortOrderItems) { if([sortField isEqualToString:item]){ break; } i++; } [_sgmtSortOrder setSelectedSegmentIndex:i]; // // // // // // // //

int i = 0; for (NSString *field in sortOrderItems) { if([field isEqualToString:sortField]) { [_pckSortField selectRow:i inComponent:0 animated:NO]; } i++; } [_pckSortField reloadComponent:0];

//

[_swAscending setOn:sortAscending]; //Set the sort direction based on NSUserDefaults BOOL sortAscending =[settings boolForKey:kSortDirectionAscending]; if(sortAscending){ [_sgmtSortDirection setSelectedSegmentIndex:0]; } else[_sgmtSortDirection setSelectedSegmentIndex:1];

}

g. Add an action to the segmented control called sortOrderChanged:. h. Implement sortOrderChanged: as follows: - (IBAction)sortOrderChanged:(id)sender { NSUserDefaults *defaults = [NSUserDefaults standardUserDefaults]; int selectedIndex = [_sgmtSortOrder selectedSegmentIndex]; NSString *sortField = [_sgmtSortOrder titleForSegmentAtIndex:selectedIndex]; [defaults setObject:sortField forKey:kSortField]; [defaults synchronize]; }

Suggested Additional Exercises 1. Find a way to show more user-friendly values in the Picker View (Contact Name instead of contactName).

2. Create a simple app that has a button that will save the current time to NSUserDefaults. On launch, the timestamp (date and time) should be displayed in a label.

3. Create an app to allow the user to save the restaurant name, dish name, and a rating on a 1 to 5 scale. Have two screens—one to enter the rating and another to display average rating by restaurant. Store the data in Core Data.

The two screens should look like the following:

Solutions to Additional Exercises 1. There are several possible ways to go about this: a. Define a class to hold both the sort field and a description. b. Define a second array to hold the description.

2. This app is simple to create. Start with a new Single-View project; then add a button and two labels—Action for the button called storeTimeStamp: and outlet for the label called lblSavedTime. Code for LMAViewController.m follows: // // // // // //

LMAViewController.m Ch11-Addtl Ex 2 Created by Iversen, Jakob H on 10/30/13.

Copyright (c) 2013 Learning Mobile Apps. All rights reserved.

// #import "LMAViewController.h" @interface LMAViewController () @end @implementation LMAViewController - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib.

NSDate *timestamp; NSUserDefaults *settings = [NSUserDefaults standardUserDefaults]; if([settings objectForKey:@"timestamp"] == nil) { timestamp = [self storeTimeStamp:settings]; } else { timestamp = [settings objectForKey:@"timestamp"]; } NSDateFormatter *formatter = [[NSDateFormatter alloc] init]; formatter.dateStyle = NSDateFormatterMediumStyle; formatter.timeStyle = NSDateFormatterMediumStyle; _lblSavedTime.text = [formatter stringFromDate:timestamp]; } //Store and return the current time -(NSDate *) storeTimeStamp: (NSUserDefaults *)settings { NSDate *now = [[NSDate alloc]init]; [settings setObject:now forKey:@"timestamp"]; [settings synchronize]; return now; } - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; // Dispose of any resources that can be recreated. } - (IBAction)saveTime:(id)sender { NSUserDefaults *settings = [NSUserDefaults standardUserDefaults]; [self storeTimeStamp:settings]; } @end

3. Steps: a. Follow the instructions at the beginning of the chapter to create an Empty App project with Core Data. b. Add a new Storyboard to the project. Set it as the Main storyboard and comment out code in App Delegate. c. Add two View Controllers in Storyboard. d. Add View Controller code files, named LMARatingViewController (for entering ratings) and LMAAverageViewController (for viewing average ratings by restaurant). e. Set the name of code files in Identity Inspector in Storyboard for the two View Controllers.

f. Add UI controls.

g. Main screen: • Outlets for text fields + segmented control.

• Action for Save button. h. Average screen: • Outlet for Picker.

• Action for button to return. i. Buttons on each View controller: • Main: Use for segue (Modal, flip)—no code needed.

• Sub: Use code to dismiss the View Controller. j. Design Core Data model: • dish: String • rating: Integer 16 • restaurant: String k. Add NSManagedObject subclass. l. Code Save button. // // // // //

LMARatingViewController.h Meal Rater Core Data Created by Jakob Iversen on 10/20/13.

// //

Copyright (c) 2013 Learning Mobile Apps. All rights reserved.

#import <UIKit/UIKit.h> @interface LMARatingViewController : UIViewController @property (weak, nonatomic) IBOutlet UITextField *txtRestaurant; @property (weak, nonatomic) IBOutlet UITextField *txtDish; @property (weak, nonatomic) IBOutlet UISegmentedControl *sgmtRating; - (IBAction)saveRating:(id)sender; - (IBAction)viewRatings:(id)sender; @end // // // // // // //

LMARatingViewController.m Meal Rater Core Data Created by Jakob Iversen on 10/20/13.

Copyright (c) 2013 Learning Mobile Apps. All rights reserved.

#import "LMARatingViewController.h" #import "LMAAppDelegate.h" #import "Rating.h" @interface LMARatingViewController () @end @implementation LMARatingViewController - (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil { self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil]; if (self) { // Custom initialization } return self; } - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. } - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; // Dispose of any resources that can be recreated. } - (IBAction)saveRating:(id)sender { int ratingScore = _sgmtRating.selectedSegmentIndex + 1;

LMAAppDelegate *appDelegate = [[UIApplication sharedApplication] delegate]; NSManagedObjectContext *context = [appDelegate managedObjectContext]; Rating *rating = [NSEntityDescription insertNewObjectForEntityForName:@"Rating" inManagedObjectContext:context]; NSError *error; [rating setValue:_txtRestaurant.text forKey:@"restaurant"]; [rating setValue:_txtDish.text forKey:@"dish"];

[rating setValue:[NSNumber numberWithInt:ratingScore] forKey:@"rating"]; [context save:&error]; if(error !=nil) { NSLog(@"Error saving object: %@", error.description); } else { NSLog(@"Object saved successfully"); } } - (IBAction)viewRatings:(id)sender { //DELETE THIS METHOD } @end

// // // // // // //

LMAAverageViewController.h Meal Rater Core Data Created by Jakob Iversen on 10/20/13.

Copyright (c) 2013 Learning Mobile Apps. All rights reserved.

#import <UIKit/UIKit.h> @interface LMAAverageViewController : UIViewController <UIPickerViewDataSource, UIPickerViewDelegate> - (IBAction)dismissViewController:(id)sender; @property (weak, nonatomic) IBOutlet UIPickerView *pckRestaurants; @property (weak, nonatomic) IBOutlet UILabel *lblAverage; @end

// // // // // // //

LMAAverageViewController.m Meal Rater Core Data Created by Jakob Iversen on 10/20/13.

Copyright (c) 2013 Learning Mobile Apps. All rights reserved.

#import "LMAAverageViewController.h" #import "LMAAppDelegate.h" #import "Rating.h" @interface LMAAverageViewController () @end @implementation LMAAverageViewController NSArray *ratings; NSArray *restaurants; - (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil { self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil]; if (self) { // Custom initialization } return self; }

- (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. //Set up Picker View _pckRestaurants.dataSource = self; _pckRestaurants.delegate = self; LMAAppDelegate *appDelegate = [[UIApplication sharedApplication] delegate]; NSManagedObjectContext *context = [appDelegate managedObjectContext]; NSEntityDescription *entityDescription = [NSEntityDescription entityForName:@"Rating" inManagedObjectContext:context]; NSFetchRequest *request = [[NSFetchRequest alloc] init]; [request setEntity:entityDescription]; NSError *error; ratings = [[NSArray alloc] initWithArray:[context executeFetchRequest:request error:&error]]; //Run the restaurant names through a Set to make them distinct NSMutableSet *restaurantSet = [[NSMutableSet alloc] initWithCapacity:[ratings count]]; for (Rating *rating in ratings) { [restaurantSet addObject:rating.restaurant]; } restaurants = [restaurantSet allObjects]; int row = [_pckRestaurants selectedRowInComponent:0]; double average =[self averageRating:[restaurants objectAtIndex:row]]; _lblAverage.text = [NSString stringWithFormat:@"%2.2f", average]; } - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; // Dispose of any resources that can be recreated. } - (IBAction)dismissViewController:(id)sender { [self dismissViewControllerAnimated:YES completion:nil]; } #pragma mark - UIPickerView DataSource // Returns the number of 'columns' to display.

- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView { return 1; } // Returns the # of rows in the picker - (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component { return [restaurants count]; } //Sets the value that is shown for each row in the picker - (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component { // Rating *rating = [ratings objectAtIndex:row]; // return rating.restaurant; return [restaurants objectAtIndex:row];

} //If the user chooses from the pickerview, it calls this function; - (void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component { double average =[self averageRating:[restaurants objectAtIndex:row]]; _lblAverage.text = [NSString stringWithFormat:@"%2.2f", average]; } -(double) averageRating:(NSString *)restaurant { int ratingSum = 0; int count = 0; for (Rating *rating in ratings) { if([rating.restaurant isEqualToString:restaurant]){ ratingSum += [rating.rating intValue]; count++; } } //guard against division by 0 and cast to double to make sure the result is a double double average = (count == 0) ? 0.00 : ratingSum / (double)count; return average; } @end

Chapter 12: Tables in iOS: Navigation and Information Display Overview of Chapter The purpose of this chapter is to introduce students to working with tables, which are the primary way that users navigate through large data sets on the mobile device. We introduce the standard iOS controls and how to use Storyboard to set up the tables and segues to more detailed screens. Along the way, we also work with Core Data to retrieve, sort, update, and delete data.

Learning Objectives After completing this chapter, students should be able to do the following: • • • • • • • • • •

Add a table to an app.

Work with UITableViewDelegate and UITableViewDataSource to populate the table with data.

Retrieve data from Core Data to populate a table with data.

Set up navigation in conjunction with tables.

Update data in Core Data.

Delete records in Core Data.

Use the Table Controller to control deleting of data.

Add Accessory Buttons to Table Rows.

Create Alert View controls based on actions the user takes in the app.

Use Core Data sorting.

Suggested Teaching Approaches for the Chapter Certainly, most students will be familiar with the table (or list, as they are called on Android) in a mobile device, but it may be worthwhile to spend a few minutes demonstrating list functionality in an existing app. During this demo, be sure to introduce the concept of table item/cell reuse. On neither Android nor iOS are cells (or list items) created for all data in the data set. Instead, as cells scroll off the screen, the objects are moved to reappear with different data as the user scrolls through the table. This is done to limit the amount of memory required for the display.

As we do in the chapter, start by demonstrating a simple table with static data stored in an array in the code. Be sure to include enough elements that they scroll off the screen (testing on the 3.5” device makes this easier).

You should spend some time talking through the methods in the UITableViewDelegate and UITableViewDataSource protocols and how they are

implemented. The pattern in these protocols is similar to a number of other protocols used throughout iOS, so it’s important to understand the way it works (and it’s related to the discussion of delegates in Chapter 11, so be sure to reinforce and refer back to that discussion).

You can spend some time playing around with how to customize the table with disclosure indicators, as shown in Figure 12.1, and different cell styles.

When students are comfortable working with the table, move on to retrieve data from Core Data. Now instead of storing strings in the array, you’ll store Core Data objects. The full Core Data functionality, including retrieving, deleting, inserting, and modifying data in Core Data, is spread out through the chapter because it’s introduced as it’s needed in the tutorial app. You may want to pull it all together and cover all the functionality in a mini lecture, because the code is fairly similar.

Setting up the segue to display the Contact editing screen can be a little confusing, so spend some time to make sure you get all the details across.

Answers to End-of-Chapter Exercises 1. This is simply done by selecting the Prototype Cell in Storyboard and changing the Style in the Attributes Inspector.

2. This can be done by adding a second component to the picker. This will add a second, independent "wheel" to the Picker. The challenging part of this exercise is that to have it work properly, it requires making changes to code throughout the project to take the second sort field into account. a. Change viewDidLoad to add a second component to the PickerView:.

3. Here are the steps to complete the exercise: a. Set up an NSarray to hold the sort fields for the second component. b. Update the UIPickerViewDelegate methods to return two components, return the proper value for the row for each component, and use the component value to store the proper value in NSUserDefaults. c. Update code to handle storing two sort fields in NSUserDefaults: • Update Constants class to handle two sort fields.

• Update LMAAppDelegate to set a default value for each sort field. d. Update viewDidLoad: in LMASettingsController.m to set both sort fields. e. Update loadDataFromDatabase: in LMAContactsTableController.m by adding a new NSSortDescriptor to the sortdescriptors array.

4. Change the tableView:cellForRowAtIndexPath: method to use different properties from the Contact class. Following is code to display the phone number and zip code: - (UITableViewCell *)tableView:(UITableView *)tableView

cellForRowAtIndexPath:(NSIndexPath *)indexPath { static NSString *CellIdentifier = @"ContactsCell"; UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier forIndexPath:indexPath]; // Configure the cell...

Contact *contact = [contacts objectAtIndex:[indexPath row] ]; cell.textLabel.text = [contact phoneNumber]; cell.detailTextLabel.text = [contact zipCode]; return cell; }

5. Again, this requires changing tableView:cellForRowAtIndexPath:, as follows: - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { static NSString *CellIdentifier = @"ContactsCell"; UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier forIndexPath:indexPath]; // Configure the cell...

Contact *contact = [contacts objectAtIndex:[indexPath row] ]; NSDateFormatter *formatter = [[NSDateFormatter alloc] init]; [formatter setDateStyle:NSDateFormatterMediumStyle]; NSString *birthday = [formatter stringFromDate:[contact birthday]]; cell.textLabel.text = [NSString stringWithFormat:@"%@ from %@", [contact contactName], [contact city]]; cell.detailTextLabel.text = [NSString stringWithFormat:@"Born on: %@", birthday]; return cell; }

6. This can be done by changing the array of sort fields to be a two-dimensional array with the sort field and display field included. Several changes need to be made throughout LMASettingsController.m to make this work. a. First, in viewDidLoad:, change the sortOrderItems array and change the loops that set the values of the sort fields in the Picker View: - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. sortOrderItems = @[@[@"contactName", @"Contact Name"], @[@"city", @"City"], @[@"birthday", @"Birthday"]]; _pckSortField.dataSource = self; _pckSortField.delegate = self; //set the UI based on values in NSUserDefaults NSUserDefaults *settings = [NSUserDefaults standardUserDefaults]; BOOL sortAscending =[settings boolForKey:kSortDirectionAscending]; [_swAscending setOn:sortAscending]; NSString *sortField1 = [settings objectForKey:kSortField1]; NSString *sortField2 = [settings objectForKey:kSortField2]; int i = 0; for (NSArray *field in sortOrderItems) { if([[field objectAtIndex:0] isEqualToString:sortField1]) { [_pckSortField selectRow:i inComponent:0 animated:NO]; }

i++; } i = 0; for (NSArray *field2 in sortOrderItems) { if([[field2 objectAtIndex:0] isEqualToString:sortField2]) { [_pckSortField selectRow:i inComponent:0 animated:NO]; } i++; } [_pckSortField reloadComponent:0]; }

b. Make changes anywhere the sort field is used: - (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component { return [[sortOrderItems objectAtIndex:row]objectAtIndex:1]; } - (void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component { NSString *sortField; NSString *sortFieldKey; sortField = [[sortOrderItems objectAtIndex:row]objectAtIndex:0]; if(component == 0){ sortFieldKey = kSortField1; } else if (component == 1){ sortFieldKey = kSortField2; } NSUserDefaults *defaults = [NSUserDefaults standardUserDefaults]; [defaults setObject:sortField forKey:sortFieldKey]; [defaults synchronize]; }

Suggested Additional Exercises 1. Modify the Meal Rater app from Chapter 11 to display a table of all the restaurants reviewed instead of the average and Picker View, like this:

2. Modify the Meal Rater app so when the user taps a restaurant name, a new list is displayed, listing all the ratings for that restaurant. The title should display the dish name and the subtitle should display the rating, like this:

Solutions to Additional Exercises 1. This version keeps the Average rating but adds the capability to also view Restaurants: a. Add a Navigation Controller to the Storyboard. b. Add a Button to the main screen with the text “Restaurants >”. c. Add a Segue from the Button to the Navigation Controller. Use a Modal/Flip transition. d. Give the Navigation Item the Title “Restaurants”. e. Give the Prototype Cell the Identifier “Cell”. f. Add code file called LMARestaurantController (subclass of UITableViewController). g. In Storyboard, add LMARestaurantController as the Class (in Identity Inspector) for the Table View Controller. h. Add Bar Button Item to the left side of the table Navigation Bar with the standard identifier Done. i. Add action to the Done button, called dismissController. j. Code LMARestaurantController.m: // // // // // // //

LMARestaurantViewController.m Meal Rater Core Data Created by Jakob Iversen on 10/27/13.

Copyright (c) 2013 Learning Mobile Apps. All rights reserved.

#import "LMARestaurantViewController.h" #import "LMAAppDelegate.h" #import "Rating.h" @interface LMARestaurantViewController () @end @implementation LMARestaurantViewController NSArray *ratings; NSArray *restaurants; - (id)initWithStyle:(UITableViewStyle)style { self = [super initWithStyle:style]; if (self) { // Custom initialization } return self; } - (NSMutableSet *)loadDataFromDatabase { // Uncomment the following line to display an Edit button in the navigation bar for this view controller. // self.navigationItem.rightBarButtonItem = self.editButtonItem; LMAAppDelegate *appDelegate = [[UIApplication sharedApplication] delegate]; NSManagedObjectContext *context = [appDelegate managedObjectContext]; NSEntityDescription *entityDescription = [NSEntityDescription entityForName:@"Rating" inManagedObjectContext:context]; NSFetchRequest *request = [[NSFetchRequest alloc] init];

[request setEntity:entityDescription]; NSError *error; ratings = [[NSArray alloc] initWithArray:[context executeFetchRequest:request error:&error]]; //Run the restaurant names through a Set to make them distinct NSMutableSet *restaurantSet = [[NSMutableSet alloc] initWithCapacity:[ratings count]]; for (Rating *rating in ratings) { [restaurantSet addObject:rating.restaurant]; } return restaurantSet; } - (void)viewDidLoad { [super viewDidLoad]; // Uncomment the following line to preserve selection between presentations. // self.clearsSelectionOnViewWillAppear = NO; NSMutableSet *restaurantSet; restaurantSet = [self loadDataFromDatabase]; restaurants = [restaurantSet allObjects]; } - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; // Dispose of any resources that can be recreated. } #pragma mark - Table view data source - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView { // Return the number of sections. return 1; } - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section { // Return the number of rows in the section. return [restaurants count]; } - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { static NSString *CellIdentifier = @"Cell"; UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier forIndexPath:indexPath]; // Configure the cell... cell.textLabel.text = [restaurants objectAtIndex:[indexPath row]]; return cell; } - (IBAction)dismissController:(id)sender { [self dismissViewControllerAnimated:YES completion:nil]; } @end

2. This exercise continues from the previous one. a. Add a new Table View Controller to Storyboard. b. Give the Navigation Item the Title “Restaurants”. c. Add segue from Prototype Cell to the new Table Controller. Use Selection Segue > Push. d. Add Identifier to the Segue named “segueRating”. e. Set Prototype Cell Identifier to “Cell”. f. Add code file called LMARatingController (subclass of UITableViewController). g. In Storyboard, add LMARatingController as the Class (in Identity Inspector) for the Table View Controller. h. Add property to LMARatingController called “restaurant” of type NSString. i. Add code prepareForSegue: and tableView:didSelectRowAtIndexPath: to LMARestaurantViewController.m: - (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender { if ([segue.identifier isEqualToString:@"segueRating"]) { ratingsController = segue.destinationViewController; } } - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath { NSString *selectedRestaurant = [restaurants objectAtIndex:[indexPath row]]; ratingsController.restaurant = selectedRestaurant; }

j.

Code for LMARatingsController.m: // // // // // // //

LMARatingsController.m Meal Rater Core Data Created by Jakob Iversen on 10/27/13.

Copyright (c) 2013 Learning Mobile Apps. All rights reserved.

#import "LMARatingsController.h" #import "LMAAppDelegate.h" #import "Rating.h" @interface LMARatingsController () @end @implementation LMARatingsController NSArray *ratings; - (id)initWithStyle:(UITableViewStyle)style { self = [super initWithStyle:style]; if (self) { // Custom initialization } return self;

} - (void)viewDidLoad { [super viewDidLoad]; [self loadDataFromDatabase]; }

- (NSMutableSet *)loadDataFromDatabase { LMAAppDelegate *appDelegate = [[UIApplication sharedApplication] delegate]; NSManagedObjectContext *context = [appDelegate managedObjectContext]; NSEntityDescription *entityDescription = [NSEntityDescription entityForName:@"Rating" inManagedObjectContext:context]; NSFetchRequest *request = [[NSFetchRequest alloc] init]; [request setEntity:entityDescription]; NSPredicate *predicate = [NSPredicate predicateWithFormat: @"restaurant LIKE[c] %@", _restaurant]; [request setPredicate:predicate]; NSError *error; ratings = [[NSArray alloc] initWithArray:[context executeFetchRequest:request error:&error]]; } - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; // Dispose of any resources that can be recreated. } #pragma mark - Table view data source - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView { // Return the number of sections. return 1; } - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section { // Return the number of rows in the section. return [ratings count]; } - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { static NSString *CellIdentifier = @"Cell"; UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier forIndexPath:indexPath]; // Configure the cell... cell.textLabel.text = [[ratings objectAtIndex:[indexPath row]] dish]; NSNumber *rating = [[ratings objectAtIndex:[indexPath row]] rating]; cell.detailTextLabel.text = [NSString stringWithFormat:@"%@", rating]; return cell; } @end

Chapter 13: Maps and Location in iOS Overview of Chapter This chapter introduces students to using device location in an iOS app. It covers using the sensors and a map to determine device location, determine GPS coordinates from an address, display locations on a map, and manipulate how the map is viewed. Additionally, it demonstrates how to use the Simulator to simulate the location of the device.

Learning Objectives After completing this chapter, students should be able to do the following: • • • • • •

Determine GPS location from an address.

Use the Core Location framework to determine geographic location.

Display a map and mark a location on the map.

Get the device’s geographic location from a map.

Change the type of map that is displayed.

Discuss the importance of accuracy, privacy, and battery usage as it relates to location.

Suggested Teaching Approaches for the Chapter The iOS Simulator is quite capable with regard to simulating location, but it will undoubtedly be more engaging for students to have access to devices that can be used to show where the user actually is. One complication is that only iPhone and 3G/4G iPads have these capabilities outside of Wi-Fi coverage.

In teaching the chapter, follow the progression used in the chapter. Start by forward geocoding an address. If you have advanced students, you can add a mini lecture on multithreaded programming and completion handlers. You should, in any case, point out why the completion handler is used in forward geocoding (slow response from the network relative to responsiveness of app).

It's important to point out that having an Internet connection is necessary for this.

Students who are used to traditional GPS units may not realize that data comes from Apple’s servers. Students may not be familiar with areas with limited Internet connections, so you may need to motivate this by suggesting apps used by game wardens, construction workers, and so on who may be in remote areas with limited connectivity. If you have areas close by you with low connectivity, you may point them out. Otherwise, use the carriers’ coverage maps to help.

You should also discuss issues of accuracy of the GPS and how being indoors can be a real problem. Apple does combine location data from GPS, cell signals, and Wi-Fi to provide as high-quality location data as it can.

When you move on to getting the device’s location, the Internet connection is no longer needed because the data comes straight from the sensors on the device. Note that the Simulator doesn’t provide altitude data.

Answers to End-of-Chapter Exercises 1. This exercise is referencing the Location Demo Controller. Adding a segmented control with a few accuracy options is a simple way to implement this exercise. Testing the effect of changing the accuracy setting can be difficult, because the sensors may very well report more accurate results than desired—in which case, setting accuracy lower will have no effect. But you may see the accuracy drop from 65m to 10m if you change the accuracy from 100m to 10m. Here’s what the app might look like:

a. Add an outlet for the segmented control, called sgmtAccuracy, and an action called AccuracyChanged: - (IBAction)AccuracyChanged:(id)sender { CLLocationAccuracy selectedAccuracy; switch (_sgmtAccuracy.selectedSegmentIndex) { case 0: selectedAccuracy = kCLLocationAccuracyBest; break; case 1: selectedAccuracy = kCLLocationAccuracyBestForNavigation; break;

case 2: selectedAccuracy = kCLLocationAccuracyNearestTenMeters; break; case 3: selectedAccuracy = kCLLocationAccuracyHundredMeters; break; case 4: selectedAccuracy = kCLLocationAccuracyThreeKilometers; default: break; } locationManager.desiredAccuracy = selectedAccuracy; }

2. This is a somewhat lengthy exercise to complete. It requires creating a new class (LMACoreDataHelper) to hold all the Core Data access code. To ensure all access is handled centrally, it is designed as a singleton through a method called sharedManager:. a. LMACoreDataHelper.h: // // // // // // //

LMACoreDataHelper.h MyContactList Created by Jakob Iversen on 10/28/13.

Copyright (c) 2013 Learning Mobile Apps. All rights reserved.

#import <Foundation/Foundation.h> #import "Contact.h" @interface LMACoreDataHelper : NSObject -(void)SaveContact:(NSString *)name Address:(NSString *)address City:(NSString *)city State:(NSString *)state Zip:(NSString *)zip Phone:(NSString *) phone Cell:(NSString *)cell EMail:(NSString *)email Birthdate:(NSDate *)birthdate; -(NSArray *)AllContacts:(NSString *)sortField SortDirection:(BOOL)sortAscending; + (id)sharedManager; -(void)DeleteObject:(Contact *)contact; @end

b. LMACoreDataHelper.m: // // // // // // //

LMACoreDataHelper.m MyContactList Created by Jakob Iversen on 10/28/13.

Copyright (c) 2013 Learning Mobile Apps. All rights reserved.

#import "LMACoreDataHelper.h" #import "LMAAppDelegate.h" LMAAppDelegate *appDelegate; NSManagedObjectContext *context; @implementation LMACoreDataHelper

- (id) init { self = [super init]; if(self){ appDelegate = [[UIApplication sharedApplication] delegate]; context = [appDelegate managedObjectContext]; } return self; } + (id)sharedManager { static LMACoreDataHelper *sharedMyManager = nil; @synchronized(self) { if (sharedMyManager == nil) sharedMyManager = [[self alloc] init]; } return sharedMyManager; } -(void)SaveContact:(NSString *)name Address:(NSString *)address City:(NSString *)city State:(NSString *)state Zip:(NSString *)zip Phone:(NSString *) phone Cell:(NSString *)cell EMail:(NSString *)email Birthdate:(NSDate *)birthdate { Contact *contact = [NSEntityDescription insertNewObjectForEntityForName:@"Contact" inManagedObjectContext:context]; NSError *error; [contact setValue:name forKey:@"contactName"]; [contact setValue:address forKey:@"streetAddress"]; [contact setValue:city forKey:@"city"]; [contact setValue:state forKey:@"state"]; [contact setValue:zip forKey:@"zipCode"]; [contact setValue:phone forKey:@"phoneNumber"]; [contact setValue:cell forKey:@"cellNumber"]; [contact setValue:email forKey:@"email"]; [contact setValue:birthdate forKey:@"birthday"]; [context save:&error]; if(error !=nil) { NSLog(@"Error saving object: %@", error.description); } else { NSLog(@"Object saved successfully"); } } -(void)DeleteObject:(Contact *)contact{ [context deleteObject:contact]; NSError *error; [context save:&error]; } -(NSArray *)AllContacts:(NSString *)sortField SortDirection:(BOOL)sortAscending{ NSEntityDescription *entityDescription = [NSEntityDescription entityForName:@"Contact" inManagedObjectContext:context]; NSFetchRequest *request = [[NSFetchRequest alloc] init]; [request setEntity:entityDescription]; //Specify sorting NSSortDescriptor *sortDescriptor = [[NSSortDescriptor alloc]

initWithKey:sortField ascending:sortAscending]; NSArray *sortDescriptors = [[NSArray alloc] initWithObjects: sortDescriptor, nil] ; request.sortDescriptors = sortDescriptors; NSError *error; return [[NSArray alloc] initWithArray:[context executeFetchRequest:request error:&error]]; } @end

c. Then you’ll need to make changes throughout the project to use these methods. Here’s an example from LMAContactsTableController.m— notice the use of the sharedManager: - (void) loadDataFromDatabase { NSUserDefaults *settings = [NSUserDefaults standardUserDefaults]; NSString *sortField = [settings stringForKey:kSortField]; bool sortAscending = [settings boolForKey:kSortDirectionAscending]; LMACoreDataHelper *dbHelper = [LMACoreDataHelper sharedManager]; contacts = [dbHelper AllContacts:sortField SortDirection:sortAscending]; // // appDelegate = [[UIApplication sharedApplication] delegate]; // context = [appDelegate managedObjectContext]; // NSEntityDescription *entityDescription = [NSEntityDescription // entityForName:@"Contact" // inManagedObjectContext:context]; // NSFetchRequest *request = [[NSFetchRequest alloc] init]; // [request setEntity:entityDescription]; // // //Specify sorting // NSSortDescriptor *sortDescriptor = [[NSSortDescriptor alloc] // initWithKey:sortField // ascending:sortAscending]; // NSArray *sortDescriptors = [[NSArray alloc] // initWithObjects: sortDescriptor, nil] ; // request.sortDescriptors = sortDescriptors; // // NSError *error; // // contacts = [[NSArray alloc] // initWithArray:[context executeFetchRequest:request // error:&error]]; }

d. And here’s an example of saving a contact: -(IBAction)saveContact: (id)sender { [[LMACoreDataHelper sharedManager] SaveContact:_txtName.text Address:_txtAddress.text City:_txtCity.text State:_txtState.text Zip:_txtZip.text Phone:_txtPhone.text Cell:_txtCell.text EMail:_txtEmail.text Birthdate:birthdate]; // LMAAppDelegate *appDelegate = [[UIApplication sharedApplication] delegate]; // NSManagedObjectContext *context = [appDelegate

managedObjectContext]; // Contact *contact = [NSEntityDescription // insertNewObjectForEntityForName:@"Contact" // inManagedObjectContext:context]; // NSError *error; // [contact setValue:_txtName.text forKey:@"contactName"]; // [contact setValue:_txtAddress.text forKey:@"streetAddress"]; // [contact setValue:_txtCity.text forKey:@"city"]; // [contact setValue:_txtState.text forKey:@"state"]; // [contact setValue:_txtZip.text forKey:@"zipCode"]; // [contact setValue:_txtPhone.text forKey:@"phoneNumber"]; // [contact setValue:_txtCell.text forKey:@"cellNumber"]; // [contact setValue:_txtEmail.text forKey:@"email"]; // [contact setValue:birthdate forKey:@"birthday"]; // // [context save:&error]; // if(error !=nil) { // NSLog(@"Error saving object: %@", error.description); // // } // else { // NSLog(@"Object saved successfully"); // // } }

3. Running the app with Location Services off will bring up an Alert View saying Access Denied when trying to get device coordinates. The dialog has no further information or options, so the user won’t know what to do or what the problem is. At the very least, the dialog should include information on what the problem is and perhaps a suggestion to open Settings and change to allow location services.

4. To observe the difference, you need to open the map, watch the pins added, and then try adding a new contact. With the code in viewWillAppear:, a new pin will show up as expected, but with the code in viewDidLoad:, new pins won’t show up until the app is restarted. This exercise can be used to illustrate the importance of understanding the app life cycle.

5. This is a very simple exercise that mostly involves finding the right spot to make a change to the code. This can be done in viewWillAppear: in LMAMapController.m (see Listing 13.1), where you can change the subtitle to use the variable address, which was defined in the preceding code to include the street address, city, and state: LMAMapPoint *mp = [[LMAMapPoint alloc] initWithCoordinate:coordinate title:contact.contactName subtitle:address];

Suggested Additional Exercises 1. Modify the map so that a tap centers the map on the location tapped.

2. Modify the map so that holding down on the map will place a marker in the location that was pressed. Make the marker display “I’m here” when the marker is tapped.

Solutions to Additional Exercises 1. The simplest way to implement this exercise is to add a UITapGestureRecognizer (similar to LongTap recognizer in Chapter 14). a. Add this code to viewDidLoad: in LMAMapController.m: UITapGestureRecognizer *tapRecognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tappedMap:)]; [_mvMap addGestureRecognizer:tapRecognizer];

b. Then add this code to implement the tappedMap: method: - (void)tappedMap:(UIGestureRecognizer *)gesture { NSLog(@"Tapped the Map"); CGPoint point = [gesture locationInView:_mvMap]; CLLocationCoordinate2D tapPoint = [_mvMap convertPoint:point toCoordinateFromView:self.view]; _mvMap.centerCoordinate = tapPoint; }

2. This exercise is similar to the previous one, except that you need a UILongPressGestureRecognizer. a. Add this code to viewDidLoad: in LMAMapController.m: UILongPressGestureRecognizer *longPressRecognizer = [[UILongPressGestureRecognizer alloc] initWithTarget:self action:@selector(dropPin:)]; [_mvMap addGestureRecognizer:longPressRecognizer];

b. Then add this code to implement the dropPin: method: - (void)dropPin:(UILongPressGestureRecognizer *)gesture { if (gesture.state == UIGestureRecognizerStateBegan) { NSLog(@"Long Pressed the Map"); CGPoint point = [gesture locationInView:_mvMap]; CLLocationCoordinate2D tapPoint = [_mvMap convertPoint:point toCoordinateFromView:self.view]; LMAMapPoint *mp = [[LMAMapPoint alloc]initWithCoordinate:tapPoint title:@"I'm Here" subtitle:Nil]; [_mvMap addAnnotation:mp]; } }

Chapter 14: Access to Hardware and Sensors in iOS Overview of Chapter The goal of this chapter is to help students learn how to interact with the hardware features of an iOS device through an app that they have created. The chapter covers using sensors to collect information about the device’s internal state and to access information about the device’s current environment. The chapter also covers accessing hardware features of the device, such as the camera through an app.

Learning Objectives After completing this chapter, students should be able to do the following: • • • • •

Describe the purpose and use of UIDevice to get information about the current device.

Use the Notification Center to subscribe to and be notified of changes in other objects.

Implement an app that can access and use data from device sensors.

Implement an app that can access and use the phone and camera hardware features of a device.

Store and retrieve bitmap images in Core Data.

Suggested Teaching Approaches for the Chapter This chapter is best taught with a real device to demonstrate the results of the code because the simulator cannot emulate many of the sensors.

Following is an overview of the patterns and methods available for interacting with hardware, and what they’re used for in the chapter: • • • •

UIDevice—Basic information about the device, such as device name, OS version, and current physical orientation.

Notification Center—Ongoing updates about the battery.

Ready-made control—Camera.

Core Motion (Accelerometer)—Pattern is similar to getting updates from Core Location. Create a Manager and implement a method to start motion detection and then a method to be called whenever changes happen.

The best way to teach this chapter is to demonstrate it. Work through the exercises in the chapter using Debug so that students can see how the required parts of using hardware and sensors work together to achieve the correct result.

Demonstrate what happens if proper checks aren’t in place to check for the availability of a hardware feature. (Typically, the app will crash.) For instance, in Listing 14.4, remove the first if statement that checks for whether the camera is available. Then run the app on the simulator (which doesn’t have a camera).

Answers to End-of-Chapter Exercises 1. Steps to complete: a. Add outlet to the camera button, called btnCamera. b. Change changeEditMode: in LMAContactsController.m by adding the bolded lines that follow: - (IBAction)changeEditMode:(id)sender { NSArray *textFields = @[_txtName, _txtAddress, _txtCity, _txtState, _txtZip, _txtPhone, _txtCell, _txtEmail]; if (_sgmtEditMode.selectedSegmentIndex == 0){ //view mode for (UITextField *txtfield in textFields) { [txtfield setEnabled:NO]; [txtfield setBorderStyle:UITextBorderStyleNone]; } [_btnChange setHidden:YES]; _txtPhone.editMode = NO; [_txtPhone setEnabled:YES]; _btnCamera.hidden = YES; } else if (_sgmtEditMode.selectedSegmentIndex == 1) //edit mode { for (UITextField *txtfield in textFields) { [txtfield setEnabled:YES]; [txtfield setBorderStyle:UITextBorderStyleRoundedRect]; } [_btnChange setHidden:NO]; _txtPhone.editMode = YES; if([UIImagePickerController isSourceTypeAvailable: UIImagePickerControllerSourceTypeCamera]){ _btnCamera.hidden = NO; } else _btnCamera.hidden = YES; } }

2. Included in solution for Exercise 1.

3. This is a challenging exercise to complete without additional instruction because it uses a few items not included in the book (but not too difficult to introduce to students). To send messages, you use a custom view controller included with iOS, similar to how you worked with the custom camera controller. This one is called MFMessageComposeViewController, and is in the MessageUI framework: a. Include MessageUI framework in the project. b. Import <MessageUI/MessageUI.h> in LMAContactsController.h. c. Add MFMessageComposeViewControllerDelegate to the list of protocols implemented. d. Add bold code to viewDidLoad: to implement the Long Press Gesture: - (void)viewDidLoad { [super viewDidLoad];

// Do any additional setup after loading the view, typically from a nib. _scrollView.contentSize = CGSizeMake(320,500); […]

UILongPressGestureRecognizer *longPress = [[UILongPressGestureRecognizer alloc] initWithTarget:self action:@selector(callPhone:)]; [_txtPhone addGestureRecognizer:longPress]; UILongPressGestureRecognizer *longPressCell = [[UILongPressGestureRecognizer alloc] initWithTarget:self action:@selector(sendMessage:)]; [_txtCell addGestureRecognizer:longPressCell]; }

e. Add sendMessage method to be called when the long press is recognized: - (void)sendMessage:(UILongPressGestureRecognizer*)gesture { if (gesture.state == UIGestureRecognizerStateBegan) { NSLog(@"Long Press on Cell Phone Field"); MFMessageComposeViewController *controller = [[MFMessageComposeViewController alloc] init]; if([MFMessageComposeViewController canSendText]) { controller.body = @"SMS message here"; controller.recipients = [NSArray arrayWithObjects:_txtCell.text, nil]; controller.messageComposeDelegate = self; if(atLeastIOS6){ [self presentViewController:controller animated:YES completion:nil]; } else{ //deprecated from iOS 6 [self presentModalViewController:controller animated:YES]; } } } }

f. Add messageComposeViewController:didFinishWithResult: to handle when the user is done interacting with the Messaging Control: - (void)messageComposeViewController: (MFMessageComposeViewController *)controller didFinishWithResult:(MessageComposeResult)result { switch (result) { case MessageComposeResultCancelled: NSLog(@"Cancelled"); break; case MessageComposeResultFailed: NSLog(@"Failed"); break; case MessageComposeResultSent: break; default:

break; } if(atLeastIOS6){ [self dismissViewControllerAnimated:YES completion:nil]; } else{ [self dismissModalViewControllerAnimated:YES]; } }

g. Optionally, follow instructions in the section “Adding Long Press to Text View” to have the cell phone field respond to a long press in both edit and view modes.

4. This app can be created by following the instructions in the section “Using Core Motion for Accelerometer Data.” Instead of the battery label, though, add a button for the user to tap and a label to keep track of the score. The full app is included with the book supplements. a. Code for LMAViewController.h: // // // // // // //

LMAViewController.h Tap Button Game Created by Jakob Iversen on 10/28/13.

Copyright (c) 2013 Learning Mobile Apps. All rights reserved.

#import <UIKit/UIKit.h> @interface LMAViewController : UIViewController @property (weak, nonatomic) IBOutlet UIButton *btnTapMe; - (IBAction)tapped:(id)sender; @property (weak, nonatomic) IBOutlet UILabel *lblScore; @end

b. Code for LMAViewController.m: // // // // // // //

LMAViewController.m Tap Button Game Created by Jakob Iversen on 10/28/13.

Copyright (c) 2013 Learning Mobile Apps. All rights reserved.

#import "LMAViewController.h" #import <CoreMotion/CoreMotion.h> @interface LMAViewController () @end int score; @implementation LMAViewController - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib. [self startMotionDetection]; } - (void)didReceiveMemoryWarning

{ [super didReceiveMemoryWarning]; // Dispose of any resources that can be recreated. } -(CMMotionManager *)motionManager { CMMotionManager *motionMManager = nil; id appDelegate = [[UIApplication sharedApplication] delegate]; if([appDelegate respondsToSelector:@selector(motionManager)]) { motionMManager = [appDelegate motionManager]; } return motionMManager; } -(void) startMotionDetection { CMMotionManager *mManager = [self motionManager]; [mManager setAccelerometerUpdateInterval:0.05]; [mManager startAccelerometerUpdatesToQueue:[[NSOperationQueue alloc]init] withHandler:^(CMAccelerometerData *data, NSError *error) { dispatch_async(dispatch_get_main_queue(),^{ [self updateButton:data]; }); } ]; } -(void) updateButton: (CMAccelerometerData *) data { float moveFactor = 15; CGRect rect = _btnTapMe.frame; float moveToX = rect.origin.x + (data.acceleration.x * moveFactor); float moveToY = (rect.origin.y + rect.size.height) (data.acceleration.y * moveFactor); float maxX = self.view.frame.size.width - rect.size.width; float maxY = self.view.frame.size.height; if(moveToX > 0 && moveToX < maxX){ rect.origin.x += (data.acceleration.x * moveFactor); } if(moveToY > rect.size.height && moveToY < maxY){ rect.origin.y -= (data.acceleration.y * moveFactor); } [UIView animateWithDuration:0 delay:0 options:UIViewAnimationOptionCurveEaseInOut animations:^{ _btnTapMe.frame = rect; } completion:nil]; } - (IBAction)tapped:(id)sender { score++; _lblScore.text = [NSString stringWithFormat:@"Score: %d", score]; } @end

5. This exercise is similar to the previous one, except it adds three sliders that show the x, y, and z data coming from the accelerometer. a. Code for LMAViewController.h: // // // // // // //

LMAViewController.h Core Motion Demo Created by Jakob Iversen on 6/25/13.

Copyright (c) 2013 Learning Mobile Apps. All rights reserved.

#import <UIKit/UIKit.h> @interface LMAViewController : UIViewController @property (weak, nonatomic) IBOutlet UISlider *sldX; @property (weak, nonatomic) IBOutlet UISlider *sldY; @property (weak, nonatomic) IBOutlet UISlider *sldZ; @property (weak, nonatomic) IBOutlet UIButton *btnclick; @property (weak, nonatomic) IBOutlet UILabel *lblX; @property (weak, nonatomic) IBOutlet UILabel *lblY; @property (weak, nonatomic) IBOutlet UILabel *lblZ; - (IBAction)clicked:(id)sender; @end

b. Code for LMAViewController.m: // // // // // // //

LMAViewController.m Core Motion Demo Created by Jakob Iversen on 6/25/13.

Copyright (c) 2013 Learning Mobile Apps. All rights reserved.

#import "LMAViewController.h" #import <CoreMotion/CoreMotion.h> @interface LMAViewController () @end @implementation LMAViewController - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib. } -(void) viewDidAppear:(BOOL)animated { [super viewDidAppear:animated]; [self startMotionDetection]; } -(void) viewDidDisappear:(BOOL)animated { [[self motionManager] stopAccelerometerUpdates]; } - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; // Dispose of any resources that can be recreated. } -(CMMotionManager *)motionManager { CMMotionManager *motionMManager = nil; id appDelegate = [[UIApplication sharedApplication] delegate]; if([appDelegate respondsToSelector:@selector(motionManager)]) { motionMManager = [appDelegate motionManager]; } return motionMManager; }

-(void) startMotionDetection { CMMotionManager *mManager = [self motionManager]; [mManager setAccelerometerUpdateInterval:.1]; [mManager startAccelerometerUpdatesToQueue:[[NSOperationQueue alloc]init] withHandler:^(CMAccelerometerData NSError *error) { dispatch_async(dispatch_get_main_queue(), ^{ [self updateSliders:data]; }); } ]; }

*data,

-(void) updateSliders: (CMAccelerometerData *) data { float deltaMove = 10; _lblX.text = [NSString stringWithFormat:@"%0.2f", data.acceleration.x]; _lblY.text = [NSString stringWithFormat:@"%0.2f", data.acceleration.y]; _lblZ.text = [NSString stringWithFormat:@"%0.2f", data.acceleration.z]; _sldX.value = data.acceleration.x; _sldY.value = data.acceleration.y; _sldZ.value = data.acceleration.z; CGRect rect = _btnclick.frame; float moveToX = rect.origin.x + (data.acceleration.x * deltaMove); float maxX = self.view.frame.size.width - rect.size.width; float moveToY = (rect.origin.y + rect.size.height) (data.acceleration.y * deltaMove); float maxY = self.view.frame.size.height; if(moveToX > 0 && moveToX < maxX){ rect.origin.x += (data.acceleration.x * deltaMove); }; if(moveToY > rect.size.height && moveToY < maxY){ rect.origin.y -= (data.acceleration.y * deltaMove); }; [UIView animateWithDuration:0 delay:0 options:UIViewAnimationOptionCurveEaseInOut animations:^{ _btnclick.frame = rect; } completion:nil]; } - (IBAction)clicked:(id)sender { if([[_btnclick currentTitle] isEqualToString:@"Tap Me!"]) [_btnclick setTitle:@"Got Me!" forState:UIControlStateNormal]; else [_btnclick setTitle:@"Tap Me!" forState:UIControlStateNormal]; } @end

Suggested Additional Exercises 1. Add a long-click event to the email text field in My Contact List. Code the event to open an email client with the contact’s email address as the To address. Add the subject “Sent from My Contact List” and “Hello <ContactName>” to the body of the email.

2. Change the Settings screen in My Contact List to provide output to NSLog whenever the device is close to the user (and when it is moved away from the user). Disable the proximity monitoring when the Settings screen is no longer visible. Proximity monitoring is available through UIDevice.

Solutions to Additional Exercises 1. Very similar to the SMS exercise in the book, except that you use MFMailComposeViewController and implement MFMailComposeViewControllerDelegate. a. Code to add in viewDidLoad: to set up the Long Press Gesture Recognizer: UILongPressGestureRecognizer *longPressEmail = [[UILongPressGestureRecognizer alloc] initWithTarget:self action:@selector(sendEmail:)]; [_txtEmail addGestureRecognizer:longPressEmail];

b. Other methods to add to LMAContactsController.m: - (void)sendEmail:(UILongPressGestureRecognizer*)gesture { if (gesture.state == UIGestureRecognizerStateBegan) { NSLog(@"Long Press on Email Field"); MFMailComposeViewController *controller = [[MFMailComposeViewController alloc] init]; if([MFMailComposeViewController canSendMail]){ [controller setSubject:@"Sent from My contact List"]; [controller setToRecipients:[NSArray arrayWithObjects:_txtEmail.text, nil]]; NSString *msgBody = [NSString stringWithFormat:@"Hello %@", _txtName.text]; [controller setMessageBody:msgBody isHTML:NO]; controller.mailComposeDelegate = self; if(atLeastIOS6){ [self presentViewController:controller animated:YES completion:nil]; } else{ //deprecated from iOS 6 [self presentModalViewController:controller animated:YES]; } } } }

-(void)mailComposeController:(MFMailComposeViewController *)controller didFinishWithResult:(MFMailComposeResult)result error:(NSError *)error { switch (result) { case MFMailComposeResultCancelled: NSLog(@"Mail sending cancelled"); break; case MFMailComposeResultSaved: NSLog(@"Message Saved"); break;

case MFMailComposeResultFailed: NSLog(@"Mail sending failed"); break; case MFMailComposeResultSent: NSLog(@"Message sent"); default: break; } if(atLeastIOS6){ [self dismissViewControllerAnimated:YES completion:nil]; } else{ [self dismissModalViewControllerAnimated:YES]; } }

2. This exercise requires using UIDevice in a new way, but it shouldn’t be too difficult, especially since LMASettingsController.m already has a method that is called frequently to update the label moving about the screen. a. Start proximity monitoring in viewWillAppear: device.proximityMonitoringEnabled = YES;

b. Stop proximity monitoring in viewWillDisappear: [UIDevice currentDevice].proximityMonitoringEnabled = NO;

c. Add BOOL variable called proximityStatus. d. Add code to updateLabel: (this is called very frequently, so it works well to keep track of the proximity status) to output the current status of the proximity sensor: if(proximityClose != [UIDevice currentDevice].proximityState) { proximityClose = [UIDevice currentDevice].proximityState; NSString *proxiState = (proximityClose) ? @"Device is close" : @"Device is not close"; NSLog(proxiState); }

Chapter 15: Monetizing Apps Overview of Chapter This chapter is all about making money off of the app-making effort. We cover several strategies, including selling through the app stores, in-app purchases, and advertisement. But it really goes beyond that because you can also be paid through consulting and getting a regular job as a consultant.

Learning Objectives After completing this chapter, students should be able to do the following: • • • •

Discuss the three options for making money on apps through the app stores.

Understand the economics of having apps available in the app stores.

Understand the benefits of establishing a business to coordinate one’s appdevelopment efforts.

Explain the relative merits of developing for the Android and iOS platforms, and argue for how to decide on how to spend limited development resources.

Suggested Teaching Approaches for the Chapter This is a short chapter but one that can be very exciting to teach—especially if you have business students or other students with an entrepreneurial bent. This is all about making money from the efforts involved in creating the apps.

The mobile market place changes rapidly, and so do the business conditions for developing apps, so you should bring in as much current information as you can on mobile platform market share, job market share, and which monetization strategies are being used.

You can also encourage students to bring in their own research, as indicated in the Additional Exercises that follow.

Additional Exercise 4 might also provide for an interesting hour of debate around which platform to choose.

This chapter can also provide a good opportunity to bring in a guest speaker with experience developing mobile apps. Perhaps your university’s marketing or IT unit has developed a campus app.

Answers to End-of-Chapter Exercises 1. For Android, this exercise will not show an ad unless you sign up for an AdMob ID. However, the following is the solution. Get an ID and it will work.

First, add the Google AdMob SDK as described in the chapter. Then do the following: a. Add the following to the manifest file after all the other activities: <activity android:name="com.google.ads.AdActivity" android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|ui Mode|screenSize|smallestScreenSize"> </activity>

b.

Add the following attribute to the root layout in the layout that you want to show ads in: xmlns:ads=http://schemas.android.com/apk/lib/com.google.ads

c. Add the following widget to the layout right after the root layout: <com.google.ads.AdView android:id="@+id/adView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textStyle="normal" ads:adSize="BANNER" ads:adUnitId="your adMobID" />

d.

Modify the toolbar RelativeLayout by replacing android:layout_alignParentTop="true" with android:layout_below= "@+id/adView".

e. Open ContactListActivity.java and add the following code in the onCreate method: AdView adview = (AdView)findViewById(R.id.adView); AdRequest re = new AdRequest(); re.addTestDevice(AdRequest.TEST_EMULATOR); adview.loadAd(re);

f. If you want to test on a real device, you need to replace AdRequest.TEST_EMULATOR with your device’s ID. To complete Exercise 1 on iOS: a. Create a new Single-View project. b. Add iAd framework to the project. c. Add an Ad Banner View to a scene Storyboard. d. Import iAd to LMAViewController.h. e. Implement ADBannerViewDelegate in LMAViewController.h. f. Add an outlet for the banner. g. Implement code in LMAViewController.m to implement the delegate protocol: // // // //

LMAViewController.m Ch 15 - iAd Example

// // //

Created by Jakob Iversen on 10/30/13.

Copyright (c) 2013 Learning Mobile Apps. All rights reserved.

#import "LMAViewController.h" @interface LMAViewController () @end BOOL bannerIsVisible; @implementation LMAViewController - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib. _adBanner.delegate = self; } - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; // Dispose of any resources that can be recreated. } - (BOOL)bannerViewActionShouldBegin:(ADBannerView *)banner willLeaveApplication:(BOOL)willLeave { NSLog(@"Banner view is beginning an ad action"); BOOL shouldExecuteAction = YES;//[self allowActionToRun]; // your application implements this method if (!willLeave && shouldExecuteAction) { // insert code here to suspend any services that might conflict with the advertisement } return shouldExecuteAction; } - (void)bannerViewDidLoadAd:(ADBannerView *)banner { NSLog(@"Banner View Did Load"); if (!bannerIsVisible) { [UIView beginAnimations:@"animateAdBannerOn" context:NULL]; // Assumes the banner view is just off the bottom of the screen. banner.frame = CGRectOffset(banner.frame, 0, banner.frame.size.height); [UIView commitAnimations]; bannerIsVisible = YES; } } - (void)bannerView:(ADBannerView *)banner didFailToReceiveAdWithError:(NSError *)error { NSLog(@"Ad Error: %@", error); if (bannerIsVisible) { [UIView beginAnimations:@"animateAdBannerOff" context:NULL]; // Assumes the banner view is placed at the bottom of the screen. banner.frame = CGRectOffset(banner.frame, 0, banner.frame.size.height); [UIView commitAnimations]; bannerIsVisible = NO;

} } @end

Run the app. Keep an eye on the output section in Xcode. You may get error messages that no inventory is available. If this is the case, you can switch to a different simulator device, and usually the ads show up. The ads will not be real, but instead are included for testing purposes from Apple. To get real ads, you have to be registered with a real developer account, register your app with Apple, and publish the app in the App Store.

2. Answers will vary. You’ll probably want to provide more detailed parameters for the assignment (which sections to include, how detailed, how realistic).

Options for monetizing the app include direct sales in the app store, In-App Purchase (perhaps the free version includes the capability to store 10 contacts only), Advertising, and Subscription.

3. Answers will vary considerably.

Suggested Additional Exercises 1. Do some research to find data on mobile platform market share. Use the data to make a recommendation as to which platform(s) My Contact List should be released on first.

2. Find several job ads for mobile app developers. What skills are needed to be successful?

3. Go to www.indeed.com/jobtrends and look for trends in job ads for mobile developers. Write a report based on what you learned.

4. Divide the class into teams and have each team research the benefits of developing for a specific mobile platform. Then have a debate among the teams to determine the pros and cons of each platform.

5. Explore freelancersoutpost.com or freelancer.com and look for anyone offering to pay to have an app built. What kind of app is it? How much would you get paid to do it? Do you think it’s worth it?

Solutions to Additional Exercises 1. Students are likely to find data that shows that Android devices are selling in greater numbers than iOS, and Windows Phone and Blackberry are also-rans with very little market share. Based on those numbers, My Contact List should be released on Android first, followed by iOS. However, more sophisticated students might take the likelihood of monetization and/or different geographic or demographic market segments into account and come to different conclusions.

2. Important skills include programming, design, architecture, and business knowledge. Likely candidates need a bachelor's degree in CS or similar.

3. As of October 2013, iOS and Android are in the Top 10 in terms of growth in the number of jobs offered.

4. If you have a large class, you can go beyond the big 4 (Android, iOS, Windows Phone, Blackberry) and also include some of the smaller players, such as Firefox and Linux. Consider whether you want the entire class debating at the same time or pair up the groups.

5. Students are likely to find a large range of projects, but payments tend to be relatively low; payment is highly influenced by overseas developers.

However, because many regular jobs require having developed a real app, this may be a way to develop a track record.

Chapter 16: Publishing Apps Overview of Chapter The purpose of this chapter is to introduce students to various issues associated with distributing an app to the public or within an organization. It explains the basic process of distributing an app on the App and Play Stores for general public consumption and the process for distributing a proprietary app within the organization. It also covers issues associated with ensuring app quality.

Learning Objectives After completing this chapter, students should be able to do the following: • • • •

Explain the similarities and differences in publishing apps in the Play Store and the App Store.

Explain the similarities and differences in publishing apps within the organization.

Explain the importance of ensuring that the app works as intended.

Describe testing procedures for ensuring app quality.

Suggested Teaching Approaches for the Chapter This is a difficult chapter to teach because the actual process of distribution in the two stores is relatively complex. You don’t have the option of publishing an app in the App Store with the Education License, but you could invest in a Google Developer license and walk through publishing an Android app on the Developer’s Console. Many of the things you do for Android are similar to iPhone, so you can discuss them as you walk through publishing the Android app. On Android, you can also demonstrate the process of creating a signed app that is ready for publication.

Teaching enterprise distribution is also much easier in Android because all you have to do is create a signed app and send it to the students. Supplementing this discussion with a discussion on a Mobile Device Management solution may also be helpful.

The chapter stresses quality assurance in apps, and the lecture(s) for this chapter should do that as well. Testing often receives limited attention in undergraduate IS and CS curricula, but it deserves special focus here because many of the students learning mobile development may want to try to release their own apps. Stressing the negative side to releasing an app that crashes or that is in some other way unsuitable for use will motivate students to understand how to ensure quality.

Walk the students through the development of a test plan that includes unit testing (equivalence partitioning, boundary value analysis, cause/effect graphing),

integration testing, and usability testing. Demonstrate how to use the Alpha and Beta testing feature on Android’s Developer console to demonstrate how to implement testing. Obtain Android and iOS devices with different sizes and operating systems and demonstrate why different devices need to be tested to ensure that the app runs successfully on all the platforms it targets.

Answers to End-of-Chapter Exercises 1. This is not really an answerable exercise. Students create the APK and install it. You could have them send it to you, and you could test that it installs properly.

2. The answer to this exercise is largely dependent on how you instructed students to develop a test plan. At a minimum, the test plan should include testing all buttons with the expected results identified. For example: Test # Test Case 1 Click photo image button.

Take Picture. Save Picture.

2 Click photo image button.

Cancel Camera.

3 Click photo image button.

Take Picture. Cancel Picture.

4 Click photo image button.

Hit Back button (Android).

Expected Outcome Pass/Fail Picture displayed in image button.

No change to contact’s screen.

No change to contact’s screen.

Return to contact screen. No change in screen.

…

3. Answers will vary depending on which set of guidelines (quality, usability, content) the student chooses to examine.

Suggested Additional Exercises 1. Explain how Android and iOS apps are protected from being illegally copied.

What are the similarities and differences?

2. What is the difference between Alpha and Beta testing? What is their role in app development?

3. Why is it important to test an app on different devices?

Solutions to Additional Exercises 1. Android does not, by default, protect apps from being illegally copied. It is up to the app developer to embed the Google Licensing Library in the app project and code how the app checks the license. After it is embedded, the licensing code checks the user’s account to determine if the user legally owns

the app. If the user does not, it is up to the developer to determine what action is taken. Developers can ask the user to buy the app or they can terminate execution or any other thing the developers want to happen. iOS allows only apps that are downloaded from the App Store to be installed on a device. Additionally, the app executable is encrypted. When the user downloads an app, a key is also downloaded. If the key is not present, the app cannot be decrypted and run.

2. Alpha testing is done by the app’s developers or designated testers with the organization. It is primarily performed to test that the app functions as designed. These testers use the test plan developed for the app. Beta testing is done after the Alpha testers are confident that the app works as designed.

Beta testers are typically volunteers from outside the organization. They primarily test the usability of the app, although they can also discover functional problems.

3. It is important to test apps on different devices because the app has the potential to work differently, depending on the configuration of the device.

For example, although iOS devices are fairly homogeneous, there are a few different OS versions that an app can run on. Additionally, an iPhone has a couple of different screen sizes and resolutions. Some nib files look different on a large retina screen than on the original iPhone. In some cases, this can hurt usability. This problem is confounded in Android because of the large number of different OS versions, screen sizes, and resolutions.