WWDC2004 Session 404

Transcript

Kind: captions
Language: en
good morning ladies and gentlemen at
this time would you please welcome
Matthew Formica cocoa and developer tool
evangelist good morning and welcome to
you all this is session for four
fundamental of cocoa my name is Matthew
Formica as was said I'm the cocoa
evangelist tiered Apple I would love to
throughout the week and do the coming
weeks get your thoughts ideas and
comments on Coco you can email me at em
Formica apple com after yesterday's
keynote sessions today and for the
remainder of the week we're going to
dive down into some of the technologies
that make mac OS 10 the great platform
that it is one of those is a
technologies is Coco apples
object-oriented rapid application
development framework and here to talk
to us about that today is a Leo sir
who's been involved with cocoa and
architecting cocoa for over 15 years he
really knows his stuff so please join me
in giving a warm welcome to all yo as
your manager the core team well I'm glad
you found your way to session 404
fundamentals of cocoa I'm a loser
manager of the cocoa framework scheme so
we have a lot of material to cover today
and just to give you an overview of what
we're going to talk about quickly cover
what's cocoa then give you a quick
overview of objective c which is the
background you need to see some of our
demos and the rest of the talk the bulk
of the talk will be demos where we going
to see the wonder of cocoa we're going
to do demos write some code and get some
applications running right in front of
your eyes so you can see what cocoa is
all about so first of all what is cocoa
it's an object-oriented api's for doing
a full-featured application development
on Mac OS 10 when we don't think of
cocoa we think of frameworks now
framework
Mac os10 frameworks are basically just
libraries you're probably familiar with
frameworks there's the carbon frame or a
quick time frame work etc frameworks are
just libraries which have come with
bundled with resources headers
frameworks also in the traditional Mac
OS 9 definition like Mac App include in
programming environment where the
application doesn't run the event loop
it's not actively running the event loop
but is instead it's getting callbacks
from the framework environment and Coco
certainly fits that definition of
framework where it is giving callbacks
to your application and we'll see that
in action today so the two frameworks
that makeup Coco decor Coco our
foundation and application kit and there
are many other frameworks that
participate in making up what's Coco and
there's languages Objective C and Java
object to see is the native language of
cocoa what cocoa is written in we'll see
a little bit of objective-c in a while
and Java is also is dynamic languages
objective-c and it works well with cocoa
and tools xcode an interface builder
you've seen probably both of them
yesterday in the keynote and other
sessions and we'll see those today as
well and how they're how they are
crucial in developing cocoa applications
so let's not talk about the two
frameworks foundation and application
kit foundation is the core cocoa
framework for non you I functionality if
you're writing an application which has
no graphics user interface no menus
windows etc you will use the foundation
framework foundation includes the root
class which is nsobject almost all cocoa
classes are derived from nsobject it
includes operating system facilities so
you don't have to drop down into you
next layer if you don't want to you can
use the classes and foundation it's got
classes for internationalisation both
note here is NS string which is a class
you will encounter a lot it's the class
that represents character strings in
cocoa we have classes collection classes
and foundation classes for scripting
making both you're both making your
applications scriptable and being able
to drive scripting for other
applications and also classes for XML
processing and web access some of these
were added in Panther and new ones are
also coming in and tiger and there's a
rich set of classes now in foundation
for letting you do XML and web related
stuff and much more
app kit also known as the application
kit is the Coco framework for creating
applications with user interfaces it's
got classes for drawing and event
handling and we'll see those today it's
got standard controls a lot of controls
you've seen the Aqua interface buttons
sliders etc again will CDs today
standard dialogues safe panels color
panels classes for accessibility image
found media handling at rich document
architecture that lets you create
multiple document applications a
powerful set of texts classes to let you
create a powerful international and rich
typography apps that feature text and
again much more so the strengths of
cocoa as I said earlier Coco's
full-featured and powerful which means
it's got features that lets you create
applications that you can ship on Mac OS
10 as you know as you probably know most
of the applications that ship with mac
OS 10 our cocoa and they're also a lot
of third-party powerful applications out
there so it lets you create
full-featured applications there's not
just toy yet it's also consistent and
easy to use the API for Coco are it's
not a very huge API and consistent
renamed there's also a few design
patterns that we can use over and over
so once you learn a little bit of cocoa
once you start getting into some aspect
of cocoa you start being able to predict
what other cocoa functionality looks
like in addition you're able to develop
your own functionality that's consistent
with what Coco delivers which makes
everything fit together much better Coco
is also customizable and extensible
because it's object-oriented if we
didn't provide the exact functionality
you need you can usually subclass and
extend the classes we gave you to do
what you want to do it's also tuned for
Mac OS 10 Coco is not some layer on top
of some layer on top of some layer held
together with some week object-oriented
stuff it's a powerful object oriented
environment that plugs well into Mac
os10 takes advantage of Mac OS 10
strengths and various other libraries
available in mac OS Kenya UNIX ports etc
and Coco plays well with others Coco is
written Objective C Objective C as we'll
see in a min
is primarily a sea-based environment and
so with cocoa you can use any C or C++
or UNIX library that's available to you
on the system in addition a lot of open
source packages a lot of other UNIX
packages out there can be used from
cocoa applications with absolutely no
difficulty whatsoever there's one thing
we like to say about cocoa and that
simple things are simple and complex
things are possible the things that most
applications should be doing things that
are straightforward and simple it's just
you can go ahead and do it in to almost
no work or a few lines of code but if
you want to do unique things in your
application things that are out of the
ordinary things that will distinguish
your application and cocoa makes that
possible as well okay so let's just do a
quick demo of your first application of
the application because it's not going
to involve much code or any code so
you've seen Xcode i'm going to go ahead
and create a new project when you say
new project you get a bunch of choice is
one of them being cocoa application
there's also other choices for document
based apps etc and we'll give it a name
my app now when you create an
application cocoa it gives you the few
files to get started you'll notice that
one of those files is main em it's
basically a boilerplate plate just cause
the function to get things started we
almost never modify this file another
file of interest is the nib file main
menu nib this is the file that contains
your applications user interface very
small apps will have one of these more
sophisticated apps will typically have
two or three dozens maybe many dozens of
interface files and these are created an
interface builder and this is very
defined your user interface i'm going to
double click on this now to open it in
interface builder you notice that
integrates builder launches you have a
design window you have a window that
represents your menu and you also down
here have your document window which
represents the various objects that are
in your interface file this is your
palette window where you have various
standard controls that come out of the
box and you can also add your own custom
controls here as well
for instance one thing we can do is drag
out a text is the text object notice
that is you're placing it down interface
builder is helping you place it properly
although I've spoken to it but let me
drag it down you bring up the info panel
the inspector to to modify the
characteristics of widgets you should
use drag from here for instance in the
case of the text object you can choose
the color you can change its border you
can say that undo is allowed you can
choose various other options here I
don't know if you can read that I'll
show you some others for instance I can
drag out a slider with a slider you can
choose its minimum maximum etc you know
things you might expect now back to our
text view if you look at this tab here
you see there's connections outlets
target actions will talk about that in a
few minutes there's a size inspector
which lets you change very sizing
behaviors if you choose the internal
Springs that means a text object will
size is the windows sizes and let's also
drag out a button now typically in
interface builder one way you do your
development is to put your UI together
and you go ahead and say test interface
when you do that I'm interface builder
starts running your application using
the interface you created now note that
the slider is alive it's not doing much
the button is alive it's not doing much
and in fact the text object is alive and
it even has features like a font panel I
can change the font here and i can even
you know it even has undo because
earlier I said that undo should be
allowed in this text object I can resize
the window notice that the text object
resizes and these buttons these space
relative to the lower left corner so
typically you use the test interface to
test your interface if you have objects
in the palace now if you develop custom
objects that are not yet in the palette
window here then you can't test do them
in test interface you typically build
your application to take your
application to the next level of course
you can always build your own palette
objects put them here and that way you
can test your interface in its face
builder
okay so one other thing to note about
nip files is when we did this we
generated the nib file note that the nib
file has no source code in it it just
saves archives the objects that we're
using here the window the slider the
button and it archives of connections
between them as we'll see in a few
minutes so there's no source code
generated okay now let's go back to
slide so we can play some with source
code thank you sweet okay so in that
demo we saw Windows slider button text
view on panel are some of the objects we
saw as you see here a standard theme and
cocoa objects is the prefix NX which
lets you recognize that these are
standard app kid objects now let's talk
a little bit about objective-c so we can
start writing some code objective-c as I
said earlier is a small superset of C
it's super set of a sec it's got some
additional syntax and a few additional
types let's go back okay it's got a
dynamic object runtime by which I mean
metadata that goes with the objects and
introspection facilities that allows to
make this that allows making decisions
at runtime about the objects and we'll
see the power of that in our demos it's
also a single inheritance
object-oriented language in objective-c
here is how you define a method a method
is of course an entry point into a class
here we have a method called set width
colon height colon one thing to note
here is that the name set with colon
height coldness split such that every
each parameter the W and the H have a
name in front of it so set with colon
height the full name of the messages set
with colon hi colon but the name is
split which of course for longer method
names with you know four or five
arguments makes it a lot easier to read
here you know this is how you define a
name what it seems to be doing is taking
those parameters assigning them to maybe
instance variables to invoke a method
which we also say sending a message you
use the braces so here we're sending a
message to an object my box the set with
colon height colon method and in the
line below you see a nested method call
where we first making a call to array
object at index which presumably returns
a box or some object and then we send
that in turn set with colon high school
and you can nest these method
expressions just like you can nest
function expression one other thing is
you can refer to a method and this goes
along with the dynamic object runtime
there is a type SEL sell short for
selector which allows you to refer in
this case to the method for instance set
with colon high skoland by using this
app selector syntax once you do that you
have a variable which represents this
method name and then you can apply to
the different objects note that this is
not a function pointer because depending
on what object is set to it will invoke
different pieces of code a little more
objective c you can refer to an object
by either saying box star or an ID the
difference here is that these are
compiler these help the compiler
determine what type of methods are valid
when sent to that object box star
indicates an instance of a box class ID
indicates any object if you refer to
this meaning yourself in the context of
an object with self and finally of note
is constant strings as I mentioned
earlier we have the end of string class
the we have a construct for creating
constant strings in your code and that's
at quote here you see the console string
as quote hello world being assigned to a
variable of type in a stream okay now
that we're armed with some object to see
knowledge let's go ahead and write some
code and the first thing I want to do is
do some custom drawing to do custom
drawing you use a class called NS view
it's an app to class it's an abstract
class meaning you almost never use it as
is but you subclass it and you would
subclass it to do custom drawing and you
can also subclasses to do event handling
drag and drop and plenty of other stuff
it's a abstract class with a lot of
functionality to do custom drawing you
override this method called draw rect
to do your custom drawing in the context
of a view you would use these classes in
anastasiya pass class that represents
paths in s color which represents colors
it's actually a fairly rich class it's
not just your garden-variety RGB where
the cone also represents CMYK patterns
and the whole other set of color spaces
the NS image class which represents
images and note that you can also use
the full functionality given to you by
quartz quartz is a sea-based API it
presents a PDF based drawing drawing
environment and Coco uses courts so the
drawing and mines are compatible and
quartz is written in C so the api's are
in c so from coco you can call them to
courts all you want so in cases where
you can't call into the NS functions for
some reason course is also available ok
so let's do a demo of custom drawing ok
so now we're back in Xcode the thing I'm
going to do now is I'm going to add a
new class a subclass of view because as
I said we need to subclass view we're
going to say new file and note that
there's some pre-prepared entries here
for you Objective C class objective-c
document subclass so on view is one of
them will choose that this is just a
little convenience you know you can just
choose the basic class and do some of
the things that does for you but we'll
choose nfcu subclass will call it docks
you will create dr. H which you'll see
in a minute and we'll add it to our
target as you see doc view has been
added here to our project oops
okay hide that area now we're looking at
dr. H which describes the interface to
your application for this demo I want to
edit the dot view implementation file so
I'm going to click this button here go
to counterpart which switches to the dot
m file which is where your class
definition where your methods sit so if
we look at dots um here are the methods
it is a convenience again only as a
convenience to generate the scores
source code for us and init method
thinking grant one initialize in a draw
method thinking we might want to draw so
for now let's just look at our draw
method and let's just customize it now
during this demo I'm going to be I'm
going to be a taking advantage of a demo
assistant I have hidden in the computer
here and as i type keys it will type for
me let me show you there's a comment and
there's three lines of codes it's
magically appear these treats at lines
of codes I ask self that's the NS view
for the balance ballinger presents the
area of the view and that's assigned to
this balance variable which is NS
wrecked and as direct is nothing magical
it's just a see structure that
represents a rectangle then we do a
nested method call here method
invocation where I ask in this color
class for the white color that returns
an instance of color which represents
white and I tell us to set so that sets
the current graphics context color to
white and I call a function Rexville to
fill the balance with white so that
clears the view to white note that I
could have used busy a path here but I'm
using this function Rexville to show you
Coco is not limited just to classes and
methods Coco also has some functions who
are appropriate so this clears our view
now let's go ahead and draw it draw
something interesting which in this case
is a dot for that I will first to the
comments and then create a wreck that
represents the bounds of the dot whoops
now we'll set the blue color just like
up here and then now I will use a busy a
pass creating a busy a path that
represents an oval with this rectangle
in this case it's a circle because the
rectangles are square and then i will
tell it to fill so this will create a
circle and then fill it with the color
we created here
so it's pretty up this a little bit
let's save and now I'm going to hit
build and run command are okay oh I
forgot one very crucial thing let's go
back to our demo here the thing I forgot
is to go into our interface builder and
actually create the UI for my
application interface builder I want to
go ahead and get rid of these three
things which we used earlier and instead
I'm going to be using under the
containers tab a custom view again let's
follow I these guidelines draw our
custom view here let's make it sighs
centrally just like we did with the text
view and the one more thing we're going
to do now is tell interface builder that
this custom view is of type dot view and
to do that under the classes in the
document window here under classes I can
either go ahead and subclasses NS view I
can hit the right mouse button or
control mouse here to do that another
thing I can do is do read files and then
ID will allow me to choose among the
various header files I have in which
case i will read da coh which is the
header file I just created the moment I
do that interface builder now knows that
there's a subclass of view called dot
view I hope you can see that down there
so I can come to my custom view here and
in the inspector I can specify its class
note that the various NS classes are
listed here already I want it to be a
subclass of I want to be an instance of
that view so I do that I save here I
hide interface builder go into Xcode and
let's run as you see we now have our
window with the dock in it and as I
resize the window the dot stage relative
to fixed relative to the lower left
corner that's because the drawing the
coordinate system is relative to the
lower left corner of the drawing
environment you can see the white area
here which represents the view and the
view resizes and redraw automatically as
I resize the window so one of the things
you do get just by implementing that in
a few lines of draw rect is you get a
lot of other functionality available to
you let me show you what I mean I can
come two dots view and I can say makes
up view of scroll view
okay and let's make that scroll view
also sizable now I'm going to save this
go back to Xcode and let's build and run
again so notice that suddenly our
scrollview we our view is contained
within a scrollview and we can scroll it
and again just because you've
implemented your view so it knows
drawing you get scrolling for free let
me show you one more thing you get for
free let's undo this scroll view oops no
not do that much yeah it gets your
doctor let's get rid of the scroll view
Wow hmm there and i want to show you how
you can make it print now we haven't
talked about target action will talk
about in five minutes but one way to
make it print is to connect the print
menu item to our view and just select
print here and i'll talk about this in a
few mins if you haven't seen this before
okay let's save it back in xcode let's
build and run again okay so if i now
were to go in here and say print we get
a print panel and one thing you'll
notice of course we don't have a printer
if we're able to print you would get
something like this this is the artist's
concept drawing of what the dot might
look like on paper but if you don't
believe me I'll do preview which is
always something you can do when you're
testing your printing and the preview
application will launch and you see that
the dot is printed on that page okay
okay so let's go back to slides please
and next thing we want to do is it add
some excitement to our demo and do some
event handling as I mentioned earlier
NSU is your class to do most of your
event handling it you override methods
such as mouse down mouse drag key down
depending on what you want to do to
handle the perfect kind of event there's
also another class called NS event which
represents various kind of events and
you get event specific event specific
information out of it for instance the
mouse location the keyboard what key was
pressed you know what tablets pressure
and so on so with that stuff let's go
back to our demo again and add this to
our code so you can see it in action ok
this for this will just need Xcode now
one thing I want to do now is
parameterize some things about our dot
so we go back to the interface file you
H now I'm going to go ahead and add two
instance variables instance variables
are declared in the header file in this
area here so i'm going to add an
instance variable that represents the
center location of the dot in this point
is a structure that represents a point
i'm going to have a radius for the dot
it's a floating point number note that
coordinates are floating point numbers
so we use floating point numbers where
appropriate ok so we now we added two
instance variables to r dot i'm going to
save this file i'm going to switch to
dock um back in the init with frame
method the place where i said we do our
initialization i'm not going to
initialize those two instance variables
so i'm going to delete this code i'm
going to set the center 200 both the x
and y locations of my center i'm an
effective radius 250 so this is we're
initializing these variables their
initial values now here we were
redrawing our dots using fixed numbers
so let's replace this line to use the
new instance variables so we now may
correct with the ex- radius y minus
radius 2 times radius etc so now we have
parameterize r dot wrecked and finally
let's do some event handling as i said
you override methods like mouse down so
we'll add a method called mounts down
and we'll ask the event argument which
is represents the current event for the
location and window this represents the
event location relative to the window
the view is in so the next thing I want
to do is convert that to the views on
coordinates using this method convert
point from view this gives us our sensor
this is where we clicked this is what we
want our center of our dot to be and
note here that we're just assigning to
our sensor variable you know pretty
straightforward the one more thing we
want to do now is given that now we have
a new sensor location we want to redraw
our view but instead of calling draw rec
for instance to draw our view we just
basically tell the view that it needs to
be reedus played and then app kit will
redraw your view at an opportune time
later what this allows doing is
coalescing various drawing needs to the
top of the event loop so you're not
drawing things over and over things and
overlapping and so on so to do that you
tell the view that needs to be displayed
self sydney's display yes ok so it we
take the event we assign our Center and
we just tell it needs display so let's
save and let's run ok now as I click
around the dot is we displayed at the
new location note that when I do this
because I told the whole view to
redisplay the whole bounds of the view
is we displayed in the performance Tik
Tok on Friday you can learn about how
you can do this much more efficiently of
course here we're just taking the easy
way out let me show you one more thing I
talked about mouse dragged as well
mouthed rags and events you get when the
mouse is clicked and it's being dragged
will have Mouse drag do the same thing
as a mouse down so we'll just call self
mouse down let me save let me go ahead
and run the app again now as I click
around the dock moves but if I click and
drag again the same thing happens so the
view is being constantly reedus played
being told to sydney's display and so on
so that's just fairly straightforward to
go ahead and make our dots dance and any
way you want ok let's go back to slides
please
okay again drawing event handling those
are pretty mundane things how about some
UI elements so your app looks like a
cocoa app or a Mac os10 app UI elements
are represented by a class called NS
control which is a subclass of NS view
the daily controls you see the regular
controls you see include text field
buttons slider we also have some new
controls a little more sophisticated
token field date picker these are new
and tiger we also have some really
sophisticated controls table view
browser browser represents the
multi-column you you see and find their
table represents a table of elements
these are typically made up of other UI
elements and they're fairly
sophisticated but they're still subclass
of NS control there's also this other
class which we won't talk about today
but let me talk about it it's the every
control has a cell in some cases
controls have multiple cells cells are
basically what controls are made up of
typically users user control however if
you are subclassing control for your own
purposes you might find that you need to
also subclass the corresponding cell and
that's why we're mentioning it here and
in some cases like table views and
browsers you might be using multiple
cells to get what you want to get done
to represent multiple pieces of that
cells are not subclasses of views they
are lighter weights objects the main
design pattern for UI elements in cocoa
is this target action design pattern
target action with target action
controls have a target and they have an
action target is the object they send a
message to when they're fiddled with so
you play with the slider and says I've
been fiddled with the action is the
message they send so what they actually
say they don't actually say I've been
sidled with an action is a single
argument method always and we'll see
that in our demo and note that these are
not magical things they're really just
instance variables of controls okay so
armed with that knowledge let's go to
our next demo grab some water
okay the thing we want to do now is
going to be able to change the size of
the dot okay now to do that we're going
to be adding a method called change size
which is an action method so this is an
action method to change size colon and
it has one argument sender and this is
this is what makes an action method and
the argument sender is the UI element
that sense this message now we're
assuming that the sender is something
that's capable of producing a floating
point number because we want to change
the size of the dot so what we're going
to do is ask the sender for its float
value most controls have a method called
float value that represents the floating
point value that they've been set to
we're going to ask for its float value
nor even assign it to our radius
instance variable which we had added
last time and again just like we did up
here we just need to sell Sydney's
display so we're going to change the
radius self Sydney's display now I want
to do one more thing we've been adding
methods to our m-file but we have not
been adding them to our H file to our
interface file for methods that you
expect to be called from the outside
world it's a good idea to do that so
let's go ahead and add the change sides
declaration to our da th file as you can
see straight forward is it just change
size colon with the semicolon
representing that this has this method
now we'll see why this is useful I'm
going to switch back to interface
builder now interface builder I'm going
to tell interface builder to re-read
gaddafi H file so if I go back into
classes tab here i can say either by
right clicking here or by going to the
classes menu read files or read da th so
this will cause interface ball to
reparse doc you got H which means it now
knows that
okay let's see
No
it should know okay let me go back and
see one thing
pilot
I'm sorry this was this is all this is
all proper I'm wondering what I could
have let me get it to read the file
again just just in case let me say parse
here go back to interface builder hide
other stuff huh we're going to change
size it's fairly straightforward stuff
it shouldn't be okay i will change this
to IV action which is often not
necessary what I be action is another
defined for void and what it says is it
marks this method explicitly as an
action for ID to recognize let's see if
this actually does the trick it often is
not needed so if i go ahead and reparse
the file and let's make sure the file is
coming from the right place it is not CH
parts okay and sort of perplexed by this
luckily at this point i will quit
interface builder i will go to the oven
and pull out okay so there we go pull
out a finished version of that and that
has always worked so I'm sort of curious
as to what's going on there but if we
look at da CH in the prepared version it
looks exactly the same and let's go
ahead and click on my main menu name to
open up our main in file notice that if
you look at doc you here
oh I know what's wrong I'm sorry I I was
just getting confused there it's not
even in fact I will go back to our go
back to our original one and we'll open
that up go go show that there's nothing
magical going on here let's open up our
main menu nib okay so if i look at the
class now that's you you'll see that
it's got two actions to outlets should
know about it the time you see your
slides do your action is if you have a
slider for instance and you make a
target action connection you make target
action connections by actually control
clicking on the UI element that's going
to send the target action and dragging
towards the element that you want to the
target to be so in this case dots you
now I'm still not seeing that there I'd
to know what that's about let's just go
back to our pre-prepared version that's
quite odd I don't understand it but okay
so we're back in interface builder will
open our main menu nib so if I make a
connection from here to here you'll
notice that the actions which represent
includes print fax which were already
there and now a change sides method and
I just make that connection by choosing
change sides and hitting connect and
this establishes a target action
connection between my slider and the
view okay so sorry about that I know
what was going on over there but let's
now let's save this let's hide and let's
go ahead and run our demo okay as you
can see we can still move the dot around
we can resize the window and as I move
this the dots will actually resize
that's because as I move this it's
sending change size call and over and
over and the change side method is
changing the radius if you can remember
back that far and then it's redrawing
the view so that's that's what's going
on the other things we did here by the
way when we did the slider was in the
attributes of the slider which
changed so that you know we could change
its minimum and maximum values the
current value and we also specified that
it continuously sends action while
editing which makes it sends its action
over and over again okay so that was
that was our slider so let's go back to
slides to talk a little more about
target action so what we saw there was
that the sliders target is the dock to
you slider has two instance variables
target and action in our document method
called change size the target is set in
its face builder to point to the dots
view and the action is specified in
interface builder to be selected of
change sides colon but so this is where
you see that select their business come
in but note that you know we didn't have
to do this programmatically or anything
we're able to specify this in interface
builder or we were almost able to
specify the interface builder and
interface builder store this information
in that nib file as i said earlier
target interaction aren't anything
magical they're just they're just
instance variables and you can set them
programmatically using methods set
targets and set action if you want okay
now I'm going to talk a little bit more
about target action but before that I
want to talk some about memory
management Coco objects are reference
counted and probably most of you are
familiar with this but I'll just make
sure I go over what this means a freshly
created object whether you create it
with a lock and in it a lock-in it is
the paradigm for creating new objects
you allocate it being initialize it or
whether you're created by doing a copy
of another object if freshly created
object is a reference count of one you
call retain to add a reference count you
call release to remove a reference count
so this is just reference counting you
have nothing really secret here and the
object is deallocated when its reference
reference count reaches zero and that
happens by the object being sent a
dialog method which is the opposite of a
lock so let me give you an analogy here
just to make sure this is a queer you go
into a restaurant and you tell the
waiter you want a table so the waiter
goes and gets a table that's allocating
the table
then the waiter puts the welts a fancy
place so he puts a table cloth on the
table and even gives you forks and
knives in place that's initialize on the
table and you sit at the table so as
long as you're sitting at the table the
waiter is not going to come take the
table away the moment you get up and
leave you released the table and the
waiter will come in deallocate the table
and make it ready for the next person so
that's getting rid of it now while
you're sitting there if a friend of
yours comes by and sits down at the
table they also retain the table now
there are two references on the table
the waiter is not going to remove the
table until both of you leave you know
if eight friends come now there you know
aids references to the table so until
the last person leaves the table is the
table is retained and copy let's make an
analogy for copy you come into the
restaurant and you see a table that
looks gorgeous it's got you know a bunch
of people sitting at it a good-looking
table you tell the waiter I want a table
just like that but you'll want to go sit
at that table because you don't know
those people so instead the waiter
creates a table just like that for you
that's like making a copy of that table
but it's your own copy you don't care
what happens at that table you got your
own copy of the table now one more thing
I'm going to mention at this point is
order release I'm going to mention at
this point I'm not going to talk about
it for the rest of the talk what's an
important concept it's like released but
instead of releasing the object now it
releases the object later and this turns
out to be pretty handy given cocos
object ownership rules and you will see
this and probably use this in your
programming of cocoa now having coverage
memory management let's talk about
object ownership in cocoa object
ownership is important in dynamic
environments where object oriented
environments where you know you're
constantly passing objects between
things people are allocating objects and
returning them to you and the question
that's always asked is who frees this
object in cocoa the answer is there's a
consistent answer for ninety-nine point
nine percent of the cases and that's
object ownership is not transferred
across calls what this means is if
somebody returns an object to you as a
result of a function call or a method
invocation you do not free that you do
not release that's it you just use it
you know assuming you need to use it and
that's that same goes for when an object
is passive
an argument the person who got the
object does not free it they will use it
now if it turns out that object is
needed long term you can retain it and
then release it later on so the rule is
whoever creates an object or retains an
object or copies an object you know
whoever is responsible incrementing the
rest count is also response for
releasing it so basically this
summarizes that you pass someone an
object you don't care what they do with
it they will retain it and release it if
they want so with that let's look at
little a little bit more of target
action and do something slightly more
substituted and this time we'll all pray
to the demo gods okay so for this demo I
want to change the color of the dot so
for that let's go back to our dot view
and let's add a new instance variable
okay okay so we add a new instance
variable color as i said earlier before
colors are represented by NS colors and
their objects they're not in store
floats or anything so we have in color
instance variable now let's go add a
second method change color and hope this
time we were able to parse this in so
this is the method the action method
that's going to be used for changing the
color so I'm going to save eh right now
let's go back to our source file doc um
and let's add our change color method
make this window a little smaller so you
can see the bottom so the change color
method we're going to ask sender for its
color we're assuming that the sender is
something capable of generating your
color and we're going to call a method
called set color on ourselves I could
have done like here and just set the
color in here but i want to show you
just you know let's write an accessor at
set method to see how it's written so
we're just going to get this color from
the sender i'm going to send it to set
color note that here already you're
seeing cocos object ownership rules in
action we're getting a color from this
thing but we don't free the color we
just use it we don't worry about what
happens to that color you know if we
wanted it we will keep hang on to it and
here we're sending the color to this
method and again we don't worry about
what happens in that
that method will do the right thing so
let's go right that method and you'll
see what I mean setcolor takes a color
as an argument and if the new color is
not exactly the same as the old color
that's both for optimization and for few
other reasons but basically it's a good
idea to do this if the colors aren't the
same we release the previous color
instance variable and we make the color
instance variable point to the new color
but we retain it because we want to hang
on to it okay and the third thing we
want to do here just like we've done in
other places like here is stay fit needs
display yes which of course because we
change state we want to view to be
redrawn so note this is basically what
you know your typical set method might
look like you release the old value
retain the new value after checking
they're not the same okay so now we know
how to change the color let's do a few
more things one thing I want to do is
make sure our color is initialized so we
initialize our color to the blue color
and we retain it we hang on to it
because we're hanging on to it long term
in the drawer exmouth oh one thing we
have to do now one thing we need to add
is because we're hanging onto our color
instance variable when we're being
deallocated meaning when the view is
going away we want to get rid of our
color instance variable so for that we
implement the dialog method i mentioned
earlier and we'll release the color so
the one we're going away we make sure
all the resources we hang onto are going
away and we call super dialogue super is
the way you call your super class
implementation and that's it so
typically you will have dialogue methods
which do you know which clean up your
stuff and then you call super for it to
take care of it we do one more thing
instead of the blue color here we now
just set the color we have so we just
say color set if I'm going to save this
right now and let's go back to interface
builder interface builder I'm going to
pull the slider aside i'm going to drag
this little control this is a color well
at lets you change colors now let's go
ahead to classes and keeping our fingers
crossed let's read files now we're in i
believe we're in this directory right
now let's just read
that file and now we can make a
connection from our color well here to
the dots view and we choose change color
connect so this is what should have
happened before but anyway demo gods
were taking a lunch break okay so now we
connected that let's save let's hide or
bring up interface builder and let's
build and go okay so as you can see we
can still change the size and if I click
on here the color panel comes up and I
can now change the color and you can use
any mode of this thing you can use the
crayon in any mode in the color panel
you can as I said earlier you can use
gray scale you can use CMYK and so on so
all these colors are represent by nice
color and they work in the context of
our application okay so now having done
all that let's go back to Xcode let's
look at our dock view one thing you
might be noticing at this point with
dots view is it's getting a bit unwieldy
it's got like 25 lines of code that's
getting a little too big so let's see
how we can start cleaning things up and
making this a better structured app and
for that I'll can we go back to slides
I'm sorry we're going to talk about
model-view-controller Model View
controller is a is not not a Coco
specific design pattern you've probably
heard about it used in other cases but
it is used in cocoa to create bigger
better structured applications and it
makes you know document based apps and
so on much more easy to do and much more
of a joy so Model View controller is a
design pattern where you break your
application to three pieces the model
which is the back end of the application
where your data is the view which is
your user interface and the controller
which is the middleman controller users
usually has a variety of roles it
usually manages the connection between
the model in the UI and kind of other
roles in some cases controllers can
actually be fairly thin or you can cut
out the middleman altogether in the very
simplest cases turns out that's one of
these cases here so we'll look at dot
view and we'll see how we can separate
the model in the view pieces here's what
our doctor looks like now before our
surgical separation of the back-end and
front-end the doctor has a sensor a
color and a radius these are the
instance variables in the in our class
after we're done with our surgery we're
going to have a class called dots which
has those three instance variables so
the dots class is going to represent our
dot and we're going to adopt new class
and all the docu class is going to do is
point at the dots so it's just going to
have an instance variable that
represents the dot so this is fairly
basic MVC model view controller at this
point the dot is going to point the dot
instance variable is going to point at
our dot object okay so let's go to the
demo machine for this piece now okay so
at this point we're going to add a new
class so as we did before we come here
and we say new file and this time I'm
going to choose objective c class
because i just want a subclass of
nsobject dot is just a simple data
bearing object now the subclass of you
know subclass of control okay and let's
call it dot dot m also create H okay so
interface builder traits to files dot
HTM in dot dot H we're going to go ahead
and put our instance variables points
radius and color so the same is some
variables we have today okay now and
let's go to declare some methods for dot
we're going to have a set Center method
to set the center and now you're
thinking okay we need set radius and
color for now I'm not going to do that
we'll talk about that why and we're
going to add a draw method and some of
you are thinking draw dots is a model
object why does it have a draw method
well it's okay for model objects to know
how to draw in this case it just knows
how to draw but doesn't make any
assumptions about where it's going to
draw what you hierarchies and what the
UI element is it just knows it's you
know location its size and its color so
when told to draw it can draw itself so
it's an appropriate thing to do here so
we'll just go ahead and add a draw
method so let me now save this and
switch to the dot implementation file
dot am now an implementation file of dot
we're going to add init method as I
mentioned earlier in it is the way you
initialize yourself in the context of
the view class we saw in it with frame
which was how
created in the case of a simple enough
object subclass like that we would use
in it so we doing it we do super in it
and if that succeeds we go ahead and
neutralize ourselves set the center set
the radius you've seen this before and
set the color and then we return self so
this is what a typical initializer might
look like you know just like dot views
now let's go ahead and give ourselves a
dialogue method which is again just like
da see you release the color in return
now we declare two methods earlier let's
go ad those the draw method this is
again taken from dot view that's you we
create our dot rekt we set the color and
we draw the oval ok and finally we said
we're going to add a set Center method
let's go ahead and do that set Center is
going to set the center instance
variable to the point that's passed in
here ok and for now this is all we're
going to do we're just going to change
the center note then the context of dots
view we were doing self fifties display
yes but here we're not doing that
because this is just a model object and
doesn't many assumptions about views ok
so this takes care of our dot class
let's save this now let's switch to our
da coh in da th we want to remove our
instance variables want to remove these
two methods now that's nice getting rid
of code is always nice less maintenance
whatever your boss doesn't have to know
you're doing less work but so now and
then we can switch the doc um ok and use
the similar modifications here to
lighten the load a bit turns out we can
get rid of image with frame ok because
if we don't need to initialize any of
this stuff anymore turns out we can get
rid of sialic ok indirect which is how
the doc you draws itself we will leave
clearing off the background because the
view still needs to draw itself but
instead of all this code to draw the dot
we can now tell the whoops I'm sorry
that was a piece i forgot to show you in
dot view I'm eh because doc you now
references the doc object we need to
import the dot dot H header file
in addition we want to declare an
instance variable dot which two pieces I
forgot so the dot instance variable note
that we have a iboutlet specifier here
this just specifies that this is an
outlet and we'll see what that means in
a few minutes and an outlet is basically
an instance variable that is visible to
interface builder and you'll feed in a
few seconds so let me save this again
switch back to DA to you so back to draw
rex back to the discussion there instead
of drawing the dot we just draw the dot
by telling the dot to draw so all that
code is simplified now let's leave our
mouse down and mouse drag in here
because these are skill primarily view
operations and we can get rid of change
sides and set color and all this because
we're not in the business of changing
size anymore the view doesn't care
anymore it's the dots responsible to be
doing those things so get rid of this
code so suddenly dot view has come back
to a manageable size that's good so
let's save this file ok now we now we
need to switch the interface builder ok
now one thing I wanna do is tell
interface builder about our dot objects
let's go ahead and say read files dot
dot H the moment we say that interface
builder Niles knows that there's a
subclass of nsobject called dot now why
do we do this why did we bring that into
the picture because I want to go ahead
and create an instance of that creating
an instance of dot is just like what you
did what you did here when you dragged
ask you out of here if you basically
instantiate the dots view here I want to
instantiate a dot but dot does not have
a visual representation our window
because the model objects so you
instantiate with this menu item here
instantiate dot that adds it to are
instances tab as a new object if you can
see that here dot ok well that's good so
now we have a dot object that represents
the dot now when I go ahead to dot view
i'm going to reread the dot view file
let's go ahead and read the dot view
file ok it's warning me that because we
change the interface of the file the
it's not compelled with the earlier
let's say your place so now the doctor
has been changed it now you know knows
the new doc you not the old dot to you
as a result of this change we can now
connect that's you to our dot what's
this connection about that's where we're
connecting the dots instance variable of
the dot view to our data object you can
see here that the dot object is here
it's known to ID now because we read the
file I will go ahead and say connect so
now this dots use dot instance variable
points to this dot object go back there
ok and the slider and this color well
we'll leave here for forms for now ok so
I'm going to save I'm going to hide or
we have xcode I'm going to run this oops
failed with this one little mistake oh
yes I forgot to finish some of the
coding here sorry about that if we look
back at the by the way this is that was
a case of a build failure when you click
on this little one here it tells you
that Center is undeclared and indeed in
the in my methods here in mouse down we
still refer to Center I needed to change
the mouse down method instead of doing
this I knew just need to tell the dots
to set the center because remember we
gave set Center method to dock so we
tell dots to set center and we don't
need to do this anymore and for now I
will need leave the cells needs display
in place ok so with that hopefully we're
bug-free let's run our application let's
hide it ok so there's our dot it still
moves around ok and we didn't connect
the slider the color well so we can't do
much so you're thinking ok we did NBC
now our app is even less capable and so
I'm going to be bringing any more
revenue what why did we do this well the
magical end we see is that the UI and
the model are separate and that means
that you can tweak the UI in ways which
the model doesn't care about an example
of what that means is i can now come
here drag a new window out
I can come to my containers tab dragging
your custom view out let's just put it
all the way there okay let's make our
custom view let's make the custom view
an instance of dot view just like the
other one let's make it sizable just
like the other one and let's connect the
dots of this dot view to the same dot
okay okay there you go so now we have
two windows in our application one more
thing when they do in our window is
visible at launch time so the window is
visible when the app is launched because
my default secondary windows won't come
up until you ask them to be brought
forward in this case we want it to be
visible so we do that let's go back into
Xcode let's run our application okay so
now we have two two windows with da znam
and I claim the dots are the same well
if I click here you might at you will
think you hey that's not they're not the
same well they are if I resize this
window this one jumps to the new
location so they are the same it's just
we got some connection problem here
where we got some synchronization
problem but as you can see already the
promise of MVC is begin to shine through
I have the same dog visible in two
different windows and we're able to add
a second view to our dot with you know
no code it was just not integrates
builder so what do we need to do to get
these dots to synchronize each other and
so this now is when we start talking
about a few other things that make you
know expand the picture of NBC in in
cocoa so if we can go back to slides so
now we're going to talk about kvc now we
have MVC we have KBC don't confuse these
with mfc or KFC you know one's a fried
chicken and one something else k vc is
key valley coding it's a mechanism to
set or get and object if the properties
on objects indirectly well i mean by
that is you use these methods set value
for key and value for key and the
property is the property you want to set
or get okay we will use rules shoulders
neck
now so in with kvc instead of calling
set color on my dot I would call this
method set value colon for key pass the
string color that's the property and I
would pass the new value now you're
thinking if I have to go right asset
value for key method so that KBC works
the answer is no KBC uses on objects
existing access your methods or its
instance variables to do its job so if
you have an instance variable named
color or if you have access through
methods name setcolor colon in color
which is the way you would set and get
the color note that you can also have
set color colon and get color if you
like the name your things get we in
Cocoa we often don't do that but you
know that's another with naming style
assuming you have these one of these two
ways and a bunch of other possibilities
your dock view your dot object becomes
kb c compliant for the property of color
ok and you don't have to write any code
i mean automatic if you have a variable
called color you are KBC compliance for
the color property yes that's fairly
simple now let's talk about key value
observing just quickly because this is
needed to complete the picture p value
observing kvo enables observing changes
in kv c compliant properties what i mean
by that is you know if you have a kb
supplying compliant property color you
can observe changes to color here's the
method to use this is the gnarliest
method I'm going to show today luckily
we won't be using two of its arguments
so just ignore them you can add you can
observe some objects property by adding
yourself so this argument your observer
for the property and you send it to the
object you will observe that's what this
does and whenever that property changes
the observer will get this method
observe value for key pass the property
in question and of object now a whole
lot of methods here it's probably best
to show this in action and that's what
we'll do right now little kvo to see our
dots work better
okay so turns out this is just in Xcode
now because our IV connections are all
done and they should you know they're
pretty close okay in Xcode so all the
changes now our needs and doc view
because our dot object is already KGC
compliance for those three parameters
because we've added them as instance
variables they're there so in Doc's view
we just want to do a little bit of
observe observing to do that we will add
awake from nib methods awake from nib is
a method that gets called when objects
are loaded from a nib and all the
objects are been finished loading awake
from knit is called and all the objects
to get them to do any additional
initialization they might need to do so
this is not like the init method which
is fairly early this is a this is called
after everything's been created so the
world is a little more consistent so in
a way from nib we establish our
observations and the way we do that is
we tell the dot object to add observer
self so the view is becoming an observer
of dot for keepass radius because we
want to observe the changing of the
radius and the arguments you're supposed
to ignore now we do that two more times
not like that click here and do it again
for center and four colors so we're
observing the properties of the dot we
care about okay so pretty
straightforward just three observations
now the next step as you may remember is
now you need to implement the method
which gets called when the observation
is done when that when the sink changes
and that's this method observed value
for key path of object change context
and in this method we're now this
message will get calls whenever the
radius to center or the color changes
but I don't really care which one
changes all I want to do is read through
draw the view so all we're going to do
is say self set needs display yet that's
all we're going to do whenever we hear
that there is a change now of course in
other cases you might want to do more
specialized things now for completeness
i will show you one more thing you
should do and that's to remove yourself
as an observer if the appropriate time
this could be depending on the
application will be different in this
case we do it in the dialog method
so as the view is being deallocated it
should remove itself as an observer for
the three variables that added itself
force and that's these three lines
remove observer for keypads no reserve
for keypad no survey Cuba pretty
straightforward now let's come down here
the draw rect doesn't change there's one
more change we can do right now note
that before we were cheating in mouse
down in addition to setting the center
we were causing the view to be we
displayed and that explained why the
view itself updated when I clicked in it
but the other view didn't because the
other view did not know to display
itself but now that we have this great
observer mechanism I can move this line
of code here because here we just tell
the dot here's your new location and the
dots will hopefully tell us that this
location changed and will we display
everything okay so let me save let me go
back to interface builder I'm sorry not
interface builder let me build and run
or quit the application build and run
okay so now if we did it right demo gods
were are with us as I click here and
move the other dot also moves and you
know it's there perfectly in sync and
they're both doing self Sydney's display
they don't know about each other and the
good thing is our dot object the model
object knows nothing about these views
absolutely nothing it's just told to
draw in each view by the view when the
time comes so there you go now one last
thing wanna do is these duds here the
slider and the color wheel aren't
connected and let's hook those up okay
so back to the slides please and that
brings us to bindings now bindings was
introduced it's a technology into
houston panther its its technology that
is used to automatically keep attributes
of different objects in sync or to be a
little more exact it keeps model and
view values synchronized and it
eliminates the glue code you often need
to create for that purpose by glue code
I mean the kind of code where
you know you respond to the slider
changing it might be an action method
and as a result of slider changing you
want to update your dot size and maybe
you want to go update a text field maybe
going to go change something in a
database and so on you know you're
writing glue code all the time in many
cases even in cocoa if you're using
target action such you find yourself
writing blue coat over and over and this
is what bindings eliminates and we'll
see of course how that is with another
demo bindings leverages KBC and kV 0 and
it's very well with MVC so and again
we'll see how bindings can be added to
this application easily so exactly what
bindings lets you do is it lets you bind
attributes of views the properties of
model objects that's worth repeating
look there you go and it's worth showing
a picture for so here's our dot so the
dot has the properties it's a model
object that's properties sense your
color and radius here's our slider now
I've removed the target action message
from slider in this picture because now
we're not dealing with target action
anymore instead we're just looking at
the value of the slider is an attribute
of the slider with bindings i bind the
floating point value of the slider to
the floating point radius of the
property of our model similarly I have a
color well and I bind the color value of
that to the color value of my dot so
with bindings this is the kind of
connection you establish the good thing
here is that what this implies is if I
change the dots color the color world
will change if I change the color wells
color the dots color will change so it
it's a two-way binding and bindings of
course uses a que vou know the observing
technology we saw earlier under the
scenes to get this to happen if you were
to call a binding method to establish
the binding programmatically you would
use this method bind colon to object
blah blah here's how it would look like
I will tell the slider to bind its value
to object dot to its property radius ok
this is how you would do it luckily you
almost never call this method it
programmatically because bindings are
usually established in
space builder as we'll see right now
okay if we can switch to the demo
machine the good thing is you know I'm
talking about bindings and interface
builder at this part of the demo doesn't
involve Xcode anymore it's just
interface builder so let's switch to
integrate builder okay so here's our
window one here's our slider now for
this part for establishing binding you
go to the bindings pain of our inspector
here okay and you'll see that slider has
its max value its min value and its
value ready to be bound so these are the
attributes of a slider you can bind it's
also got enabled hidden and so on and
you're also has tooltip so you can bind
any one of these in this case your
interest in binding the value so I'm
going to click here now you can bind to
any object that interface builder knows
about in your nib file well knows about
the dot because it's right there in our
document so I'm going to bind the
sliders value to the dot object I'm
going to bind it to the key past radius
ok that's the property by keep a tiny
property there so I'm not established
the binding between the value and the
dots radius game let's do the same thing
with the color well I'm going to bind it
to the dot I'm going to bind it to the
keepass color ok so let's go ahead and
save and let's go back to Xcode and run
and let's move this so there you go just
with two connections in interface
builder we're able to bind that slider
to automatically track the dot and you
know the two dots also of course also
track each other and saying with color i
can bring up the color panel and i can
change the color and again this is now
bound to this to the dots color value
and so on and of course bindings you
know this is not the only thing bindings
gives you let me show you the little
other magic of bindings I can make my
slider smaller I can go to the text here
I can drag out the text field as you can
see and again I can go to the value
binding of the text view here so if i go
to hear the attributes go back
bindings here's the value binding I'm
going to look in there and set the value
of the text field to be the same as the
radius save go back to Xcode run as I
move the slider not only is the dots
radius changing but now because this
text field has been balancing the radius
the text field is also showing you the
exact same value as the slider does so
as you can see without any glue code
without writing any code to bind those
things together you know and get to make
sure they're in sync we are keeping
things in sync the good thing here also
is that the initial case situation here
the dot the model values from the dot
the fact that's blue and the high is 50
and so on are automatically also
reflected on these in developments at
launch time okay so just to we can go
back to the slides just to show you a
picture of what we did there with the
text field we added a text field and we
bound the value to the radius of the dot
again you can establish multiple
bindings to the same property and they
will be kept in sync there's a there's a
lot of magic in a lot of great stuff and
bindings and especially when you start
using controllers which app it has
sports for you can use tables outlined
use browsers and so on in your
applications with writing it hardly any
code or no code at all and and you can
go to the binding stock which i think is
tomorrow to see more about bindings okay
so what we saw today is an overview of
cocoa objective-c xcode ID in some
fundamental cocoa topics drawing event
handling target action object ownership
KBC kvo and DC and of course bindings
and we also saw hopefully that simple
things were simple meaning very little
code is needed and even complex things
are possible where we have to resort the
may be using is using observers for our
custom views so hopefully you know that
idea got true you can go to the tips and
tricks talk cocoa tips and tricks talk
tomorrow to see more of this simple
things simple and complex things
possible theme with George your demos
and further advanced things
now some things we don't see there's a
lot of stuff in cocoa and as I said a
few good solid design patterns and the
few we don't see include delegation
which involves objects helping each
other that's a powerful design paradigm
that we didn't see but you probably need
to be aware of notifications which is
where objects are telling other objects
they did things categories where you can
add stuff to objects at functionality to
objects data sources were again objects
are helping other objects and
immutability where objects refuse to be
changed these are some of the design
patterns that you probably will become
familiar with you run across in learning
cocoa other things we don't see include
some features of cocoa and here's a you
know not certain a comprehensive list
but doc you make sure undo localization
etc a lot of great features there's also
other frameworks which are not in the
cocoa umbrella and are not core cocoa
frameworks but provides objective-c
api's that can be used easily from cocoa
and one of those is of course the core
data framework that you saw yesterday
the resources for you to you know learn
more there's the apple developer
connection which has the cocoa page and
in there there's getting started with
cocoa which is fairly useful has links
to many resources that you want to
follow the O'Reilly books for cocoa
there are some pretty good books for
cocoa objective-c and there are other
books including aaron hillegass is a
programming cocoa book and a few other
third-party books they're all pretty
good aplin Omni both have developer
mailing lists and of course the sessions
here at double wdc there's a bunch of
just core cocoa talks and many other
talks related to cocoa an objective c
api so i hope you get a chance to chance
to see them and enjoy them and that's it
for my part thank you very much
[Applause]
[Music]