2014年10月17日 星期五

如何在 GAE 佈署 jQuery EasyUI 專案 (一)

今天回顧之前在 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 檔]


沒有留言:

張貼留言