Hue二次開發（一）：創建App

Hue二次開發（一）：創建App

一、版本

基於2.5版本的源碼。

二、技術架構

三、編譯

$ git clone http://github.com/cloudera/hue.git
$ cd hue
$ make apps

Hue會將所有依賴都打在自己的build目錄裏。需要maven,依賴jdk1.6版本。

四、例子

4.1創建一個app

我們創建一個自己的空app，會自動生成目錄結構：

$ ./build/env/bin/hue create_desktop_app calculator
$ find calculator -type f
calculator/setup.py                                 # distutils setup file
calculator/src/calculator/__init__.py               # main src module
calculator/src/calculator/forms.py
calculator/src/calculator/models.py
calculator/src/calculator/settings.py               # app metadata setting
calculator/src/calculator/urls.py                   # url mapping
calculator/src/calculator/views.py                  # app business logic
calculator/src/calculator/templates/index.mako
calculator/src/calculator/templates/shared_components.mako

# Static resources
calculator/src/calculator/static/art/calculator.png # logo
calculator/src/calculator/static/css/calculator.css
calculator/src/calculator/static/js/calculator.js

4.2安裝app

setup.py是distutils用於注冊app的入口點。用於打包？app_reg.py管理注冊app.使用如下命令進行注冊：

$ ./build/env/bin/python tools/app_reg/app_reg.py --install calculator
=== Installing app at calculator
Updating registry with calculator (version 0.1)
--- Making egg-info for calculator

$ ./build/env/bin/python tools/app_reg/app_reg.py --list 2>&1 | grep calculator
calculator           0.1     /Users/philip/src/hue/calculator

Hue使用virtualenv隔離和管理python依賴包。

4.3調試運行

$ build/env/bin/hue runserver_plus

runserver_plus開啟了Werkzeug debugger。方便調試。訪問 https://localhost:8000 可以看到我們的新app:

4.4定製視圖和模板

自動生成的模板calculator/src/calculator/templates/index.mako是這樣的：

<%!from desktop.views import commonheader, commonfooter %>
<%namespace name="shared" file="shared_components.mako" />

${commonheader("Calculator", "calculator", user, "100px")}
${shared.menubar(section='mytab')}

## Use double hashes for a mako template comment## Main body

<div class="container-fluid">
  <h2>Calculator app is successfully setup!</h2>
  <p>It's now ${date}.</p>
</div>
${commonfooter(messages)}

注意：這裏用了mako模板，如果後綴為.html,hue會使用django的模板引擎去渲染。這裏編碼有問題，改成unicode，才能正常顯示header和footer:

<%!
from desktop.views import commonheader, commonfooter
from django.utils.translation import ugettext as _%>

<%namespace name="shared" file="shared_components.mako" />

${commonheader("Calculator", "calculator", user, "100px")| n,unicode }
${shared.menubar(section='mytab')}

## Use double hashes for a mako template comment## Main body

<div class="container-fluid">
  <h2>Calculator app is successfully setup!</h2>
  <p>It's now ${date}.</p>
</div>
${ commonfooter(messages) | n,unicode }

好了能正常顯示，我們將修改模板，添加計算頁麵：

<%!
from desktop.views import commonheader, commonfooter
from django.utils.translation import ugettext as _
%>

<%namespace name="shared" file="shared_components.mako" />

${commonheader("Calculator", "calculator", user, "100px")| n,unicode }${shared.menubar(section='mytab')}

## Use double hashes for a mako template comment## Main body

<div class="container-fluid">
  % if op:
  <span>${a} ${op} ${b} = ${result}</span>
  % endif
  <form action=${url("calculator.views.index")} method=POST>
    <input name="a">
    <input type="radio" name="op" value="add">+</input>
    <input type="radio" name="op" value="subtract">-</input>
    <input type="radio" name="op" value="multiply">*</input>
    <input type="radio" name="op" value="divide">/</input>
    <input name="b">
    <input type="submit" value="Calculate">
  </form>
</div>
${ commonfooter(messages) | n,unicode }

是這個樣子了：

模板搞定了，我們接著要處理表單提交過來的數據
自動生成的calculator/src/calculator/views.py是這樣的：

from desktop.lib.django_util import render
import datetime

def index(request):
  return render('index.mako', request, dict(date=datetime.datetime.now()))

我們修改成這樣：

#!/usr/bin/env python

from desktop.lib.django_util import render
import operator

OPS=dict(add=operator.add, subtract=operator.sub, multiply=operator.mul, divide=operator.truediv)
OP_STRING=dict(add="+", subtract="-", multiply="*", divide="/")

def index(request):
  if "op" not in request.REQUEST:
    return render('index.mako', request, dict())
  a = float(request.REQUEST["a"])
  b = float(request.REQUEST["b"])
  op = request.REQUEST["op"]
  result = OPS[op](a, b)
  return render('index.mako', request,
    dict(a=a, b=b, op=OP_STRING[op], result=result))

五、調試Django

我們故意少輸入一個，點擊計算會出現錯誤：

可以使用調試控製台，和代碼展示。這就是runserver_plus的方便之處了。

六、Reference

https://cloudera.github.io/hue/docs-2.5.0/sdk/sdk.html