Quick in Trot Ox Code 4

8/6/2019 Quick in Trot Ox Code 4

1/9

Intro To Xcode 4Julio BarrosE-String.com

IntroHi I'm Julio Barros from E-String.com and I want to give you a super quick overview ofXcode 4 by taking you through building a "Hello World" type application. This write upa accompanies, along with the source code, a video that make up this tutorial. If you havenot seen the video please look for it at E-String.com or You TubeWe'll do it really quickly and you can always stop and rewind the video if you like andthere 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 thebutton the message changes. Its really simple but uses core techniques that we need tomaster and gives us a project to work with in Xcode 4. I've seen many quotations orsayings apps which are simple extensions of this app.

Starting a new projectSo lets start. When Xcode comes up go ahead and create a new project. Make it viewbased application and call it "Fortune" because it will tell our fortune and we can put it inthe app store and make a fortune. I'm leaving the unit tests and git repository boxeschecked but we'll wait to talk about them till another video. You can save the project anyplace you like.


2/9

Recents

W elcom e to XcodeVersion 4,0 (4A278b)

Create a new Xcode projectStan DU ildi ng a new Mac, iPlTI one or iPad 0application from one of the included template,Connect to a repositoryUse xcoc e' s imeg rate d '0 Urce centro I featu res towork \ ' lWh your existing projectslea.rn about using XoodeExplore the Xcode development environment with"he Xcode 4 User Gui deGo to App'[e's developer portalVis;t the Mac and iOS D"v Center website s atd e ve lo p er .a p pl e . com No Selection

Cancel I I Open'-----'------Open Other". I ~ Show this window when Xcode launches

'Cmoose a ;,emplat.e for your new project:IIiOSFramework & LibraryOther

Sp:li tVi__ basedAppl tcatton Tab Ear AppHcalIiom,wi,gali,m-ba"ed'Appl tcatton Ope,nGt ESApplication['Mac os XAppricalionlFramework & LibraryAppl'iGl!lio~1 ~,Iug-inSys,tem Pl:ug-in.olher Wi,ndow- based

AppltcattonUlil,ity Application

Tlli" template provides a startlnq point for a~ application that use, a single view. II provides a>JiW controller to manage nh@,vtew, an d anib f il e t ha t c o nt ai n st he viw.

( 'Cancel) r Pueviou5, '\ C Next )\. ./ . . . . .----~


3/9

Call me a nerd but I like to run my project right away. I love seeing a new app pop up inthe 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 andlive 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 inthe source tree.

eoo ~50(iaILnks-50ciaILnks,x(adepraj CJ...lsocialLinbl [email protected],im .. ~ I ~lI.u~ Stop 8reakpoint< "i~w Org.mizerIill neb. .. I l ! I : : ::111 t-1~iociaILnk5

iO~ Ap"i(~i~~ Tar~e

tjj50dalunhTeSl,laentter I CCI"rI,e5trn",5a(~ILnk5ver>it;;.n~D""i[es~

Man lnter f ace I Ma~Wndow EI

I Sumrnar~ I Info BuildS~ttings

A;>prun50~O~ ~ andabm"e

Su~p()rtcd Device Ori~nlalions1 1 1 1 1 1 1 1ortr~.it Upside L;md,(~pe L:md,(~.p~Down Left !tight

A~~Icon,

Retina Dsp av

OFcImagespe~iAedR"tina Displ~y

oAdd Target

I have some icons handy so I'll just add them to the project. I want the files copied intomy project directory so I'll make sure the copy check box is selected. The icons are57x57 pixels for non-retina displays and 114x 114 pixels for retina displays. iPad appswould have 72x72 pixels icons but this example is iPhoneliPod only. Also the defaultnames are Icon.png and [email protected]
mailto:[email protected]:[email protected]


4/9

'Choose optlons for addi~g these files:

Add 1!0 ta.n-gets 5 1 ~ Fortunso e a FortuneTests

Destinarion 5 1 Copy items into destination '9mup'S folder (if needed)~olders 8"eate groups Fo r any added folderso Create fol~den-referenoes for any addad folders,

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


5/9

R . u n Stop Scheme

T: : : : I < 4 1 1 . . I

1 . II2 . II FortuneJ3 II Fortune4 IIs II C reatee6 II Copyri'glr J ' II89 #irrnport D i f O i F ! ! ! l . I meT,e:st:s,...D i f r .~l f I1ewQFks"'OPmci!l.l,cts

r r . : : = 1 ll.JEditor View Organizer

5ellectuoli 'l

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


6/9

IBOutletNow, to change it programmatically, we'll need a reference to it in our code. We do thisby tagging instance variable with IBOutiet and hooking it up in Interface Builder.@ i n t e r f a c e F o r t u n e V i e w C o n t r o l l e r : U I V i e w C o n t r o l l e r {

I B O u t l e t U I L a b e l * g r e e t i n g ;}@ e n dWe used to have to write that first and then bounce back and forth between Xcode andInterface Builder but now we can bring up the source and graphical editor right in thesame window.And we can control-drag (hold down the control key while dragging the mouse) from thegraphical builder to the code to Xcode will add our instance variable already tagged.

f t l II9 #:iJmport C{ lnn@Ul ion C . . . . : : o : . . = ; . I J I : : : . : t l e : . : . t . . . : . . -

Obj~crr Fi IEl'S O wn !'! r@interface IFortulneViewCont rollerUIV iewCont ro He r {

l f V p @ 1 1l I 1 11 L ab ! 1 1Cancel )

}@end

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

( v o i d ) v i e w D i d L o a d{[ s u p e r v i e w D i d L o a d ] ;g r e e t i n g . t e x t = @ " Y o u r F o r t u n e A w a i t s " ;}

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


7/9

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

IBActionAnother key building block technique is hooking up actions. Lets drag out a button fromthe 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 dragto below the ivar section. This lets us set a method that will act as our action with theIBAction tag.

r. - I 1 :. " i t : i J n n p o t I~=~ __ ~ ~ ~~C ~ - - - - - - - - - - - - - " , ) l@interfaceFartuneViewCantrallLerC onn:@ i:.tlionAO iiml. .~U I V i e : \ d C o n t r o l l e r ~

Objec~ l lFiIe: i~ O'oVtTIfNam@ I bulJtOi ' l lPUIS l iie,d }

( Gon i'llect )

E v@ m (TolJ lch Up' ~ns,id,@ ' .:)ArglU m e n t s ( ~ : S _ e r I _ d _ e r _ _ _ _ . . : )

@end

I'll call my action the obvious buttonPushed and we can go to the implementationfile and fill in the method we just defined. "You willleam to love Xcode 4"

( I B A c t i o n ) b u t t o n P u s h e d : ( i d ) s e n d e r {g r e e t i n g . t e x t = @"VOU w i l l l e a r n t o l o v e X c o d e 4 " ;}

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

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


8/9

When we enter the action method I'll set alpha to zero so the label disappears, change thetext, and then in an implicit animation block I'll bring the alpha back up to 1 so it fades inover a period of 2 seconds. I'm using the new blocks based implicit animation callsinstead of the older UIView beginAnimationTransaction method. The implicitanimations are awesome and make it really easy to animate size, color, position, etc. in anfire and forget manner.Now thats pretty slick and I totally believe our fortunes are in Xcode 4.

( I B A c t i o n ) b u t t o n P u s h e d : ( i d ) s e n d e r {g r e e t i n g . a l p h a = 0 . 0 ;g r e e t i n g . t e x t = @"VOU w i l l l e a r n t o l o v e X c o d e 4 " ;[ U I V i e w a n i m a t e W i t h D u r a t i o n : 2 . 0 a n i m a t i o n s :A{g r e e t i n g . a l p h a = 1.0;}];}

You'll do variations of these basic tasks in every app you build so to get comfortable withIBOutlets and IBActions I suggest you practice it over and over again and watch thevideo as many times as needed.I hope this simple app served as a quick intro to Xcode 4 and you found this videohelpful. For the source code and more in depth information please go to e-string.com Andif you would like to be notified when new tutorials are available please sign up for themailing list.Thanks.Julio


9/9

Quick in Trot Ox Code 4

Documents

Transcript of Quick in Trot Ox Code 4