DaveOnCode » javascript

Debugging PhoneGap applications using Xcode console

Davide Zanotti — Tue, 12 Jan 2010 10:13:59 +0000

When I started to play whit PhoneGap, my greatest issue was: “how can I debug my code?”, I use often tools such FireBug and JavaScript debugger included in Internet Explorer 8 (which is the first good thing IE has to offers!) but write and test my code on iPhone simulator is completely different. Fortunately PhoneGap offers a way to access to Xcode console and print messages by choosing among three different levels: log, warn and error. In order to print a message, we have to use the debug object, which has scope window (it is a global object), in this way:

1
2
3
4
5

debug.log("my log message");
// or
debug.warn("my warning message");
// or
debug.error("my error message");

To open Xcode console you have to choose “Run -> Console” from the toolbar (or CMD+SHIFT+R) and after a “Build and Run” (CMD+Enter), you will see your message appear in the console.
Testing applications while developing using PhoneGap and Xcode, is an intense activity, because errors are not automatically notified (like in FireBug or similar), so it’s really important to make use of try/catch/finally blocks and logging calls:

1
2
3
4
5
6
7
8
9
10
11
12
13

try {

mycommand.execute();

} catch (e) {

debug.error("Error using mycommand: " + e.message);

} finally {

// do something smart here :^)

}

Finally, in order to avoid problems related to Xcode cache, I suggest to always clean the cache by running “Build -> Clean” from the toolbar (or CMD+SHIFT+K) before doing a new build and eventually remove the application folder under “/Users/{your-name}/Library/Application Support/iPhone Simulator/User/Applications/{app-number}”.

How to solve CSS conflicts using jQTouch

Davide Zanotti — Sat, 02 Jan 2010 16:55:40 +0000

In these days I’m developing my first iPhone application, using frameworks like PhoneGap and jQTouch. This aims to be a powerful app, not a mere widget, so I’m writing a lot of code and I’m using several libraries and components in order to create a really native-like application.
Unfortunately, due to a bad CSS approach, I faced an issue with the excellent SpinningWheel component which won’t never be displayed unless you open and modify jQTouch CSS. The fact is that, jQTouch takes the body and use it as main container to hold all application’s pages and components and by default it hides all nodes inside the body except the current displayed content (active page/section) and this is a problem, because SpinningWheel create the ui object into the body and it won’t be displayed.
Fortunately the solution is simple, we just need a wrapper, an html element which will holds all jQTouch stuff in place of body, so in my html I wrapped all inside this:

1
2
3
4
5

Then I changed all jQTouch CSS, to reflect this approach (you can see the wrapper as a sandbox):

1
2
3
4
5
6
7
8
9
10
11

div#jqtouch-wrapper > * {
-webkit-backface-visibility: hidden;
-webkit-box-sizing: border-box;
display: none;
position: absolute;
left: 0;
width: 100%;
-webkit-transform: translate3d(0,0,0) rotate(0) scale(1);
min-height: 420px !important;
}
/* ...and so on*/

…and finally I changed jQuery selectors inside JavaScript code:

1 2	$body = $('#jqtouch-wrapper'); // ...and so on

It’s also possible to solve the conflict by changing SpinningWheel code in order to put the dom node inside active jQTouch pages, but the problem of potential incompatibilities will remains. A CSS declaration, except reset statements and other rare cases, should NEVER refers directly to a whole set of nodes (ie: ul { color: red; }), but to a node type contained by a wrapper/sandbox (ie: #foo ul {color: red; }), thus conflicts will be avoided.

Google Closure’s idiocies: Ajax can’t be synchronous :(

Davide Zanotti — Thu, 31 Dec 2009 11:02:08 +0000

While I love Closure tools and the possibility to write a better organized and OOP based JavaScript, I’m facing some weakness and inexplicable choices in the library. The last discover is that is impossible to make synchronous ajax call using the provided classes, since I didn’t find nothing about synch/asynch options by reading API reference, I took a look to the source (xhrio.js), and I noticed this:

1	this.xhr_.open(method, url, true); // Always async!

that true should be a parametric value which developers can set to true or false. Why forcing it to true???
I’m really disappointed :(

“Not authorized” error due to Safari “private browsing” mode! :P

Davide Zanotti — Sun, 27 Dec 2009 14:26:56 +0000

This is just a quick post to share my misadventure with Safari and the “private
browsing” mode. I’m working on a small JavaScript library which has the goal to abstract SQLite database api and allow users to create table, insert, update and delete
records easily… my code seems to work very well, but this morning during some
tests, I got the “not authorized” exception (error code n°1) on every
transaction. After hours of debugging I realized that my code was ok, but I forgot
to disable the “private browsing” mode in Safari!
So, bear in mind, if you want to play with database api and other client-related store capabilities (such cookies), remember to disable that option in Safari ;)

Extending Eclipse using JavaScript and Monkey Script engine

Davide Zanotti — Wed, 16 Dec 2009 16:20:50 +0000

I was wondering how to wrap a string with quotes in Eclipse by using a shortcut, then I realized that there is not such command, so I started thinking for a solution and initially I created an Aptana’s snippet, but I was not satisfied, because I want to have an handy shortcut to invoke my snippet. By googling, I discovered Eclipse Monkey Script engine, that is an extremely powerful tool for every JavaScript developer who wants to extend Eclipse features by writing few lines of JavaScript code. In order to use the js engine, you must have the package org.eclipse.eclipsemonkey (which is installed by default by Aptana) installed. Unfortunately I can’t find a complete and exhaustive reference for this project, which seems forgotten by authors, so I learnt what I know reading different posts.
Basically, Monkey Script allow developers to access editor’s instance, get selected test, get document content, edit it and update it. Moreover is possible to print text to consol, read and create files on the filesystem… and finally the scripts created will be accessible from Eclipse menu (under “Scripts”) and invokable through user defined shortcut… really nice!
So, backing to my experiment, I created this monkey script:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

/*
* Key: M1+M2+C
* Menu: Custom Scripts > Wrap with double quotes
* DOM: http://download.eclipse.org/technology/dash/update/org.eclipse.eclipsemonkey.lang.javascript
* Kudos: Davide Zanotti
*/
function main() {

// no editor... exit
if (typeof editors.activeEditor == "undefined") {

return alert("No active editor");

}

// get a reference to the editor in use
var editor = editors.activeEditor;

// beginning of text selection
var startOffset = editor.selectionRange.startingOffset;

// end of text selection
var endOffset = editor.selectionRange.endingOffset;

// selected text
var selection = editor.source.substring(startOffset, endOffset);

try {

// surround selection with quotes
editor.applyEdit(startOffset, endOffset - startOffset, '"' + selection + '"');

} catch (e) {

alert("Error " + e.code + ": " + e.message);

}

};

It’s important to notice some points, first you MUST write an “header” using the comment syntax “/* */” into which you MUST declare at least 2 parameter: the “Menu” path (you can nest several menu items by writing several “>”) and the “DOM” package (which allows you to access specific objects like “editors“). You can write several js functions, but you must provide a main() function, which is called automatically by Eclipse once you launch your script, otherwise you can call the main function as you like but you must then provide the “OnLoad” param in the header, specifying which function will be called.
To define a shortcut you can use the “Key” parameter and define your own keys combination by choosing among the four modifiers: M1, M2, M3, M4, that are a platform-independent way of representing keys (these stand for ALT, COMMAND, CTRL, and SHIFT). The strange (at least to me) parameter “Kudos” is used to declare the author of the monkey script.
To test my little script or create your own, you have simply to create a new project into Eclipse by calling it as you like (ie: “custom-extensions”), then create a “scripts” folder into which you will save your .js files… that’s all, try yourself and enjoy :)

This is how it looks:

eclipse monkey script menu

ps: I’m going to explore the Monkey Script API in order to write more complex and useful extensions :P