Part Two: Nuts And Bolts
Here in the second part of DIY with P4JsApi, I’ll dig in and show you how I used P4JsApi, point out some helpful tools, and also point out some things that tripped me up. First up: How do I debug this stuff? Onward!
Debugging: WebKit’s Web Inspector Is Your Friend
Once this is in place, the next time you fire up your applet you’ll be able to right-click or control-click and see the following context menu:
Clicking on Inspect will launch the Web Inspector; take some time to poke around the toolbar to get a feel for what it can do. To set breakpoints in your code, you’ll need to choose the file that you want to debug; click the Scripts tool button, then select your file from a list of files just beneath the button:
Now you’ll be able to set breakpoints, just like with a real programming tool. You’ll also get to see the call stack and step through your code. I found the tool to be a bit awkward, but hey, it’s better than relying on alert boxes for everything. Once you’re done debugging (hah!), just comment out the call to setWebkitDevelopersExtrasEnabled.
Talking To The Server
P4JsApi.p4("user -o " + user, EmailCallback);
var emailAddress = arguments.data.Email;
//do something interesting with emailAddress here…
Very simple, and there are a couple of interesting bits that are worth talking about. First, about that “EmailCallback”: this is telling P4JsApi where to send the data once it retrieves it. This happens asynchronously, and it’s very handy if your doing some fancy drawing and you don’t want your drawing code to stop and wait for the server to respond. Since even a tiny hesitation is noticeable when drawing, waiting for the data on a separate thread is a big win.
By the way, if you don’t need your function to be asynchronous, you can skip the arguments array and do something like this:
var myUser = P4JsApi.p4("user -o " + user);
//do something interesting with myUser here…
I tend to use the asynchronous callback method wherever possible though; you just never know how long that round trip to the server is going to take, and you want to keep your applet responsive; using an asynchronous callback function will keep it from stumbling around like a zombie (and not one of those fast zombies from 28 Days Later either).
Dead ends, Pitfalls, and Opportunities
When I first started this project, I knew I wanted to do my own drawing, but I figured I should at least try to use some canned charts. So I dutifully checked out Google’s visualization API at http://code.google.com/apis/visualization/interactive_charts.html. They make some beautiful stuff, but the charts have a couple issues that made them unsuitable for my purposes: first, they weren’t flexible enough; I couldn’t access the colors of individual bars in a bar chart, something that was essential to my design. Second, some of the charts use Flash, which doesn’t work in the P4 clients. I was actually happy when these shortcomings showed up, because it was all the excuse I needed to do my own drawing (and to explain to my boss why I was re-inventing the wheel).
Another blind alley was my initial approach to drawing the animated bars; I was getting a lot of flickering, so I decided to use blitting, a technique that game developers use that involves drawing your graphic elements offscreen, then swapping the offscreen elements with the onscreen elements. In the end, this effort turned out to be unnecessary. Remember above where I wrote about the roundtrip to the server slowing down your drawing? As soon as I figured out the asynchronous callback approach, my flickering magically went away and I was able to go back to drawing straight to the onscreen canvas. Canvas is pretty fast!
My last pitfall/warning is actually more of a potential for optimization. After I finished the majority of the coding, I went back and read the JQuery docs again and found out about their dialogs (http://jqueryui.com/demos/dialog/). They look cooler than the dialogs I hand-coded and I could have saved myself a bunch of work. Check out the whole JQuery UI site for examples of good free widgets: http://jqueryui.com/. Make sure you look in the upper right-hand corner on each widget’s page at the different examples—each widget has different flavors and some of them are very cool.
At this point, I feel like I’ve acquired a good foundation for creating my own custom add-ons for P4 clients. Hopefully this article will help you get there more quickly too. I can imagine a P4 world populated by tons of user-made custom applets. Maybe we could share?
If you like to take a look at my code, or even use the Process Monitor, you can find it at the Perforce Public Depot at: