Loading Images Here's an example of HTML to load an image: <img src="http://someSite.com/images/pic.jpg" /> This sample has an absolute reference to an image on another page. Here's another example, this time with a relative image: <img src="/images/pic.jpg" /> This sample has a relative reference-- it is referring to a picture on the same server that the enclosing HTML is being loaded from. The programmer has downloaded pic.jpg into a folder images underneath the root web directory. Loading CSS Here's an example of loading a stylesheet from an HTML file: <head> <link href="/stylesheets/tstyles.css" media="screen" rel="Stylesheet" type="text/css" /> </head> The code says that the styles defined in tstyles.css should be applied to the enclosing HTML web page. As the example shows, the link to the CSS is typically defined within the head tags of the HTML document. Like the second image sample abobe, CSS files are linked to with relative references. Here, tstyles.css lives in the stylesheets subdirectory of the server's root web directory. Loading Images and CSS within App Engine With Google's AppEngine, you must perform one more step for the images and CSS files to load correctly. Specifically, you must tell the server not to call a controller for those files, but to just treat them as static files. You specify this within the app.yaml config file: Here's an example of how to do it: application: yourappname With out the specification in bold, the server would take any URL reference it receives and call the controller code within sample_controller.py to handle it. Of course with images and CSS, you just want to load static files from some directory. In the sample yaml above, you are telling App Engine that if it gets a URL with /stylesheets or /images as the first part, look in a directory with the same name, e.g.,version: 1 runtime: python api_version: 1 handlers: - url: /stylesheets static_dir: stylesheets - url: /images static_dir: images - url: /.* script: sample_controller.py <img src="/images/mypic.jpg" /> will be treated statically and app engine will load the file mypic.jpg within the images subdirectory. Dynamic Image References With AppEngine HTML templates, you can make any part of a web page dynamic using {{ }} template variables. Consider an application like the game Hangman. Here, the image shown to the player, as he guesses, changes as more of the man's body is hung. In an HTML template, you could specify the image as: <img src={{imageFile}} /> In your controller, you could set imageFile to a different file dependent on how many wrong answers have been made. Your Turn 1. Download the attached files into a folder named 'imageSample' 2. Create a subfolder 'images', within the folder 'imageSample'. 3. Put an image in that folder. Name it 'pic.png' (or change the index.html file to refer to your name). 4. Run dev_appserver to see if your image will downloaded correctly. Do not upload this sample to App Engine (you only get 10!) |
|
|
Loading Images and CSS in AppEngine |