Saturday, January 30, 2010

Citizen Reporter Plug-in for TapLynx

[Update 3/16/2010: I'm sorry, I had the comment notifications going to a bad email address, so I missed the comments that were made. I've corrected the problem and will now make some changes and updates to the plug in]

In addition to being a really easy framework to use to make an iPhone app, TapLynx lets you extend the framework by adding your own view controllers. I've created a little view controller that lets a TapLynx app offer the user a quick way to snap a photo and then email it to someone without ever leaving the TapLynx based application.

If you ever want to create an RSS based application you should definitely check out the TapLynx framework. The framework is designed to be used by people with limited coding experience and is controlled by making configuration changes to a .plist file. If you have a list of RSS feeds and a couple of images, you can have an app compiled and ready to submit to the App store in under an hour. Really.

The Citizen Reporter plug in simply presents the user with a screen that looks like the one in this screen shot.
I made the view in Interface Builder so that you can have a GUI way to change the look and the language. Please feel free to use this or to encourage me
to make changes and fixes. Also, if you have questions on the code, I'm happy to answer and explain what I've done. You can modify the colors and such on the .xib to fit your scheme better, I don't think it will break anything unless you delete one of the buttons or the little thumbnail I added.

TapLynx can work with any view controller as long as the view controller is more or less self contained and as long as the view controller uses an init method like this one:

#pragma mark Initialize for TapLynx

-(id)initWithTabInfo:(NSDictionary *)tabInfo topLevelTab:(NSDictionary *)topLevelTab {

return [self initWithNibName:nil bundle:nil];


You hook the view controller to the main TapLynx project by adding a regular tab entry to the NGConfig.plist. Here is a screen shot of how I added a view controller called "CitizenReporterReporterViewController" and a little camera.png file to use on the tab.

The ViewController itself is just calling the image picker and the email composer that are already built into the iPhone OS 3. The view controller is already configured to sit within
TapLynx as one of the tabs. When the user goes to that tab, it asks
them to first get a picture from their camera or photo album and then
email the picture to an address you choose with an option for them to
add a note. It leverages the build in Image Picker and Mail Composer
controllers in iPhone OS3. I know that it would be more professional to actually have some server side thing to get the picture, but I figured this is a good first step. Besides, there are millions of server configurations and TapLynx is aimed a people who don't necessarily have servers to store the photos and messages.

There is one place in the code where you need to make some changes. I went ahead and moved the strings you will need for the "to", "subject" and "body" parts of the email into some string constants. At the top of the CitizenReporterViewController.m file you will want to change the string to be something more meaningful (and the email address to be the email address where you want the pictures to be sent).

#pragma mark Constants

static NSString * const kSendTo = @"";

static NSString * const kSubject = @"Subject of the Email";

static NSString * const kBody = @"Body of the Email";

Find the code shown above and make your changes. It is important to ensure that the at sign and the quote marks stay where they are and that you just change what's in the middle.

The zip Archive contains 3 files, you need to add the CitizenReporterViewController.h, .m and .xib to your project. Additionally, you will need to configure the NGConfig in your project
to have a new tab with a Title, ShortTitle, TabImageName and a customViewControllerClass entry. The customViewControllerClass should be a String and it's value should be CitizenReporterViewController. The files can be in any part of the XCode project file structure, but Classes, Other Resources, Resources are probably the most common. I wouldn't put them in Frameworks or somewhere like that. The archive is stored at the Tyree.apps website and you can get it from this link.


Kevin Read said...

XLNT stuff Walter - many thanks.

I've added a dialog box to confirm that the email was sent successfully to the user. Code below:

In CitizenReporterViewController.m

case MFMailComposeResultSent:
NSLog(@"Result: sent");
// START display sent notification
UIAlertView *sentEmailAlert=[[UIAlertView alloc]initWithTitle:@"Message Sent" message:@"Thanks, your message was sent and will posted soon." delegate:nil cancelButtonTitle:@"OK" otherButtonTitles:nil];
[openURLAlert show];
[openURLAlert release];
// END display sent notification


Teemu said...

Could you also develop HTTP POST feature to this plugin so images could be send to some API?

Walter said...

@Teemu I can develop and HTTP POST feature but then the recipient needs to have a website. For this first version, I stayed away from that because I was trying to minimize complexity in order to stay true to the TapLynx idea that using their framework would cause you to need minimal programming skills.

donn said...

Hey Walter, have you tried the plugin with the iPad version? About to give it a try.

donn said...

mucking around with the code i don't understand:
1) got APP to build for the iPad with plugin added, but only the header name for the tab is displaying (i put the entire Citizen reporter folder in resources folder ... is that ok?)
2) I inserted the Case Kevin Read added but had to comment out
// [openURLAlert show];
// [openURLAlert release];
to get it to build

Walter said...

I was working on something else but planning to update the instructions and plug in this weekend. I will keep you posted

cezar said...

i am trying to get the dialog box with confirmation of email sent but can't it working with the latest taplynx version? can someone post the exact code and line where it should be added?

many thanks,

Walter said...

I have updated the github repository to incorporate Kevin's code for the alert.

cezar said...

awesome. thanks.
i suppose it only works on real device not iOS simulator.

Walter said...

The simulator does not contain so it doesn't have any thing to send mail with. That is why I added the alert that says "Your phone is not configured to send emails" when you run on the simulator.

cezar said...

i suppose you saw that in the new SDK, allowsImageEditing is mentioned as deprecated. can you tell me the implications of this? do i need to change anything?


cezar said...

i think i got it updated.
i changed allowsImageEditing with allowsEditing which i found as the new function:
it works but maybe you want to double check. i'm a newbie here :)


Walter said...

You just need to be careful with allowsEditing. It is a iOS 3.1 function and the base build of any default TapLynx project is iOS 3.0. This means it would crash on those machines.

If you are going to make the change, make sure you update the build settings in XCode to have your iOS Deployment Target set for 3.1 instead of iOS 3.0.

I will flag this part of the code to do a system version check. Thank you for the note.

Post a Comment