Now that we know,

what we're building, let's warm up our brains with something simple.

We'll start by creating a brand new project and

playing around with a button, to change the visual elements in our app.

Then we'll add multiple views,

something that will turn out to be quite easy actually.

And finally, we'll add some code to transition in-between these views.

Open up Xcode and let's select a create a new Xcode project.

The last time we selected a single view application template.

Because we created an app, with a single view.

The other options offered, lets us create multi-view apps with more ease.

But a lot of the stuff we're going to learn about,

is already included in these templates for you.

Now once you know, what's going on, you can use these convenient templates.

But for now, we're going to select the single view application again and

hit next.

Let's call this app algorithm.

But rhythm, as in musical rhythm.

Now, before you make fun of me for

this name, our Android teacher, Ben, used to be in a band.

And this happens to be one of his album names.

Feel free to judge Ben on Twitter, at your own convenience.

The next two fields should be familiar.

My organization name is Treehouse.

And the identifier is com.teamtreehouse.

Make sure you select objective C, as the language and iPhone as your device.

Let's leave Use Core Data unchecked and move on.

Save the project somewhere convenient for you and then hit create.

Okay we have a fresh project, let's explore a bit.

We have our standard app delegate files, a view controller,

the main dot storyboard file, and the launch screen files.

Awesome!

Let's head over to the main dot story board file and warm up our iOS muscles.

Now the first thing we want to do,

is disable the new Xcode feature, size classes.

As I've said in previous projects, size classes are an important new feature of

iOS 8 and Xcode 6, that lets us design and build our apps on a canvas,

that's not tied to a specific device, but rather, applies to all devices.

Using size classes,

we can adapt our designs to different device sizes and orientations.

Now, the main advantage, is when we're designing apps across iPhones and iPads.

And since we're going to keep things simple, and target iPhones only,

I'm going to disable this feature and work only with the iPhone size class.

In the main .storyboard file,

pull out the utility panel by clicking on the last icon in the toolbar up here.

Navigate, to the first section, the file inspector.

And under the interface builder document section, uncheck use size classes.

Now make sure we keep size class data for

the iPhone and then hit disable size classes.

Now our view should be a little bit more familiar and

some what more like an iPhone shape.

Let's make some more space.

Okay, when we worked on the Fun Facts app last, we used a button, so

let's drag one onto our view from the object library in the utility panel.

We're familiar with buttons and so far we've learned two things that we can do.

We can create interface builder outlets and

actions, to control what goes on in our apps.

So, for example, we can change the text of the button and

the view's background color once we press the button.

Let's give that a try.

Let's get rid fo the Utility Panel to make some more space, and I'm going to

bring up the Assistant Editor, by clicking on the second icon in the first grouping.

Now, in the Jump bar on the top of the Assistant Editor,

we need to make sure we're in the viewcontroller.h file, the header file.

Click on the button, and then with your control key pressed,

drag it over, to the header file to create an i b outlet.

Now we're only warming up here, and

we're going to use this button to learn some general concepts.

So let's just call it, a button for now.

Normally, we're pretty strict about using descriptive names so

that our code is easy to read.

But, we're eventually going to get rid of this button, so no big deal.

Let's leave the type as UIButton, and Storage as Weak, and hit connect.

Now, we can use this button in our code.

Let's switch over to the implementation file.

Now you can do that using the jump bar up here, or a handy shortcut,

is once you're in the editor, click command, control, and use the up or

down arrows to switch between the two files.

Once the view loads, it calls the view did load method.

So let's add some code in here to change the title of the label.

Let's get rid of this comment, and go back to our standard editor.

So there's more space.

Let's add self dot a button, and then use

the method set title to programmatically set the title of the button.

Let's set it to, press me!

ForState let's do UiControlStateNormal.

We use the set title method on the button instance to set it's title.

It takes a string for the text, which we've set to PressMe!

And then a state for which to use this text.

Buttons have a few different states, which is an e-num called UI control state.

Normal, is its default state, that you use on your view, right now.

Now, some of the other states are highlighted, disabled, selected,

and so on.

We can set titles for those states, so that if our button gets disabled,

we can let our user know that they can't press it by changing the text.

Now let's head back to the main.storyboard file.

And everything looks okay here.

But if we run the app,

we may get some weird bugs depending on which device you run it on.

Now as you can see on ours, you can't even see, the entire button.

And that's because we haven't specified the layout.

Now let's get some of that practice in as well.

We'll keep it simple.

Let's hit stop to stop the app.

And we're going to center this button horizontally and vertically in our view.

So click the button.

And then in the Auto Layout menu, click the first icon, that is the Align icon,

and select Horizontal Container and Vertical Center in Container.

Let's make sure to update the frames for

items of new constraints and let's add those.

Cool.

Now, let's select a simulated device, again, to run this on.

I'm going to pick the iPhone 6, and hit the play button to run.

Once it loads, our button text should say Press me!

Even though the default text still says button in interface builder.

Using the outlet, we were able to modify our button's properties programmatically.

Now nothing happens, when we click on the button.

So let's create an IB action.

Again, let's go back to interface builder.

We're going to go into the assistant editor so

that we have our files side-by-side.

Now this time we want the implementation file, which came up correctly.

So let's select the button in Interface Builder and

Ctrl+drag to the bottom of the implementation file.

This should create an action by default instead of an output.

Let's call the action, Button Pressed.

We're gonna leave the type and event as it is and select none for Arguments.

And let's hit Connect.

I'm gonna make some more space here, now when we press the button,

we execute this method.

So inside this method, let's change the background color of our view.

We'll do self.view to get the view and

then background color to get the background color property.

Now UI color, has some handy convenience class methods for common colors.

So let's call the orange color method here.

[BLANK_AUDIO]

Okay. Let's stop and run the app again.

[BLANK_AUDIO]

The button says press me just as we expected and

when we do that, the background changes to orange.

Now that was all a review of what we covered in our previous course.

You know this stuff, right?

Well, that's not all buttons can do.

In most apps, clicking a button, often takes you to another page or

initiates some action, somewhere else in the app.

Well, let's jump to the next video to see first how we can include multiple view

controllers in our app and then, how we can transition between them.