Teklogix 7535 Programming... Or not!

I'm currently developing a complex bespoke application for the Psion/Teklogix 7535 handheld PC that will help our order picking staff with their job.

The Development Options

I've got a number of standard development options for these devices...

C# .NET - I would like to hold off and see how support for this environment develops because the Psion/Teklogix SDK for C# looks a bit clumsy. Also I can't imagine that the RTL for .NET is any lighter that the VM for Java which is itself a bit sluggish.

C++ - The demands placed on these devices will change frequently and since C++ isn't the most rapid development language I would like to avoid this where possible.

Java - This is my preferred development solution and is made available via means of the Jeode EVM which I've been using for a couple of trivial applications that I've written thus far.

The Problem

Unfortunately I've hit a problem connecting the device to MySQL 4 since Jeode is based on Personal Java (approximately Java 1.1.8) which does not support the latest MySQL Connector/J drivers based on JDBC 2. Previous applications have successfully connected to MySQL 3 but the recent software upgrades to our servers have now broken these apps.

There appears to be no alternative other than to write a middleware worker application to which the handhelds can connect to execute queries on their behalf. This would involved sending queries and updates as well as accepting the results of queries which may be raw binary data (in the case of the MySQL blobs used to store the product images) or tabular Unicode result sets that must be retrieved row by row using a cursor. The prospect of writing this kind of transport application in Java 1.1.8 does not appeal to me in the slightest, especially due to the confined memory constraints of these devices.

The Solution

So, I've hit upon an interesting bit of lateral thinking... Since the art of personal device programming is to offload as much of the processing as possible to the server, why not offload almost the entire application and make it web-based? Yuck!

Sounds like a bad idea at first, but many of the initial problems that come to mind can be solved without much trouble. Internet Explorer for WinCE seems very similar in its markup to IE 6 for Windows XP, and with the help of some carefully crafted Cascaded Style Sheets, we can achieve near-pixel perfection for the majority of text and form input elements. By generating an outer div section of fixed width and height it is possible to clearly delimit the handheld's viewable screen area so that you can develop the entire web application in PHP, XHTML, CSS and JavaScript on IE 6 on a ordinary computer and be certain that it will look very similar for the users of the handheld devices.

This saves a massive amount of time that would otherwise be spent transferring compiled code to the handhelds after writing each few lines of code since developing against the Psion/Teklogix SDK means that the code will not run from an ordinary PC. Also, deploying the finished applications to all handhelds becomes instantaneous since you need only change the application on the web server.

Interacting with the Barcode Scanner

The main obstacle to overcome when choosing this approach is how to interface with the barcode scanner hardware without the use of ActiveX controls. In particular, how do you overcome the problem of users clicking the focus away from the barcode text input field immediately before scanning the code and so becoming confused when nothing happens?

Thankfully the scanner can be set to echo the data from all scanned codes to the console prefixed and suffixed by any character that you choose to define. By defining the prefix as a non-typable character (one that is not present on the keypad) and the suffix as the enter key, you can employ a neat JavaScript trick to handle the event:

function getEANFocus() {
  document.getElementById("eantext").focus();
}
function keyPressed() {
  if (event.keyCode==172) {
    document.getElementById("eantext").value="";
    getEANFocus();
  }
}

The key pressed function should be called from the body tag's onkey up attribute as onkeyup="keyPressed()". This will then respond to all character 172 key-presses (which are only generated immediately upon scanning a barcode) by putting the focus on the eantext input field. This field is then populated with the data from the scanned barcode and then the enter key suffix causes the form to be submitted.

This means that the effect of scanning a barcode is always the same irrespective of which component has the focus.

Allowing the Application to Use the Full Screen

The 7535 has a only a small 240 x 320 pixel touchscreen display which needs to be used to optimal effect. This poses two challenges:

Firstly, the application needs to make use of the entire display since there is no room for waste. In WinCE the taskbar can be made to autohide and not always appear on top. Also Internet Explorer can be made to hide its toolbars by pressing Ctrl + T. These are a good start, but we haven't yet quite got full command of the screen because of Internet Explorer's perminant vertical scrollbar down the right hand side and the default narrow margin around web content. Thankfully these can be removed by adding the following to the CSS for the body:

margin: 0;
overflow: auto;

Secondly, we need to be able to develop applications rapidly on an ordinary PC using Internet Explorer 6 to view the results. This means that we need a way of confidently ensuring that the application will fit within the bounds of the 7535 display without requiring the handheld user to have to resort to operating fiddly scrollbars for simple tasks. We can do this by specifying the dimensions of the various screen sections with width and height pixel values within the CSS, and we also ensure font consistancy by specifying the base font-size in pixel units. Now when we view the application on Internet Explorer 6 we can see clearly the display limits of the 7535.

Here's the top section of the Cascaded Style Sheet that I'm using for the application:

body {
font-family: Arial, sans-serif;
font-size: 12px;
margin: 0;
overflow: auto;
}

#top {
position: relative;
top: 0;
width: 240px;
height: 30px;
background-color: #bbb;
text-align: center;
}

#contents {
position: relative;
width: 240px;
height: 263px;
background-color: #ccf;
}

#footer {
position: relative;
width: 240px;
height: 27px;
background-color: #bbb;
text-align: center;
}