Tutorial 3 – Displaying an image from a Notes document.

SUBJECT: IPHONE APPLICATION DEVELOPMENT FOR DOMINO DEVELOPERS. TUTORIAL 3
Displaying an image from a notes document.
Objective
In this tutorial you will do the following.
1.
Add an image field (Rich Text Lite) to the document.
2.
Add an image to a document.
3.
Display the image on the iPhone.
Materials
You will need the following.
• Domino server and Lotus Notes Designer version 8.5.1.
• Apple Mac with XCode iPhone SDK installed.
• Basic knowledge of Notes/XCode development.
• Completed Tutorial 2.
Adding image field to the document design.
1.
Open the iPhoneAp.nsf application in Domino Designer.
2.
Open the “Person Details” form.
3.
Create new field on the form and set it to “Rich Text Lite” and give it the name of “Face”.
PAGE 1 OF 8
SIMON O’DOHERTY
SUBJECT: IPHONE APPLICATION DEVELOPMENT FOR DOMINO DEVELOPERS. 4.
TUTORIAL 3
Set the properties as follows.
• Name: face
• Type: Rich Text Lite
• Limit Input:
• Only Allow: Thumbnail
• Resize Thumbnail Image, pixels: 60 / 60
• Image Attachment Name: face
PAGE 2 OF 8
SIMON O’DOHERTY
SUBJECT: IPHONE APPLICATION DEVELOPMENT FOR DOMINO DEVELOPERS. TUTORIAL 3
Populate one or more documents with extra data.
1.
Open the iPhoneAp.nsf application in the Notes Client.
2.
Select a record and double click it. This will open the document. Press CTRL-E to edit the
document.
3.
Save the form and close the designer client. Open the notes client and select a document and
add an image to it. Save and close the document.
PAGE 3 OF 8
SIMON O’DOHERTY
SUBJECT: IPHONE APPLICATION DEVELOPMENT FOR DOMINO DEVELOPERS. TUTORIAL 3
Adding the image to the iPhone application.
1.
Launch XCode and open the “Domino View 2” project.
2.
Click on “DominoViewConstants.h” and add the following lines to the existing file contents.
#define COMMAND_GETFACEFORUNID @"people/%@/$FILE/face"
#define UNIDPREFIX @"\"@unid\": "
#define COLPREFIX @"\"0\": "
3.
Click on “PersonRecord.h” and add the following code.
#import <Foundation/Foundation.h>
@interface PersonRecord : NSObject {
!
NSString* firstName;
!
NSString* lastName;
!
NSString* notes;
!
NSData* face;
// New line.
}
@property
@property
@property
@property
(nonatomic,
(nonatomic,
(nonatomic,
(nonatomic,
retain)
retain)
retain)
retain)
NSString* firstName;
NSString* lastName;
NSString* notes;
NSData* face;
// New line.
@end
4.
Click on the “PersonRecord.m” and update the synthesize line.
@synthesize firstName, lastName, notes, face;
5.
Replace the initWithData method with the following.
+ (PersonRecord*) initWithData:(NSString *) firstName :(NSString *) lastName: (NSString*)
notes: (NSData*) face {
!
PersonRecord* pr = [[[PersonRecord alloc] init] autorelease];
!
pr.firstName = firstName;
!
pr.lastName = lastName;
!
pr.notes = notes;
!
pr.face = face;
!
!
return pr;
}
6.
Update the dealloc to release the face property.
- (void)dealloc {
!
[firstName release];
!
[lastName release];
!
[notes release];
!
[face release];! !
[super dealloc];
}
PAGE 4 OF 8
// new line
SIMON O’DOHERTY
SUBJECT: IPHONE APPLICATION DEVELOPMENT FOR DOMINO DEVELOPERS. 7.
8.
TUTORIAL 3
Click on the “ViewHelper.m” and add the following lines in the getPeronsByUnid method just
before the “return pr;” line.
!
!
!
!
!
!
// Get the image.
NSString* path = SERVER_URL COMMAND_GETFACEFORUNID;
path = [NSString stringWithFormat:path, unid];
NSLog(@"%@", path);
NSURL *url = [NSURL URLWithString:path];
pr.face = [NSData dataWithContentsOfURL:url];
!
return pr;
Click on “DocumentDetailViewController.h” and add the new lines.
#import <UIKit/UIKit.h>
@interface DocumentDetailViewController : UIViewController {
!
NSString* unid;
!
IBOutlet UITextField* firstName;
!
IBOutlet UITextField* lastName;
!
IBOutlet UITextView* notes;
!
IBOutlet UIImageView* faceImage;!
!
!
// New line
}
@property
@property
@property
@property
@property
(nonatomic,
(nonatomic,
(nonatomic,
(nonatomic,
(nonatomic,
retain)
retain)
retain)
retain)
retain)
UIImageView* faceImage;!
NSString* unid;
UITextField* firstName;
UITextField* lastName;
UITextView* notes;
// New line
@end
9.
Click on “DocumentDetailViewController.m” and add the new line in the “viewWillAppear”
method.
- (void) viewWillAppear:(BOOL)animated {
!
[super viewWillAppear:animated];
!
!
PersonRecord* pr = [ViewHelper getPersonByUnid: self.unid];
!
firstName.text = pr.firstName;
!
lastName.text = pr.lastName;
!
notes.text = pr.notes;
!
!
faceImage.image = [[UIImage alloc] initWithData:pr.face]; // New line.
}
10. Add the line to release the faceImage in the dealloc method.
- (void)dealloc {
!
[faceImage release];!
!
[unid release];
!
[firstName release];
!
[lastName release];
!
[notes release];
[super dealloc];
}
PAGE 5 OF 8
// New line.
SIMON O’DOHERTY
SUBJECT: IPHONE APPLICATION DEVELOPMENT FOR DOMINO DEVELOPERS. TUTORIAL 3
11. Last you need to make a change to the JSON parser to correctly parse the UNID. Previous
tutorial it left a quote (“) on the end of the UNID. The server ignored it, but now it needs to be
removed in order to get the image. Click on the “ViewHelper.m” file and replace the methods
with the updated contents below.
/*
This will get the end of a line based on removing a supplied prefix.
(yes probably a better way to do this)
dataLine = the string to process.
prefix = The prefix string to remove.
*/
+ (NSString*) getData: (NSString*) dataLine: (NSString*) prefix {
!
int ignore = 0;
!
!
if ([prefix isEqualToString:UNIDPREFIX]) {
!
!
ignore = 2;
!
}
!
else {
!
!
ignore = 1;
!
}
!
int loc = prefix.length + 1;
!
int len = dataLine.length - loc -ignore;
!
return [dataLine substringWithRange: NSMakeRange(loc,len)];
}
/*
Converts JSON string to ViewHelper array of objects.
For Tutorial 2 the array contains a RowData object.
*/
+ (NSMutableArray*) parseJsonData: (NSString*) jsonString {
!
NSMutableArray* r = [[[NSMutableArray alloc] init] autorelease];
!
!
NSString* currentUnid;
!
NSString* currentFullName;
!
for (NSString* data in [jsonString componentsSeparatedByString:@"\n"]) {
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
}
!
}
return r;
PAGE 6 OF 8
if ([data hasPrefix:COLPREFIX]) {
!
currentFullName = [ViewHelper getData:data :COLPREFIX];
!
[r addObject: [RowData initWithData:currentUnid :currentFullName]];
}
else if ([data hasPrefix:UNIDPREFIX]) {
!
currentUnid = [ViewHelper getData:data :UNIDPREFIX];
}
SIMON O’DOHERTY
SUBJECT: IPHONE APPLICATION DEVELOPMENT FOR DOMINO DEVELOPERS. TUTORIAL 3
12. Double click the “DocumentDetailViewController.xib” file to launch the interface designer.
Add a UIImageView object to the view and set the size to 60x60 pixels. Resize other
components as required.
13. In the “DocumentDetailViewController.xib” window right click on the “File’s Owner”, then
drag the faceImage outlet to the UIImageView component.
PAGE 7 OF 8
SIMON O’DOHERTY
SUBJECT: IPHONE APPLICATION DEVELOPMENT FOR DOMINO DEVELOPERS. TUTORIAL 3
14. Save everything and then run the application. Select the document that you added the image to.
It should display.
PAGE 8 OF 8
SIMON O’DOHERTY