今天回顧之前在 GAE 佈署 jQuery 與 ExtJS 專案的舊文章, 心想應該也可以如法泡製 Easy UI 的專案環境. 下午做完例行工作後, 就來動手試試看. 相關文章參考 :
# jQuery EasyUI 官網
#
jQuery EasyUI 環境配置
#
如何在 GAE 上佈署 jQuery 與 ExtJS 專案
為此我特別在 GAE 上申請了一個專用的應用程式 jqueryeasyui 來放置這個專案 :
#
http://jqueryeasyui.appspot.com
首先在 GAE SDK 上產生一個 jqueryui 應用程式, 會產生如下四個檔案 :
接下來在應用程式根目錄下新增一個 static 資料夾, 用來存放靜態檔案, 例如 EasyUI 套件要用到的檔案. 然後到 EasyUI 官網下載 EasyUI GPL 版 zip 檔 (目前是 1.4 版) :
# jQuery EasyUI 下載 (GPL 版本)
解開 zip 檔後結構如下 :
將其中的 themes 目錄, jquery.min.js, jquery.easyui.min.js, 以及 locale 目錄下的 easyui-lang-zh_TW.js 四者複製到剛建好的 static 目錄下 :
接著到 EasyUI 官網下載擴充主題 (
Extension) :
#
http://www.jeasyui.com/extension/themes.php
官網提供了兩個 jQuery UI 與 Metro 兩種主題, 分別點進去, 下載 zip 檔 :
#
jquery-easyui-themes.zip
#
jquery-easyui-themes-metro.zip
將 zip 檔解開後可以發現 jQuery UI 主題有 4 個樣板, metro 有 5 個樣板, 把這總共 9 個主題目錄分別複製到我們專案的 static/themes 下, 跟預設的 default 放在一起備用 :
搞定 UI 主題後, 回到根目錄下, 我們要修改應用程式設定檔 app.yaml, 主要是加入靜態目錄 static 的設定, 這樣以後所有的靜態檔案 (圖檔, js 檔, ...) 都可以放在 static 下, 不必再修改 app.yaml 檔了, 如下所示 :
application: jqueryeasyui
version: 1
runtime: python27
api_version: 1
threadsafe: yes
handlers:
- url: /favicon\.ico
static_files: favicon.ico
upload: favicon\.ico
-
url: /static
static_dir: static
- url: .*
script: main.app
libraries:
- name: webapp2
version: "2.5.2"
然後就可以開始撰寫基於 EasyUI 的網頁, 可以使用 template 模板架構來做. 參考 "
如何在 GAE 上佈署 jQuery 與 ExtJS 專案" 這篇文章, 先寫一個 HTML5 模板檔案 html5.htm 如下 :
<!DOCTYPE html>
<!--[if lt IE 9]>
<script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<html>
<head>
<meta charset="utf-8">
<title>
{% block title %}{% endblock %}</title>
{% block link %}{% endblock %}
{% block javascript%}{%endblock%}
<style>
article,aside,figure,figcaption,footer,header,hgroup,menu,nav,section
{display:block;}
{% block style %}{% endblock %}
</style>
</head>
<body>
{% block body %}{% endblock %}
</body>
</html>
在這個模板中, 我們放置了 title, link, javascript, style, 以及 body 等五個區塊, 然後繼承此網頁模板來寫 EasyUI 網頁 jqueryeasyui.htm 如下 :
{%
extends "html5.htm" %}
{% block link %}
<link rel="stylesheet" href="/static/themes/default/easyui.css">
<link rel="stylesheet" href="/static/themes/icon.css">
{% endblock %}
{% block javascript %}
<script type="text/javascript" src="/static/jquery.min.js"></script>
<script type="text/javascript" src="/static/jquery.easyui.min.js"></script>
<script type="text/javascript" src="/static/easyui-lang-zh_TW"></script>
{% endblock %}
這樣就把 EasyUI 所需要的資源檔案都套用進來了, 注意這裡我們先使用預設主題風格 default. 接下來就可以繼承此 EasyUI 模板來寫測試用網頁 easyui_1.htm 如下 :
{%
extends "jqueryeasyui.htm" %}
{% block body %}
<table
class="easyui-datagrid" title="台股" style="width:600px;height:230px"
data-options="singleSelect:true,collapsible:true,rownumbers:true">
<thead>
<tr>
<th data-options="field:'name',width:80">股票名稱</th>
<th data-options="field:'id',width:80">股票代號</th>
<th data-options="field:'close',width:100,align:'right'">收盤價 (元)</th>
<th data-options="field:'volumn',width:100,align:'right'">成交量 (張)</th>
<th data-options="field:'meeting',align:'left'">股東會日期</th>
<th data-options="field:'election',width:80,align:'center'">董監改選</th>
<th data-options="field:'category',width:60,align:'center'">類股</th>
</tr>
</thead>
<tbody>
<tr>
<td>台積電</td>
<td>2330</td>
<td>123</td>
<td>4425119</td>
<td>2014-06-04</td>
<td>0</td>
<td>半導體</td>
</tr>
<tr>
<td>中華電</td>
<td>2412</td>
<td>96.4</td>
<td>5249</td>
<td>2014-06-15</td>
<td>0</td>
<td>通信</td>
</tr>
<tr>
<td>中碳</td>
<td>1723</td>
<td>192.5</td>
<td>918</td>
<td>2014-07-05</td>
<td>0</td>
<td>塑化</td>
</tr>
<tr>
<td>創見</td>
<td>2451</td>
<td>108</td>
<td>733</td>
<td>2014-06-30</td>
<td>0</td>
<td>模組</td>
</tr>
<tr>
<td>華擎</td>
<td>3515</td>
<td>118.5</td>
<td>175</td>
<td>2014-07-20</td>
<td>0</td>
<td>主機板</td>
</tr>
<tr>
<td>訊連</td>
<td>5203</td>
<td>97</td>
<td>235</td>
<td>2014-05-31</td>
<td>0</td>
<td>軟體</td>
</tr>
</tbody>
</table>
{% endblock %}
這樣末端網頁內容就很單純, 不需要管 head 要帶入那些資源檔, 只要專注寫 body 的內容即可. 這裡使用 datagrid 來顯示表格. 最後必須修改 URL 路由器 main.py, 指派各種 URL 要求
# -*- coding: utf-8 -*-
import os
from google.appengine.ext.webapp import template
import webapp2
class
easyui_1(webapp2.RequestHandler):
def get(self):
url="
easyui_1.htm"
path=os.path.join(os.path.dirname(__file__), url)
content=template.render(path,{})
self.response.out.write(content)
class MainHandler(webapp2.RequestHandler):
def get(self):
self.response.write('Hello jQuery EasyUI!')
app = webapp2.WSGIApplication([
('/', MainHandler),
('/
easyui_1',
easyui_1)
], debug=True)
這裡 URL 路由器收到根目錄要求時, 會由 MainHandler 函式輸出 "Hello jQuery EasyUI!", 而鳩收到 easyui_1 要求時, 將由 easyui_1 函式處理, 它會將 easyui_1.htm 內容讀進來後就用 self.response.out.write 輸出給前端. 在 GAE SDK 上按 Browse 鈕會在瀏覽器中顯示結果 :
如上所述, 這是套用預設主題樣式的結果, 如果要套用別的主題樣式, 只要修改 jqueryeasyui.htm, 修改 easyui.css 的主題目錄即可, 例如改為 jQueryUI 的 ui-pepper-grinder 的話效果如下 :
{% block link %}
<link rel="stylesheet" href="/static/themes/ui-pepper-grinder/easyui.css">
<link rel="stylesheet" href="/static/themes/icon.css">
{% endblock %}
大功告成 ! 按下 GAE SDK 的 Deploy 鈕即可將整個專案上傳 GAE, 網址如下 :
測試範例 1 : http://jqueryeasyui.appspot.com/easyui_1 [下載 zip 檔]
