Forms with UITableview in IOS

When you’re developing IOS apps you often need user input to receive some data.

You have the following options to get the data from a user:

  • Poorly designed form on a rather ugly white background
A rather ugly form
A rather ugly form
  • Use Storyboard to get static UITableviews in which you can easily create a nice form
A form by using static UITableview
A better looking form by using static UITableview

How does it work?

The library is really simple in use. You have 2 required elements:

  1. QuickDialogController – used to push a viewcontroller to the screen in which you build your form
  2. QRootElement – a container for different sections and cells
When you’ve setup these two objects, you can add as much QElement objects as you want. Some elements are
  • QLabelElement – normal label
  • QRadioElement – options with 1 selected item
  • QBooleanElement – an on/off switch
In my previous post about migrating a Core Data database, I’ve used this library to show the Add Student model view.
This is how the code looks like … quite easy isn’t it?

[crayon]
QRootElement *root = [[QRootElement alloc] init];

root.title = @”Add a student”;
root.grouped = YES;

QSection *infoSection = [[QSection alloc] initWithTitle:@”Information”];
QEntryElement *lblFirstname = [[QEntryElement alloc] initWithTitle:@”First name” Value:@””];
lblFirstname.key = @”firstName”;

QEntryElement *lblLastname = [[QEntryElement alloc] initWithTitle:@”Last name” Value:@””];
lblLastname.key = @”lastName”;

QEntryElement *lblEmail = [[QEntryElement alloc] initWithTitle:@”E-mail” Value:@””];
lblEmail.key = @”email”;

QSection *groupSection = [[QSection alloc] initWithTitle:@”Group”];

QRadioElement *lblGroup = [[QRadioElement alloc] initWithItems:[NSArray arrayWithObjects:@”1DEV1″,@”1DEV2″,@”1DEV3″,@”1DEV4″,@”1DEV5″,@”1DEV6″,nil] selected:0];
lblGroup.key = @”group”;

[infoSection addElement:lblFirstname];
[infoSection addElement:lblLastname];

[infoSection addElement:lblEmail];
[root addSection:infoSection];

[groupSection addElement:lblGroup];
[root addSection:groupSection];

[/crayon]

Just have a look a his website or go over to Github and download the library.