Blogs

So if you want to make an iPhone app using your HTML/CSS/JavaScript skills, what do you use? PhoneGap! obviously.

If you want to add some iPhone native controls, screens, whatever… PhoneGap Plug-ins seem like a fairly easy path, even though they are still largely undocumented, and unknown to most, at least they are somewhat planned.

But what if you have a native iPhone app already, and you want to quickly throw in some phonegap. Before today, there was no easy way to do this because phonegap for iPhone was architected to be the one and only Application delegate. This is the newest use case I have chosen to address.

This approach of breaking PhoneGap functionality into it’s own control space makes some exciting new things possible in the near future. Including:

• Multiple page / view apps where the views are persistent ( instead of having to reload or navigate between pages )
• Sandboxed child apps
• The ability to divide work among multiple developers, without having to constantly keep track of other’s changes.
• Better division of responsibility within code modules ( divide and conquer methodologies ).
• Drop-in functionality, for code libraries, add them to your app more easily, and build up your control library over time.

Introducing Cleavage for iPhone.

First off, you may be wondering about the name. I wanted to stick with the ‘gap’ theme so I started brainstorming on other types of gaps.

At first I considered Diastema as it has a nice ring to it. After thinking on that for awhile I decided it would be best not to alienate phonegap developers as we are predominantly Madonna, Letterman, and Mad Magazine fans. ( What, me worry?)

Other Gaps I considered were :

• Rift - too sci-fi
• Gape - um, too close to Gap
• Fissure - too literal, and weird …
• cavity, chasm, crack, … - just not it

So cleavage it is! .. and given it’s current state it is very much as Jerry Seinfeld says.

“Looking at cleavage is like looking at the sun. You can’t stare at it long, it’s too risky. You get a sense of it then you look away.”

Please keep in mind that this is very much a work in progress, but expect some updates in the near future.

I have posted the PhoneGap control sample app to: http://github.com/purplecabbage/cleavage

Documentation and such to follow later in the week, I hope, here is a quick getting started description.

In order to use this in your own ( pre-existing ) iPhone OS project, you will need to:

1. add all PhoneGap required frameworks to your project ( the sample project has them all )
2. add a reference to PhoneGapLib ( you will need the latest checked in version )
3. place your html/js/css in a www folder in the project and be sure it is packaged in the root of your app when built
4. include phonegap.js from PhoneGapLib, as it is not auto-copied over for you like it is in a typical phonegap iPhone app.
5. set linker flags for -all_load and -ObjC

Yesterday I made a quick update to a previous blog post. I will go into a little more depth here as some folks mis-understood that this was a new topic because it was part of the older post.

Recent changes to the Apple iPhone SDK developer license agreement have been a hot topic over the last week. There has been much speculation over how far reaching the 3.3.1 clause of the agreement is, not to mention the business strategy behind it. I will not join that conversation, but I will speak of what I have learned with regards to the impact on PhoneGap (iPhone/iPad).

Through email discussions with Apple, I specifically asked what, if any, impact did this have on present/future applications submitted to the App store that were built using PhoneGap. In no uncertain terms, my contacts at Apple have assured me that “PhoneGap is not in violation of the 3.3.1 clause of the license agreement.”

How this affects other tool-chains like Appcelerator, Flash CS5, Corona, MonoTouch, … I have absolutely no idea. All I can say is that PhoneGap is okay.

I will post updated information if I receive it, I have done a few other things to test the waters. Yesterday I submitted my iPhone PhoneGap Tutorial application to the App Store, I will post info here when/if it is approved ( although it may be rejecting for offering insufficient functionality, as it is a tutorial ).

The tutorial source code is available here: http://bit.ly/Jestitute

Okay, in your phonegap application in XCode, ( Without EVER having to touch the PhoneGapLib )

1) right click the plugins folder and select Add/NewFile/ObjectiveCClass
2) Call your new class : TestPlug
3) Paste the following code into the .m + .h files:

In your header file :


#import <Foundation/Foundation.h>
#import "PhoneGapCommand.h"
@interface TestPlug : PhoneGapCommand {
}
- (void)addThemUp:(NSMutableArray*)arguments withDict:(NSMutableDictionary*)options;
@end


… and in the .m file


#import "TestPlug.h"
@implementation TestPlug
- (void)addThemUp:(NSMutableArray*)arguments withDict:(NSMutableDictionary*)options
{
NSUInteger argc = [arguments count];
int total = 0;
for(int n = 0; n < argc; n++)
{
total += [[ arguments objectAtIndex:n] intValue];
}
NSString* retStr = [ NSString stringWithFormat:@"alert(\"%d\");",total];
[ webView stringByEvaluatingJavaScriptFromString:retStr ];
}
@end


4) In your JS code, somewhere after deviceready, call your command like this.


PhoneGap.exec("TestPlug.addThemUp",1,2,3,4);

Build and run!

Note the structure of the PhoneGap.exec call
1) a command name : TestPlug
2) a method name : addThemUp
3) a variable length list of arguments

Next time, I'll get into passing objects via the 'options' object.

If you have a compelling plug-in you want to share, you can fork my repo for plugins and send me a pull request :

http://github.com/purplecabbage/PhoneGap-Plugins

If your plugin makes sense on multiple devices, and it is implemented with standards in mind, it may end up in PhoneGapLib.