Cocos2D & CocosBuilder - tools for building a great iOS user experience

I have used cocos2d-iphone for apps that need a game-like feel, those apps where good ole' Cocoa Touch felt a little too utilitarian. Recently I discovered, downloaded, and tried out CocosBuilder (http://www.cocosbuilder.com) and I've got to say I'm really pleased. It would have been a big help for some of those past projects that use cocos2d-iphone.

I've been playing around with it for a couple of days & have decided that I need to put it to use in a project. It seems to be a great tool for building unique user interfaces for iOS apps. It appears to also support Android, and desktop applications, but for my first project or two I think I'm going to focus on using it for iOS.

I'll post my experiences as I put together a project using CocosBuilder, but as this is a pet project updates may be a little slow at times.

The tool does seem to either be missing some features, or have them well hidden. The item that comes to mind immediately is the ability to add screen sizes to a project after the project has been created (you choose screen sizes when you create the project, but I didn't see any way to add or remove screen sizes later.)

Picking up Node.js

Over the last 6 to 9 months I've started playing around with Node.js. Node.js has often been described as "server-side" but really it's about using a javascript engine in all the places you might want to use Javascript, but don't want the browser.

Node is CommonJS implementation. You can run code server-side, you can make command-line tools, I'm sure there is other stuff you can do with it too.

A good place to start learning Node is The Node Beginner Book at least for me it was a great starting point.

Stop the Android "bounce" on Cordova (PhoneGap) based projects

Jeremy asked how to stop the bounce on android projects that use the WebView.

What you need to do is add a little bit of code to your Java class that extends DroidGap.

First, add an import for adroid.view.View:

import android.view.View;

Then, you need to make a call to 'setOverScrollMode' - however this call is only available on android 2.3 (gingerbread) and later.
Note, you'll want to add this to the end of the onCreate method, after the call to super.onCreate

if(android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.GINGERBREAD) {
  this.appView.setOverScrollMode(View.OVER_SCROLL_NEVER);
}

And that should stop "OverScroll" or bounce & the associated highlighting you see.

Simple command line tool via Node.js

Here is the gist of a little script I wrote recently:

concat.js

It runs on Node, so you'll need that, and npm of course (which installs with Node), you'll also note that you'll need commander, you can ge that by running:

npm instal commander

Once you've got that installed you can use the following to get the usage information:

node concat.js

Which will return

 Usage: concat.js [options]

  Options:

    -h, --help                output usage information
    -V, --version             output the version number
    -f, --filelist [txtfile]  use an input file with a comma separated list of files to concat
    -s, --files [files]       specify the files to concat in the option
    -d, --dest [dest]         the destination file

So, it's a little script that will take a list of javascript files & concatenate them together. You can provide the list either in a text file or on the command line, and in either case it's a comma separated list of filenames.

References:
Inspiration: blog.millermedeiros.com
Node.js: Node.js
Commander.js: on github

--amend : Another reason I like Git

Once upon a time...

I worked in an office on a large development team that used a centralized source control management (SCM) system. One of the amusing check-ins you would inevitably see from time to time would be the "file I forgot to add" check-ins.

It happened like this: You made a significant change, played with one or two different solutions, did some refactoring, and came up with a significant change, and along the way you added some files. Sometimes you would remember to let the SCM system know they were added, other times you would forget & shortly after you checked in (if you were lucky enough to catch it yourself) or some time the next day (when the poor sap who had "build duty" caught you) you had to check in that last file. It was an additional checkin, and had a comment like:

"Woops, forgot this file with change #####".

Of course if anybody else wanted your change, or later wanted to roll back to a that change, they needed 2 "changelists" to identify what should have been a single point in the repository history; and they needed to know they needed both changes. It was pretty rare that it created any real problems, but I prefer the git way.

Git has a wonderful set of features around the commit keyword for fixing these mistakes. You can actually undo, redo, pick apart and merge changes that have been committed. With git you can have a much cleaner history of changes.

Upon having commited (but not pushed) a change and realizing I need to fix it I can just make and add whatever changes and then perform a:

git commit --amend

It's even possible to change older commits, provided you haven't pushed them to a shared repository, but that's out of scope for today. (You would use rebase to get to the commit you want to change.)

It's important to note that you should not try to amend a change that has been pushed to a shared repository. Git normally won't let you do this and if you force your way around it the change becomes a different change (the hash changes, even if you change just the message) and then you can have two sets of "reality" or "history" in different repositories. You're basically changing things that "can't" or "shouldn't" be changed in the repository history... and then even The Doctor won't be able to save you from your collaborators.

Ok, so --amend only helps when you catch the mistake yourself, still, a nice thing to have in the tool-chest.

New favorite git feature.

While I'm a relatively new user of git, I'm certainly getting used to it and it's way of doing things. While it's not perfect, it is much better than some of the alternatives for SCM.

So, my new favorite feature?

git stash

Say I'm working on a long running, low-priority change for a client, when they call with something more urgent. Stash let's me do just that, stash all my current changes that haven't been commited, and work on the new requirement. Once I'm done and the client has signed off on the high-priority item, I can jump right back into the low-priority task via 'git stash pop'<br/><br/>
Certainly I could do the same thing via a branch, but stash is a lot simpler and quicker.

Stop the UIWebView bounce for Cordova based projects.

For every Cordova (PhoneGap) app that I've created for iOS, I've wanted to prevent the UIWebView from bouncing. There's two potential solutions, one is a setting in the plist, and the second is a change to the objective-c code.

For PhoneGap 1.5.0 and later the best solution is to set "UIWebViewBounce" to "NO" in the PhoneGap.plist/Cordova.plist file (which file you have depends on which version of the SDK you are using.) In the 'Root' of the plist file, look for "UIWebViewBounce", and set it to "NO" or "false" (If it's missing, go ahead and add it to the plist file.)

UIWebViewBounce  NO

For versions previous to 1.5 and native projects that are using the UIWebView, you would need to make a change to the Objective-C in the project.
The solution is to send the setBounces:NO message. You'll need to change the MainViewController.m (or AppDelegate.m file in older versions of Cordova/Callback/PhoneGap).

Look for webViewDidFinishLoad, and within that method add the following line:

[[theWebView.subviews objectAtIndex:0] setBounces:NO];

Note, that I've seen suggestions that the following Javascript would work:

document.onload = function(){
    document.ontouchmove = function(e){ e.preventDefault(); }
};

This doesn't work because the bounce occurs before the document.ontouchmove event is fired.