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。方便调试。访问 http://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

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