This article is another in our quest blogger series – you will see how to create an app from scratch that will do the flip animation and calculate the value of pi to different decimal places.

This article is basically going to explain the process I went through to develop my first application. I should explain that I had no experience whatsoever in application development, design or programming before I decided that I could learn to use Xcode and

I think that I rather naively thought that developing apps for the iPhone would be easier than other kinds of programming, as well as being an easy way to start. Needless to say, it has been a steep learning curve for me.

AIM: I wanted to create an application with two views. The first view would have my company logo and an image, as well as a link to my website. There would also be a button to swap to the second view. The second view (and remember, this was they first app that I coded by myself, so I kept it very simple) would have a very simple description of Pi, and then 3 buttons. If a button was pressed, the value of Pi to a certain number of decimal places

Switching between views.
Opening URLs from within an app.
Using IB Action

The best way that I have found is to read the instructions, download the source code, and then try to recreate it in a new application. Start off by creating your own version of Pi, then try to alter it to learn more about the coding process. For example, you might want to create a button that shows Pi to 5 decimal places, or some other value entirely.

It would have been easy for me just to use the utility version of the app, which already comes with the 2 views and the functionality to switch between them, but I wanted to build this project from scratch, so I began with just a ‘window-based application.’

Once created, I started creating the files I would need for the application. Obviously, I would need 2 views, which I named MainView and SecondView. In addition, I would need 2 viewcontrollers (PiVer2ViewController and SecondViewViewController) to manage those views.

The other file we would need is already created – this is the appdelegate file.

To begin with, I coded the views. Neither of these really required much in the way of coding. The MainView was a subclass of UIView (obviously), and only had two IBActions: firstly, one to tell the delegate to animate and change the views, and another to open the URL of the company website.

SecondView was marginally more complicated: There was an IBOutlet where the value of Pi would be displayed, as well as three different IBActions – one for 1 decimal place, another for 3 decimal places, and a final one for 10 decimal places.

Both the viewControllers are very simple, but there is lots of room here for developing your own personal ideas within the code.

This is where most of the heavy lifting of the code is done. Firstly, we need to create IBOutlets for the window, and also for the 2 view controllers. We also need to be able to flip the views, so we need 2 methods – flipToBack and flipToFront. These don’t need to be IBActions, as they will be called automatically.

The flipToBack and flipToFront methods are quite simple – they just create a new instance of the view controller, and then add or remove subviews from the views as necessary. See the code for more detail; something that is worth getting right is the flipping animation – if you set it too long, it can make the application look clunky. I’ve found that 2 seconds is about the maximum for most purposes.

We need 3 different .xib files. (These files are sometimes called ‘nib’ files, because in the earlier versions of Xcode, they were .nib.) The first one should already be there for you – MainWindow.xib. In MainWindow.xib, you need to ensure that the File’s Owner delegates to the AppDelegate file. In the PiVer2AppDelegate file, make sure the class is correct (PiVer2AppDelegate) and the outlets for the viewcontroller and window are hooked up. Finally, ensure that the class is correct for the PiVer2ViewController, as well as the .xib name.

The PiVer2ViewController and SecondView are where we can really go to town. As you will see from the source code, I’ve added images (make sure you put them in the resources folder before you try to use them, thought), and buttons. The buttons I’ve used to call the linkToWebsite method and the tellDelegateToFlipViews method, as well. In addition, in the second view, the buttons display the required value for pi in the text field, which I had to add as well. The most important things to remember when working with these files is to set the .xib file to the right class, and then remember to save your work before you build and go!

And that’s pretty much it – click build and go, and if you’ve done everything right, then you will have constructed a (very) simple app, but one with some interesting functionality – there is a URL link, a view transition, and some actions and outlets that display information to the screen.

Keith Heggart is a high school teacher from Australia. He has taught himself everything about iPhone programming, and while he is not an expert by any means, he currently has 5 apps on the app store, and is making a reasonable profit from them. Not enough to give up his day job, though – but maybe soon. www.mrheggart.com has a lot of resources for the iPhone developer, so feel free to check it out. I’m always interested in talking to people about their iPhone development, so feel free to send me an email.

Company Website: www.education4u.com.au
Personal Website: www.mrheggart.com
keith@mrheggart.com
Twitter: @keithheggart

Nice writeup, but did you have to use .tiff images? Can you view those on your browser? If so, what browser are you using?

With Firefox on a Mac you can right-click on a .tiff image box and choose to display the image. It is then shown in a separate tab via the Quicktime plugin.