The document discusses building interactive systems using Xcode and Swift. It introduces key programming concepts like object-oriented programming, variables and types, functions, conditionals, and Xcode components like the interface builder, simulator, and assistant editor. It explains how to create a basic Xcode project with labels, connect the labels to code using outlets, and set label text in the viewDidLoad function. The document provides an overview of building blocks for programming interactive apps in Xcode.
2. Outline
• Building block of programming
– Object oriented programming
• Variables and types
• Functions or methods
• Conditionals
• Mac developer library
• Information about of classes to create your app
• Xcode user interface and simulator
– Compile the code
• Building a Xcode – translate code into an application file
• How to add Comments //
– Run the code
• Open an executable file and code runs sequentially
• Understand the errors messages
2016 @ Sónia Sousa 2
4. Everything is an object
• In Swift as you design your applications
– You place your code inside of Class definitions
• Inside you add your Function
– Known as method
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
hi.text = "Hello”
}
4
Executable code
Main Function
Class definition
6. Models, Views and Controllers
• Is the methodology that separates
– the behavior, the data of the application from the user
interface
• Each object in your application is assigned one of three
roles:
– model, view or controller.
• A model
– manages the data of your application.
• A view
– manages the objects used to build your user interface.
» Text labels, buttons, input fields, table views, scrollable panes and
tabs
• A controller
– manages many responsibilities and the bulk of your custom application
code
2016 @ Sónia Sousa 6
7. Controllers
• When developing iOS apps,
– controller objects are subclasses like
• UIViewController - manage one screenful of data.
– Xcode iPhone app contains 3 screens of
functionality,
• storyboard file
– Specify the view controller and its views in your app’s
• Assistant editor
• Object libray
2016 @ Sónia Sousa 7
8. UIViewController methods
• viewDidLoad()
– Called when the view controller’s content is viewed
• viewWillAppear()
– Called when your wont to do an operation before the
view becomes visible.
• viewDidAppear()
– Called when your wont to do an operation after the
view becomes visible
• Animations for instance
2016 @ Sónia Sousa 8
9. Object library
• A Class represents 1 object
– You can create your own classes or reuse existing
classes from Xcode object library
2016 @ Sónia Sousa 9
class SomeClass {
// class definition goes here
}
struct SomeStructure {
// structure definition goes here
}
Class definition Syntax
10. Declare variables
• You need to specify
– 3 parts:
• var
• Variable name
– Lower case or
Underscore _
– not numerical
• Data type
• Initial value
– optional
• Type
– Byte, short, Int, long
– Float, double
data type
variable name
var age:Int = 16 value
@IBOutlet weak var myName: UILabel!
Created by you (Primitive data)
Created by you using Xcode UI interface
(Complex object)
11. Variables
• A variable is a name for a location in memory that holds a value
• Declaring Constants and
Variables
– let keyword – to create a
constant
– Var keyword – to create a
variable
var welcomeMessage:String
var a = 5
var red, green, blue:
Double
• Variables with swift
– A variable need to be
declared
var a = 5
welcomeMessage =
"Hello"
• We can assign a value to the
variable
– View how to in assignment
operators
11
12. Collection types
Structure
• A collection of values of
different types
Struct{
Int var1, var2
Float color;
}
• Dot notation to assign
values to variables
Point.valueList = 2
Println (“value 1 is”,
point.var1);
Arrays
• Creating an Empty Array
– var valueList =
[Int]()
– Assign values to an array
valueList[0] = 1
valueList[2] = 1
• Follow this link to see more
about it
• valueList[2];
• A series of values, of a single
type
– First index is 0
2016 @ Sónia Sousa 12
13. Output
• Use print or .tex notation
// prints the string "The width of someVideoMode is 0”
print("The width of someVideoMode is 0”)
// prints the string "The width of someVideoMode is now” and the variable
vale 1280
varName = 1280
print("The width of someVideoMode is now ((varName))")
// prints the string "The width of someVideoMode is now” and the variable
vale 1280
label.text = "The width of someVideoMode is (label)) ”
See the Swift Programming Language guide for more
information
2016 @ Sónia Sousa 13
15. Xcode application (Tools)
• How to install Xcode ?
– You need to go to Mac App Store and download
the latest version of Xcode
– Xcode 7 application
• For Windows or Linux OS users
– Follow this link first
• https://blog.udemy.com/xcode-on-windows/
• Developers
– To run apps on your own devices register as an
• Official iOS developer
2016 @ Sónia Sousa 15
17. Xcode interface
• Things we are going to explore
– The playground layout
– Project layout
• Explore parts of the interface
– Project window
– Toolbars
– Project navigator
– Assistant editor – code editor
– Interface builder - editor
– Object library
2016 @ Sónia Sousa 17
18. Xcode
• Xcode is an Integrated Development Environment
(IDE)
– It is used by Mac and iOS developers to build applications.
• Xcode
– Is a code editor:
– Has a variety of debugging and performance tools
• For instance finds bugs in your code before you compile
– To do an iOS application, you could use textEditor
applications as well
• Like TextMate or BBEdit and then use command line tools to do
the final compilation,
• but most developers choose to do it all within Xcode.
2016 @ Sónia Sousa 18
19. Explore a simple code space
• Compile code on Playground
– Prototype application with Swift
• See the Swift Programming Language (Swift 2.1) documentation
• Create a Playground file named exercise1. playground
– Explore the existing code
– Change the code using trial and error approach
• Create 2 variables type string and print a sentence
var mesg1:String = "Welcome to Developing Interactive
systems"
var mesg2:Int = 100
– See the results
• In playground more you can create your own code and see what it
executes at the same time
2016 @ Sónia Sousa 19
20. The Xcode playground layout
2016 @ Sónia Sousa 20
Get started with playground
Create this two
variables and add
below text
Explore all the buttons
and close the
playground
21. The Xcode project layout
• Create a new project layout
– Single view
• Name it exercise2
• Explore parts of the interface
– Project window
– Toolbars
– Project navigator
» LAYOUT
• View FILES
• controller.swift
• Main.storyboad
– Run IOS simulator interface
2016 @ Sónia Sousa 21
22. The Xcode project
2016 @ Sónia Sousa 22
Create a new project name exercise1
Single view app
Name your project
exercise 1
23. 2016 @ Sónia Sousa 23
The Xcode
Take your time and explore everything
What you need to know (we are going to use in toolbar)
layout
Run simulator button
Project
navigator
Assistant editor Hide/show
24. The Xcode UI
• Toolbar
– options for testing your app
• Project navigator
– Code file
– Storyboard- interface file
• Central area
– navigation
• Library
– Use Object library
2016 @ Sónia Sousa 24
25. IOS simulator interface
• Click on button run to run simulator interface
– Configuration
• Hardware
– Device iOS 6
• Window
– scale 50%
– Go back to Xcode
• Central area
2016 @ Sónia Sousa 25
Simulator interface
Run / Stop
buttons
26. Interface Builder
• Interface Builder is an application
– To build your interfaces visually.
– With it, you can Built-in objects like
• buttons, tab bars, sliders and labels
– Just dragged onto your app's interface and then
configured
• by tweaking the palettes and panels.
• You also use the Interface Builder to connect
targets and actions
2016 @ Sónia Sousa 26
27. Xcode code assistant editor
• Explore the central and bottom right areas
– The interface builder
– Assistant editor
– Object library
• look how functions and classes are made
– Group of code that perform a particular function
» Between { code } inside the class
» Create a var name:String = “Sonia”
• ViewDidLoad function
– Println( write the code) “(name is /(name)” )
2016 @ Sónia Sousa 27
28. Outlets for UI Elements
• Provide a way to reference code to the interface
objects
– In other words
• Connect the objects you added to your storyboard
– Like the label object (from the object library)
• Into your code source files
• To create an outlet,
– Control-drag from a particular object in your
storyboard to a view controller file
• Learn how to understand the UIKit code
– that it is generating for you by using the assistant
editor
2016 @ Sónia Sousa 28
29. The Xcode UI
Adjust
layout from
Any to
Width
compact ( )
2016 @ Sónia Sousa 29
Make sure
you have
this options
selected
30. Connect the UI to the Source Code
• Elements in a storyboard are linked to the source code.
– We need to understand it relationship
• How storyboard elements connect to the code you write.
– Metaphors used in Xcode UI
• Storyboard, scene and controllers
– Like in a theater
» A play has a storyboard we follow
» It is performed in a certain scene (app’s)
» And actors/controllers represent the play/app’s behaviors
• defined by a sequence of events
• which encapsulates the app’s data; or
• that to respond to user input
– All view controller objects in iOS are of type
UIViewController
2016 @ Sónia Sousa 30
31. UIViewController
• A UIViewController is the one that
– Enables you to view/display events or behaviours
– Xcode creates such class for you
– You can also define the behavior of your view
controllers in code
• This is done by creating a connection between classes
and scenes in your storyboard and the code
– ViewController.swift
2016 @ Sónia Sousa 31
32. Add a label to interface
2016 @ Sónia Sousa 32
Add a label
by drag and
drop
label
33. Add a label to interface
2016 @ Sónia Sousa 33
Add a label
by drag and
drop
label
34. Add a label to interface
2016 @ Sónia Sousa 34
label
Connect label to code by
Hold CTRL button and drag a line into the code.
Place it before
override func viewDidLoad() {
creating a variable named: myName
It should generate this code
@IBOutlet weak var myName: UILabel!
36. How to initiate an iPhone app
• What you need to know
– You need a Mac Os X and download Xcode 7
• Application to write our code available in Apple store
– Additional sources for the course
• Foundation of programming
• iOS SDK Essential Training
2016 @ Sónia Sousa 36
37. First steps of Programming
• Creating variables
– Write the code
• Language - Swift
– Compile the code
• Building a Xcode – translate code into an application
file
• How to add Comments // or /* */
• Run the code
• Open an executable file and code runs sequentially
2016 @ Sónia Sousa 37
38. What is a Variable?
• Is a container that holds data
– Number, text or complex values
• Variable
– Has word var
– Has a name type of data String or Int
• Set a value to the variable =
– Var score: int = 100
• Naming values
– Lower case, only letter, numbers and underscores or
camelCase
– Do not use reserve words (i.e var or int it has a specify
color)
2016 @ Sónia Sousa 38
39. Variables in Xcode
• How to variables are declared in two Xcode layouts
– In the playground - a variable declared by you
var mesg2:Int = 100
– Using the interface (UI) - a variable declared as label object
@IBOutlet weak var myName: UILabel!
• Learned how to differentiate between them
– Standard instance variable and plain variable
– @IBOutlet means to connect to the UI
– Weak means how this object is manage in memory
– var means to create a variable
– myName mean variable name
– UILabel/Int/String is the variable type
• More information available: Developing iOS Apps (swift)
2016 @ Sónia Sousa 39
40. UI Visual interface
• Learned to use Xcode User interface (UI)
– Used the Storyboard
• That is a Visual layout of my application
– Changed the size of my layout
» Changed it width and high to iPhone or iPod
– Add a text-field from the object library named:
Label
– Change the label signature in code
• Using the assistant editor feature
2016 @ Sónia Sousa 40
41. Variables
• Connection a UI element
– Using control drag
• Select the
– Connection - outlet
– Type - UILabel
– Storage - Weak
2016 @ Sónia Sousa 41
42. What do we do next?
• Learn how to use variables
– Name of the variable and what you want to access
to
– Connect visual elements to our code
– Using the assistance editor
– Use the viewDidLoad() main function also
known as method
– Perform small Variables exercise with the label
object
• Label.text
2016 @ Sónia Sousa 42
44. Type of variables
• So you know that Variables need to be
declared in Xcode
– A variable has a Name
– Can also be called Instance variables
• When connected to a class
• To connect Variables use UI
– Resources the library of objects and the storyboard
– What is a class…
2016 @ Sónia Sousa 44
45. Define an Action to Perform
• iOS apps are based on event-driven programming
– Events are system events and user actions.
• The user performs actions in the interface that trigger events
in the app.
– events result in the execution of the app’s logic and manipulation
of its data. That then
» results on an app’s response to the user action - that then
reflected back in the UI
– What you need to do to build your app
• Identify all the actions a user can perform; and
• what happens in response to those actions.
2016 @ Sónia Sousa 45
46. Methods, functions and class
• An action (or an action method)
– is a piece of code that is linked to an event that
can occur in your app.
– When that event takes place, the code gets
executed
• Actions are created in the same way as outlets
(label)
– Control-drag from a particular object from the
object library into your storyboard
2016 @ Sónia Sousa 46
48. Exercise 3 – part 1
• Start by creating a new simple action project
– name it ex3
– Add 2 labels to the storyboard (Xcode UI)
• Connect it to the code and name it’s variables
– Label 1: hi and Label 2: myName
• Print a message using the code
label 1: hi.text = "Hello”
label 2: myName.text = "My name is Sónia and I am 16 years old"
• This code sets the label’s text property to Default Text
– Run and see the results in the simulator
• Readjust the label size if need
• Create a variable age
– Print the message using the dot notation (change example
above)
myName.text = "My name is Sónia and I am (age) years old”
2016 @ Sónia Sousa 48
51. Using . notation
• To assign values
point.variable = 2
• To output values
Println (“value 1 is”, point.var1)
variable.text = "Hello”
• Another way of print the results
Print(“Hello, (variable)”)
2016 @ Sónia Sousa 51
52. Classes, Objects & Methods
• A class is a blueprint
– that describes the state and behavior of a
particular set of objects.
• Methods are behaviors
– a class possesses or executes
– You can call a method
• Directly (class methods) or
• An instance of it (instance methods)
2016 @ Sónia Sousa 52
53. Method
• Are the next building block of programming
– You can have predefined methods or
• You can your own method or functions
• A method is can be called as well class of objects
– Predefine methods look like this
• override func viewDidLoad() {
– A customize method or function is done like this
2016 @ Sónia Sousa 53
54. Methods or functions
• What creates the actions of programming
– Or sections of code that are grouped in a logic form Top down
override func viewDidLoad() {
super.viewDidLoad()
hi.text = "Hello”
myName.text = "My name is Sónia and I
am (age) years old”
}
•
•
2016 @ Sónia Sousa 54
56. What do we do next?
• Variable
– Declare a variable var x = 15;
– Learn how to use variables
• Function/methods
– var name = John.getName();
• Loop
– for (var x = 0; x < 10; x++)
• Conditional
– if (x == 20)
• Array
– var things = array("dog", "cat");
2016 @ Sónia Sousa 56
58. Anatomy of a method
• Understand better the anatomy of a method
– func
– Method name ()
– Body {}
• Example
func viewDidLoad() {
// code to execute
super.viewDidLoad() – action 1
hi.text = "Hello” – action 2
myName.text = "My name is Sónia and I am
(age) years old” - action 3
}
2016 @ Sónia Sousa 58
59. Method definition
• Method definition
func name()
{
// CODE TO EXECUTE
Run the method
hi.text = "sonia”
}
• Rules on how to create methods
2016 @ Sónia Sousa 59
61. Exercise 3 – part 2
• Creating a customized method
– Create your own function/method
• To increment your age variable and the call it in the
main method (func viewDidLoad())
– See next slide (22) to see how the code should
look like
2016 @ Sónia Sousa 61
63. Exercise – part 3
• Add a button to your storyboard that
increases your age
– everytime the user press the button
• Make sure that you select this options when
connection the UIButton to code
– Connection = action
– Name = iceAge
– Event = Touch Up Inside
– Arguments = Sender and Event
– Add your code inside func to the button iceAge Func
2016 @ Sónia Sousa 63
65. What we’ve learned so far
• To increase the usability of your code
– By creating text labels and a button
• And execute simple events/actions
– Received data “variable datatype execute
method”
• Those are the verbs or actions of
programming
– Named sections of code to execute
2016 @ Sónia Sousa 65
66. What we’ve learned so far
• Learned that
– Definition and executions are different
• Created an
– Customized method that counts how many times
you’ve to on a button
• Used one button and one label actions
• Incremented by 1 age++ using ++
• Exercise
• Can you change your code to increment by 10?
2016 @ Sónia Sousa 66
67. @IBAction func buttonAction()
• Learned that Text label and buttons are
different
– A button has an action associated
• Connection - Action
• This actions can be type UILabel
– AnyObject
• And send arguments as UIEvent
@IBAction func iceAge(sender: UILabel,
forEvent event: UIEvent) { code to
execute }
2016 @ Sónia Sousa 67
68. What to do next?
• A conditional statement
– Or selection statements
• lets us choose which statement will be executed next
– give us the power to make basic decisions
• The Java conditional statements are the:
– If;
– if-else statement;
682015 @ Sonia Sousa
70. If statement
• The if-then and if-then-else Statements
– Its is the most basic statement to evaluate a
condition
• For example, it tells your computer to execute a piece
of code only if
– a particular test evaluates to true.
• If it is false then the
– control jumps to the end of the if-then statement.
702015 @ Sonia Sousa
71. If statement
• The if-then and if-then-else Statements
– Its is the most basic statement to evaluate a
condition
• If the condition is true,
– statement1 is executed;
– if the condition is false, statement2 is executed
• One or the other will be executed, but not both
712015 @ Sonia Sousa
if ( condition )
statement1;
else
statement2;
72. Logic of an if statement
2015 @ Sonia Sousa 72
condition
evaluated
statement
true
false
condition
evaluated
statement1
true false
statement2
Condition 2
evaluated
73. Boolean expressions
• How to evaluate an If condition
– With a boolean expression.
• It evaluates if the condition is true or false.
– Then execute the statement.
732015 @ Sonia Sousa
Equality operators are:
== equal to
!= not equal to
Relational operators are:
< less than
> greater than
<= less than or equal to
>= greater than or equal to
Note:
see difference
between the equality
operator (==) and the
assignment operator
(=)
75. Exercise 4
• Create a new project name it OnOff
– and add a label and a button into the storyboard
– Create a condition that when you click in the
button it should alternate
– The label text “on” and “off”
2016 @ Sónia Sousa 75
77. What we’ve learned so far
• Conditional statements are evaluated as True
or False
– The if blocks run if the condition is evaluated as
true
– An optional else block runs if the condition is false
• Process User Input
– Using object buttons
2016 @ Sónia Sousa 77
79. Exercise 5
• Create a new application to
– Tap numeric buttons and calculate
additions/subtract and clean
• Create a new project name it calculator
– What you need to know first
• Create visual interface – the calculator buttons
– Object Buttons - number 1, operations +, = and Clear
– Object Text label – to visualize numbers and results
2016 @ Sónia Sousa 79
80. Code structure
• Key instance variables
// Key instance variables
var number:String = ""
var firstNumber:Int = 0
var isTypingNumber:Bool = true
var operation:String = ""
var secondNumber:Int = 0
// UILabel
@IBOutlet weak var labelCalc: UILabel!
2016 @ Sónia Sousa 80
81. Key methods
// UIButtons
@IBAction func tapNumbers(sender: UIButton) { Code to
execute }
associated with button title “1”
IBAction func matOperation(sender: UIButton) { Code to
execute }
associated with button title “+”
@IBAction func tapClear(sender: UIButton) { Code to
execute }
associated with button title “C”
@IBAction func tapEqual(sender: UIButton) { Code to
execute }
associated with button title “=“
// added before the already predefined methods (main
method)
override func viewDidLoad() { }
override func didReceiveMemoryWarning() {}
2016 @ Sónia Sousa 81
82. Key steps
• New project named calculator
– Create
• 4 object buttons; and
• 1 object Layer in the storyboard layer
• Associate the right Title to buttons and text label
– Double click onthe buttons
» buttons title 1, +, Clear and =
» Label text title 0
– Set the instance variables and methods
• Instances variables (see previous slide 90)
– Connect the key methods
• Be Sure that you add
– @IBAction and UIButton characteristics
2016 @ Sónia Sousa 82
83. 2016 @ Sónia Sousa 83
1. Start by add a label and connect it
2. Add 4 buttons title 1, +, Clear and =
3. Connect them to the code
The Result associated with Object Label title 0 a @IBOutlet weak
var labelCalc: UILabel!
associated with Object button title 1 a @IBAction
func tapNumbers(sender: UIButton)
associated with Object button title + a IBAction
func matOperation(sender: UIButton)
sociated with Object button title C a @IBAction
func tapClear(sender: UIButton)
associated with Object button title = a
@IBAction func tapEqual(sender:
UIButton)
Run simulator
84. keymethod tapNumbers
• Add the following code between brackets { Code to
execute }
@IBAction func tapNumbers(sender: UIButton) {
number = sender.currentTitle!
if (isTypingNumber == true) {
labelCalc.text = labelCalc.text! + number
} else {
labelCalc.text = number
}
}
Run simulator
2016 @ Sónia Sousa 84
85. keymethod matOperation
• Add the following code between brackets { Code to
execute }
@IBAction func matOperation(sender: UIButton) {
isTypingNumber = false
operation = sender.currentTitle!
labelCalc.text = "(operation)"
firstNumber = Int(number)!
}
Run simulator
2016 @ Sónia Sousa 85
86. keymethod tapClear
• Add the following code between brackets { Code to execute }
@IBAction func tapClear(sender: UIButton) {
isTypingNumber = false
if(operation == "C") {
number = ""
firstNumber = 0
operation = ""
secondNumber = 0
}
labelCalc.text = "0"
}
Run simulator
2016 @ Sónia Sousa 86
87. keymethod tapEqual
• Add the following code between brackets { Code to execute }
@IBAction func tapEqual(sender: UIButton) {
isTypingNumber = false
var result = 0
secondNumber = Int(number)!
if(operation == "+") {
result = firstNumber + secondNumber
} else if(operation == "-"){
result = firstNumber - secondNumber
}
labelCalc.text = "(result)"
}
Run simulator
2016 @ Sónia Sousa 87
88. • If no error was found then let’s format the
buttons and connect them
2016 @ Sónia Sousa 88
Buttons width = 75 and height = 75
Label height = 75
Set the background color and use the key
OPTION or alt to duplicate the buttons for
the numbers 2 to 9 and the “ –”
89. • Finally, connect the key method to he storyboard by selecting the
gray points in the middle of the 2 windows and drag to buttons
2016 @ Sónia Sousa 89
94. Challenge 1
• See this youtube video
– https://www.youtube.com/watch?v=6Zf79Ns8_oY
2016 @ Sónia Sousa 94
95. Challenge 2
• Let’s use this tutorial to develop our first basic
UI
– Do the building UI tutorial
• Start Developing iOS Apps (Swift)
• Add your code to GitHub
2016 @ Sónia Sousa 95
96. Additional resources
• Online tutorials
– Start Developing iOS Apps
– Ray Wenderlich's Tutorials
– Developing iOS 7 Apps for iPhone and iPad by
Stanford
– Udemy
– APPCODA
– Designthencode
2016 @ Sónia Sousa 96
97. Object library, Frameworks and APIs
• In xcode
– Identifying Classes
• Class or Superclass and Import them
– AppKit and UIKit
– Foundation Framework Classes
• UIKit Framework Common Objects & Functions
– Text and Strings: UITextField
– Buttons: UIBarButtonItem
– Label: UILabel
– Image: UIImage
– iOS Human Interface Guidelines
– UIKit User Interface Catalog
2016 @ Sónia Sousa 97
98. Additional sources for the course
• Foundation of programming iOS applications
– Xcode, Swift, Cocoa and UIKit
– iOS SDK Essential Training
• books
– Frameworks and References
• Cocoa (API)
• NSObject Protocol Reference
2016 @ Sónia Sousa 98