Desarrollo Aplicaciones Móviles

con Tecnología iOS

iOS BASIS
START DEVELOPING iOS APPS

Universidad de Lasalle Bajío Mtw. Juan Carlos Gallegos López

Salamanca
Desarrollo Aplicaciones Móviles con Tecnología iOS

Part 1 – Tutorial Basics

Universidad de Lasalle Bajío Mtw. Juan Carlos Gallegos López

Salamanca
Desarrollo Aplicaciones Móviles con Tecnología iOS

Create a New Project

To create a new empty project
1. Open Xcode from the /Applications directory.
The Xcode welcome window appears.

Universidad de Lasalle Bajío Mtw. Juan Carlos Gallegos López

Salamanca
Desarrollo Aplicaciones Móviles con Tecnología iOS

Create a New Project

To create a new empty project
2. In the welcome window, click “Create a new Xcode project” (or choose File > New >
Project). Xcode opens a new window and displays a dialog in which you can choose a
template.

Universidad de Lasalle Bajío Mtw. Juan Carlos Gallegos López

Salamanca
Desarrollo Aplicaciones Móviles con Tecnología iOS

Create a New Project

To create a new empty project
3. In the iOS section at the left of the dialog, select Application.
4. In the main area of the dialog, click Empty Application and then click Next.
5. In the dialog that appears, name your app and choose additional options for your
project.

Universidad de Lasalle Bajío Mtw. Juan Carlos Gallegos López

Salamanca
Desarrollo Aplicaciones Móviles con Tecnología iOS

Create a New Project

To create a new empty project
Use the following values:

•Product Name: ToDoList

Xcode uses the product name you entered to name your project and the app.

•Company Identifier: Your company identifier, if you have one. If you don’t, use
com.example.

•Class Prefix: XYZ

Xcode uses the class prefix name to name the classes it creates for you. Objective-C classes
must be named uniquely within your code and across any frameworks or bundles you
might be using. To keep class names unique, the convention is to use prefixes for all
classes. Two-letter prefixes are reserved by Apple for use in framework classes, so use
something that’s three letters or longer.

Universidad de Lasalle Bajío Mtw. Juan Carlos Gallegos López

Salamanca
Desarrollo Aplicaciones Móviles con Tecnología iOS

Create a New Project

To create a new empty project
6. Choose iPhone from the Devices pop-up menu.
As already mentioned, creating an app with an iPhone interface is the simplest way
to start. The techniques used are the same for an iPad or universal app.
7. Click Next.
8. In the dialog that appears, choose a location for your project and click Create.
Xcode opens your new project in a window (called the workspace window),
which should look similar to this:

Universidad de Lasalle Bajío Mtw. Juan Carlos Gallegos López

Salamanca
Desarrollo Aplicaciones Móviles con Tecnología iOS

Get Familiar with XCode

Universidad de Lasalle Bajío Mtw. Juan Carlos Gallegos López

Salamanca
Desarrollo Aplicaciones Móviles con Tecnología iOS

Run iOS Emulator

To run your app in iOS Simulator
1. Choose iPhone Retina (4-inch) from the Scheme pop-up menu in the Xcode toolbar.

Go ahead and look through the menu to see what other hardware options are
available in iOS Simulator.

Universidad de Lasalle Bajío Mtw. Juan Carlos Gallegos López

Salamanca
Desarrollo Aplicaciones Móviles con Tecnología iOS

Run iOS Emulator

To run your app in iOS Simulator
2. Click the Run button, located in the top-left corner of the Xcode toolbar.

Alternatively, you can choose Product > Run (or press Command-R).

If this is the first time you’re running an app, Xcode asks whether you’d like to enable
developer mode on your Mac. Developer mode allows Xcode access to certain
debugging features without requiring you to enter your password each time. Decide
whether you’d like to enable developer mode and follow the prompts. If you choose
not to enable it, you may be asked for your password later on.

3. Watch the Xcode toolbar as the build process completes.

Xcode displays messages about the build process in the activity viewer, which is in
the middle of the toolbar.

Universidad de Lasalle Bajío Mtw. Juan Carlos Gallegos López

Salamanca
Desarrollo Aplicaciones Móviles con Tecnología iOS

Run iOS Emulator

To run your app in iOS Simulator

Universidad de Lasalle Bajío Mtw. Juan Carlos Gallegos López

Salamanca
Desarrollo Aplicaciones Móviles con Tecnología iOS

Review the Source Code

To look at the main.m source file
1. Make sure the project navigator is open in the navigator area.
The project navigator displays all the files in your project. If the project
navigator isn’t open, click the leftmost button in the navigator selector bar.

Universidad de Lasalle Bajío Mtw. Juan Carlos Gallegos López

Salamanca
Desarrollo Aplicaciones Móviles con Tecnología iOS

Review the Source Code

To look at the main.m source file
2. Open the Supporting Files folder in the project navigator by clicking the disclosure
triangle next to it.
3. Select main.m.
Xcode opens the source file in the main editor area of the window, which looks
similar to this:

Universidad de Lasalle Bajío Mtw. Juan Carlos Gallegos López

Salamanca
Desarrollo Aplicaciones Móviles con Tecnología iOS

Review the Source Code

To look at the main.m source file
The main function in main.m calls the UIApplicationMain function within an
autorelease pool.

The @autoreleasepool statement is there to support memory management for

your app. Automatic Reference Counting (ARC) makes memory management
straightforward by getting the compiler to do the work of keeping track of who
owns an object; @autoreleasepool is part of the memory management
infrastructure.

Universidad de Lasalle Bajío Mtw. Juan Carlos Gallegos López

Salamanca
Desarrollo Aplicaciones Móviles con Tecnología iOS

Review the Source Code

To look at the main.m source file
The call to UIApplicationMain creates two important initial components of your app:

•An instance of the UIApplication class, called the application object.

The application object manages the app event loop and coordinates other high-level app
behaviors. This class, defined in the UIKit framework, doesn’t require you to write any
additional code to get it to do its job.

•An instance of the XYZAppDelegate class, called the app delegate.

Xcode created this class for you as part of setting up the Empty Application template. The
app delegate creates the window where your app’s content is drawn and provides a place
to respond to state transitions within the app. This window is where you write your
custom app-level code. Like all classes, the XYZAppDelegate class is defined in two source
code files in your app: in the interface file, XYZAppDelegate.h, and in the implementation
file, XYZAppDelegate.m.

Universidad de Lasalle Bajío Mtw. Juan Carlos Gallegos López

Salamanca
Desarrollo Aplicaciones Móviles con Tecnología iOS

Review the Source Code

To configure the app delegate implementation file
1. Find the application:didFinishLaunchingWithOptions: method in XYZAppDelegate.m.
It is the first method in the file.
2. Delete the first three lines of code from that method so it looks just like this:

Universidad de Lasalle Bajío Mtw. Juan Carlos Gallegos López

Salamanca
Desarrollo Aplicaciones Móviles con Tecnología iOS

Create a Story Board

To create a new storyboard
1. Choose File > New > File (or press Command-N).
A dialog appears that prompts you to choose a template for your new file.
2. On the left, select User Interface under iOS.
3. Click Storyboard, and click Next.
4. For the Devices option, select iPhone.
5. Click Next.
A dialog appears that prompts you to choose a location and name for your new storyboard.
6. In the Save As field, name the file Main.
7. Make sure the file is saved in the same directory as your project.

8. For the Group option, select ToDoList.

9. For Targets, select the checkbox next to ToDoList.
This option tells Xcode to include the new storyboard when it builds your app.
10. Click Create.

Universidad de Lasalle Bajío Mtw. Juan Carlos Gallegos López

Salamanca
Desarrollo Aplicaciones Móviles con Tecnología iOS

Create a Story Board

To set the storyboard as the app’s main interface
1. In the project navigator, select your project.
In the editor area of the workspace window, Xcode displays the project editor, which allows you
to view and edit details about how your app is built.
2. Under Targets, select ToDoList.

Universidad de Lasalle Bajío Mtw. Juan Carlos Gallegos López

Salamanca
Desarrollo Aplicaciones Móviles con Tecnología iOS

Create a Story Board

To set the storyboard as the app’s main interface
3. Select the General tab.
4. Under Deployment Info, find the Main Interface option.
5. Select your storyboard, Main.storyboard

Universidad de Lasalle Bajío Mtw. Juan Carlos Gallegos López

Salamanca
Desarrollo Aplicaciones Móviles con Tecnología iOS

Add a Scene to Your StoryBoard

To add a view controller to your storyboard
1. In the project navigator, select Main.storyboard.
Xcode opens the storyboard in Interface Builder—its visual interface editor—in the editor area. Because the
storyboard is empty, what you see is a blank canvas. You use the canvas to add and arrange user interface
elements.
2. Open the Object library.
The Object library appears at the bottom of the utility area. If you don’t see the Object library, you can click
its button, which is the third button from the left in the library selector bar. (If you don’t see the utility area,
you can display it by choosing View > Utilities > Show Utilities.)

Universidad de Lasalle Bajío Mtw. Juan Carlos Gallegos López

Salamanca
Desarrollo Aplicaciones Móviles con Tecnología iOS

Add a Scene to Your StoryBoard

To add a view controller to your storyboard
3. Drag a View Controller object from the list to the canvas.
If you can’t find the object titled View Controller in the Object library, filter the list of objects by typing in the
text field below the list. Type View Controller, and you see only view controller objects in the filtered list.

Universidad de Lasalle Bajío Mtw. Juan Carlos Gallegos López

Salamanca
Desarrollo Aplicaciones Móviles con Tecnología iOS

Add a Scene to Your StoryBoard

To add a label to your scene
1. In the Object library, find the Label object.
If you entered text in the filter text field, you may need to clear its contents before you can see the Label
object. You can also type Label in the filter field to find the Label object quickly.
2. Drag a Label object from the list to your scene.

Universidad de Lasalle Bajío Mtw. Juan Carlos Gallegos López

Salamanca
Desarrollo Aplicaciones Móviles con Tecnología iOS

Add a Scene to Your StoryBoard

To add a label to your scene
3. Drag the label to the center of the scene until horizontal and vertical guides appear.
Stop dragging the label when you see something like this:

Universidad de Lasalle Bajío Mtw. Juan Carlos Gallegos López

Salamanca
Desarrollo Aplicaciones Móviles con Tecnología iOS

Add a Scene to Your StoryBoard

To add a label to your scene
The guides mean that the label is now centered horizontally and vertically. (The guides are visible only when
you’re dragging or resizing objects next to them, so they will disappear when you let go of the label.)
4. Double-click the text of the label to select it for editing.
5. Type Hello, World! and press Return.
If necessary, recenter the label

TEST YOUR CHANGES!!!

Change the Label attributes:

1. The text of the label
2. The font size of the label
3. The color of the text

Universidad de Lasalle Bajío Mtw. Juan Carlos Gallegos López

Salamanca
Desarrollo Aplicaciones Móviles con Tecnología iOS

Build the Basic Interface

To remove the label from your scene
1. Click the label to select it.
2. Press the Delete key.
The label is removed from the scene. If this wasn’t what you wanted, you can choose Edit >
Undo Delete Label. (Every editor has an Edit > Undo command to undo the last action.)
To add a text field to your scene
1. If necessary, open the Object library.
2. Drag a Text Field object from the list to your scene.

Universidad de Lasalle Bajío Mtw. Juan Carlos Gallegos López

Salamanca
Desarrollo Aplicaciones Móviles con Tecnología iOS

Build the Basic Interface

To add a text field to your scene
3. Drag the text field so that it’s positioned about two-thirds from the bottom of the screen.

Universidad de Lasalle Bajío Mtw. Juan Carlos Gallegos López

Salamanca
Desarrollo Aplicaciones Móviles con Tecnología iOS

Build the Basic Interface

To add a text field to your scene
4. If necessary, click the text field to reveal the resize handles.
You resize a UI element by dragging its resize handles, which are small white squares that
appear on the element’s borders. You reveal an element’s resize handles by selecting it. In this
case, the text field should already be selected because you just stopped dragging it. If your text
field looks like the one below, you’re ready to resize it; if it doesn’t, select it on the canvas.

Universidad de Lasalle Bajío Mtw. Juan Carlos Gallegos López

Salamanca
Desarrollo Aplicaciones Móviles con Tecnología iOS

Build the Basic Interface

To add a text field to your scene
5. Resize the left and right edges of the text field until you see vertical guides appear.
Stop resizing the text field when you see something like this:

Universidad de Lasalle Bajío Mtw. Juan Carlos Gallegos López

Salamanca
Desarrollo Aplicaciones Móviles con Tecnología iOS

Build the Basic Interface

To configure the text field’s placeholder text
1. With the text field selected, open the Attributes inspector in the utility area.
The Attributes inspector appears when you select the fourth button from the left in the
inspector selector bar. It lets you edit the properties of an object in your storyboard.

Universidad de Lasalle Bajío Mtw. Juan Carlos Gallegos López

Salamanca
Desarrollo Aplicaciones Móviles con Tecnología iOS

Build the Basic Interface

To configure the text field’s placeholder text
2. In the Attributes inspector, find the field labeled Placeholder and type New to-do item.
To display the new placeholder text in the text field, press Return.

Universidad de Lasalle Bajío Mtw. Juan Carlos Gallegos López

Salamanca
Desarrollo Aplicaciones Móviles con Tecnología iOS

Part 2 – App Development

Process

Universidad de Lasalle Bajío Mtw. Juan Carlos Gallegos López

Salamanca
Desarrollo Aplicaciones Móviles con Tecnología iOS

App Development Process

1. Defining the Concept
2. Designing a User Interface
3. Defining the Interaction
4. Implementing Behavior
5. Incorporating the Data

Universidad de Lasalle Bajío Mtw. Juan Carlos Gallegos López

Salamanca
Desarrollo Aplicaciones Móviles con Tecnología iOS

2. Designing a User Interface

Universidad de Lasalle Bajío Mtw. Juan Carlos Gallegos López

Salamanca
Desarrollo Aplicaciones Móviles con Tecnología iOS

The View Hierarchy

• Views serve as containers for other views.
• Views are arranged in a hierarchical structure called the view hierarchy.
• The view hierarchy defines the layout of views relative to other views.
• View instances enclosed within a view are called subviews, and the parent view is referred
to as its superview.
• Even though a view instance can have multiple subviews, it can have only one superview.

Universidad de Lasalle Bajío Mtw. Juan Carlos Gallegos López

Salamanca
Desarrollo Aplicaciones Móviles con Tecnología iOS

Building an Interface Using Views

Universidad de Lasalle Bajío Mtw. Juan Carlos Gallegos López

Salamanca
Desarrollo Aplicaciones Móviles con Tecnología iOS

Use StoryBoard Lay Out Views

You use a storyboard to lay out your hierarchy of views in a graphical environment.
Storyboards provide a direct, visual way to work with views and build your interface.

The outline view—which appears on the left side of the canvas—lets you see a
hierarchical representation of the objects in your storyboard.

Universidad de Lasalle Bajío Mtw. Juan Carlos Gallegos López

Salamanca
Desarrollo Aplicaciones Móviles con Tecnología iOS

Use Inspectors to Configure Views

● File. Lets you specify general information about the storyboard.
● Quick Help. Provides useful documentation about an object.
● Identity. Lets you specify a custom class for your object and define its accessibility
attributes.
● Attributes. Lets you customize visual attributes of an object.
● Size. Lets you specify an object’s size and Auto Layout attributes.
● Connections. Lets you create connections between your interface and source code.

Universidad de Lasalle Bajío Mtw. Juan Carlos Gallegos López

Salamanca
Desarrollo Aplicaciones Móviles con Tecnología iOS

Use Auto Layout to Positions Views

Auto Layout is a system for expressing relationships between views in your app’s user
interface. Auto Layout lets you define these relationships in terms of constraints on
individual views or between sets of views.

Universidad de Lasalle Bajío Mtw. Juan Carlos Gallegos López

Salamanca
Desarrollo Aplicaciones Móviles con Tecnología iOS

3. Defining the Interaction

Universidad de Lasalle Bajío Mtw. Juan Carlos Gallegos López

Salamanca
Desarrollo Aplicaciones Móviles con Tecnología iOS

The Controller
After you lay out your user interface, you need to let users interact with it. This is
where controllers come in. Controllers support your views by responding to user
actions and populating the views with content. Controller objects are a conduit
through which views learn about changes in the data model, and vice versa. Views are
notified of changes in model data through the app’s controllers, and controllers
communicate user-initiated changes—for example, text entered in a text field—to
model objects. Whether they’re responding to user actions or defining navigation,
controllers implement your app’s behavior.

Universidad de Lasalle Bajío Mtw. Juan Carlos Gallegos López

Salamanca
Desarrollo Aplicaciones Móviles con Tecnología iOS

View Controllers (Behaviors)

After you’ve built a basic view hierarchy, your next step is to control the visual
elements and respond to user input. In an iOS app, you use a view controller
(UIViewController) to manage a content view with its hierarchy of subviews.

Universidad de Lasalle Bajío Mtw. Juan Carlos Gallegos López

Salamanca
Desarrollo Aplicaciones Móviles con Tecnología iOS

Actions
An action is a piece of code that’s linked to some kind of event that can occur in your
app. When that event takes place, the code gets executed. You can define an action to
accomplish anything from manipulating a piece of data to updating the user interface.
You use actions to drive the flow of your app in response to user or system events.

Universidad de Lasalle Bajío Mtw. Juan Carlos Gallegos López

Salamanca
Desarrollo Aplicaciones Móviles con Tecnología iOS

Outlets
Outlets provide a way to reference objects from your interface—the objects you
added to your story board—from source code files. You create an outlet by Control-
dragging from a particular object in your storyboard to a view controller file. This
creates a property for the object in your view controller file, which lets you access and
manipulate that object from code at runtime.

Universidad de Lasalle Bajío Mtw. Juan Carlos Gallegos López

Salamanca
Desarrollo Aplicaciones Móviles con Tecnología iOS

Part 3 – Storyboard Tutorial

Universidad de Lasalle Bajío Mtw. Juan Carlos Gallegos López

Salamanca