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 <!-------------- Menu bar ----------------> 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

 
[ Copyright © 2000- Eric Poncet - All rights reserved ]

[ Stage de musique classique | Stage de musique baroque | Stage de musique de chambre | Stage de musique latine ]
[ Stage de jazz | Stage de musiques actuelles | Stage de funk | Stage de metal | Stage de pop | Stage de reggae | Stage de rock ]
[ Stage d'improvisation | Colonie musicale ]