Palm Samples - /Palm/Palm samples/PQA - Palm Query Application: www.theoctanegroup.com

Home > Palm > Samples > PQA > TheOctaneGroup
	Palm sample in PQA Palm Query Application www.theoctanegroup.com

Purpose

This is The Octane Group's Palm Query Application (PQA). It's one of the Palm Samples.

Requirements

You need POSE with a Web Clipping ROM image, or a real device with Palm.net capabilities like the Palm VII (see links section).

It's also a good idea to have Palm's Web Clipping Developer's Guide at hand.

Source code

Below is the home page (index.html). For other pages, please download the whole .pqa file and install it on your emulator or device.

A bit further, you'll find make.bat that generates the .pqa file using Palm's WCA Builder.

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>

<!-- #BeginTemplate "/Templates/main.dwt" -->

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="author" content="Eric Poncet">
    <meta name="generator" content="NoteTab 4.83">

<!-- #BeginEditable "doctitle" --> 
    <title>The Octane Group, LLC</title>
    <meta name="PalmComputingPlatform" content="true">
    <meta name="HistoryListText" content="Home">
    <meta name="PalmLargeIconFilename" content="logos/octane_large.gif">
    <meta name="PalmSmallIconFilename" content="logos/octane_small.gif">
    <meta name="PalmLauncherName" content="Octane">
    <meta name="PalmLauncherRevision" content="1.0">
    <meta name="PalmPQAVersion" content="1">
<!-- #EndEditable --> 

</head>

<body bgcolor="#FFFFFF">

<!------------------------------------ Logo bar ------------------------------------>
<table width="100%" border="0" cellpadding="4">
  <tr>
    <td width="10%">

    <!-- #BeginEditable "logo1" -->

    <!-- #EndEditable -->

    <img src="logos/octane.gif" border="0" align="middle">

    <!-- #BeginEditable "logo2" -->

    <!-- #EndEditable --> 

    </td>
    <td width="90%" align="center">
        
      <h1><font face="Verdana, Arial, Helvetica, sans-serif" color="#FF9933">The</font>
        <font face="Verdana, Arial, Helvetica, sans-serif" color="#FF6633"> 
        <font color="#FF6600">O</font>
        <font color="#FF8833"><font color="#FF9933">ctane</font></font>
        <font color="#FF9933"> Group, LLC</font> </font></h1>
    </td>
  </tr>
</table>

<!------------------------------------ Menu bar ------------------------------------> 
<!-- #BeginEditable "menu" --> 
<table width="80%" border="0" cellpadding="4" align="center" cellspacing="0" bgcolor="#FFFFFF">
  <tr bgcolor="#FFFFFF"> 
    <td align="center" nowrap>
    <font face="Verdana, Arial, Helvetica, sans-serif" size="-1" color="#0000FF">
    | Home |</font> </td>
    <td align="center" nowrap>
    <font face="Verdana, Arial, Helvetica, sans-serif" size="-1" color="#0000FF">
    <a href="assets.html">Assets</a></font> 
    </td>
    <td align="center" nowrap>
    <font face="Verdana, Arial, Helvetica, sans-serif" size="-1" color="#0000FF">
    <a href="benefits.html">Benefits</a></font> 
    </td>
    <td align="center" nowrap>
    <font face="Verdana, Arial, Helvetica, sans-serif" size="-1" color="#0000FF">
    <a href="experience.html">Experience</a></font> 
    </td>
    <td align="center" nowrap>
    <font face="Verdana, Arial, Helvetica, sans-serif" size="-1" color="#0000FF">
    <a href="clients.html">Clients</a></font> 
    </td>
    <td align="center" nowrap>
    <font face="Verdana, Arial, Helvetica, sans-serif" size="-1" color="#0000FF">
    <a href="team.html">Team</a></font> 
    </td>
    <td align="center" nowrap>
    <font face="Verdana, Arial, Helvetica, sans-serif" size="-1" color="#0000FF">
    <a href="contact.html">Contact</a></font> 
    </td>
    <smallscreenignore>
        <td align="center" nowrap>
        <font face="Verdana, Arial, Helvetica, sans-serif" size="-1" color="#0000FF">
        <a href="private/index.html">Login</a></font>
        </td>
    </smallscreenignore>
  </tr>
</table>

<!-- #EndEditable -->

<!------------------------------------ Spacer ------------------------------------> 
<p> 
</p>

<!------------------------------------- Text ------------------------------------->

<!-- #BeginEditable "text" --> 

<table width="80%" border="0" cellpadding="4" align="center" cellspacing="0" bgcolor="#FFFFFF">
  <tr valign="middle"> 
    <td align="left"> <font face="Verdana, Arial, Helvetica, sans-serif"> 
      <p><b>T</b><font size="-1">he Octane Group is an exceptional team of software 
        engineers immediately available to ignite the productivity of your company's 
        engineering projects.</font></p>
      <p><b>O</b><font size="-1">ur mission is to leverage our software development 
        experience with the latest technologies to help you reduce costs, create 
        new sources of revenue, and increase profits.</font></p>
      <p><b>W</b><font size="-1">e have a proven track record in developing a 
        wide range of software applications on a variety of platforms. From software 
        for Internet ASPs to voiceXML processing to enterprise solutions, our 
        experience with both existing and emerging technologies provides our clients 
        with an unprecedented edge in software development.</font></p>
      </font> 
      <p>&nbsp;</p>
      <hr width="100%" color="#999999" noshade>
      <center>
        <font face="Verdana, Arial, Helvetica, sans-serif" size="-2" color="#000000">
        <font color="#FF9933">The 
        <font color="#FF6633">O</font>ctane Group, LLC</font> 
        <font color="#FF6633"><font color="#666666">&copy;</font></font> 
        <font color="#FF9933">2001</font></font> 
      </center>
    </td>
  </tr>
</table>

<!-- #EndEditable -->

</body>

<!-- #EndTemplate -->

</html>

As promised, here's the make.bat:

@echo off
rem Generates PQA version of Octane's web site
 
rem We first copy the actual web site's pages from ..\www
copy ..\www\*.html . /v
 
rem We do some cleanup
del octane.pqa
 
rem We then generate the .pqa file
"d:\wca builder\wcabuild" index.html /pqa /o "octane.pqa" /v
 
rem Lastly, we make sure the file was generated
dir octane.pqa

Comments

To make our life easier, we managed to use the HTML pages of the company's web site. Yes, you read correctly.

The biggest advantage of this approach is that you only need to maintain one version of the pages, rather than one version for the web site and another one for the PQA.

The trick is to embed several Palm-specific metatags in the <head> section:

Those metas provide PQA tools and applications with useful information as far as icons, version, history and stuff
Those metas won't hurt any web browser running on a desktop, laptop, workstation, etc., as they will simply be ignored

Here's the list we used:

PalmComputingPlatform=true identifies our page as Palm Friendly
HistoryListText=Home adds an entry to the browser's history list
PalmLargeIconFilename=logos/octane_large.gif is the icon for the icon-mode of Palm Launcher
PalmSmallIconFilename=logos/octane_small.gif is the icon for the list-mode of Palm Launcher
PalmLauncherName=Octane is the PQA's name that will be displayed in Palm Launcher
PalmLauncherRevision=1.0 is the PQA's version that appears in App Info list in Palm Launcher
PalmPQAVersion=1 identifies required version of PQA

Palm defined a magic tag that allows to exclude sections of your HTML from the PQA. Just embed the section to exclude between <smallscreenignore> and </smallscreenignore>. That's exactly what we did above to exclude the menu link to the login page.

Another trick is to have smaller versions of your images. As you can imagine, a 150x150 logo is common on desktop browsers, but it would almost entirely fill the Palm's screen which is 160x160. The key is to replicate the structure of the web site in another folder and place those Palm-resized images in the same subfolder in the replicated site as in the website. Then on, when you need to generate the PQA, just copy the web site pages into this replicated folder. Pages content won't change, but the PQA will contain Palm-resized images! Take a closer look at make.bat above.

Also, note how adding HTML comments like  helps underline the structure of the HTML source code by separating sections. This is really helpful when you do hand-coding.

Lastly, see how we used Dreamweaver's template mechanism, which is really timesaving! What's more, it's fully compatible with other concepts or mechanisms, like PQA :)

Next sample