Book Image

iPhone User Interface Cookbook

By : Cameron Banga
Book Image

iPhone User Interface Cookbook

By: Cameron Banga

Overview of this book

The incredible growth rates for the iPhone, iPod touch, and iPad have pushed consumers to a new “App” economy, with developers racing to the platform. Mobile touch-centric interfaces vary greatly from traditional computing platforms, and programmers as well as designers must learn to adapt to the new form-factor.The iPhone User Interface Cookbook offers a complete breakdown of standard interface design on the iPhone, iPod touch, and iPad. You will learn the tools behind the trade, how to properly utilize standard interface elements, and custom UI tricks that will help your work stand out on the App Store.The book is designed to be a complete overview of interface design on all iOS platforms, offering insight and an inside look into app design. A variety of topics are covered, starting with an overview of tools for the app interface designer, touching upon popular interface components such as the Tab Bar, and offering suggestions for complex game interfaces. Whether you’re new to the platform or a seasoned developer with numerous applications in the App Store, this book strives to teach everyone simple and easy to implement tips for iOS interface design. Regardless of skill level, the iPhone User Interface Cookbook offers a detailed breakdown of all things interface design.
Table of Contents (18 chapters)
iPhone User Interface Cookbook
Credits
About the Author
About the Reviewers
www.PacktPub.com
PacktLib.PacktPub.com
Preface
The Importance of Direct Manipulation
If you need a stylus, you blew it

Getting our work onto a device


Once we've planned out our interface and started working on development, we'll need to set up an iOS device for testing. By using XCode and Apple's iOS Dev Center, we'll be able to send pre-release application builds to our iOS device using a standard 30-pin connection cable.

Getting ready

Before we start, we'll want to gather up the iOS device we plan on using for testing, the latest update to the iOS SDK from the iOS Dev Center, and the computer we plan on doing our design work on.

Note

Apple typically keeps a collection of PDFs and videos on the iOS Provisioning Portal, which are much more thorough and up-to-date than this recipe. It would be beneficial to download and read or watch these resources before we begin.

We should also complete this recipe using the Team Agent credentials for our iOS developer account. Apple has two different accounts that we can choose from depending upon our needs as developers. All accounts currently cost $100 per year and allow us to release an unlimited number of apps into the App Store. Little is needed to sign up besides the bank account information and any legal business filings that we may have if we are registering as a company instead of an individual.

Individual accounts are fairly self-explanatory, working best for people looking to release apps under their personal name. If we sign up as an individual, our account log-in serves as the Team Agent.

Company accounts are for development studios that may have two or more developers or designers who all need access to the iOS Development Center forums or operating system pre-release builds. For a company account, the log-in credentials used to create the account is the Team Agent account and this will be needed to create the necessary files for this recipe.

How to do it...

Setting up our computer to process pre-release builds is one of the most difficult tasks that we'll accomplish early on as iOS developers. It's a fairly complex job and can be very confusing at first. Here are some simple steps to help get our test application running on an iPhone, iPod touch, or iPad:

  1. 1. In preparing our application and device for testing, we're going to build what is called a Provisioning Profile. This file is required for applications that we want to test on a device and will include information from our Development Certificate, Device UDID, and App ID. The Provisioning Profile works with XCode, iTunes, and our device to make sure that we're running an authentic copy of our app.

    First, acquire the iOS Development Certificate by generating a Certificate Signing Request with Keychain Access. This process will give your applications the appropriate private key required for an iOS device to run our application.

    Launch Keychain Access from our Applications folder in OS X. Next, visit the Preferences window, which can be found in the Keychain Access menu bar or by using the Command + comma keyboard shortcut. Navigate over to the Certificates tab, and then turn Online Certificate Status Protocol and Certificate Revocation List modes off before closing the Preferences window.

  2. 2. Next, go back to the menu bar and select Request a Certificate from a Certificate Authority under the Certificate Assistant menu item.

  3. 3. When filling out the Certificate Assistant form, be sure to use the email address that is associated with our iOS Team Agent Apple account.

  4. 4. Fill out the Common Name field, leave CA Email Address blank, click on the Saved to Disk radio button, select Let Me Specify Key Pair, and then click on Continue to proceed.

  5. 5. Select 2048 bits key size and RSA algorithm options when prompted on the next screen. After clicking on Continue, a CSR file will be created on our computer's desktop.

  6. 6. Now log into the iOS Provisioning Portal using our Team Agent account. Click upon the Certificates navigation option, then click on Request Certificate under the Development tab.

  7. 7. Scroll down the page, click on Choose File, then select the CSR file from our desktop.

  8. 8. After successfully submitting the file, an email should be sent to the Team Admin and the status of our uploaded certificate will change to Pending Approval. The Team Agent account user can then approve the certificate request and a new certificate will be available for download in the Certificates menu in the iOS Provisioning Portal.

  9. 9. Once downloaded, double click the new .cer file and install the certificate using Keychain Access. This new certificate will last for a year before it expires, after which we'll have to go through this whole process again.

  10. 10. With our new certificate loaded onto our computer through Keychain Access, we're now ready to configure our test device through XCode. We should now tether our iOS device to our computer through the standard 30-pin connecter and launch iTunes.

    Once the device finishes the sync process, select the device under the Devices menu and click on the Summary tab. Now we'll want to use our mouse to click on the device serial number that is located near the top of the window. This will reveal our device's UDID, which we can select by using the Command+C copy shortcut.

    iTunes - © 2001-2011 Apple Inc.

    • Then we head back to our web browser and the iOS Provisioning Portal, where we can select the Devices menu option. Click the Add Devices button, enter a device name, and then paste in the device UDID using the Command+V paste shortcut. Click on Submit and our device has now been configured as a test device.

  11. 11. We now need to create an App ID, which is a unique identifier that Apple uses as part of the Provisioning Profile. App IDs help make special iOS features like in App Purchase, Push Notification, or Game Center work.

    Using our Team Agent account, log into the iOS Provisioning Portal and navigate to the App ID menu section. Click the New App ID button and give a short description for our App ID. For the Bundle Seed ID drop down option, either generate a new Bundle Seed ID or use a previous ID. We would use a previously generated ID if we wanted our application to share data with an existing application.

    Now we should enter a Bundle Identifier into the text field. This identifier should match the CF Bundle Identifier that has been set for the app under the Application Settings in XCode. If we ever plan on using features like in App Purchase or Push Notifications in our app, we should use a unique Bundle Identifier. Apple suggests the com.companyname.appname format, to guarantee that our Bundle Identifier is unique across all IDs. For example, a company called ABC Software with an application called Our Great App would create a Bundle Identifier called com.abcsoftware.ourgreatapp.

    • Once we click on the Submit button, our Bundle Seed ID will be created and connected to our new Bundle identifier and this new string is our App ID.

  12. 12. Since we've now created our development certificate, registered our test device, and created an App ID, we can move forward and create the actual Provisioning Profile for our application. Using this new profile, we can successfully send a test application to a device and finally try out our application.

    Using our Team Agent account, visit the Provisioning menu section of the iOS Provisiong Portal. Click on the Add button and give a name to our new Provisioning Profile. We should then click the check buttons for each device that we want to test our application on. Finally, we should select the Developer Certificate and unique App ID that we want to use for our application.

    After entering in all of this information, click on the Submit button and a new Provisioning Profile will be created which we can use to test our application. While still in the Provisioning section of the iOS Provisioning Portal, we can download our new profile and save it to our computer.

  13. 13. Once the Provisioning File has finished downloading, drag the file from Finder to XCode or iTunes to install the profile. We should now launch XCode and open the Organizer under the Window menu bar option. As long as our iOS device is still connected, we should see it here in the side menu. Under the provisioning option in the window, click the plus button and locate the Provisioning Profile if it isn't already selected.

  14. 14. At this point, we've successfully created a provisioning profile for our test application. Now head to our project file in XCode, select the project from the Target option in the side bar, then hit the blue Info button up on the toolbar. Scroll down and set the Code Signing Identity field to developer certificate associated with our new Provisioning Profile. We can now close the Info window.

We can now run our application in XCode. We can now use any iOS device to test with, however it is often wise not to use a device that you depend on daily for testing. While there are few repercussions with regards to using a device for testing, it's better to be safe than sorry with a device that you need as a phone or for other work related items.

Note

To test out our app, we can click on the Build and Go menu bar option in order to build the app on our tethered iOS device.

How it works...

Installing an application on a test device can be a bit lengthy the first time we go through the process but will become much easier for sequential applications, as we no longer will need to create a developer certificate or register our test device.

Apple's designed the system to make sure that we can securely install pre-release software on devices without fear of our work being pirated or reverse engineered by those looking to take our ideas. The profile system also helps protect users from nefarious developers who may otherwise look to deliver malware applications by circumventing the App Store.

The certificates, profiles, and application IDs that we create will be specific to our developer account, our applications, and our test devices. So unless we specifically intend to run a test application on a specific device, no unintended eyes will be able to see our pre-release work.

Once we've set up our application's Provisioning Profile, we'll be able to run our application as much as we would like on our test device. The benefits of testing our app on a real iOS device will become immediately apparent and we'll forget all about the heartache we went through to get our application up and running in the first place.

There's more...

Two iOS devices are better than one, and we may find ourselves in a situation where we would like to add multiple iOS devices to our developer account through the Provisioning Portal at one time. Luckily, Apple has developed a method for simplifying this process:

Setting up multiple devices at once

If we're looking to set up multiple iOS test devices at the same time, we can bulk upload the device names and UDIDs using the iPhone Configuration Utility or by creating a tab delimited .txt file. Once we've created a file containing all of our device information, we can upload it through the iOS Developer Portal by clicking on the Upload Devices button under the Devices menu option.

How many devices should we use?

We've discussed setting up test devices, but how many different devices should we use? Should we test on both the iPhone and the iPad?

Ideally, we'll test on as many devices as we can afford. However, we should test on a minimum of three devices. The first should be an iPhone or iPod touch running the latest operating system version available. The second should be an older iPhone or iPod touch running the oldest operating system that we plan on supporting. Finally, we should also test on an iPad, even if we haven't optimized for the tablet interface.

See also

  • Tools of the trade in the Preface