Tip:
Highlight text to annotate it
X
CalculatorViewController.xib.
I have the name of the file
in the lower left
corner right there.
You can also see it in the main
window of Interface Builder,
which is that small
window at the bottom.
So I told you that the view is
like the minions
of the controller.
Thatís why we put all the view
≠≠ views including the buttons
and subviews into a
file that has the name
of our controller dot xib.
Sometimes that confuses people a
little bit, but thatís why we do
that because these
things are the minions.
They essentially
are being driven
by CalculatorViewController,
which is our controller.
One other thing to note is
this little icon that says
¢Fileís Owner¢, very important
to understand what that is.
Since this is
CalculatorViewControllerís
minions, the Fileís
Owner for this file
in Interface Builder
is our controller.
So anytime we want to wire
something up to our controller
in either direction, thatís
the icon weíre going to use.
Okay? Sometimes people
get a little confused.
Where is my controller?
I donít see it.
Itís the Fileís Owner
in this file.
All right?
Now, let me talk briefly
about these four windows here
that appear in Interface
These are the only four windows
really youíre going to see.
The one in the left there,
library, thatís a big list
of all the objects in the
UIKit and some other kits
that you can drag out to build
your user interface with.
So you can see right
there weíve got label
and round rec button
and a text field.
Weíve got a switch, a slider.
These are all things that we
can just pick up with the mouse
and drag them out into our
view, our controllerís view
to build whatever our
user interface is.
And weíll be doing that today.
On the right, that windowís
called the inspector.
And that, if you select any
object in Interface Builder,
itís just an inspector
that lets you set all kinds
of attributes of it.
The contents of it change as
you select different things.
Obviously, the contents
are different
if itís a button selected versus
a UI label or something else.
And, then, the window on the
bottom, thatís the main window.
That has a graphical
representation of kind
of top≠level views
but also objects
that donít have a
visual representation
like your controller,
Fileís Owner, right?
They need an icon so you
can drag lines between them.
Thatís where they live.
You can view it in
different ways.
This one right here has ≠≠
is in a big icon mode
but you can list it
in kind of a list mode.
And, then, thereís like
a browser type mode
like the finder in the
Mac to find your objects.
And when you have a big ≠≠ big
user interface that has a lot
of stuff in there, can
be sometimes convenient
to go find things in
there versus trying
to click around in them.
Up in the middle
window, top middle,
the top middle is our view.
So we directly manipulate
our view.
You notice that that
view is kind
of the aspect ratio
of an iPhone?
If we were doing an iPad
app, it would have ≠≠
you know, weíd have a window
that would be more
iPad sized and ratioed.
So we literally just directly
manipulate stuff into our UI,
and Iím going to show you
that in Interface Builder.
So hereís the connections
weíre going to make.
First weíre going
to drag from the ≠≠
one of the digit buttons
down to Fileís Owner.
And this little black windowís
going to come up, and itís going
to show all of the methods that
we can send that make sense
from a button to
this Fileís Owner.
And weíre just going to pick
¢digit pressed¢ in this case
and it will make that
connection, okay?
Weíre going to do
the exact same thing
with operation buttons, okay?
That little black
windowís going to come up.
Iím going to pick
¢operation press¢,
and thatís going to wire it up.
Now, Iím not going to have to
do this for every single button
because Iím just going to do
it for my first digit button
and Iím going to
copy and paste it.
Because copying and pasted ≠≠
copying and pasting
in iOS Interface Builder
keeps the connections.
So it copies the
connections, as well.
So any digit button that Iíve
wired up in copy and paste,
the new button will
also be wired
up to send that same message.
And you might ask how am I going
to know whether Iím clicking
on the 7 button or the µ button?
Well remember that the message
has an argument colon UI
button sender.
So weíll know which
button sent us.
And weíre going to write a
little code to ask the sender,
you know, what is it that
≠≠ what button are you?
And then weíll be able to do our
digit or operation from there.
And, then, we also have one more
dragging to do and weíre going
to drag from the Fileís
Owner up to the display.
And notice the direction
you drag matters.
Because here weíre dragging
from our controller to our view
because weíre making an outlet.
But the same kind of little
black window will come up.
This one has different
choices in it, display and view
because weíre making an outlet.
It doesnít make sense to be ≠≠
weíre not doing target
action here.
Weíre doing outlets.
And so weíll pick ¢display¢.
Weíll talk about what
that other one view is.
We inherit that from
the UIViewController.
Weíll talk about that
later in the quarter.
Okay. So thatís it.
Thatís basically what
weíre going to do.
So a demo is worth 1,∞∞∞ slides,
really, is what I should say.
And so weíre just going to sit
down and weíll do this thing.
See how weíre doing on time.
Plenty of time.
All right.
So we start with Xcode.
Now, I should say
let me show you
where Xcode is going to land.
When you install
the SDK in Xcode,
itís going to install
this directory
at your top level
called developer.
All right.
And, if you look
inside of developer,
thereís going to
be applications.
And hereís where Xcode and
Interface Builder live.
I kind of recommend that you
create a developer directory
in your home directory,
as well, and keep all
of your projects in there.
Okay? Itís just kind of a
nice consistency of naming.
So youíre just going to
double≠click on Xcode right here
and youíre going to
get this splash screen.
Now, this splash screen
on the right has all
the recent projects
that youíve been
working on, okay?
We donít have any because
itís our first project.
But you can one≠click there and
youíre right into your project.
Very convenient.
But, then, on the left, thereís
these three buttons right here.
Little bit of help, how to
get to developer.Apple.com,
basically the dev center there
and also creating a new project.
Thatís what we want to do today.
Iím just going to click
¢Create a New Project¢.
Now, when we create a project,
Xcode essentially knows how
to give you a template for a lot
of different kinds of projects.
In fact, if you had ≠≠
from here, we could create a
Mac OS 1∞ project actually,
a Cocoa application which is
for the Mac, not for iPhone.
And, you know, command line
tools, things like that.
You can even create
frameworks, libraries,
even Cocoa Touch libraries.
If youíre building, you
know, a suite of applications
and you want to have a shared
library, you can do that.
But what weíre mostly
interested in is this section,
iOS application, okay?
These are templates for
building iOS applications.
And you can see thereís
some here
like building an open
«L ES application.
That would be 3D
graphics application;
split view≠based
application for iPads.
Thereís really two that
weíre interested in,
which is these two, okay?
Window≠based application is
the most raw application.
It doesnít have any MVC
in there for you yet.
Youíre going to build all
that yourself in code.
Itís the most minimal
application.
We will actually we using
this for our second series
of homework, because weíre going
to be building a pretty
complicated MVC picture.
And so weíre going to want
to control that ourselves.
But the one weíre
going to choose today
and the one you choose
for a simple app,
itís called ¢view≠based
application¢.
I wish it were called
something like ¢simple MVC¢,
because thatís really
what it is.
View≠based application template
is going to create a project
that has a controller and
a view, and youíll have
to put your own model in there.
So itís basically a single
tree controller view model
to start with.
Now, you can always add
more controllers and views.
You will. But this is a
nice, simple way to start.
So letís choose that.
Itís asking for the name of it.
By default, itís putting it
in my developer directory,
which is good.
Iím going to call it Calculator.
I strongly recommend you
call it Calculator because,
if youíre following along
with the walkthrough
that Iím giving you,
everything is Calculator this,
Calculator that.
Youíll be confused if you
call this something else.
Also, I recommend a
Capital C. And the reason
for that is itís kind
of a naming convention
that is universally used
in iOS application is
that classes start with
a capital letter, okay?
And itís going to use
the name of your project
to build you a view
controller template, okay?
I told you this is was a
template Xcode building your
little template for an app.
Itís going to create
CalculatorViewController
for you.
So, if you call this foo,
itís going to create
FooViewController.
So you want to use
Calculator capital C here.
Thatís what Iím going to do.
So now itís built this template
and showing us now the
main window of Xcode.
Youíre going to be
in this window a lot.
This is where pretty
much everything happens.
Building, editing, debugging,
the whole thing happens here.
So letís take a little
tour of this.
Iím going to try and deal
with the size of the windows
to let you see as
much as possible here.
This area up here in the
upper left, very important.
This is where all
your files are kept.
And these little folders
can be opened, so Iím going
to open a few of them here.
And you can see, then, all the
files that are in your project.
Now, some of them are
like frameworks down here;
like this project is going
to use the UIKit framework,
foundation framework, and
core graphics framework,
which is for drawing,
2D drawing.
And then thereís other sources
right here, like my main.
This is basically a Unix
executable at its heart
and so it has to have a main.
The main is pretty simple.
It basically calls a couple of
objects to get itself started.
Then here
CalculatorViewController.xib,
thatís our view.
Thatís that little bag,
that thing we showed you
in Interface Builder thatís
kind of our collection of view.
Itís empty right now.
Weíre going to have to
put some stuff into that.
And, then, it created two
classes for us right here.
Calculator view controller.h and
.m and calculator app delegate.h
and .m. Now, calculator app
delegate is a special kind
of delegate.
Remember I told you delegates
are those things like will, did,
should, kind of delegation
things going on.
And thatís what calculator
app delegate is.
But instead of being
delegate from a control ≠≠
from a view to its
controller, itís a delegate
from the application object.
So it lets you kind of
control the operation
of your application.
So this one that it
creates is kind of a stub,
but itís got a lot of
dids and wills in there.
And weíll be looking at that a
lot this quarter because a lot
of stuff that you can control
about how youíre application
runs via app delegate.
But today weíre mostly
interested in our view,
which is this guy; and our
controller, which is this guy.
Okay. Now, what about our model?
We need our model.
And, of course, it canít really
create that in the template
because we have no idea
what the model might be.
So weíre going to create
that by going here to File,
New, Create a New File.
And, again, you can create
different kinds of files.
You can create a new
UIViewController subclass
or a protocol, an Objective≠C
protocol if you wanted to.
Weíre going to create
an Objective≠C class,
and itís going to be a
subclass of NSObject.
You can see right here.
Click Next.
Now it wants to know the name.
Weíre going to call
it ¢calculator brain¢.
I apologize for my mistyping.
This keyboard is not
my usual keyboard.
So thereís calculator brain.
So now we have our
calculator brain.
Notice it kind of put
our calculator brain
in between our two things here.
We can just pick these
up and drag these around.
Okay? You can even drag them
between different little folders
if you want to arrange them.
But hereís our calculator brain.
Now, thereís no implementation
in the calculator brain
or anything like that;
but at least thereís
a stub there for it.
So weíre going to put aside
implementing our calculator
brain; and, actually, weíre
going to do our header,
our public API of our
CalculatorViewController.
Okay. So Iím going
to click on that.
You can see it brings
up our view controller.
Iím going to make some more
space for it right here.
And itís already put our
superclass and an import
for that, so thatís
convenient for us.
So letís just add our
outlets and actions, you know,
our connections from our
controller to our model and view
and then also the actions are
going to be sent from our view.
So letís starts with
the connection
from our controller to our view.
So itís an IB outlet.
Remember I told you weíre going
to put this kind of magic word
in there and this UI
label called display.
Thatís going to be wired
up to be our display
and our calculator.
Then, we also, though, need
another outlet to our model.
So thatís calculator brain.
Iím going to call it ¢brain¢.
Thatís what Iím going to
call my instance variable.
Now, I need to import my
calculator brain header
file here.
Because I canít reference
classes that I donít have ≠≠
that I donít have
a header file for.
Notice that itís kind of
escaped completing as I type.
Xcode is really nice about this.
You start to type something,
itís going to start
escape completing it
and you can just
use tab to tab over.
Especially if you have a long
method with a lot of things,
it just jumps you
to each variable.
Very, very nice.
Makes it really easy
to type very quickly
and also to not make mistakes.
So thatís my instance variables.
Thatís the only instance
variables I have for now.
So now letís put
those IB actions in.
So I have an IB action digit
pressed, which is going
to have a UI button
sender as its argument.
And I have an IB action
operation pressed,
which has a UI button
also≠≠ sender.
So this argument
to our IB action
to send is the object
thatís sending the message,
which is really convenient.
We really need that in
this implementation.
Actually, I could build and
run my application right now.
I could have built
and run it before.
But letís go ahead
and build and run it.
Now, I donít have
a device connected.
So whatís going to happen when
I build and run, itís just going
to run a simulator, all right?
And you can see hereís our
little iPhone simulator.
Itís simulating the
running of an iPhone.
Thereís also an iPad
simulator, as well.
And you can see that
my application runs.
Itís great.
Has no user interface.
It doesnít do anything.
I canít touch on it.
You obviously touch by using
your mouse in the simulator.
The simulator,