Li Cheng | 
03 12th, 2010| 
這頁完工後的程式碼在這裡。
JQuery 是個 Ajax Framework，類似 Ruby on Rails 的 script.aculo.us。 先去看它的 demo 就知道它可以做什麼了。 Google App Engine (GAE) 上面要怎麼起步呢？最主要有兩個步驟。第一個是在 html 檔案裡頭加入幾行字來跟 GAE 說你要用 jQuery。 第二個步驟是把 jQuery 用的 css 檔案下載下來，這樣子使用者介面才會長的比較好看一點。雖然只是兩個步驟，GAE 的程式一開始要顯示 index.html 檔案的話還需要改一些東西，而且要加 css 檔也是要修改一堆檔案。
咱們來弄個新的 GAE project 試試看！
1) 產生一個新的 GAE 檔案夾叫做 jquerytest:
dev_appserver.py jquerytest
2) 把檔案夾裡的 main.py 的內容修改成這樣:
import os
from google.appengine.ext import webapp
from google.appengine.ext.webapp import util
from google.appengine.ext.webapp import template
class MainHandler(webapp.RequestHandler):
def get(self):
template_values = {}
path = os.path.join(os.path.dirname(__file__), 'index.html')
self.response.out.write(template.render(path, template_values))
def main():
application = webapp.WSGIApplication([('/', MainHandler)],
debug=True)
util.run_wsgi_app(application)
if __name__ == '__main__':
main()
這跟原本的 main.py 差不了多少，主要加了個 import template 還有 import OS 的指令。 我們還把 class MainHandler 的 get method 改成直接顯示 index.html 檔案。其他地方沒有改。
3) 在 jquerytest 檔案夾裡放個 index.html 檔案。 index.html 的內容應該是:
<html>
<head>
<script src="http://www.google.com/jsapi"></script>
<script>
// Load jQuery
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script type="text/javascript">
$.ui.dialog.defaults.bgiframe = true;
$(document).ready(function(){
$("#dialog").dialog();
$('#date').datepicker(); //must be put inside function()
});
</script>
</head>
<body>
<input type="text" name="date" id="date" />
<div id="dialog" title="基本的文字框">
<p>你好。</p>
</div>
</body>
</html>
要用 jQuery 時，平常都得先把 jQuery 的 javascript 程式下載來我們自己的檔案夾裡頭，但在 GAE 上面我們可以直接指到 Google 的 Google Ajax Libraries API 就可以直接用 jQuery 了。 上面的第三到第八行就是載入 jQuery 的指令。 我們這一頁會用到兩個 jQuery UI 的兩個小 widget，一個叫做 Dialog， 另一個叫 Datepicker。 Dialog 就是顯示在頁面正中央跟使用者說一些東西，使用者看完後就可以關掉的一個小介面 (widget)。 Datepicker 是選某某天的工具。 上面程式碼的第 11 行好像是把 dialog 的母頁設成本頁。 第 13 行跟第 14 行等到本頁準備好後啟動 jQuery 的 dialog 跟 datepicker。 #dialog 跟 #date 是這兩個 widget 的名稱。 你也可以隨便取名字，只要名字跟第 20 和 21 行的 id 值一樣就好。 做了這麼多了修改，到目前為止我們只完成了第一個大步驟： 跟 Google App Engine 說你要用 jQuery。 來看看網頁長得怎麼樣:
日曆都會動了，而且按 “close” 也有效，只是看起來不好看。 來加一點色彩吧！
4) 下載 jQuery 的 CSS 檔案
要讓 widget 好看就得下載 jQuery 的 CSS 檔。 來這裡下載，網頁的右端有個 Theme，我是選 UI Lightness 的主題。版本選 stable release （現在是 1.7.2. 版)，然後按 “Download”。 zip 檔下載後，解壓縮，把 css 的檔案夾整個拿到 GAE 裡頭，放在一個叫 static 的檔案夾裡 (static 檔案夾要自己新增)。 現在 GAE 檔案夾裡看起來應該是這樣:
ui-lightness 是主題的名稱。 你如果下載的是別的主題的話，名稱會不一樣。
5) 修改 app.yml
我們剛剛新增了 static 的檔案夾，要跟 GAE 說，不然 server 不知道要去哪個路徑找資料。 我們會跟 GAE 說 static 這個檔案夾裡都是靜態的檔案，不常變，所以 GAE 就會把這檔案夾 cache 起來，以後傳送資料比較快。 app.yml 裡頭的 handlers 那一段應該修成這樣:
handlers: - url: /static static_dir: static - url: .* script: main.py
不要把 -url: .* 放在 -url: /static 前面喔，這順序是重要的。顛倒的話 main.py 將攔截所有外部進來的指令。
6) 修改 index.html
一個網頁如有用到 css 檔的話就要在 header 裡面指示 css 檔在哪裡。 我們得跟 index.html 說 jQuery 的 CSS 檔在哪。 把 index.html 打開，在 <head></head> 裡面加入:
<link href="/static/css/ui-lightness/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css"/>
好了！現在回去看網頁，看起來就像這樣:
大功告成！
