Saturday, December 29, 2012

iOS first App: Temperature Conversion

Apple's first app tutorial is excellent, but many times having more examples help, so here's my simple first app tutorial, a very simple temperature conversion application; It has one input, a text field for entering a temperature in Fahrenheit degrees, and a button, that will convert it to celsius and display it. Check the short demo video below.

If you prefer videos, here's a video walkthrough; if not, follow allong.

First, we create a new project, single-view application;let's call it Temperature Conversion
Then fill out the other project options as below (make sure you select use storyboard and use reference counting, and use Temp as class prefix, to make the class names the same as in this walkthrough; select iphone for device, to simplify; put whatever you prefer for the other values).

After you choose where to save your project, you should see the full xcode workspace, similar to the screenshot below (which has extra annotations :). Notice the list (or hierarchy) of files is to the left, in the middle there's an editor, wich changes depending on the file selected, and on the right there's a secondary editor, plus the object library at the bottom.

First, select the TempViewController.h file and modify the code so it looks like the screenshot below (the actual code is below the screenshot)

Then, select the storyboard, and, from the object library (bottom right, notice this is a list, and you can scroll) drag a text field,  a label and a button onto the storyboard.

Now, ctrl-click on the text field, to get its menu, and drag from the new referencing outlet to the Temp View Controller, and select fahrenheit, the only option (a line will appear when you drag, but doesn't appear in the screenshot)

Now do the same with the label
And finally join the touch up inside event in the button with the convertToCelsius method in the controller

And now we go to the TempViewController.m file to add the actual code; for easier understanding (not terribly useful now, but useful in larger programs), we first create a method for converting from fahrenheit to celsius, which I'm calling faren2celsius
And then the actual code for handling the button press; we access our properties with dot notation and using self to refer to ourselves, so self.fahrenheit is the text field, and self.celsius is the label; they both have a text property, of type NSString, and the NSString class has an intValue method that parses a string into an int.

Now press command-R or click on the run button, and you get your first iPhone app !

Finishing touches

  1. Go back to the storyboard, and add a couple of labels that say Fahrenheit and Celsius, next to each field.
  2. Change the title of the button to Convert to Celsius
  3. Change the text inside the label so it is blank, instead of saying 'label'.
Extending the program
  1. Change the declaration of celsius in TempViewController.h to be a textfield, and, on the storyboard, delete the label, and another textfield and link it to the view controller.
  2. Add another method in TempViewController.m (and declare it in TempViewController.m), called convertToFarenheit, that will convert from celsius (which is now a textfield) and put it into the fahrenheit field.
  3. Add another button to the storyboard, and link it to this method.
  4. Verify that you can convert back and forth between fahrenheit and celsius.

No comments:

Post a Comment