Quick Intro To Xcode 4

Hi I'm Julio Barros from E-String.com and I want to give you a super quick overview of Xcode 4 by taking you through building a “Hello World” type application. This write up a accompanies, along with the source code, a video that make up this tutorial. If you have not seen the video please look for it at E-String.com or You Tube

We'll do it really quickly and you can always stop and rewind the video if you like and there is a transcript and the code is available on my website E-String.com .

The idea of the app is that when it starts up it shows us a message. When we press the button the message changes. Its really simple but uses core techniques that we need to master and gives us a project to work with in Xcode 4. I've seen many quotations or sayings apps which are simple extensions of this app.

Starting a new project

So lets start. When Xcode comes up go ahead and create a new project. Make it view based application and call it “Fortune” because it will tell our fortune and we can put it in the app store and make a fortune. I'm leaving the unit tests and git repository boxes checked but we'll wait to talk about them till another video. You can save the project any place you like.

Call me a nerd but I like to run my project right away. I love seeing a new app pop up in the simulator and it verifies that everything is setup correctly.

The big thing you'll notice is that Xcode and Interface Builder are now all one app and live in one window with multiple panes.

On the left hand side we have the navigator pane and on the the right the editor pane. Xcode is showing us details on the project itself since we have the project file selected in the source tree.

I have some icons handy so I'll just add them to the project. I want the files copied into my project directory so I'll make sure the copy check box is selected. The icons are 57×57 pixels for non-retina displays and 114×114 pixels for retina displays. iPad apps would have 72×72 pixels icons but this example is iPhone/iPod only. Also the default names are Icon.png and Icon@2x.png

As we click on different files, such as the app delegate, the editor pane shows us a the content in that file. And when we click on the xib we see Interface Builder right in Xcode

We can bring up the library in the far right hand side with the utility button on top.

From here we can drag out a label and add it to our view. I can change its size and position and adjust its properties in the inspector pane. Save and run and we have a label in our app.

IBOutlet

Now, to change it programmatically, we'll need a reference to it in our code. We do this by tagging instance variable with IBOutlet and hooking it up in Interface Builder.

We used to have to write that first and then bounce back and forth between Xcode and Interface Builder but now we can bring up the source and graphical editor right in the same window.

And we can control-drag (hold down the control key while dragging the mouse) from the graphical builder to the code to Xcode will add our instance variable already tagged.

We can now go to my implementation file and change the label text wherever it makes sense. I'll do it in the view did load.

I'll also add a release to the dealloc which is now at the top of the file.

Now when I build and run I see the message as updated in code instead of what was originally in the nib.

IBAction

Another key building block technique is hooking up actions. Lets drag out a button from the library. Change the button to say something like “What's in my Future?”

And to hook it up to our code we bring up the Interface file in the editor and control drag to below the ivar section. This lets us set a method that will act as our action with the IBAction tag.

I'll call my action the obvious buttonPushed and we can go to the implementation file and fill in the method we just defined. “You will learn to love Xcode 4”

When we build and run we see that we the label changes when the button is pushed. We can go back and adjust it so it looks better. Make it taller and tell it to use multiple lines and run it again. Thats the basics of the application but I can't help jazzing it up a bit.

A Little Polish

Every fortune app needs to have a little magic in it so in my action method I'll manipulate the alpha of the label to make it fade in. Alpha is a component that makes up a color, along with red, green and blue, and controls the transparency. An alpha of 0 means the label is completely transparent or invisible and an an alpha of 1 means it is completely opaque.

When we enter the action method I'll set alpha to zero so the label disappears, change the text, and then in an implicit animation block I'll bring the alpha back up to 1 so it fades in over a period of 2 seconds. I'm using the new blocks based implicit animation calls instead of the older UIView beginAnimationTransaction method. The implicit animations are awesome and make it really easy to animate size, color, position, etc. in an fire and forget manner.

Now thats pretty slick and I totally believe our fortunes are in Xcode 4.

You'll do variations of these basic tasks in every app you build so to get comfortable with IBOutlets and IBActions I suggest you practice it over and over again and watch the video as many times as needed.

I hope this simple app served as a quick intro to Xcode 4 and you found this video helpful. For the source code and more in depth information please go to e-string.com And if you would like to be notified when new tutorials are available please sign up for the mailing list.

Thanks.

Julio

btw, A PDF of this is available here.