Search this site

Adding a Menu to an App Engine Application

These notes describe how to add a menu to a site created with App Engine. Before proceeding, you should first complete these general notes on adding a menu. They provide a link to a drop-down menu sample which you can download and use in your applications.

Let's assume you've downloaded the CSS and javascript for a menu into a folder called dropdowntabfiles, and you have sample HTML that links to the CSS and javascript like this:

        <script type="text/javascript" src="dropdowntabfiles/dropdowntabs.js">

<link rel="stylesheet" type="text/css" href="dropdowntabfiles/ddcolortabs.css" />

To incorporate such a menu into an App Engine application, there are a few more steps.

1. With App Engine, you must specify, in the app.yaml file, which files should be handled by your controller code, and which should be loaded statically. Images, CSS, and javascript files should all be sent across the network in a static fashion (your controller code doesn't do anything). Thus to incorporate a menu, you need to specify the directories where the CSS and javascript will reside:

*** sample app.yaml  ****
application: templates
version: 1
runtime: python
api_version: 1
handlers:
- url: /stylesheets
  static_dir: stylesheets
- url: /images
  static_dir: images
- url: /javascript
  static_dir: javascript
- url: /.*
  script: sample_controller.py

Here we've specified separate directories for the three types of static files. One could also specify a single directory /static, but generally programmers separate these. Note that you could have also specified something specific to the particular dropdowntabfiles directory:

- url: /dropdowntabfiles
  static_dir: dropdowntabfiles

But your application will probably have other CSS and javascript besides that used for the menus.

2. If you don't have them, create subdirectories for images, stylesheets, and javascript within your App Engine application directory.

3. Open up the sample menu's dropdowntabfiles folder and move all the CSS files into the subdirectory stylesheets within your application. Then move all the javascript files (.js) into the javascript folder within your application.

4. Last but not least, you need to change the links within your HTML files. Instead of referring to the javascript like this:

  <script type="text/javascript" src="dropdowntabfiles/dropdowntabs.js">

You should refer to its new location, which is:

  <script type="text/javascript" src="javascript/dropdowntabs.js">

Instead of referring to CSS files like this:

  <link rel="stylesheet" type="text/css" href="dropdowntabfiles/ddcolortabs.css" />

you should refer to its new location, which is:

  <link rel="stylesheet" type="text/css" href="stylesheets/ddcolortabs.css" />

Recent site activity