To accomplish this task, I have created two new classes. The first class is used as a scrollable background and is implemented in a class named LMScrollView. This class subclasses the UIScrollView class as defined in LMScrollView.h.
LMScrollView is setup with some basic charateristics including scroll behavior and dimensions. We also set the background color to a somewhat obnoxious green. The height of 1000 pixels is arbitrary and needs some more thought on properly setting the size — for example, there is no need to scroll the screen if there are only a few fields.
The other class created is named LMEditField. The purpose of this class is to allow the programmer to get a simple set of functionality wrapped up into a single class.
This class supports an static label (UILabel) and a text field (UITextField) for capturing input. By wrapping things up in a class we can encapsulate a bunch of setup and configuration automatically without having to repeat it for each field that is created dynamically. This lets the application programmer focus on the application elements and not get bogged down with details of each field. This class is defined in LMEditField.h.
We can see that the two member variables representing the UI elements are defined along with three methods. The setup and getValue methods are used by the programmer to set the field’s values and to retrieve the values respectively. This class is implemented in the file named LMEditField.m.
The method named setup does most of the heavy lifting as it creates a label and edit field which each take up 50% of the LMEditField’s allocated horizontal dimension. The UITextField’s background is set to yellow, to go along with the green background, of course. Other things are setup such as font size and a call to setup the delegate of the UITextField, which allows the on screen keyboard to disappear when the user hits the enter key. Handling the keyboard’s visibility is a surprisingly important aspect to iPhone development. Note the method named textFieldShouldReturn which sends the message resignFirstResponder to the relevant UITextField.
Now that our toolbox is more or less ready, it is time to demonstrate its use.
Wiring things up
In the application I am porting to iPhone, the list of the required fields comes from an XML feed downloaded via HTTP. However for our purposes here the application demonstrates the creation and handling of just two fields, first and last name.
First, let’s look at the interface definition of iDGUIViewController where we define some fields statically. Again, in a more completely dynamic approach, these elements would be implemented as some sort of collection, linked list, or array.
There are a bunch of hard-coded things here which should also be transformed to be more dynamic. For example, everything here assumes a “portrait” orientation, but it follows that this layout could be built to support either orientation. Note the use of the variable txtVOffset which keeps track of how far “down” the screen a particular control should be placed.
The hitbutton method is invoked when the user … hits the button. Note that I have left the call in here to printf — because sometimes it is refreshing to see an old friend!
Here is a screen shot of the application.
iDGUI app in action
I warned you, it isn’t a very pretty application at present, but that gentle reader, is an exercise left to you. I hope this is of some value to you.