JSCocoa interactive console for iPhone

日本語版もあります。

I’ve been struggling with transform property of UIView for long time. at last, I’ve decided to create UIMonkey that allows to manipulate the variables by trial and error through HTTP in Javascript with SpiderMonkey. Few days after I’ve started the project, I found JSCocoa via John Resig – JavaScript iPhone Apps. I abandoned my project and rewrited my codes on JSCocoa.

Now it works on the top of JSCocoa. It’s very helpful especially for inspecting the hierarchy of the view tree or size of the views etc.

How to setup

Follow the steps below to setup JSCocoa interactive console.

Copy the files

First of all, you need to check out JSCocoa files.

svn checkout http://jscocoa.googlecode.com/svn/trunk/ jscocoa-read-only

After checking out complete, copy all of files existing under jscocoa-read-only/JSCocoa/JSCocoa and import them into your project.

I got into trouble on importing class.js. XCode take it as an source file which is need to be compiled while I want to treat it as a simple resource file. I solved this problem by renaing it as class.gif, import it to the project, and rename it again as class.js(please tell me the right way to do that if you know).

In addition to JSCocoa files, you need some files for the console. Please download and import them to your project. Httpd.m, Httpd.h, console.html.
Please remember to
console.html add to the list of Copy Bundle Reesources to ensure the files is copied into your aplication binary file.

Add header files to *_Prefix.pch

JSCocoa requires some header files.
Open your *_Prefix.pch file and add some lines below.

#define USE_JSCOCOA 1

#if USE_JSCOCOA
  #define JSCocoa_iPhone
  #include "JavascriptCore.h"
#endif

Of course, you can define USE_JSCOCOA in the project settings instead of hard coding in the pre-compiled header.

Add some codes to your main.m

Initializing JSCocoa in the same way that of iPhoneTest2 which is distributed with JSCocoa.
Class Httpd is a so-called http server which is implemented in Httpd.m and Httpd.h.

#if USE_JSCOCOA
	// Fetch JS symbols
	[JSCocoaSymbolFetcher populateJavascriptCoreSymbols];
	
	// Load iPhone bridgeSupport
	[[BridgeSupportController sharedController] loadBridgeSupport:[NSString stringWithFormat:@"%@/iPhone.bridgeSupport", [[NSBundle mainBundle] bundlePath]]];
	// Load js class kit
	id c = [JSCocoaController sharedController];
	[c evalJSFile:[NSString stringWithFormat:@"%@/class.js", [[NSBundle mainBundle] bundlePath]]];

	[[[Httpd alloc] initWithPort:38880] autorelease];
#endif	

Add libffi

JSCocoa using libffi to call Objective-C functions.
OPen your project settings and add -lffi to Other linker flags.

Add CGAffineTransform(If you need)

iPhone.bridgesupport which defines the structures used by only iPhone SDK. If you want to manipulate CGAffineTransform through JSCocoa, add the difinition of CGAffineTransform to the file.

iPhone.bridgesupport is a XML file, but it’s too annoying to write it by hand. You have to separate the members with ". I think it would be nice to generate the file in machine-friendly format to decrease the run-time CPU cost or to make it more human-friendly format to allow humans to write it by hand easily.

Add this definition below to around the next line of that defines CGSize.

<struct name='CGAffineTransform' type='{CGAffineTransform=&quot;a&quot;f&quot;b&quot;f&quot;c&quot;f&quot;d&quot;f&quot;tx&quot;f&quot;ty&quot;f}'
type64='{CGAffineTransform=&quot;a&quot;d&quot;b&quot;d&quot;c&quot;d&quot;d&quot;d&quot;tx&quot;d&quot;ty&quot;d}' />

Connect to JSCocoa through browser

Just launching your application in the iPhone simulator and now you can connect to JSCocoa which resides in it.
Open http://localhost:38880/ and you can send any javascript code to manipulate your application through JSCocoa at any time.

I’ll show you some tests with iview and a photo from Life magazne.

original

JSCocoa allows you to access Objective-C classes and methods. So you can access the objects in your iPhone application through UIApplication.sharedApplication.

Now change the alpha value of the main window.

alpha=0.2alpha=0.2

the background of the main window become transparent and the screen gets black(because background color is black).

Streching Y-axis three times and moving by 100pxices.

transformtransform

Writing in Objective-C consumes huge amount of time that using the classes you are not familiar with, adjusting animation parameters and so on. Bacause it have to be compiled. But with JSCocoa, You don’t need to compiled it, and you can bedone it thorugh trial and error without recompile. It’s very nice.

View Tree Walk

takuma104(who is a developper of Natsu Lion for iPhone that is a swift, neat, open-source twitter client) said on twitter,

iPhoneにWindowsでいうSpy++みたいなのがほしい。viewの階層構造がわかるやつ。
Twitter / takuma mori: iPhoneにWindowsでいうSpy++みたいな …

It means “I need a tool for iPhone like Spy++ of Windows. Shows me hierarchy of the views”.

I remember the tweet and write small code that enumerates all views from UIApplication.sharedApplication.subviews. You can see the geometric values through Firebug console by clicking the inspect view tree link. I think its more useful if it reconstructs the hierarchy in the same visual HTML elements(but not implemented at this time).

My impression of JSCocoa

JSCocoa is very useful After I got familiar with some weird behaviours like that javascript array object which is auto translated from NSArray by JSCocoa does not have length.

and if you unfortunately have get used to SpiderMonkey like me, it makes hard javascript coding on JSCocoa which is based on JavaScriptCore of WebKit that does not have uneval, E4X, destructuring assignment and so on.
yes, i know its not JSCocoa’s fault. it’s my fault who get used to the features only in SpiderMonkey =)

Great thanks for people behind JSCocoa.


About this entry