How to customize form fields on iOS with buttons etc., change saved appearance

,

Q:

We want to customize the fields view, for now we want the empty field to have a different background color, add a button at the middle of it and add uiimage with our logo, is there a way to get a context to the field or even better some UIView* of that field? What about customizing the signed fields?

A:

2, Before the user taps on the field, there is no UI widget to represent it. Let me explains how it works. If you take a look at the PanTool, its hanleTap: event checks the PDF document see if there is a form annotation of any sort where the user tapped. If there is, it sets the FormFillTool as the next tool, and returns “NO”, meaning it has not itself successfully dealt with the event and the next tool should get a chance to process it. The FormFillTool then handles the tap even (handleTap:). The form fill tool handles most PDF forms, but because signatures are more involved, this has been broken off into a separate tool. The FormFillTool sets the next tool as the digital signature tool (FormFillTool.m line ~207) and returns NO, meaning it has not itself successfully dealt with the event. The DigtialSignatureTool then handles the tap and returns YES because it does deal with the tap event for this widget type.

If you want to change the empty signature field’s appearance, add buttons, etc. there’s a couple of approaches. One would be to actually alter the content of the PDF itself. The idea would be to iterate through the fields (please see the Annotation example) and change the properties to change the colour, add an image, etc. The other would be to again iterate through the fields, but instead of changing the PDF content, add UI widgets at the appropriate place. The second approach is probably what you’re aiming for. To “decorate” the PDF with widgets involves some coordinate transformations from PDF space to “UI” space, of which there are a number of examples in the tools code (e.g. for text selection, adding text widgets for form field editing, annotation selection, etc.) Condensed into one code snippet it would look something like this:

  • (BOOL)handleTap:(UITapGestureRecognizer *)gestureRecognizer
    {
    CGPoint down = [gestureRecognizer locationInView:m_pdfViewCtrl];

PTAnnot* m_moving_annotation = [m_pdfViewCtrl GetAnnotationAt:down.x y:down.y];

PTPDFRect* rect = [m_moving_annotation GetRect];

int m_annot_page_number = [m_pdfViewCtrl GetPageNumberFromScreenPt:down.x y:down.y];
CGRect annnot_rect = [self PDFRectPage2CGRectScreen:rect PageNumber:m_annot_page_number];
annnot_rect.origin.x = annnot_rect.origin.x + [m_pdfViewCtrl GetHScrollPos];
annnot_rect.origin.y = annnot_rect.origin.y + [m_pdfViewCtrl GetVScrollPos];

UIView* myView = [[UIView alloc] initWithFrame:annnot_rect];

myView.backgroundColor = [UIColor orangeColor];

[m_pdfViewCtrl->ContainerView addSubview:sv];

}

where

-(CGRect)PDFRectPage2CGRectScreen:(PTPDFRect*)r PageNumber:(int)pageNumber
{
PTPDFPoint* pagePtA = [[PTPDFPoint alloc] init];
PTPDFPoint* pagePtB = [[PTPDFPoint alloc] init];

[pagePtA setX:[r GetX1]];
[pagePtA setY:[r GetY2]];

[pagePtB setX:[r GetX2]];
[pagePtB setY:[r GetY1]];

CGFloat paX = [pagePtA getX];
CGFloat paY = [pagePtA getY];

CGFloat pbX = [pagePtB getX];
CGFloat pbY = [pagePtB getY];

[self ConvertPagePtToScreenPtX:&paX Y:&paY PageNumber:pageNumber];
[self ConvertPagePtToScreenPtX:&pbX Y:&pbY PageNumber:pageNumber];

float x, y, width, height;
x = MIN(paX, pbX);
y = MIN(paY, pbY);
width = MAX(paX, pbX)-x;
height = MAX(paY, pbY)-y;

return CGRectMake(x, y, width, height);

}
If the user zooms, or changes the page presentation mode, the widget(s) will need to be re-positioned. See the code in selector onLayoutChanged (which is called whenever re positioning would be needed) in FormFillTool.m for an example of re positioning a widget.

The second part of your question, to customize the appearance of signed fields, you can look at the selectors in DigitalSignatureTool.m

  • saveAppearanceWithPath:withBoundingRect:asDefault:

  • saveAppearanceWithImageFromFilename:

  • saveAppearanceWithUIImage:

they show various ways of setting a signed field’s appearance using different data.

For Android, please see the following forum post:

https://groups.google.com/d/msg/pdfnet-sdk/s99GQwKiRLc/0XSO6OHuVrUJ