Using the Palm Template


 

 

Before reading this tutorial you should have read the General Tutorial.

 

In order to develop for PalmWebOS you must have installed the AndroidSDK.  Instructions for QCAndroid installation are found in the Installation Tutorial

 

After creating and naming your project based on the QuickConnect Palm Application Template Xcode opens up and displays to you your ready-to-modify project.  You see several folders and a few files.  To use the QuickConnectFamily framework the only items you need to concern yourself with are:

 

  1. index.html
  2. mappings.js
  3. functions.js
  4. databaseDefinition.js
  5. main.css
  6. main.js
  7. and the Images directory

 

 

 

 

 

 

 

 

 

We will now modify the body of the html file to add visual components.  We'll add an image to be displayed as well as some text.  You may add any types of HTML elements you desire.  After doing so, the file looks like this:

 

 

 

Now we will modify the main.css file to align the image in the center of the display.

 

 

Before running, we need to add the puzzle_tiny.png file to your projects Images directory.  The image itself is embedded here for you to download.

 

 

Once you have downloaded this file open the project directory that Xcode created for you in the General Tutorial.  Since I saved my project on my desktop I'll go there.  There are a few files here.  Ignore them.  Nearly all of them are support files that make up the framework.  Navigate to the QCPalmApp/Images directory and drop your copy of the puzzle_tiny.png file there.

 

The image file should now show up in the Images folder as seen below.

 

 

 

Just like when using the Android tools you do need to make sure that the Palm Emulator is running.    It can be found in the /Applications directory of your Mac machine.  Double click it and then you can build the Palm Simple Example application and Xcode will install and run your application on the emulator.  Also, you do not need to shut down the Palm emulator between builds.

 

To build and run your application, in the Xcode project window select "Build for Simulator".  Now select Build->Build from the Xcode main menu or enter "Command B" with the keyboard.  If you now select Build->Build Results from the Xcode main menu or enter "Shift Command B" with the keyboard you will see the build results as well as any debug statements send from you JavaScript code.

 

In order to see your application in the emulator you must click the menu button of the emulator the first time you start the emulator.   The image below shows you what you will see.

 

 

 

 

 

 

 

Now lets add a standard button and a div to display some information to the index.html file.  This is the same as creating a web page since the framework was created to allow application creation in HTML, CSS, and JavaScript.

 

The code added is:

 

<input type='button' onclick='showMessage()' value='Display Message' />

<br/>

<div id='messages'></div>

 

and the display now looks like this.

 

 

Now lets create the onclick handler function in the main.js file.

 

The code to be added is:

 

function showMessage(){

document.getElementById('messages').innerText = "The button worked!";

}

 

The file now looks like this.

 

 

Click Build again and you will see the changes displayed in the emulator.  Notice that you do not need to click the emulators Menu button this time since it is already running.

 

 

Select the "Display Messages" button and the message is inserted into the div.