Programming the iPhone User Experience phần 8 docx

Figure 7-18 shows the custom control. Figure 7-18. Custom scrolling UIControl subclass Tables and Embedded Controls A table in Cocoa Touch represents a vertical list of items, with each item assigned to a cell or row in the table. If the list of items is multi-dimensional, such as a list of email messages in the Mail application, each table cell should display a succinct summary, label, or other high-level indication of the object assigned to the cell. Users can get additional information for each row by tapping the row. When a user taps the row, an event is sent to the delegate of the table, which is an object that conforms to the UITableViewDelegate protocol. This protocol defines methods for handling interaction with cells. A table delegate defines the methods it wishes to handle, and the table con- troller automatically handles the communication between the user interface and the delegate. (The availability of free implementations of design patterns like the delegate pattern is one of the benefits that Cocoa Touch controller classes offer developers.) You can embed UIControl instances in table cells to add functionality within the context of a single row in your dataset. For example, users will often need to delete a record using a button, as with the Mail application, or change the order of rows in a table. The table delegate protocol, UITableViewDelegate, allows developers to handle user- initiated edits like reordering, deletion, and insertion of new rows into the table. The controls you use in table cells should be chosen with attention to the interactive nature of the tables and cells themselves. Most tables are embedded in a scrolling view 120 | Chapter 7: Interaction Patterns and Controls Download at Boykma.Com Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com that responds to gestures with movement along the y-axis. In those cases, it would be difficult to present users with an embedded control that also responds to gestures along the y-axis. Tables that act as views for navigation controllers and allow users to drill down through a hierarchical dataset already handle taps. Adding controls to table cells is simple. There are three approaches to developing custom table cells: • Create an instance of UITableViewCell and set its public properties, using the de- fault object and layout with custom content. • Create an instance of UITableViewCell and customize it using public properties and methods for managing subviews. This can include adding subviews to the content View of the cell, setting the accessoryView appropriately, adding an icon or image to the left side of the cell using the imageView property, and manipulating the visual characteristics such as background color and text properties. In most cases, a standard UITableViewCell is an appropriate starting point because it provides customized consistency in the user experience. • Subclass UITableViewCell with overrides for initialization, layout, and event handling, and add any functionality desired. The simplest option is to create an instance of UITableViewCell and customize it using properties. Working with standard cell properties minimizes the amount of code re- quired for customization, which in turn limits the risk of bugs. Users benefit from standard cells because familiarity speeds the learning curve for new users. Adding subviews to a standard UITableViewCell is slightly more complex. Developers must manage the layout of subviews and support resizing and repositioning subviews to support rotation. In exchange, more customization is possible. The most complex and flexible option is to subclass UITableViewCell. Developers can override the core functionality of a cell to render complex artwork or manage touch events in novel ways. Standard table view cells include three subviews that display content to users. On the left side of each cell is a view called imageView. The center and majority of the cell is occupied by a view that displays the main cell content, sensibly called the content View. To the right of the contentView is a subview that can display standard indicators such as a checkmark, chevron, custom graphic, and even controls. The view for acces- sories is called the accessoryView. Passive Indicators The disclosure indicator is a familiar control for diving deeper into a stack of UINavigationController instances from within a UITableView. The disclosure indicator looks like a chevron and shows that more information is available for a row. You can Tables and Embedded Controls | 121 Download at Boykma.Com Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com set the indicator type for a cell by setting the accessoryType property of the UITable Cell instance to UITableViewCellAccessoryDisclosureIndicator: - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { static NSString *CellIdentifier = @"OMG_Its_a_Cell"; UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier]; if (cell == nil) { cell = [[[UITableViewCell alloc] initWithFrame:CGRectZero reuseIdentifier:CellIdentifier] autorelease]; cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator; } cell.text = [nodes objectAtIndex:indexPath.row]; return cell; } You can display a checkmark as an accessory by assigning the UITableViewCellAc cessoryCheckmark constant to accessoryType: cell.accessoryType = UITableViewCellAccessoryCheckmark; Assigning a custom image to an accessory view is nearly as simple: cell.accessoryView = [[[UIImageView alloc] initWithImage:myImage] autorelease]; Active Indicators and Control Accessories Developers can assign any UIView to the accessoryView property, including controls like sliders, buttons, and switches. If the additional detail for the object represented by the cell consists of configuration options, or if the cell has multiple subviews that track touches independently, you can use a detail disclosure button by assigning UITableViewCellAccessoryDetailDisclo sureButton to the accessoryType property of the cell: - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { static NSString *CellIdentifier = @"OMG_Its_a_Cell"; UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier]; if (cell == nil) { cell = [[[UITableViewCell alloc] initWithFrame:CGRectZero reuseIdentifier:CellIdentifier] autorelease]; cell.accessoryType = UITableViewCellAccessoryDetailDisclosureButton; } cell.text = [nodes objectAtIndex:indexPath.row]; 122 | Chapter 7: Interaction Patterns and Controls Download at Boykma.Com Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com return cell; } Disclosure buttons handle user interaction separately from the cells in which they are embedded. To respond to user interaction for a disclosure button in an accessory View, define a tableView:accessoryButtonTappedForRowWithIndexPath: method in your table view’s delegate: - (void)tableView:(UITableView *)tableView accessoryButtonTappedForRowWithIndexPath:(NSIndexPath *)indexPath { // Forward the message to the tableView:didSelectRowAtIndexPath: // method. You can do anything you want here. You may want to // treat disclosure buttons separately from the cell, showing // a configuration screen instead of a detail screen, for example. [self tableView:tableView didSelectRowAtIndexPath:indexPath]; } Disclosure buttons can also be used outside of tables. The simple clarity and ubiquity of disclosure buttons across applications enable users to understand that more infor- mation is available for the selected context: - (id)initWithFrame:(CGRect)frame { if (self = [super initWithFrame:frame]) { self.backgroundColor = [UIColor clearColor]; // Add a disclosure detail button to the view. disclosure = [UIButton buttonWithType:UIButtonTypeDetailDisclosure]; [self addSubview:disclosure]; disclosure.center = CGPointMake(270.0, 20.0); [disclosure addTarget:self action:@selector(disclose:) forControlEvents:UIControlEventTouchUpInside]; // Other setup here. } return self; } You can use custom buttons or other controls as accessories by adding them to the accessoryView. If you create a custom control for your accessoryView, you will need to use the target-action mechanism to capture the events generated by user interaction. Tables and Embedded Controls | 123 Download at Boykma.Com Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com Download at Boykma.Com Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com CHAPTER 8 Progressive Enhancement Mobile devices are used in highly variable situations. Users are often outside the con- trolled, predictable confines of home or office, and they often have spotty or no access to networks. The basic operation of the iPhone doesn’t require any network access (save for the telephony functionality), and custom applications should attempt to pro- vide value in the absence of connectivity. The term for developing baseline functionality with few external requirements and enabling additional functionality in more supportive contexts is progressive enhance- ment. The key topics or functional areas for using progressive enhancement on the iPhone are: • Network connectivity • Location awareness • Accelerometer support • Rotation support • Audio support • Vibration support You will notice that some topics are related to communication while others focus on interaction. The general rule for connectivity is to require the bare minimum and pro- vide additional features as conditions allow. For interactivity, it’s best to assume the most chaotic environment for use and provide additional options for users who can interact with multiple fingers or both hands, or with the stability to use the accelerometer for physical gestures. Use cases can help find functionality that you can shift from requirements to enhance- ments. You should define several use cases, with special consideration of the environ- ments in which the user will interact with the application and with the device. Will the user be walking? Standing on a crowded commuter train? Flying on a commercial air- plane? Will the application be useful on cold, blustery days, or while mixing drinks for friends? 125 Download at Boykma.Com Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com Once you’ve created a few scenarios and identified the most likely, you will begin to recognize essential versus supplemental features. Including supplemental features gracefully is one of the more interesting challenges of UX programming. Network Connectivity The iPhone supports several forms of networking: Wi-Fi, 3G, and 2G EDGE. The iPhone will detect and use the fastest connection automatically. That is, if Wi-Fi is available, the iPhone will use it. If not, it will attempt to use a 3G connection. Failing that, it will use 2G. In many circumstances, there will be no connectivity. For example, there is rarely a connection in the New York City subway system. Applications that rely on networking can often take steps to provide utility even in the absence of network connections. A great first step is saving any data currently in use when an application terminates. This might be web-based data like HTML pages, RSS feeds, or cached image files. Another good idea is handling any pending transactions between the device and remote servers. Network programming deals with data transfer and communication between ma- chines. If a user loses network access while using an application, the application should act appropriately. In some cases, that will mean showing an alert that notifies the user of catastrophic failure. In many cases, though, a better option is simply to save any uncommitted transactions and present some sort of peripheral indication like an icon. Figure 8-1 shows Shovel, an iPhone app for reading content from Digg. The screen displays the application as users see it when they have no network connection. A great enhancement to applications that deal with massive datasets might be to cache any data that loads, so users can revisit content in the absence of connectivity. Maintain State and Persist Data Applications often use network connectivity to transfer data from remote servers or systems. A good example of a networked application is an email program such as the Mail application. Email messages are transferred across the network to the iPhone and stored locally. Maintaining state lets users read their email even in the absence of a stable network connection that would allow the delivery of new messages. Many net- worked applications can remain useful and relevant to users in the absence of connec- tivity by displaying stored versions of transferred data. There are many ways to save application data on the iPhone. One option is to structure your application data using a standard Cocoa data structure like an NSArray or NSDictionary, archiving the entire structure to a binary file. A second option is to use property list serialization, saving your data in a structured XML document. Finally, the most robust method of data storage on the iPhone is to use SQLite—a database that is included with the iPhone OS—or Core Data, a powerful framework for data management. 126 | Chapter 8: Progressive Enhancement Download at Boykma.Com Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com Figure 8-1. Shovel, an iPhone app for reading Digg content Cache User Input Reading data from the Internet is a very common requirement for mobile applications. A related requirement is to write data to network services. The presence and reliability of network services adds an element of risk for users: if connectivity drops or is absent, the state of both remote and local data becomes ambiguous. A standard pattern for ensuring state across network connections is to rely on return codes from the remote service. Applications can use representational state transfer (REST) over HTTP to simplify their communication and leverage return codes to ensure that local state and remote state match up where appropriate. The communication protocols are less important than the use of networking. You should treat network connectivity as an enhancement rather than a requirement if possible. What does this mean for an application focused on networking? Consider two exam- ples: the built-in Mail application and any of the excellent Twitter clients for Cocoa Touch. In both cases, the ability to communicate with remote services is integral to the application. An email client must at some point—and preferably all the time—connect to the Internet. The same is true of a Twitter client. In such cases, networking is more than a friendly enhancement. The requirement for Internet connectivity might be described in one of two ways: • Internet connectivity is required to run the application. • Internet connectivity is required to sync the local state of the application with remote services. Network Connectivity | 127 Download at Boykma.Com Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com The second description lets us create a friendlier user experience. The ideal networked iPhone application is a client of network services, but networking is only one facet. The Mail application solves the issue of network requirements. Email messages are synchronized to the device and remain readable in the absence of an Internet connec- tion. Messages or replies are composed on the device and automatically saved locally in the Outbox (ready for delivery) or in the Drafts folder (marked as incomplete, but still saved). When a network connection is available, messages in the Outbox are sent to the appropriate mail server. If no connection is available, Outbox messages remain on the device, ready to go. The ubiquity of this pattern in desktop email clients has set user expectations, and Apple delivered (no pun intended) by sticking to standard behavior. The same pattern is useful with any networked application. Any application can use the Outbox meta- phor to address the natural separation of functionality: the user composes content, and the user transfers content. The two functions aren’t necessarily linked together, though the latter relies on the former. If you choose to address network writes this way, you should pay special attention to the mechanisms that notify users when messages are transmitted—and when trans- mission fails. One area in which Apple fails to deliver a smooth user experience is in the notification that mail cannot be sent. Mail treats a lack of connectivity as a failure state, and a full-screen modal alert is used to notify users. This alert abruptly interrupts the task at hand, such as composing a second message. Further, the user is required to click a button to dismiss the alert. A navigation prompt would be a more subtle mech- anism for showing low-priority alerts. This example shows a prompt that displays the message “Offline” to a user: - (void)showOfflinePrompt { self.navigationItem.prompt = @"Offline"; [self performSelector:@selector(hidePrompt) withObject:self afterDelay:2.0]; } - (void)hidePrompt { self.navigationItem.prompt = nil; } Reflect Connectivity Appropriately Progressive enhancement is the art of using available resources to provide the best possible experience for users, and elegantly adapting to changes in resource availability. The way applications communicate available functionality and the state of data is a topic worthy of attention. An application can use several mechanisms to alert users to events or changes in state. Developers should carefully choose alerts that reflect the importance of an event. Most changes probably don’t require abrupt interruption and the full attention of a user. 128 | Chapter 8: Progressive Enhancement Download at Boykma.Com Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com You can show simple status updates through iconography if the icons are universally familiar. A good example is the network status display on the iPhone. The display alternates between several states: • Wi-Fi signal strength indicator • 3G service indicator • 2G EDGE service indicator • No service indicator If you create a full-screen application that uses network connections in a significant way, the native iPhone iconography may be a good foundation for your indicators and visibility. Load Data Lazily Lazy loading is a great data management pattern for progressive enhancement. It refers to the art of retrieving only the data you need to display or search at a given moment, which helps reduce latency and blocking of the main thread. The use of lazy loading is particularly helpful when working with large datasets or when traversing complex col- lections of objects. Working with UINavigationController instances to drill through hierarchical data provides a good opportunity for lazy loading, especially when reading data from an SQLite database. To better understand lazy loading as it relates to navigation-based applications, con- sider a dataset that acts as a directory of companies and their employees. Figure 8-2 shows a simple database schema with example rows. Imagine hundreds of companies listed alphabetically in a UITableView. The normal pattern for displaying this information would be to provide users with three levels of views: all companies, all employees for a selected company, and all information for a selected employee. Implementing lazy loading for the screen that displays all companies would include selecting the name property of each Company record from the database with a query such as SELECT name FROM companies; and storing the results in an NSArray that can be used to populate table cells. Selecting a table cell representing a Company will push a new UIViewController onto the navigation controller stack, and a query will retrieve infor- mation for that controller. In this example, a developer would load all employee names for the company. A query such as SELECT name FROM employees WHERE company_id = 1001; would retrieve only the information needed for display and no more. Network Connectivity | 129 Download at Boykma.Com Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com [...]... iPhone Another trade-off when you add Core Location support to an application is the increased risk of feature fatigue Feature fatigue is the feeling that a product or tool— such as an iPhone application—has too many options and is too complex One of the differentiators of the Mac and iPhone user experience over other platforms is the clarity and sense of purpose in high-quality applications Apple users... add a button that clears the screen in addition to using the accelerometer The accelerometer in the iPhone and iPod Touch can be less accurate and more inconsistent than you may anticipate The variability seems to differ among devices There are two strategies to compensate for the lack of consistent accuracy The first is to use the accelerometer as an enhancement rather than the sole input mechanism... so that users who prefer not to share their location can make informed decisions Figure 8- 5 shows the option in the Settings application for disabling location support across all applications In cases where location services are disabled, users might be prompted to enable those services Figure 8- 6 shows the Maps application after launching on an iPhone with location services disabled None of these potential... within a supplied radius When a position is found, the class notifies a delegate object Core Location uses three methods of deriving location The iPhone will choose the method that best suits the needs of the application Developers can, in most cases, ignore the means used to locate a device and instead focus on the details of their request: // Access the location manager CLLocationManager *locationManager... animates and shrinks to show the new radius value The radius represents the margin of error Errors in precision still occur on occasion—showing that a user is in a lake instead of on a road circling the lake, for example This imprecision does not hinder the user experience, however, because the large circles that refine over time communicate that accuracy is not 136 | Chapter 8:  Progressive Enhancement... Figure 8- 4 A Core Location permission prompt in the Maps application Like many features of the iPhone, users can disable location support in the Settings application The use cases you create for location-aware applications should factor in the possibility of users turning off support for Core Location Marketing materials and App Store entries for applications that require Core Location should mention the. .. simply need to know the country, state, province, city, or town in which a device is located Setting the desired accuracy is simple: locationManager.desiredAccuracy = kCLLocationAccuracyThreeKilometers; // Set the delegate to handle the messages from the location manager locationManager.delegate = self; // Set the minimum distance the iPhone must move from its initial location // before the delegate will... tolerances There is no property for the CLLocationManager class that can state an acceptable range of accuracy that, when reached, should stop polling In addition, Core Location will cache the last known location of a device, and in most cases, the cached value will be the first reported location This helps to improve the user experience by supplying an application with a relevant starting point for the update... When developing user interface elements that display the location, design for the unpredictable accuracy Core Location can provide The Maps application handles the inherent imprecision of location services well As the application refines location accuracy, the Maps application draws a circle with a radius that corresponds roughly to the accuracy of a given request With each refinement, the circle animates... software A final downside to adding Core Location support is the result of a default security policy that requires users to grant permission to each application making location requests This is something users become accustomed to over time, but for users new to the platform, it can be disconcerting Figure 8- 4 shows the permission prompt for the Maps application Location Awareness | 133 Download at Boykma.Com . indication of the object assigned to the cell. Users can get additional information for each row by tapping the row. When a user taps the row, an event is sent to the delegate of the table, which. can use the Outbox meta- phor to address the natural separation of functionality: the user composes content, and the user transfers content. The two functions aren’t necessarily linked together,. subviews to the content View of the cell, setting the accessoryView appropriately, adding an icon or image to the left side of the cell using the imageView property, and manipulating the visual characteristics