Cocoa
In this post I will be showing how web developers can take their webapps and “transforming” them into full fledged iPhone apps with Phonegap.
Well lets get started. Firstly you are going to need two things:
1. Phonegap
2. My modified JQTouch Todo example demo
Once both of those files are downloaded. Open the Phonegap folder, once inside, open the the “iPhone” folder. You should see this:
Open the “www” folder and delete everything in there. Now drag and and drop all the files in the “webstuff” folder into the “www” folder. Open the Xcode file and you should see this:
Now if you “Build and Go” you will have a full fledged native iPhone app made just with HTML and Javascript. Here is what you get:
Now this is just one example of what you could do. If you are a web developer and you already have a webapp out there that you would like to make into an iPhone app, this makes it simple to port anything you have made. You can even submit these to Apple to be put on the App Store.
If you really want to get a full release out, there are a few extra steps you are going to need to take. First, replace the Default.png and icon.png. The Default.png is the “splash screen” picture, by default it says “Phonegap” and the icon.png file is (obviously) the icon picture.
Lastly, when porting a webapp, website, or anything, you want to have a nice clean UI. So I recommend using JQTouch, iUI, or iWebKit to give your app a nice iPhone-ish finish.
If there is anything you think should be added to this article or any thing you want to say, leave it in the comment section.
~Jeremy
I ran across this website today. It’s a great website full of questions and answers about how to fix random any EXC_BAD_ACCESS problem for Cocoa or Cocoa Touch. It is still in beta, but give it a little time and it will turn into a beuty.
The HUD windows that Apple supplied developers with is a semi-transparent black window, but what if you want it to be white? To create this, thanks to Matt Gemmell, it is going to be very easy. Here is a screenshot:

Lets get started. For this you are only going to need one thing, Matt Gemmell’s HUDWindow.
Here is how to get it.
- Open Terminal
- Type “cd Desktop/” (no speech quotes)
- Type “wget http://mattgemmell.com/files/source/hudwindow.tgz” (no speech quotes (you can copy and paste this))
Now you should see a folder on your Desktop called “HUDWindow.” Open it, then open the Xcode project file.
Now go to line 127 of HUDWindow.m, you will see a the “[NSColor colorWithCalabratedWhite...] code. Delete that entire line and replace it with:
[[NSColor colorWithCalibratedRed:5.0 green:150.0 blue:15.0 alpha:0.5] set];
Now go to line 157 of HUDWindow.m and you will see this line:
NSColor *titlebarColor = [NSColor colorWithCalibratedWhite....
Delete that line and replace it with:
NSColor *titlebarColor = [NSColor colorWithCalibratedRed:5.0 green:150.0 blue:15.0 alpha:alpha];
Now we have to change the color of the text on the window to black so you read the text.
So, go to line 169 of HUDWindow.m and change:
[NSColor whiteColor]
To:
[NSColor blackColor]
This will change the Title Bar color to black. Now we need to change the color of the text on the window.
Now we need to go to line 36 of AppController.m and change
[textField setTextColor:[NSColor whiteColor]];
To:
[textField setTextColor:[NSColor blackColor]];
And we are done, you now have a white HUDWindow. Be sure to swing by http://mattgemmell.com/.
~Jeremy
In this post I will show you how to make a “Tweeter.” A Tweeter is a simple app that will just send a tweet to your twitter account. Lets get started
What you are going to need:
-Xcode
-MGTwitterEngine
-A Twitter account
Step 1:
Open the MGTwitterEngine project, then open AppController.m.
In the “awakeFromNib” method you will see
NSString *username = @"";
NSString *password = @"";
In between the quotes in the first line put your user name, and in between the quotes in the second line put your password. Now “Build and Run” just to check if everything is working. If there are no errors, move on to Step 2, if there are, make sure you entered your user name and password correctly and that you are connected to the internet.
Step 2:
Open the MainMenu.nib and create a new window. Now add a Wrapping Text Field and a button. I laid mine out like this:

Step 3:
Open AppController.h and add an IBOutlet for your text field. Where you see:
MGTwitterEngine *twitterEngine;
Under that add:
IBOutlet NSTextField *tweetMessage;
Now underneath the “}” add:
-(IBAction)sendTweet:(id)sender;
Step 4:
Re-open AppController.m and add a new method called sendTweet. In this method, you will tell the app to take what you have written in the text field and send it to your twitter account. To do this add:
(IBAction)sendTweet:(id)sender{
[twitterEngine sendUpdate:[tweetMessage stringValue]];
}
Step 5:
Re-open the MainMenu.nib and make all the connections from the AppController object to the window. Save, and close.
Step 6:
Open MGTwitterEngine.m and find this line:
#define DEFAULT_CLIENT_NAME @"MGTwitterEngine"
and change it to:
#define DEFAULT_CLIENT_NAME @"Tweeter"
This will make it so that it will show that your tweet was updated from Tweeter and not MGTwitterEngine.
Step 7:
Find this line:
#define DEFAULT_CLIENT_URL @"http://mattgemmell.com/source"
and change it to:
#define DEFAULT_CLIENT_URL @"http://www.pointlessprogrammers.com"
This will make it so when people click on “Tweeter” it will direct them to this so they can make their own.
Step 8:
Build and Run. Make sure everything is working correctly. If not, go over all the steps again.
Conclusion:
This is a very simple and quick way to make a Tweeter. It is not the best looking app, so go ahead and make any changes you want. You could make it cool looking with my Cocoa Aero guide, or add a counter to make sure you do not go over 140 characters. The possibilities are endless. I’d like to see what you guys come up with so send me a project file (so I know it is legit) with what you have done at jeremy@pointlessprogrammers.com and I’ll feature my favorite one. I will include your website (if you have one) and any other contact info you would like, just be sure to include it in the email.
~Jeremy
My fellow Big Nerd Ranch-er George Starcher has made an excellent tutorial on creating Pixelmator, iChat, and Photobooth plugins using the Quartz Composer. Check it out.
https://www.georgestarcher.com/?p=254
My good buddy Alex showed me this gem. This is a complete coverflow class inside an NSTableView. Here is the download.
Sure, you can drag and drop a button onto your windows using IB, but they do not look nice, nor is that as much fun as doing it from scratch.
Using the loadView method we will load fancy background by loading a nice image. But first we need to declare some variables. In the viewController.h file we need to set up our contentView.
UIImageView *contentView;
Now in our viewController.m file we will set up our window inside the loadView method.
contentView = [[UIImageView alloc] initWithFrame:[[UIScreen mainScreen] applicationFrame]];
[contentView setImage:[UIImage imageNamed:@"image.jpg"]];
[contentView setUserInteractionEnabled:YES];
self.view = contentView;
[contentView release];
Now that our windows is all nice and pretty, we can add our button(s). For the purpose of this tutorial, we will be making one button in the center of the window.
Now, lets create the button.
UIButton *startButton = [[UIButton alloc] initWithFrame:CGRectMake(0.0f, 0.0f, 180.0f, 130.0f)];
Now we can add an image as the background of the button
[startButton setBackgroundImage:[[UIImage imageNamed:@"squareButton.png"] stretchableImageWithLeftCapWidth:110.0 topCapHeight:0.0] forState:UIControlStateNormal];
Now lets center our button
[startButton setCenter:CGPointMake(195.0f, 208.0f)];
Then you need to add the button to the view
[contentView addSubview:startButton];
So, there we go, a nice looking button, well depending on your photoshop skills. So your loadView should look like this:
- (void)viewDidLoad {
contentView = [[UIImageView alloc] initWithFrame:[[UIScreen mainScreen] applicationFrame]];
[contentView setImage:[UIImage imageNamed:@"284.jpg"]];
[contentView setUserInteractionEnabled:YES];
self.view = contentView;
[contentView release];
UIButton *startButton = [[UIButton alloc] initWithFrame:CGRectMake(0.0f, 0.0f, 180.0f, 130.0f)];
[startButton setBackgroundImage:[[UIImage imageNamed:@"squareButton.png"] stretchableImageWithLeftCapWidth:110.0 topCapHeight:0.0] forState:UIControlStateNormal];
[startButton setCenter:CGPointMake(195.0f, 208.0f)];
[startButton addTarget:self action:@selector(playSound:) forControlEvents:UIControlEventTouchUpInside];
[contentView addSubview:startButton];
[super viewDidLoad];
}
Hope you enjoyed
~Jeremy
I came across this little gem at about 1am. Thanks to Matt Ball, this takes an NSView and NSControl to make this cool spreadsheet…. thing…
Anyway, here is the Link
Lets say you have a program that needs to run something and you don’t want the user to keep clicking and clicking and clicking because the program will crash if that happens, well here is the answer to your problems:
[buttonName setTitle:@"Running..."];
[buttonName setEnabled:NO];
//code goes here
[buttonName setTitle:@"Original Title"];
[buttonName setEnabled:YES];
Aleksander Grande wrote this amazing guide that steps you through everything from IB to the code. I wish this was around when I started programming for the iPhone.

