Lecture 2 Slides - Apple Inc. · UIStackView First peek at Autolayout (stick things to the edges)...

33
CS193p Winter 2017 Stanford CS193p Developing Applications for iOS Winter 2017

Transcript of Lecture 2 Slides - Apple Inc. · UIStackView First peek at Autolayout (stick things to the edges)...

Page 1: Lecture 2 Slides - Apple Inc. · UIStackView First peek at Autolayout (stick things to the edges) Title: Lecture 2 Slides Author: Paul Hegarty Created Date: 20170111205946Z ...

CS193pWinter 2017

Stanford CS193pDeveloping Applications for iOS

Winter 2017

Page 2: Lecture 2 Slides - Apple Inc. · UIStackView First peek at Autolayout (stick things to the edges) Title: Lecture 2 Slides Author: Paul Hegarty Created Date: 20170111205946Z ...

CS193pWinter 2017

TodayMVC

Object-Oriented Design Pattern

Continuation of Calculator DemoComputed Properties, MVC, Laying out the UI to work with different devices

Page 3: Lecture 2 Slides - Apple Inc. · UIStackView First peek at Autolayout (stick things to the edges) Title: Lecture 2 Slides Author: Paul Hegarty Created Date: 20170111205946Z ...

CS193pWinter 2017

Controller

MVC

Model View

Divide objects in your program into 3 “camps.”

Page 4: Lecture 2 Slides - Apple Inc. · UIStackView First peek at Autolayout (stick things to the edges) Title: Lecture 2 Slides Author: Paul Hegarty Created Date: 20170111205946Z ...

CS193pWinter 2017

Controller

MVC

Model View

Model = What your application is (but not how it is displayed)

Page 5: Lecture 2 Slides - Apple Inc. · UIStackView First peek at Autolayout (stick things to the edges) Title: Lecture 2 Slides Author: Paul Hegarty Created Date: 20170111205946Z ...

CS193pWinter 2017

Controller

MVC

Model View

Controller = How your Model is presented to the user (UI logic)

Page 6: Lecture 2 Slides - Apple Inc. · UIStackView First peek at Autolayout (stick things to the edges) Title: Lecture 2 Slides Author: Paul Hegarty Created Date: 20170111205946Z ...

CS193pWinter 2017

Controller

MVC

Model View

View = Your Controller’s minions

Page 7: Lecture 2 Slides - Apple Inc. · UIStackView First peek at Autolayout (stick things to the edges) Title: Lecture 2 Slides Author: Paul Hegarty Created Date: 20170111205946Z ...

CS193pWinter 2017

Controller

MVC

Model View

It’s all about managing communication between camps

Page 8: Lecture 2 Slides - Apple Inc. · UIStackView First peek at Autolayout (stick things to the edges) Title: Lecture 2 Slides Author: Paul Hegarty Created Date: 20170111205946Z ...

CS193pWinter 2017

Controller

MVC

Model View

Controllers can always talk directly to their Model.

Page 9: Lecture 2 Slides - Apple Inc. · UIStackView First peek at Autolayout (stick things to the edges) Title: Lecture 2 Slides Author: Paul Hegarty Created Date: 20170111205946Z ...

CS193pWinter 2017

Controller

MVC

Model View

outlet

Controllers can also talk directly to their View.

Page 10: Lecture 2 Slides - Apple Inc. · UIStackView First peek at Autolayout (stick things to the edges) Title: Lecture 2 Slides Author: Paul Hegarty Created Date: 20170111205946Z ...

CS193pWinter 2017

Controller

MVC

Model View

outlet

The Model and View should never speak to each other.

Page 11: Lecture 2 Slides - Apple Inc. · UIStackView First peek at Autolayout (stick things to the edges) Title: Lecture 2 Slides Author: Paul Hegarty Created Date: 20170111205946Z ...

CS193pWinter 2017

Controller

MVC

Model View

?outlet

Can the View speak to its Controller?

Page 12: Lecture 2 Slides - Apple Inc. · UIStackView First peek at Autolayout (stick things to the edges) Title: Lecture 2 Slides Author: Paul Hegarty Created Date: 20170111205946Z ...

CS193pWinter 2017

Controller

MVC

Model View

outlet

Sort of. Communication is “blind” and structured.

Page 13: Lecture 2 Slides - Apple Inc. · UIStackView First peek at Autolayout (stick things to the edges) Title: Lecture 2 Slides Author: Paul Hegarty Created Date: 20170111205946Z ...

CS193pWinter 2017

Controller

MVC

Model View

outlet

target

The Controller can drop a target on itself.

Page 14: Lecture 2 Slides - Apple Inc. · UIStackView First peek at Autolayout (stick things to the edges) Title: Lecture 2 Slides Author: Paul Hegarty Created Date: 20170111205946Z ...

CS193pWinter 2017

Controller

MVC

Model View

action

outlet

target

Then hand out an action to the View.

Page 15: Lecture 2 Slides - Apple Inc. · UIStackView First peek at Autolayout (stick things to the edges) Title: Lecture 2 Slides Author: Paul Hegarty Created Date: 20170111205946Z ...

CS193pWinter 2017

Controller

MVC

Model View

action

outlet

target

Then hand out an action to the View.

Page 16: Lecture 2 Slides - Apple Inc. · UIStackView First peek at Autolayout (stick things to the edges) Title: Lecture 2 Slides Author: Paul Hegarty Created Date: 20170111205946Z ...

CS193pWinter 2017

Controller

MVC

Model View

action

outlet

target

The View sends the action when things happen in the UI.

Page 17: Lecture 2 Slides - Apple Inc. · UIStackView First peek at Autolayout (stick things to the edges) Title: Lecture 2 Slides Author: Paul Hegarty Created Date: 20170111205946Z ...

CS193pWinter 2017

Controller

MVC

Model View

action

outlet

should

will did

target

Sometimes the View needs to synchronize with the Controller.

Page 18: Lecture 2 Slides - Apple Inc. · UIStackView First peek at Autolayout (stick things to the edges) Title: Lecture 2 Slides Author: Paul Hegarty Created Date: 20170111205946Z ...

CS193pWinter 2017

Controller

MVC

Model View

action

delegate

outlet

should

will did

target

The Controller sets itself as the View’s delegate.

Page 19: Lecture 2 Slides - Apple Inc. · UIStackView First peek at Autolayout (stick things to the edges) Title: Lecture 2 Slides Author: Paul Hegarty Created Date: 20170111205946Z ...

CS193pWinter 2017

Controller

MVC

Model View

action

delegate

outlet

should

will did

target

The delegate is set via a protocol (i.e. it’s “blind” to class).

Page 20: Lecture 2 Slides - Apple Inc. · UIStackView First peek at Autolayout (stick things to the edges) Title: Lecture 2 Slides Author: Paul Hegarty Created Date: 20170111205946Z ...

CS193pWinter 2017

Controller

MVC

Model View

action

delegate

outlet

should

will did

target

Views do not own the data they display.

Page 21: Lecture 2 Slides - Apple Inc. · UIStackView First peek at Autolayout (stick things to the edges) Title: Lecture 2 Slides Author: Paul Hegarty Created Date: 20170111205946Z ...

CS193pWinter 2017

Controller

MVC

Model View

action

delegate

outlet

should

will did

target

countdata at

So, if needed, they have a protocol to acquire it.

Page 22: Lecture 2 Slides - Apple Inc. · UIStackView First peek at Autolayout (stick things to the edges) Title: Lecture 2 Slides Author: Paul Hegarty Created Date: 20170111205946Z ...

CS193pWinter 2017

Controller

MVC

Model View

action

delegate

outlet

data source

should

will did

target

countdata at

Controllers are almost always that data source (not Model!).

Page 23: Lecture 2 Slides - Apple Inc. · UIStackView First peek at Autolayout (stick things to the edges) Title: Lecture 2 Slides Author: Paul Hegarty Created Date: 20170111205946Z ...

CS193pWinter 2017

Controllers interpret/format Model information for the View.

Controller

MVC

Model View

action

delegate

outlet

data source

should

will did

target

countdata at

Page 24: Lecture 2 Slides - Apple Inc. · UIStackView First peek at Autolayout (stick things to the edges) Title: Lecture 2 Slides Author: Paul Hegarty Created Date: 20170111205946Z ...

CS193pWinter 2017

Controller

MVC

Model View

action

? delegate

outlet

data source

should

will did

target

countdata at

Can the Model talk directly to the Controller?

Page 25: Lecture 2 Slides - Apple Inc. · UIStackView First peek at Autolayout (stick things to the edges) Title: Lecture 2 Slides Author: Paul Hegarty Created Date: 20170111205946Z ...

CS193pWinter 2017

Controller

MVC

Model View

action

delegate

outlet

data source

should

will did

target

countdata at

No. The Model is (should be) UI independent.

Page 26: Lecture 2 Slides - Apple Inc. · UIStackView First peek at Autolayout (stick things to the edges) Title: Lecture 2 Slides Author: Paul Hegarty Created Date: 20170111205946Z ...

CS193pWinter 2017

Controller

MVC

Model View

action

delegate

outlet

data source

should

will did

target

countdata at

So what if the Model has information to update or something?

Page 27: Lecture 2 Slides - Apple Inc. · UIStackView First peek at Autolayout (stick things to the edges) Title: Lecture 2 Slides Author: Paul Hegarty Created Date: 20170111205946Z ...

CS193pWinter 2017

Controller

MVC

Model View

action

Notification& KVO

delegate

outlet

data source

should

will did

target

countdata at

It uses a “radio station”-like broadcast mechanism.

Page 28: Lecture 2 Slides - Apple Inc. · UIStackView First peek at Autolayout (stick things to the edges) Title: Lecture 2 Slides Author: Paul Hegarty Created Date: 20170111205946Z ...

CS193pWinter 2017

Controller

MVC

Model View

action

Notification& KVO

delegate

outlet

data source

should

will did

target

countdata at

Controllers (or other Model) “tune in” to interesting stuff.

Page 29: Lecture 2 Slides - Apple Inc. · UIStackView First peek at Autolayout (stick things to the edges) Title: Lecture 2 Slides Author: Paul Hegarty Created Date: 20170111205946Z ...

CS193pWinter 2017

A View might “tune in,” but probably not to a Model’s “station.”

Controller

MVC

Model View

action

Notification& KVO

delegate

outlet

data source

should

will did

target

countdata at

Page 30: Lecture 2 Slides - Apple Inc. · UIStackView First peek at Autolayout (stick things to the edges) Title: Lecture 2 Slides Author: Paul Hegarty Created Date: 20170111205946Z ...

CS193pWinter 2017

Controller

MVC

Model View

action

Notification& KVO

delegate

outlet

data source

should

will did

target

countdata at

Now combine MVC groups to make complicated programs ...

Page 31: Lecture 2 Slides - Apple Inc. · UIStackView First peek at Autolayout (stick things to the edges) Title: Lecture 2 Slides Author: Paul Hegarty Created Date: 20170111205946Z ...

CS193pWinter 2017

MVCs working together

Page 32: Lecture 2 Slides - Apple Inc. · UIStackView First peek at Autolayout (stick things to the edges) Title: Lecture 2 Slides Author: Paul Hegarty Created Date: 20170111205946Z ...

CS193pWinter 2017

MVCs not working together

Page 33: Lecture 2 Slides - Apple Inc. · UIStackView First peek at Autolayout (stick things to the edges) Title: Lecture 2 Slides Author: Paul Hegarty Created Date: 20170111205946Z ...

CS193pWinter 2017

DemoCalculator continued …

MVCstruct vs. class (mutating, etc.)public versus private APImore examples of OptionalDictionary<KeyType,ValueType>enumassociated valuesswitchFunctions as typesClosure syntax for defining functions “on the fly”UIStackViewFirst peek at Autolayout (stick things to the edges)