Home > Development Tools, iPhone, JQTouch > JQTouch Dir Structure

JQTouch Dir Structure

It took me ages to get started with JQTouch, not helped at all by missing an end tag from one of my script sections (oops!)., but mainly because the sample header file code on the google download site did not match the directory structure that was downloaded. Basically this meant that the browser could not find half the stuff it needed when it loaded my test page and all I ended up with were blank pages.  So I thought it might be useful just to show what I did to get started.

This is what you get when you download and unzip the source:

After downloading the source I created a directory under my projects htdocs root directory (jqt) on my web server and copied in the ‘jqtouch’ directory and its contents from the download structure. Then I copied the ‘themes’ directory and content underneath the jqtouch directory so that it looked like this:

I then copied in the jqtouch.png file from the ‘demos\main’ sub directory of the downloaded jqtouch structure. This png is used to create the icon for the web app if you create a shortcut to it on the home screen of the iPhone.

After that, I was able to use the standard JQTouch HTML header setup that is shown on the Google download page in my index.html page (however see the note below):

<html>
   <head>
   <title>JQTouch</title>

   <script type="text/javascript" src="http://www.google.com/jsapi"></script>
   <script type="text/javascript"> google.load("jquery", "1.3.2"); </script>
   <script src="jqtouch/jqtouch.js" type="application/x-javascript"
           charset="utf-8"></script>
   <style type="text/css" media="screen">@import
            "jqtouch/jqtouch.css";</style>
   <style type="text/css" media="screen">@import
           "jqtouch/themes/jqt/theme.min.css";</style>

   <script type="text/javascript" charset="utf-8">
     var jQT = new $.jQTouch({
      icon: 'jqtouch.png',
      addGlossToIcon: false,
      startupScreen: 'jqt_startup.png',
      statusBar: '',
      preloadImages: [
       'jqtouch/themes/jqt/img/back_button.png',
       'jqtouch/themes/jqt/img/back_button_clicked.png',
       'jqtouch/themes/jqt/img/button_clicked.png',
       'jqtouch/themes/jqt/img/grayButton.png',
       'jqtouch/themes/jqt/img/whiteButton.png',
       'jqtouch/themes/jqt/img/loading.gif'
     ]
    });
   </script>
   etc;...

Note:

I later discovered, when browsing my web server error log that the default paths to the preloaded images were wrong for my configuration, so I changed them to those shown above. The screen formatting still appeared to be working though even with the incorrect path for the preloaded images, so I suspect it was not finding them preloaded and simply getting them from the correct location.

Advertisements
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: