render dynamic form in iPhone application

Question

I have to render dynamic form in iPhone application using tableview. This form may have multiple UI controls as button,textfield,lable, picker,date picker .

I got one sample code for iPad which is able to render the dynamic form,but this sample code is using UIPopoverController, which is not supported by iPhone application. So I am looking for some sample code which should work in iPhone.

Below is the code which shows combo box on clicking the button in dynamic form. I need the code which should show picker with list items.

sample code: https://github.com/ecrichlow/iPad-Dynamic-Table-Cells

- (IBAction)buttonPressed:(id)sender
{

    [delegate rowItemWasSelected:self];
    if (self.itemControlType == ControlTypeToggleButton)
        {
        ...
        }
    else if (self.itemControlType == ControlTypePopup)
        {
        ...
        }
    else if (self.itemControlType == ControlTypeCombo)
        {
        UITableViewController *popoverTable = [[[UITableViewController alloc] initWithStyle:UITableViewStylePlain] autorelease];
        UIToolbar *toolbar = [[[UIToolbar alloc] initWithFrame:CGRectMake(0, 0, DEFAULT_POPOVER_WIDTH, DEFAULT_TOOLBAR_HEIGHT)] autorelease];
        UIView *containerView = [[[UIView alloc] initWithFrame:CGRectMake(0, 0, DEFAULT_POPOVER_WIDTH, ([self.controlSelections count] * popoverTable.tableView.rowHeight) + DEFAULT_TOOLBAR_HEIGHT)] autorelease];
        UIViewController *containerViewController = [[[UIViewController alloc] init] autorelease];
        UIPopoverController *popoverController = [[UIPopoverController alloc] initWithContentViewController:containerViewController];
        UITextField *textField = [[UITextField alloc] initWithFrame:CGRectMake(DEFAULT_COMBO_TEXTFIELD_MARGIN, (DEFAULT_TOOLBAR_HEIGHT - DEFAULT_COMBO_TEXTFIELD_HEIGHT) / 2, DEFAULT_POPOVER_WIDTH - (DEFAULT_COMBO_TEXTFIELD_MARGIN * 2), DEFAULT_COMBO_TEXTFIELD_HEIGHT)];
        textField.delegate = self;
        textField.autocorrectionType = UITextAutocorrectionTypeNo;
        textField.autocapitalizationType = UITextAutocapitalizationTypeNone;
        textField.font = [UIFont systemFontOfSize:DEFAULT_COMBO_FONT_SIZE];
        textField.borderStyle = UITextBorderStyleRoundedRect;
        textField.contentVerticalAlignment = UIControlContentVerticalAlignmentCenter;
        [textField addTarget:self action:@selector(fieldTextDidUpdate:) forControlEvents:UIControlEventEditingDidEnd];
        containerViewController.view = containerView;
        popoverTable.tableView.dataSource = self;
        popoverTable.tableView.delegate = self;
        popoverTable.tableView.frame = CGRectMake(0, DEFAULT_TOOLBAR_HEIGHT, DEFAULT_POPOVER_WIDTH, [self.controlSelections count] * popoverTable.tableView.rowHeight);
        popoverController.popoverContentSize = CGSizeMake(DEFAULT_POPOVER_WIDTH, ([self.controlSelections count] * popoverTable.tableView.rowHeight) + DEFAULT_TOOLBAR_HEIGHT);
        popoverController.delegate = self;
        [toolbar addSubview:textField];
        [containerView addSubview:toolbar];
        [containerView addSubview:popoverTable.tableView];
        optionPopoverController = popoverController;
        [popoverController presentPopoverFromRect:control.frame inView:control.superview permittedArrowDirections:UIPopoverArrowDirectionAny animated:YES];
        // If there's currently an object that's first responder, make it resign that status
        for (UIView *subview in self.control.superview.subviews)
            {
            if ([subview isKindOfClass:[UITextField class]])
                {
                if ([subview isFirstResponder])
                    {
                    [subview resignFirstResponder];
                    [[NSRunLoop mainRunLoop] runUntilDate:[NSDate dateWithTimeIntervalSinceNow:1]];
                    }
                }
            }
        [textField becomeFirstResponder];
        }
    else if (self.itemControlType == ControlTypeButton)
        {
        // Don't need to do anything here. Caller passed in target and action. But in order to trigger delegate rowItemWasSelected this control type was added here.
        }

}

Answer 1

You can modify the sample code iPad-Dynamic-Table-Cells for rendering dynamic form in iPhone along with with popover display also

Add the below 6 files of project available on git-hub https://github.com/50pixels/FPPopover to your iPad-Dynamic-Table-Cells sample code

FPPopoverController.h/.m, FPPopoverView.h/m, and FPTouchView.h/.m

Now modify the FPTouchView.m, EditableTableDataRowItem.h and EditableTableDataRowItem.m as below

//In EditableTableDataRowItem.h
@interface EditableTableDataRowItem : UIViewController <UITableViewDataSource, UITableViewDelegate, UIPopoverControllerDelegate, UITextFieldDelegate,FPPopoverControllerDelegate>
{

    id<EditableTableDataRowItemDelegate> delegate;

    RowItemControlType          itemControlType;        // So named to denote that this does not correspond to a UIControl
    NSArray                     *controlSelections;     // List of items to display for popup control type
    NSString                    *listKey;               // If controlSelections array contains NSManagedObjects or NSDictionaries, the key to use to get a string to represent the item
    CGSize                      baseSize;               // Default size of the control, with width relative to other items on the row
    BOOL                        resizeable;             // Determines whether item can be resized based on row width
    UIControl                   *control;               // Standard control particular to the type of row item
    UIImage                     *normalImage;           // Used to customize the appearance of any button-based control type
    UIImage                     *selectedImage;         // Used to customize the appearance of any button-based control type

    CGSize                      originalBaseSize;
    int                         state;
    int                         selectedIndex;
    UIPopoverController         *optionPopoverController;
    FPPopoverController *popover;
    id<FPPopoverControllerDelegate> delegate1;
}
@property(assign) id<EditableTableDataRowItemDelegate> delegate;
@property(assign) id<FPPopoverControllerDelegate> delegate1;
@property(nonatomic, retain) FPPopoverController *popover;
        .
        .

//In EditableTableDataRowItem.m

- (IBAction)buttonPressed:(id)sender
{
    [delegate rowItemWasSelected:self];
    if (self.itemControlType == ControlTypeToggleButton)
        {
        .
        .
        .

        }
    else if (self.itemControlType == ControlTypePopup)
        {
        UITableViewController *popoverTable = [[[UITableViewController alloc] initWithStyle:UITableViewStylePlain] autorelease];
        popoverTable.tableView.dataSource = self;
        popoverTable.tableView.delegate = self;
        popover = [[FPPopoverController alloc] initWithViewController:popoverTable];

        popover.tint = FPPopoverDefaultTint;

        if(UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad)
        {
            popover.contentSize = CGSizeMake(300, 500);
        }
        else {
            popover.contentSize = CGSizeMake(200, 300);
        }
        popover.arrowDirection = FPPopoverArrowDirectionAny;
        [popover presentPopoverFromView:sender];
        }
        .
        .
        .

}

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{

    [popover dismissPopoverAnimated:YES];
}

//In FPTouchView.m file //Need to handle this method

-(UIView*)hitTest:(CGPoint)point withEvent:(UIEvent *)event
{

    UIView *subview = [super hitTest:point withEvent:event];

    //To-Do
    //
    return subview;
}

Answer 2

The project available on git-hub Popover for iPhone will help you to implement the popover in iPhone app.

The only thing you need to do is check the device in your above code & perform the actions accordingly.

Add 6 files to your project

FPPopoverController.h/.m, FPPopoverView.h/m, and FPTouchView.h/.m

then create two sample

DemoPopOverTableController.h

#import <UIKit/UIKit.h>
#import "FPPopoverController.h"
@interface DemoPopOverTableController : UITableViewController {
    FPPopoverController *popOverController;
    NSArray *subCat;
}
-(id)initWithStyle:(UITableViewStyle)style andSubCategory:(NSArray *)subCategories 
-(void)setPopOver:(FPPopoverController*)popOver;
@end

and

DemoPopOverTableController.m

#import "DemoPopOverTableController.h"
#import "FPPopoverController.h"
@interface DemoTableController ()
@end

@implementation DemoTableController

-(id)initWithStyle:(UITableViewStyle)style andSubCategory:(NSArray *)subCategories 
{
    self = [super init];
    if (self) {
        // Custom initialization
        subCat = [NSArray arrayWtihArray:subCategories] ;
    }
    return self;
}
-(void)setPopOver:(FPPopoverController *)popOver
{
    popOverController=popOver;
}
- (void)viewDidLoad
{
    [super viewDidLoad];
}
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
    return (interfaceOrientation == UIInterfaceOrientationPortrait);
}

#pragma mark - Table view data source
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return [subCat count];
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *CellIdentifier = @"Cell";
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];

    if(cell == nil)
        cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleValue1 reuseIdentifier:CellIdentifier] autorelease];
    NSString *tempCat=[subCat objectAtIndex:indexPath.row];
    cell.textLabel.text =tempCat;
    return cell ;
}
#pragma mark - Table view delegate
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    NSLog(@"selected Category: %@",[subCat objectAtIndex:indexPath.row]);
    [popOverController dismissPopoverAnimated:YES];
}
@end

This is not complete answer but this is something you can do in your above code

if(UI_USER_INTERFACE_IDIOM()==UIUserInterfaceIdiomPhone)
{
    //iPhone popover lines of code
DemoPopOverTableController *controller = [[DemoPopOverTableController alloc] initWithStyle:UITableViewStylePlain andSubCategory:subCat];
    FPPopoverController *popover = [[FPPopoverController alloc] initWithViewController:controller];
    [controller setPopOver:popover];
    [controller release];

    popover.delegate = self;
    popover.tint = FPPopoverDefaultTint;
    popover.arrowDirection = FPPopoverArrowDirectionUp;
    popover.contentSize = CGSizeMake(200, 200);
    //sender is the UIButton view
    [popover presentPopoverFromView:sender];
    [popover release];
}
else
{
    //the original line of code you have already in your code
}

And you can implement the delegate methods to perform some actions upon touching teh table view

- (void)presentedNewPopoverController:(FPPopoverController *)newPopoverController
          shouldDismissVisiblePopover:(FPPopoverController*)visiblePopoverController
{    
    [visiblePopoverController dismissPopoverAnimated:YES];
    [visiblePopoverController autorelease];
}

- (void)popoverControllerDidDismissPopover:(FPPopoverController *)popoverController
{
    // do something of your choice
}