Developing Interactive systems - lesson 2

Developing Interactive systems
Ilja Šmorgun & Sónia Sousa

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

BUILDING BLOCK OF PROGRAMMING
Reviewing the

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

Object-oriented Language
State
Variables (fields)
behaviours
functions (methods)
that allow to change the state
Function to change the gear (bicycle has 3 gears)
@ Sonia Sousa 52015
super.viewDidLoad()
hi.text = "Hello"
var age:Int = 16
@IBOutlet weak var myName: UILabel!

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

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

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

Object library
• A Class represents 1 object
– You can create your own classes or reuse existing
classes from Xcode object library
class SomeClass {
// class definition goes here
}
struct SomeStructure {
// structure definition goes here
}
Class definition Syntax

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
Created by you (Primitive data)
Created by you using Xcode UI interface
(Complex object)

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

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

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

XCODE SDK APPLICATION
Installing

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

Practicing

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

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.

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

The Xcode playground layout
Get started with playground
Create this two
variables and add
below text
Explore all the buttons
and close the
playground

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

The Xcode project
Create a new project name exercise1
Single view app
Name your project
exercise 1

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

The Xcode UI
• Toolbar
– options for testing your app
• Project navigator
– Code file
– Storyboard- interface file
• Central area
– navigation
• Library
– Use Object library

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
Simulator interface
Run / Stop
buttons

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

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)” )

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

The Xcode UI
Adjust
layout from
Any to
Width
compact ( )
Make sure
you have
this options
selected

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

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

Add a label to interface
Add a label
by drag and
drop
label

Add a label
by drag and
drop
label

label
Connect label to code by
Hold CTRL button and drag a line into the code.
Place it before
creating a variable named: myName
It should generate this code

What we’ve learned
So far…

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

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

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)

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
• 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)

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

Variables
• Connection a UI element
– Using control drag
• Select the
– Connection - outlet
– Type - UILabel
– Storage - Weak

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

Reviewing the

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…

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.

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

Practicing

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”

/* ViewController.swift - Exercise 1 - © 2016 Sonia Sousa. */
import UIKit
@IBOutlet weak var hi: UILabel!
var age:Int = 16
super.viewDidLoad()
//
hi.text = "Hello"
myName.text = "My name is Sónia and I am (age) years old"
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
}

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)”)

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)

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

Methods or functions
• What creates the actions of programming
– Or sections of code that are grouped in a logic form Top down
super.viewDidLoad()
hi.text = "Hello”
myName.text = "My name is Sónia and I
am (age) years old”
}
•
•

UIlabel
• Create text labels
– Connection
• Action
– Type
• UILabel
• AnyObject
– Arguments
• UIEvent

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");

Reviewing the

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
}

Method definition
• Method definition
func name()
{
// CODE TO EXECUTE
Run the method
hi.text = "sonia”
}
• Rules on how to create methods

Practicing

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

* ViewController.swift - ex2 - © 2016 Sonia Sousa. Print
text using the label object */
import UIKit
var age:Int = 16
func incAge() {
age++
hi.text = "Hello!”
myName.text = "my name is Sónia Sousa and I am
(age) Yo”
}
super.viewDidLoad()
// calling or execute the function iceAge
self.incAge()
} …

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

/* ViewController.swift - ex2 - © 2016 Sonia Sousa. Increasing your
age by responding to an event button */
import UIKit
var age:Int = 16
@IBAction func iceAge(sender: AnyObject, forEvent event: UIEvent)
{
age++
hi.text = "Hello!"
myName.text = "my name is Sónia Sousa and I am (age) Yo”
}
super.viewDidLoad()
} …

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

• 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?

@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 }

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

Reviewing the

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.

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
if ( condition )
statement1;
else
statement2;

Logic of an if statement
2015 @ Sonia Sousa 72
condition
evaluated
statement
true
false
condition
evaluated
statement1
true false
statement2
Condition 2
evaluated

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.
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
(=)

Practicing

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”

/* ViewController.swift - ex2 - © 2016 Sonia Sousa. */
@IBOutlet weak var label: UILabel!
var isOn:Bool = false
@IBAction func clickme(sender: UIButton) {
if (isOn){
isOn = false
label.text = "Off”
}
else {
isOn = true
label.text = "On”
}
}
super.viewDidLoad()
// Do any additional setup after loading the view, typically
} …

• 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

Practicing

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

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!

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() {}

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

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

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

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

keymethod tapClear
• Add the following code between brackets { Code to execute }
@IBAction func tapClear(sender: UIButton) {
if(operation == "C") {
number = ""
firstNumber = 0
operation = ""
secondNumber = 0
}
labelCalc.text = "0"
}
Run simulator

keymethod tapEqual
• Add the following code between brackets { Code to execute }
@IBAction func tapEqual(sender: UIButton) {
var result = 0
secondNumber = Int(number)!
if(operation == "+") {
result = firstNumber + secondNumber
} else if(operation == "-"){
result = firstNumber - secondNumber
}
labelCalc.text = "(result)"
}
Run simulator

• If no error was found then let’s format the
buttons and connect them
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 “ –”

• Finally, connect the key method to he storyboard by selecting the
gray points in the middle of the 2 windows and drag to buttons

// calculator © 2016 Sonia Sousa.
import UIKit
@IBOutlet weak var labelCalc: UILabel!
// key instance variables
var number:String = ””
var firstNumber:Int = 0
var isTypingNumber:Bool = true
var operation:String = ””
var secondNumber:Int = 0
// The isTypingNumber is a boolean to check whether we are typing a
number or pressing an operation.
// Next, implement the numberTapped method.
@IBAction func tapNumbers(sender: UIButton) {
number = sender.currentTitle!
if (isTypingNumber == true) {
labelCalc.text = labelCalc.text! + number
} else {
labelCalc.text = number
}
}
continue

Continue
@IBAction func matOperation(sender: UIButton) {
operation = sender.currentTitle!
labelCalc.text = "(operation)”
firstNumber = Int(number)!
}
@IBAction func tapEqual(sender: UIButton) {
var result = 0
secondNumber = Int(number)!
if(operation == "+") {
result = firstNumber + secondNumber
} else if(operation == "-"){
result = firstNumber - secondNumber
}
labelCalc.text = "(result)”
}
Continue

Continue
@IBAction func tapClear(sender: UIButton) {
if(operation == "C") {
number = ””
firstNumber = 0
operation = ””
secondNumber = 0
}
labelCalc.text = "0”
}
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a
nib.
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
}

Home assignment

Challenge 1
• See this youtube video
– https://www.youtube.com/watch?v=6Zf79Ns8_oY

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

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

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

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

Developing Interactive systems - lesson 2

More Related Content

Viewers also liked (20)

Similar to Developing Interactive systems - lesson 2 (20)

More from Sónia (15)

Recently uploaded (20)

Developing Interactive systems - lesson 2