SOS

Shane O'Sullivan's technical blog… really ties the room together

Archive for August, 2009

Getting started with developing on the Palm Pre

Posted by Shane O'Sullivan on August 16, 2009

This post explains how to get up and running with Palm Pre development, including getting the tools, setting up the emulator, as well as getting debugging and the inspector working.

In the last few days I’ve started playing around with the development tools for the extremely cool new phone, the Palm Pre.  The coolest thing, from a developers perspective, is that all application development is done using HTML, JavaScript and CSS.  That means if you can write a website, you can write an application for the Palm Pre (though not necessarily a good one).

However, while Palm does provide a pretty good site, http://developer.palm.com, to help you get started, it’s missing some crucial information, which is scattered all over the web (trying to find out how to do logging is a nightmare).  So, this post will explain some of the steps you need to take to get up and running.  As I prefer to use Palm’s Eclipse based development tools, this post assumes that you are using it also, and not go into the command line stuff.

1. Getting the Tools

Follow Palm’s instructions here – http://developer.palm.com/index.php?option=com_content&view=article&id=1597 , to install their tools.

I strongly encourage you to also get the Eclipse development environment, which while it is a large download, is very useful for packaging and  launching your application with a single click.  Get Eclipse by following the instructions here – http://developer.palm.com/index.php?option=com_content&view=article&id=1639 .

The Eclipse page also includes the required steps for creating a new WebOS application, adding scenes (a scene can be though of as a single web page, and you application will be made up of one or more of them) etc.

2. Create a New Scene

After following the instructions on the Eclipse page to create a new application, create a new scene clicking “File-New-Mojo Scene”, and give it the name “main”.  You should see a number of files created:

  • app/assistants/main-assistant.js – This is the JavaScript code that will be executed when your scene, or page, is rendered
  • app/views/main/main-scene.html – This is the HTML that defines the displayed HTML for the scene.
  • sources.json has also been modified to add information about your scene.

As we want the “main” scene to be displayed when the application starts, open the /app/assistants/stage-assistant.js file, and in the setup method you see there, add the following line:

this.controller.pushScene(‘main’);

That line loads your “main” scene.

3. Starting the Emulator

Palm provides a very cool phone emulator that runs on VirtualBox, which you installed earlier.  Start it by (in Windows) clicking Start > All Programs > Palm > SDK > Palm Emulator.

One thing I’ve noticed is that if you start Eclipse before starting the emulator, it throws errors and can have problems connection. So, start the emulator before Eclipse.

Sometimes you may also see an error when starting the Emulator stating that the Novacom service must be running.  To make sure it is, click Start > Settings > Control Panel > Administration Tools > Services.  Find the Palm Novacom service in the list, right click and choose start.

4. Launching the Application in Debug Mode

As you’ll pretty much always want to be viewing debug output from your application, start it in debug mode.  To do this:

  • Click Run > Debug Configurations
  • Right-Click “Mojo Application” and select “New”
  • Choose your project in the “Project” drop down box.
  • Choose the target to be “Palm Emulator”, or if you’re lucky enough to have a Palm Pre, choose Palm Device
  • Make sure to check both the Inspectable and Mojo debugging checkboxes, and click Debug.

Looking at the emulator, your application should appear.

5. Logging

Debugging with WebOS is currently a pretty nasty affair, that requires a lot of command line wizardry, that I think only a tiny percentage of people will even attempt to use (if you’ve figured it out, well done!).

However, logging is relatively simple to set up, and that’s what I use.

As with developing web applications on Firefox, you can use the Firebug function console.log to print out messages, e.g.

console.log(“the value of the input is ” + event.target.value);

So, feel free to intersperse your code with whatever logging you like.

To view the logs, you need to log into the emulator/phone remotely using Putty, a SSH client.  Luckily this is included with the Palm SDK you installed earlier.

  • Go to the bin folder in the SDK, probably in c:\program files\Palm\SDK\bin, and open putty.exe
  • In Host Name, type localhost
  • In Port, type 5522
  • Save these settings for reuse later by typing in PalmEmulator into the Saved Settings box and clicking Save.
  • Click Open.
  • When Putty prompts you for a login name, type root
  • When prompted for the password, just hit Enter, as the password is blank.
  • Now start the logging application by typing log com.mydomain.myapp. If you’re unsure of what the correct string is, open the appinfo.json file at the root of your project in Eclipse, and the right string is specified as the id in that file.

Now, when you run your application, you’ll see your console.log calls being shown there.  It’s a bit verbose, and prepends a lot before your message, but at least it’s readable.

6. Using the Inspector

Palm includes the a DOM inspector with the SDK. Before running it, and after installing your application on the emulator using Eclipse, open a command window in the SDK’s bin folder, and type

palm-launch -d tcp -i com.mydomain.myapp

once again using the correct string for your application instead of com.mydomain.myapp

Now launch the inspector by clicking Start > Programs > Palm > SDK > Palm Inspector.  The Inspector window should now launch, and display the HTML of your application.

7. Write Something Cool

I’ll leave this as an exercise to you, the good reader.  However, you should now have the ability to log messages and inspect the content of your page, so you’re almost on par with the tools available for web development (a good debugger would be nicer though).

I might write some more posts in the future covering anything cool I found or wrote for the Pre.  I’m starting to use a specialized build of the Dojo Ajax toolkit to fill in some of the blanks that Palm’s Mojo toolkit leaves out, and that’ll probably require another post.

Have fun!

Posted in Ajax, Dojo, Javascript, open source, Technical | Tagged: , | 1 Comment »

QuickSearch:Google only faster

Posted by Shane O'Sullivan on August 11, 2009

Last week I realised that the process of searching for something on the web annoyed me –  it took too many key presses, too many clicks, and opened too many tabs.  To fix this, I came up with QuickSearch.

See the video below for a demo, or you can go to the QuickSearch Home Page to install it.

How I Search

My usual workflow is that I want to search for something but I don’t want to lose the page I’m currently looking at so I:

  • Press Ctrl-T to open a new tab
  • Press Tab to move the cursor to Firefox’s search box
  • Type in my query
  • Hit enter
  • Read through results. If I see what I want I open in a new tab in case I want to open another, if not I type in a new search and reload the search results.
  • Close the search tab.

So, I’ve opened a tab that I’ll probably only want for ten seconds, I’ve had to wait for my results until I stopped typing and loaded another page, and if I want to change my search query, I have to load the page again. Then close the search tab.

How I Want To Search

The workflow I want is

  • Press a key combination to start searching.  No new window or tab should be required.  I shouldn’t have to tab to, or click, any input box.  Since Ctrl-F is used to search within a page, I decided that Ctrl-Alt-F made a sensible key combination to search the whole web.
  • Start typing, and results should start appearing.  As I type I can keep an eye on the first one or two results, and if I see something interesting, I stop typing.
  • I click the link I want, with the option of opening the link in a new tab without having to right click it and choose that option from a menu.
  • When I’m finished using the search results, just press Esc to go back to my original page.

QuickSearch To The Rescue

I’ve implemented my desired workflow in QuickSearch, and it has really sped up my navigation around the web.

For convenience, I also added:

  • Search This Site: to search just the site you’re on, press Ctrl-Alt-S
  • Search Highlighted: to search for some term on the page, just highlight that word(s) and press Ctrl-Alt-F as normal.
  • More Results: If the quick results provided by QuickSearch still aren’t enough, and refining your query doesn’t work, you can click the “More Results” link to get many, many more results from Google, Yahoo, Microsoft and more using my search portal Chofter.com.

Cross Browser Goodness

QuickSearch works on

  • Firefox, as  a GreaseMonkey script
  • Google Chrome, as an extension
  • Every other browser as a Bookmarklet.

See the QuickSearch Home Page for installation instructions.  I think you’ll very quickly find it indespensible, especially in Firefox and Chrome where it is completely keyboard operated, no mouse required.

Fully Accessible

Another strong advantage of QuickSearch is that it is fully keyboard accessible.  No mouse is required:

  • The search is launched using keys
  • All link titles are correctly labelled
  • All search results can be navigated using the tab key
  • QuickSearch can be dismissed quickly using the Esc key.

I think users with sight impairments will especially like this.

Posted in Ajax, Javascript, search, Technical | 1 Comment »

Massive TabContainer upgrade added to Dojo

Posted by Shane O'Sullivan on August 11, 2009

I previously wrote about work I was doing on the Dojo Ajax Toolkit‘s TabContainer widget.  This work prevents the tab buttons from wrapping around when they are wider than the available space, and instead allows you to use either a drop down menu to select the tab (like Firefox/IE7), or to use left and right slider buttons to “slide” the buttons.

Well, thanks to some great collaboration with Dijit master Bill and a Dojo contributer called alle, the work has now been committed to the code base.  It should be available to view HERE from Aug 12th 2009 onwards, and will be in v1.4 when it is released.

If you can’t wait for it, you can either download a copy of the nightly code base from http://archive.dojotoolkit.org/nightly after Aug 12th, or checkout the code yourself from Subversion right now.  Note that code in between releases is not guaranteed to be stable, as many features may be in the middle of upgrades.

There are a couple of issues remaining to be worked on, such as improved right-to-left support, but for people who have been clamouring for this to make it into the code base, you can grab this now, and get the upgraded, more stable widget in v1.4

Posted in Ajax, dijit, Dojo, Javascript, open source, tab, widget | 11 Comments »

 
Follow

Get every new post delivered to your Inbox.

Join 533 other followers

%d bloggers like this: