>> RHED SHI: Welcome to see CS50 seminar--
Introduction to iOS.
Thank you all for coming.
I hope you're just as excited as I am about iOS.
Last year, I took CS50 as a sophomore, and I basically learned iOS for my
final project.
And it was pretty--
well, it wasn't easy, but there are lots of support tutorials online.
And I really hope that with this seminar, I'll give you guys a head
start on iOS development
>> So, in terms of iOS development, there are two main things we
want to cover today.
First, the language--
the language is going to be in Objective-C. We'll actually hear
something really exciting.
So, you can join the whole Apple community of developers and build some
really awesome apps.
>> Also, iOS 7 is beautiful, hopefully, to some of you.
But it's controversial, I know.
And mainly, what I want to do is guide you through Objective-C, and also
Xcode, which is the integrated development environment that you'll be
working in for iOS.
>> And so, just a word on Objective-C. Basically, it's the exact same as C,
but with a lot of other things.
And so, more strictly, it's actually a super-set of C. So anything that you
can do in C right now, which is basically like pset 0 through 6, you
can do in Objective-C.
>> So, don't feel afraid about this new language that you're going to learn.
You've already covered a lot of it, because you've all done C this past
semester, except now you're going to have a lot more to work with.
And I'm just going to lead you through a couple of examples to highlight some
of the key differences that I found were really important when I learned
Objective-C last year.
>> Well actually, so, the other point is, Objective-C is, obviously,
object-oriented.
And we'll discuss a little bit about what that means later.
Basically, it's like how you worked with structs in this past pset, with
nodes and similar other things like that.
Except, in Objective-C, everything is an object, and you're going to be
passing around pointers to objects rather than the values themselves.
So, it's just something important to keep in mind.
>> So, why don't we start with a few differences in syntax between C and
Objective-C?
I want to highlight the #include, you know, standard io.h in C and C++, with
the Objective-C version of that, which is #import, and then some sort of
header file.
In this case, it would be UIKit, you know, slash UIKit.h.
It could also be, you know, MKMapview to you slash MKMapview.h if you want
to do, like, a map inside of your app.
Similar things like that.
>> So, the important thing is include has now changed to import.
But the idea still remains.
You're going to be importing some sort of header file into your program.
>> I also want to highlight the difference between printf and NSLog.
However, as we said earlier, Objective-C is a strict super-set of
C, which means that printf exists in Objective-C, too.
But, most people don't use that.
Most people use this NSLog because it gives you a time stamp, and we'll see
it in action later.
But, it's generally a more useful way to print out variables.
>> And I also want to highlight that NSLog takes in just the same
placeholder values as printf does--
so %d is for an int, %f is for a float.
However, I do want to highlight this very last one--
NSLog % at sign--
that is a placeholder for an object.
And as I said earlier, Objective-C deals pretty much mostly in objects,
and so this will come in use when you want to print out, perhaps, maybe an
NSArray, or NSDictionary, or an NSString.
>> So, also, notice that, in our NSLog statement, we have an at sign in front
of the quotation--
that is to signify that strings, now, in Objective-C are objects.
They are no longer simply char stars.
They're objects and are treated as such.
>> So, it's really important that when you use NSLog it takes in an NS
string, which means that you'll have to include an at in front of your
quotation marks.
And that's why you see, here, in all of my function calls to this NSLog, I
have an at in front of the quotes, even though the %d and the %f's are
all the same from C.
>> Any questions so far?
I'll try to go through this quickly so that we can have more time to work
with Xcode and Objective-C, so that you guys can get more
familiar with it.
>> Next, I want to highlight something conceptually important.
So, in C, most things are functions.
We make a function call.
We declare functions this way, with the return type first, then the
function name, parentheses, and then whatever arguments and the type of
these arguments we want to pass in.
And Objective-C, because everything is an object or class--
so class and object are two terms that are mostly synonymous with each other,
so I may use them interchangeably throughout the seminar.
>> But, you'll see that we have methods in Objective-C rather than functions.
And methods belong to objects.
So just as, maybe take for example, node--
our type [INAUDIBLE]
node from pset 6 or 5--
we have the word, property, or the next node pointer.
Methods are simply functions inside of some sort of structure.
>> So, in this case, the structure would be the object, and then the method is
something that belongs to an object.
And this is how you would declare, sort of, a method.
You would start with, again, the return type-- so, I tried to color
code the key words here so that you guys can see the, at least, formatting
similarities between function declarations and method declarations.
So, you start with, you know, a return type-- in this case, it's an array, or
an NSArray pointer--
and then you have this method.
And then, what's interesting here is that instead of having parentheses, we
have these colons.
And then, in front of our arguments, we put, again, in parentheses the type
of our argument.
>> So, right now I'm trying to make the comparison between, you know, n and
number, because they're both like ints.
And then, the other one is an NSUInteger type.
And then, with Objective-C, when you want to have multiple arguments in
your method clause, you, sort of, separate them out kind of like this--
I'm not quite sure how to describe it, but this is a good example of how you
can have multiple arguments in there.
>> You could, of course, just totally ignore the andArray colon NSArray
array if you wanted just a method that takes in one argument.
Yes, question.
>> AUDIENCE: Are both NSUInteger and NSArray arguments that can be taken in
within the NSArray?
>> RHED SHI: Yes.
So, let me explain.
So, yes.
So, the question was are NSUInteger and NSArray* types of the arguments,
and that's correct.
So, you always want to specify what the type of your argument is.
And here, I'm trying to introduce you to some of the syntax and vocab of
Objective-C, so those are actual types that you'll be dealing with.
>> And as you'll notice, arrays are no longer, sort of,
simple bracket things.
They're objects.
Although, if we go on to the next slide, we can see that we can
hard-code an NSArray in Objective-C with simply an at symbol in front of
the brackets.
I'm not, actually, quite sure whether I syntactically hard-coded an array
correctly for the C version, but that's supposed to be in a C array.
>> So, this is how you would, you know, perhaps use the functions or the
methods that we created earlier.
Right?
So, this is where we declare our function and our method.
And now we want to use them in our program, and this is
how we would do it.
So, in C, you would have, you know, perhaps, a bool b, and you set it to
equal the function, and then you pass in the arguments.
>> In Objective-C, it's pretty much the same thing.
You have NSArray* my_array, and it's going to equal-- now, the only
difference here is this object thing, which I've highlighted in yellow, and
as you can see, in C, there's no other yellow word.
And it's because methods belong with a certain object.
So that's why I need to have an object that, sort of, calls this method on
the number zero, and then the NSArray a, b, c, d.
Any questions on that?
>> We'll see these concepts in action pretty soon when we go into a demo.
OK.
Now, I want to talk a little bit briefly about Xcode 5, which is the
integrated development environment that you'll be working with.
I know a lot of you, or some of you, don't have Macs, which is a problem
because Xcode is not available for Windows and PC.
Don't ask me why, but probably--
yeah, corporate.
Whatever.
But anyway, so, I apologize if some of you do have to download some sort of
virtual machine for Mac in order to run Xcode 5.
But it is a pretty nifty software to use.
>> And so, before we dive into any sort of demo, I just want to show you a
picture of what Xcode looks like in your window, and then also talk about
what this whole space is.
So, it's kind of like learning how to use Microsoft Word, except you want to
get familiarized with all the different things that
are going on here.
>> So first, I want to point you to the toolbar at the top.
You'll see that, at the top, you'll have the file name--
or, actually, your project name and then your file name.
Take note of the play and the stop buttons.
Those are the ones that you'll be using to run your app on the
simulator--
the iOS simulator.
This automatically comes with Xcode 5, so you don't have to worry about
downloading some sort of simulator.
You just press play and then it runs your app.
And you can play around with you, and you'll see how it works later.
>> And then, in the center, of course, is where all of your beautiful code is
going to go.
And then, on the left-hand side, you'll have this, sort of, folder--
navigation--
and then, you'll also see that, along with the folder icon, there are a
bunch of other icons there that will be useful later.
>> And then, on the right side is a utility area where you can work with
some of the objects and specify, you know, what the color should be, what
the text font should be, et cetera.
Although, everything that you do in the utility area, you can
do in code as well.
And so, I'll be going through two examples of using, simply, no code at
all-- or very minimal code--
verses all code, just so that you guys know what you can and cannot do in
Xcode and Objective-C.
>> And then, finally, down at the bottom, you have the debug area.
So, you no longer have to run GDB, et cetera, on your programs.
It automatically does it for you.
And you can also print stuff to this area.
So actually, later, we'll go through mario.c, if you guys still remember
that, in Xcode.
So that should be fun.
>> And then, just to bring it back to Objective-C, I want to highlight what
you can do with if statements.
So, you know, because Objective-C is a superset of C, everything you do is,
literally, the same as C. You just have slight differences.
So, you'll notice the form for an if statement is still the same-- you have
if, and then you have parentheses with a condition inside of, it and then
curly braces for whatever you want to do inside of there.
>> However, I wanted to put this slide up here, simply to illustrate that,
because we're dealing with objects now, we will have to use these things
called like, is equal to string, which is, coincidentally, a method of a
string or an NSString object.
So, word, in this case, is an NSString object, and it has a method called is
equal to string, and then we're passing in a hard-coded string to see
whether those are equal to one another.
>> Any questions so far?
OK.
And, I want to go over a for statement also.
>> So, for example, if we wanted to loop over the length of a string in C, this
should be familiar to you.
And, in Objective-C, I do want to highlight this, sort of,
method called count.
Well, actually, let me just take that back.
Count is a method of array.
However, it's more specifically a property of array, which is why you
can use the dot notation.
But I don't want to get into too much of this conceptual stuff, I just want
to show you how things would look like in Objective-C versus C.
>> And also, I do want to point out that even though I've been using NSUInteger
in front of all my i's in Objective-C, you can also use int, because int is
totally valid in Objective-C, also.
Yes?
>> AUDIENCE: Is it just stylistic, or is--
>> RHED SHI: Yeah.
So, as you'll see--
so, the question was is that just a stylistic issue.
As you'll see, I have a, sort of, star asterisk thing down at the bottom, and
that link takes you to a Stack Overflow form, where someone explains
the difference between an int in NSInteger and an NSUInteger.
And so, you can read about that later.
These slides will be, of course, available to you.
>> Let's see.
OK, awesome.
So, this is also included in the slide because I thought this was a great
website that introduces you to Objective-C syntax.
So, actually , why don't we move to Chrome and check out this website?
>> Right.
So, what I want to show you guys here is this image.
So, this is, sort of, going to be what you're going to see inside of any
Xcode file.
Actually, why don't we just take a moment to, sort of, take this in.
>> So, this book--
that's the object that we're dealing with.
And then, it's obviously going to be inherited from some other object, but
you don't have to worry about that.
And then, it, perhaps, has some member variables.
>> The important thing I want to show you is the instance methods, here.
So, instance methods are denoted by this minus sign.
And then, as you'll notice, we're already starting to see the paradigm
for method declaration, right?
The return type, the method name, , and then the type of the argument, and
then the name of the argument.
And this minus sign means that it's an instance method, which means that
these methods are only available to objects that have been instantiated.
>> To contrast that, methods with a plus sign in front of them are class
methods, which means that you can call these methods, even if you don't have
an object created yet.
So, for a clear example, NSString is a class.
And you can call, for example, class methods on NSString--
the actual, like, word NSString.
>> However, in order to use these methods, you actually
need to create a string.
For example, NSString star string equals at quotation mark, hello world.
And then, you can use these methods--
instance methods--
on that hello world string.
So, that's the difference between instance methods and class methods.
>> And, we just covered this part.
Properties are another thing that are inside of objects, basically.
And you declare them with the at property keyword.
You have these options, here, that I'll explain later when
we go into a demo.
Yes?
Hi.
>> AUDIENCE: Could you zoom in, please?
>> RHED SHI: Oh yes.
Sorry.
>> AUDIENCE: Thank you.
>> RHED SHI: That should be a lot better.
>> AUDIENCE: Yeah.
Thank you.
>> RHED SHI: Yeah, please remind me if I forget to zoom in or zoom out.
So, this is all I wanted to show you for--
whoa, that's a lot--
for this website.
So, let's go back to our slides.
>> Actually, now let's take a moment to dive into a demo.
So, we'll start with a new Xcode project.
So, if you'll open up Xcode on all of your machines, it should take you some
page where it says, like, either open up an existing project or a new
project, and you should click a new project.
And then, it should take you to this screen.
Yes?
>> AUDIENCE: If we don't have a Mac, do we just kind of chill?
>> RHED SHI: Or look on with someone, yeah.
Yeah.
You can chill, too.
OK.
>> So, what we're going to do first, now, is, actually, we're going to do a
single view application.
So, if you'll notice, what's great about Xcode and Apple support for
developers is that you have a lot of templates to work with already.
You could, for example, make a master-detail application.
You can make a game--
and actually, I won't go into games, because games are a different story
for iOS development.
And they're kind of separate, so I won't go into that.
>> Then, you have page-based applications.
You have a tab application--
so like, for example, Bank of America probably has, like, a tabbed app.
It's the ones where you have the buttons at the bottom.
And then, you have a Sprite Kit game.
>> Or you can work from scratch, which is what we'll do later.
But let's, first, start with a single view application.
Then, it'll ask for a product name, and we can just do test.
Organization name--
so, organization name, company identifier--
those are important if you're going to put your app on the app store.
Other than that, your code is going to run absolutely fine without this.
>> This is going to be important if you want-- so, per se, like, put your app
onto your phone or something, and test it out, you know, in real life--
this will be important.
This tends to usually be associated with some sort of developer account
with Apple.
>> And so, I know, probably, a lot of you won't have any developer accounts.
I know the university has one.
I think CS has one.
But, you can email me and I'll try to figure that out for you.
But right now, I've just put in some placeholder things here.
>> And you can, of course, here, choose whether you want it to be solely in
iPhone, in iPad, or both--
universal application.
So, for now, let's do universal, just to see both sides of the platform.
>> Let's see.
So, right now, I'm going to save it in some sort of folder.
Doesn't matter where-- you can always move it later.
And, now, we are brought to our Xcode project.
I wouldn't worry about all of this.
I would suggest not touching any of this, unless you know exactly what
you're doing.
So, all of this, just ignore for the most part.
You won't need to touch it, and if you do you mess up some things here, it
gets a little tricky.
>> So, why don't we look into the files on the
left-hand side in our navigator.
Here, we have AppDelegate.h.
We have AppDelegate.m So, as you'll notice, we have header files, which
end in dot h, and we have implementation--
actually, let me zoom in.
OK.
Let me zoom in.
>> Right, so you have header files and you have implementation files.
Actually--
OK.
This is a little weird, but bear with me.
Then, because we've chosen a single view application, we're going to be
working with storyboard.
>> So, storyboard is something that Apple has come up with to really help
developers rapidly prototype their applications.
So, this is where you can create an app without writing a
single line of code.
However, in our single view application, we do, of course, have a
file for our view, which is a view controller.
So, we have the header and the implementation file, here.
>> And, I'm going to zoom out now because we'll need to work in the storyboard.
So, here's our view.
If we, simply, run the app right now, there's not much exciting going on.
So, you'll see this white screen.
OK?
>> And, in our utilities area, we can add a bunch of different things to it.
So, when you're dealing with screens in iOS, view controllers are the
objects that encapsulate, sort of, your views.
So, a view controller always has a property called view.
And that view, typically, contains, you know, what you
want to see on a screen.
>> So, well, let's just start by putting, perhaps, maybe a label.
So, let's put a label on there--
stick it in the middle.
So, now that I've clicked on label, I can go into the properties inspector
and start changing its value.
Let's call it CS50 Colours.
>> And, I can also change the font.
So, instead of doing system, which is the default, we can do a custom one.
We can change--
you know, UltraLight, make it 32.
And then, we can make our box bigger.
>> AUDIENCE: Do you think you can zoom in just a little more, maybe?
>> RHED SHI: Yeah?
OK.
>> AUDIENCE: Just tap it?
>> RHED SHI: Let's see.
Does this work?
>> AUDIENCE: Just pass the Xcode?
>> RHED SHI: Sure.
OK.
Awesome.
>> AUDIENCE: The label under?
The label?
>> RHED SHI: What's that?
>> AUDIENCE: What drop-down was the label under?
>> RHED SHI: So, the question was, what drop-down was the label under?
It should, simply, be under here.
I guess it's a cube thing.
But usually, this is the default--
I'm just going down here until I find a label.
Yeah.
>> So now, we have our label.
Let's center it.
And Xcode gives us guidelines for centering objects.
So, now let's run our code again.
>> There we go.
So, we have CS50 Colours.
And now, let's put a button on there, right?
Because we want to make this interactive.
So, let's put a button here.
And we'll call this button "tap here to continue." We'll center it, also
Actually, it's already centered.
Yeah.
>> So, now we have a button.
And if we run this again, we're going to have a nice little button here.
And I can click it, but it doesn't do anything, because we haven't done
anything with the button yet.
>> So, let's create another view, right?
So, let's say I want to tap that button and I want to
go to another page--
another view.
What I'm going to do is, I can create a view controller, right?
Now I'll click on my button, and then, the important thing is, I'm going to
click-- or--
yes, press control on my keyboard.
Control.
Click on the button, and then drag.
>> So, remember to hold the control key.
Let's do that again.
So, hold control, click, and drag to what you want to do.
OK.
>> And now, I have several options here.
I can either push, or I can do a modal, or I can do a custom.
Push is only if you have a navigation controller.
Right now, our very first view controller is not inside of any
navigation controller.
So, the navigation controller is the one that gives you the back button on
the iOS app where you have, you know, that top, sort of, thick bar--
where you can go back, or forward, et cetera.
Right now, I don't have that.
And so, that's why I can't do a push.
>> So, I clicked on push accidentally, here.
And actually, let's run the code, and it should crash on me.
Only if I press the button though, so--
right.
So, this is bad.
>> And, as you can see, here, we have the error message.
So, "Push segues can only be used when source controller is managed by an
instance of UI navigation controller." So, because this wasn't inside of a
navigation controller, I couldn't do that.
>> So, right now, I'm going back to the folder, going back to storyboard.
>> AUDIENCE: What's the navigation controller, again?
>> RHED SHI: So, right now I'll show you.
Let's see.
So, I'm going to click on this view controller, and then I'm going to go
up to product--
actually, no, sorry-- editor.
And I'm going to go into--
actually, did I click on it?
No.
There we go.
I'm going to go up into editor, go down to embed in, and then navigation
controller.
>> OK.
And, my workspace looks really messy, so let's clean this up.
So, all of this is storyboard.
And in this way--
OK, stop--
I can quickly build something like this.
And then, now I can go back, you know?
>> But this is kind of boring, right?
So, what I want to do is, I don't want to make, just simply, a view
controller.
Let's say I wanted to actually make a table view controller, so I can put in
some nice colors, into the table.
>> So, now that I've put in my table view controller, I need to connect it back
from this button to the view controller.
So I need to do my control, click, drag thing again.
And now I can do push, because I embed it inside of a navigation controller.
>> AUDIENCE: Navigation controller just allows you to go from place to place?
>> RHED SHI: Yes.
So, more technically, it's an object where--
so, inside of the navigation controller object, it
keeps track of an array.
And that array holds all the subsequent view controllers.
That's why when you press back, it goes back to the previous page.
Because the navigation controller object, or the code that takes care of
this object, has an array that keeps track of these view controllers, and
can then, you know, DQ the view controller and give you back the
previous one.
>> So, this is technical stuff, but--
and I'll show you later in code, if we have time.
I'm kind of running out on time, but--
>> So, with the table view, what we can do is--
It's usually automatically set to Dynamic Prototype--
we're going to make it Static Cells, otherwise we're going to
run into some problems.
>> And then, let's say I'm going to have one section.
So, sections is like--
if you've ever seen the music app, when you have artists, sections would
be the A's through Z's--
the letters--
and then, you know, the individual rows would be the artist names.
And so, what's cool here, is that I can access all of the objects inside
of my storyboard through this drop-down menu, too.
>> So, I'm going to click on my section, and I want, you know, maybe five rows.
And then, inside of each row, I want to put a label.
And I'm going to call this Blue.
And then, I want to put a UI view, you know, maybe for, like, a little box.
>> So that I can show people a preview of the color.
And I'll go back to the property and change that color to, oh, I don't
know, this one.
>> And then, notice also, here, when I have the accessories, I can have lots
of the different accessories that you typically see.
The disclosure indicator, the detail, or check mark, or simply just detail.
So, maybe we can do, like, a disclosure indicator, for example.
>> And then, why don't we take these, copy paste them, and put them into the
next table row.
So, we can call this Yellow.
And I might have to extend this.
Let's make it yellow.
And in this way, we can copy paste our way down.
What was it?
Purple.
>> So, these are all the typical CS50 colors that you've seen in class--
actually, sorry--
or on the website.
Hopefully you guys can see what I'm doing here.
OK.
Last one.
>> AUDIENCE: How did you add the row initially?
>> RHED SHI: So, the question was, how did I add the row initially?
I went into this table section-- or however I can
select the table section--
and then, here, I updated the number of rows.
>> And, let me hope that this works.
OK.
Let's see if this works.
Oh, perfect, awesome.
OK.
While I was building up my demo, some things weren't aligned, so, thanks for
the applause.
>> Yeah.
So, let's see.
We'll make this nine just to make everything-- or actually, let's just
turn all of these into disclosure indicators.
And then, what I want to show you, too, was how I can take each of those
table rows and have them interact--
oh.
No.
>> Oh.
Also, I want to show you--
here, I can put the title of my navigation controller, right?
So actually, you'll notice, as soon as I embedded this view controller inside
of the navigation controller, we see this navigation bar at the top of our
storyboard representation of a view controller.
And so, this gives us, like, a visual, sort of, guide to our visible screen.
This is obviously going to be the navigation bar.
>> And what I want to do quickly, now, is put in another--
so this table view controller I did by taking one of these and dragging it
here, and that's what's allowed me to quickly, really, create a table view
controller.
If we do have the time though, you'll see that, programmatically, it's a
little bit more tricky to create a table view controller, because there
are a couple of methods that are required for you to, sort of, write
out in order for the table view controller to be displayed correctly.
>> However, I just want to show you, now, an example of where, if I take this,
for example--
I've put in another view controller.
And now, let's say I want to control alt my very first blue
table row to here.
And I want to call this Blue.
And then--
let's see.
I'm at the view now, and I can change the background to blue.
>> And so, notice, here, this drop-down menu also gives you a hierarchy of all
of these objects.
So an important thing to note, here, is that all of these things, here--
this table view controller, the table view, table view section, table view
cell-- all of these are objects, in code.
So, you know, a label right now is under the content view, et cetera.
So on and so forth.
>> So, if we run this code, we should see something--
let's see if this-- yeah.
So, there we go.
But, if we don't do that, none of these other things work.
Right?
So only this one works.
And, for the sake of time, I won't go into, you know, putting
down the other ones.
And this is the end of, sort of, storyboard--
what I wanted to show you for storyboard.
>> And, I do have a worked out example, actually, right here.
So, this is the storyboard that I made previously.
So, as you can see, this was my navigation controller.
Then I had my first view controller, then I had my table view controller,
and then I had all of these--
so previously, I was doing something very different.
So, excuse those things.
I'll probably clean it up later before I send it off to production.
>> But, if we run this, we'll see that all of the options are
available to us.
Except I didn't make the backgrounds those colors.
So, nice simple application.
>> Now, let's try to tackle this programmatically.
OK.
So, to do that, we're just going to start a new Xcode project.
We'll make it an empty application now, because we don't want to have the
storyboard.
So, I'm simply restricting myself to not use any of the storyboard, and an
empty application will not give me a storyboard.
This is just to prevent myself from cheating.
Let's see.
Wait.
Did I--
yes.
OK.
>> Right.
So, here, we are left with nothing else but code.
So, let me move this window slightly over.
Right.
As you can see here, the only files we're given are AppDelegate.h and dot
m, and we don't have storyboard anymore.
>> So if we run this, we are still going to get to the white screen, thank God.
OK-- white screen, but nothing else.
And, here is the important part.
This is where the action happens.
In the previous versions, there's usually no code here, but the
storyboard essentially provides the code for this part.
I won't go into details on how.
>> And what we want to do now is, we want to go in here, and this little space
starts creating our app again.
So--
yes?
>> AUDIENCE: Zoom?
>> RHED SHI: Zoom.
Yeah, sure.
OK.
I'll be typing, so this shouldn't matter too much.
OK.
>> So, first, remember we wanted to create a navigation controller, right?
And also, as you can see here, Xcode does a really great job of
self-filling.
So, as you'll notice, the names of everything are a lot longer than
usual, but Xcode fills it in for you.
So I can just press Enter.
>> So, I want to create a UI navigation controller pointer, and I can call it
navigationController.
Now, what do I do now?
After this equal sign, I need to, first, create it inside of memory.
So, I'm going to do NavigationController alloc--
so, this is similar to malloc, that you guys used in C--
and then, I'm going to init it.
>> So, it's really important that any object that you create, you want to
alloc and init it.
That's going to create it and instantialize it inside of memory, and
now you can use it.
All right?
If you don't do that, your object does not exist, and you'll run into a bunch
of problems.
>> And then, I want to create a view controller, right?
So, I want to create a UIViewController star--
so, everything is a pointer in Objective-C, and I'm going to do
something similar, here--
alloc, init.
OK.
>> And then what I'm going to do is, I'm going to-- so, remember when we did
the embed in navigation controller?
This is how you do it in code.
You're going to do navigationController
pushViewController--
>> AUDIENCE: [INAUDIBLE].
Will this happen for us, or--?
>> RHED SHI: Oh, yeah.
No.
It likes me better.
No, it'll work for you, too.
So, these are all methods.
So pushViewController is a method, and also, more specifically, it's an
instance method of the UI navigation controller.
Because I had to create my UI navigation controller star, and then I
can call this pushViewController on my specific instance of a UI navigation
controller.
>> AUDIENCE: Do we have to do the exact word, or does it already exist for it?
>> RHED SHI: Yes, because it's a method.
It's like a function.
It's like printf.
It's like scanf.
It's like strcompare.
Except it knows what you might want to type, and notice that it'll always
come up with things that are legally allowed for you.
So, if nothing shows up here, then something is wrong.
>> So, pushViewController.
So, now, I want to push my newly created
UIViewController, and then, animated--
perhaps not.
Because this is going to be the first view controller.
I mean, even if I did make animated, it probably won't show up, because
it's the first screen.
>> And remember the brackets.
So, remember how we used the brackets?
And inside the brackets, the object calls on a method--
so our object is the navigation controller, and the method is a push
view controller animated.
And see how it takes in two arguments, and they're separated by the, sort of,
words, and a colon.
So, Objective-C tries to make it nice and easy for you to read out loud--
your code-- and have it semi, sort of, make sense.
>> However, doing just this is not enough.
Let me zoom out now.
Doing just this is not enough to get what we got to previously.
So here, you'll notice that there is actually not going to be any sort of
bar, here, right?
There's no navigation bar, which means that we still have not gotten it.
>> And we can test that out, also, by, perhaps, changing the background of
ViewController, right?
ViewController.background--
ah.
So, see how ViewController did not have a background color, even though I
wanted to access it?
And that's because ViewController is a container for the view.
So, it has a view property, which then has a background color.
>> And, I can set it, sort of tediously, by calling the color
on the UIColor object.
So, notice here, redColor is a method.
It's a class method of UIcolor.
Because I did not have to create an actual instance of a UIColor in order
to call the method on it.
I just, simply, called it on the type-like name.
I, like, called it on int, if int had, like, a method to it, for example.
>> And so, if we run this code, we'll notice that the background is
actually not red.
It's still white.
And how we can get around that is, notice how there's the self.window.
That is, like, the ultimate container for your application.
It is the ultimate thing that contains everything on the screen, for an
iPhone or iPad application.
>> And, conveniently, self.window has this property called
rootViewController.
And that is going to be the pointer to the very first view controller inside
of your app.
So, what we want to do here, now, is to set that equal to our navigation
controller.
Right?
Because, technically, navigation controller is our very first view
controller.
It keeps track of an array of other view controllers, and we pushed this
view controller into that array in the navigation controller.
>> So, you do not want to do this.
That wouldn't really help you.
You want to do this, if you wanted to do a navigation controller, which most
of you probably will because you'll want to, sort of, have some sort of,
like, menu to go back to or some homepage to go back to, rather than an
empty screen.
Yes?
>> AUDIENCE: Is it uncomfortable for you to zoom in on the--
>> RHED SHI: Yeah.
So, yeah.
This is the code, and now let's test it out.
>> So, there we go.
Magic.
So, OK.
Thank you.
OK.
So now, what we want to do is-- so, we're kind of limited, here, right?
We could potentially write everything inside of this one function.
But, that's not how iOS development usually works.
>> So, what we're going to do is, we're going to create some new files.
But, more specifically, we're going to create another Objective-C class, or
another object--
class and objects are interchangeable here.
And, here's how I could, potentially, create another class of U controllers.
>> So, it's a sub-class, as you'll notice, here, it's a sub-class of the
UI view controller, but I can call it any other name here.
I could call this CS50, I could call this view controller, I could call
this blah view controller--
anything I want.
This is just the name for the class.
However, it's going to be important because, essentially, what I'm doing
here is, I'm creating another class name.
So, it's going to be, like, some sort of type or an object.
So, it should be a little bit generic.
It's not going to be very specific.
>> And also, I do want to point out these two options.
Because we're doing everything inside of code, sometimes it is a lot easier
to bring in an interface file, such that I can literally drag and drop, as
we did earlier with storyboard--
you know, a label, or a button, or whatever else.
And so, xibs are files that allow you to do that, and you have to hook it up
to this view controller file.
>> So, I'm going to deliberately not check this.
Usually I would check this, and if I only did this for iPhone or iPad, I
would check this and simply have one for, you know, the iPhone or the iPad.
But since I'm doing universal, I'm going to create two of those later.
So, I'm going to deliberately uncheck this.
>> This is also really important.
A lot of times, I've had bugs where this was not checked.
And so, obviously, this file is not, sort of, like, included or imported
inside of this test folder.
And so, my code has absolutely no idea of the existence of this file, and
that causes a lot of pain and hours of debugging.
But, just make sure this is checked so that, you know, the target of this
file is for this application.
>> OK.
So, now we've created two new files.
And these files look pretty empty.
And, actually, let's also continue on by creating the xib files.
So, previously, I was in the Cocoa Touch drop-down.
Now, I'm going to go into the User Interface touch, and as you can see, I
can create a storyboard.
>> So, even I started with an empty application, I can still use a
storyboard.
Although, it gets tricky in terms of how you want to connect
that to your code.
So, I won't go there.
>> But, what we want to do now is create a view.
And you can choose for an iPhone or an iPad.
And typically, to denote the difference-- if you're doing a
universal application--
you either put an underscore iPhone, or you can do a Twiddly.
It doesn't really matter.
It's simply for you to differentiate which view is for which device.
>> And so, now look.
I have a screen that I can work with.
And so, for example, I can put a label on here, you know, and I can also put
another button here.
I won't bother changing the values here.
>> But, what's important here is that the file's owner--
so, I'm inside of the iPhone view, iPhone xib file.
And down in this navigation area or drop-down menu, I want to go to the
file's owner.
And this is the really important step here.
I want to make the class view controller, so that this xib file is
going to be associated with my view controller.
And anything that I do inside of my view controller programmatically is
going to be reflected on here.
>> So, however, notice that--
actually, let's make this view background blue, for example.
Or green.
And then, so if you'll notice, back in this code, this is where we got to our
navigation controller.
>> Even though we did that step, it's still going to be red, not green.
And there's a reason why.
It's because, when we inited our view controller, here--
sorry, it's a little crazy--
when we inited our view controller here, we inited it of the general type
UIViewController.
OK?
So we didn't even do it with this class.
>> So remember, this is like a class now.
It can be thought of as a type, just as UIViewController is a type.
And in order to use that, what we need to do is import it--
import ViewController--
and, as you can see, it autofills it for me.
So, ViewController--
and now, here, I can change this UIViewController to ViewController.
And now, here, I can change this to ViewController.
>> Let's run this again.
It's still red.
And the reason why it's still red is because--
woah, what happened there?
We wanted to associate this xib file with the view controller.
However, in order to actually do that, we need to go into this.
And when we do the init, we want to do initWithNibName, and then we want to
do the at string View_iPhone, for example.
You can ignore the bundle here.
>> And this is going to allow us to, actually--
uh oh, there's a problem.
Right.
>> And so, there's a problem because, in our view xib file, we have a label and
we have a button.
However, even though we've connected those two, there's nothing inside of
ViewController.h or ViewController.m that reflect those
buttons or those labels.
So, we need to write those in as properties of the view controller.
>> So, this is how you declare a property.
It takes in, usually, these two options.
For the purposes of us and this seminar, I would say that, in general,
most properties are nonatomic and retain.
You can read up by Google searching, you know, the difference between
nonatomic and retain on, you know, Google or something.
And I'll take you to, like, Stack Overflow, where people will have
answers for the differences between those.
But for now, that's what we want to be concerned with.
>> And we want to make a UI label, star, and we can call it whatever we want.
We can call this, you know, label.
And, we'll create another one for the button.
And remember to include the asterisk, because we are dealing with pointers
pretty much everywhere inside of Objective-C.
>> However, that will still not solve the problem, as you can see here.
And the reason is because, whenever we want to connect a xib file label or a
button to the program, or the header and implementation file, we want to
add this piece of code--
outlet.
Notice that it's a key word.
>> And, as soon as I finish typing that out, it should have these
two circles, here.
Usually, they're not filled in.
I'm not sure why they are.
But usually, you will have to manually connect them by going to this side of
the utilities area.
>> And so, right now, I've got my label selected, and I want to drag this new
referencing outlet to my file's owner, and then click on Label.
So now, finally, this label is connected to this label.
And this label is what we're going to use programmatically to change its
text, its font, its background color, et cetera.
>> So, why don't we do the same for the button?
And as you'll notice, for the button, it's a little more complicated.
Because, I mean, you're supposed to press on a button, so it's got a lot
of options for how users can press on a button.
And then, we'll see later on that we can connect this to our
code to make it work.
>> So, for now though, we want to connect it to the actual button
inside of our code.
So we go to the new referencing outlet, and then do the button.
Now, let's run this again.
Uh oh.
OK.
I don't know what's going on here now.
Whoa.
Just one moment, here.
>> Actually, why don't we take a look at another example in
the interest of time.
OK.
So, here's the more readily prepared example for ViewController.
As you can see here, I've included the properties for the
label and the button.
And then, this piece of code here--
this IBaction--
was a connection to this button here.
So as you can see here, Touch Up Inside is connected to the selector
called Button Pressed.
>> So, we can actually go through the motion again, here, by taking Touch Up
Inside and dragging it to File's Owner, and then
click on Button Pressed.
Now, let's run our code.
So now, this button now works and will take us to the next page.
>> And, in terms of our view controller, this is the piece of code that took
care of the Button Pressed.
And it's important to note here, that I've created another type of view
controller called a table view controller.
So, this was similar to back in storyboard, when I dragged one of
these table view controllers into the storyboard.
I'm creating another
>> Pointer to the table view controller, alloc and init-ing it, and then doing
self dot navigation controller, push ViewController, this new
viewController.
And I've set the animation to yes, because now inside of my app, and I
want to actually see the animation going from the home page to the table
view controller.
>> AUDIENCE: Do you still worry about garbage collection?
>> RHED SHI: What's that?
No.
So, the question was, do you have to work with garbage collection?
So, Xcode 4 had like ARC, which is automatic reference counting.
And so, usually when you start a new project, you would check that, because
no one really wants to deal with freeing memory and stuff.
But I think in Xcode 5, there isn't even that option on the new project.
So, it automatically does that for you.
Yes?
>> AUDIENCE: Can you export a PDF in your storyboard?
>> RHED SHI: Yeah, definitely.
So, all of these will be included in source code, so you guys can check out
the actual Xcode project for it.
Yeah?
>> AUDIENCE: But, I mean, like, can I print a PDF with my storyboard?
If I just want to export the images to show someone.
>> RHED SHI: Oh yeah.
I think, maybe, you can just take a screen shot.
Yeah, and send them a screen shot or something.
Yeah.
>> So, let's see.
In the interest of time, I think that's all l can cover today.
But, I know that's, actually, just barely touching the surface of iOS
development.
So, please feel free to contact me if you have any questions about iOS
development.
And, hopefully, I'll be able to clean up some of the code for the source
code files, so that you'll have some really nice examples to work with.
>> Other than that, if you guys are going to the CS50 Hackathon, I may or may
not be there, and I can help out with some iOS development, too.
So, thanks a lot, guys.