Hue二次开发（一）：创建App

一、版本
基于2.5版本的源码。

二、技术架构
 



三、编译

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

复制代码

Hue会将所有依赖都打在自己的build目录里。需要maven,依赖jdk1.6版本。

四、例子
4.1创建一个app
我们创建一个自己的空app，会自动生成目录结构：

1. $ ./build/env/bin/hue create_desktop_app calculator
   
2. $ find calculator -type f
   
3. calculator/setup.py                                 # distutils setup file
   
4. calculator/src/calculator/__init__.py               # main src module
   
5. calculator/src/calculator/forms.py
   
6. calculator/src/calculator/models.py
   
7. calculator/src/calculator/settings.py               # app metadata setting
   
8. calculator/src/calculator/urls.py                   # url mapping
   
9. calculator/src/calculator/views.py                  # app business logic
   
10. calculator/src/calculator/templates/index.mako
    
11. calculator/src/calculator/templates/shared_components.mako
    
12. 
    
13. # Static resources
    
14. calculator/src/calculator/static/art/calculator.png # logo
    
15. calculator/src/calculator/static/css/calculator.css
    
16. calculator/src/calculator/static/js/calculator.js

复制代码

4.2安装app
setup.py是distutils用于注册app的入口点。用于打包？app_reg.py管理注册app.使用如下命令进行注册：

1. $ ./build/env/bin/python tools/app_reg/app_reg.py --install calculator
   
2. === Installing app at calculator
   
3. Updating registry with calculator (version 0.1)
   
4. --- Making egg-info for calculator
   
5. 
   
6. $ ./build/env/bin/python tools/app_reg/app_reg.py --list 2>&1 | grep calculator
   
7. calculator           0.1     /Users/philip/src/hue/calculator

复制代码

Hue使用virtualenv隔离和管理python依赖包。

4.3调试运行

1. $ build/env/bin/hue runserver_plus

复制代码

runserver_plus开启了Werkzeug debugger。方便调试。访问 
http://localhost:8000 可以看到我们的新app:
 



4.4定制视图和模板
自动生成的模板calculator/src/calculator/templates/index.mako是这样的：

1. <%!from desktop.views import commonheader, commonfooter %>
   
2. <%namespace name="shared" file="shared_components.mako" />
   
3. 
   
4. ${commonheader("Calculator", "calculator", user, "100px")}
   
5. ${shared.menubar(section='mytab')}
   
6. 
   
7. ## Use double hashes for a mako template comment## Main body
   
8. 
   
9. <div class="container-fluid">
   
10.   <h2>Calculator app is successfully setup!</h2>
    
11.   <p>It's now ${date}.</p>
    
12. </div>
    
13. ${commonfooter(messages)}

复制代码

注意：这里用了mako模板，如果后缀为.html,hue会使用django的模板引擎去渲染。这里编码有问题，改成unicode，才能正常显示header和footer:

1. <%!
   
2. from desktop.views import commonheader, commonfooter
   
3. from django.utils.translation import ugettext as _%>
   
4. 
   
5. <%namespace name="shared" file="shared_components.mako" />
   
6. 
   
7. ${commonheader("Calculator", "calculator", user, "100px")| n,unicode }
   
8. ${shared.menubar(section='mytab')}
   
9. 
   
10. ## Use double hashes for a mako template comment## Main body
    
11. 
    
12. <div class="container-fluid">
    
13.   <h2>Calculator app is successfully setup!</h2>
    
14.   <p>It's now ${date}.</p>
    
15. </div>
    
16. ${ commonfooter(messages) | n,unicode }

复制代码

 

好了能正常显示，我们将修改模板，添加计算页面：

1. <%!
   
2. from desktop.views import commonheader, commonfooter
   
3. from django.utils.translation import ugettext as _
   
4. %>
   
5. 
   
6. <%namespace name="shared" file="shared_components.mako" />
   
7. 
   
8. ${commonheader("Calculator", "calculator", user, "100px")| n,unicode }${shared.menubar(section='mytab')}
   
9. 
   
10. ## Use double hashes for a mako template comment## Main body
    
11. 
    
12. <div class="container-fluid">
    
13.   % if op:
    
14.   <span>${a} ${op} ${b} = ${result}</span>
    
15.   % endif
    
16.   <form action=${url("calculator.views.index")} method=POST>
    
17.     <input name="a">
    
18.     <input type="radio" name="op" value="add">+</input>
    
19.     <input type="radio" name="op" value="subtract">-</input>
    
20.     <input type="radio" name="op" value="multiply">*</input>
    
21.     <input type="radio" name="op" value="divide">/</input>
    
22.     <input name="b">
    
23.     <input type="submit" value="Calculate">
    
24.   </form>
    
25. </div>
    
26. ${ commonfooter(messages) | n,unicode }

复制代码

是这个样子了：
 


模板搞定了，我们接着要处理表单提交过来的数据

自动生成的calculator/src/calculator/views.py是这样的：

1. from desktop.lib.django_util import render
   
2. import datetime
   
3. 
   
4. def index(request):
   
5.   return render('index.mako', request, dict(date=datetime.datetime.now()))
   

复制代码

我们修改成这样：

1. #!/usr/bin/env python
   
2. 
   
3. from desktop.lib.django_util import render
   
4. import operator
   
5. 
   
6. OPS=dict(add=operator.add, subtract=operator.sub, multiply=operator.mul, divide=operator.truediv)
   
7. OP_STRING=dict(add="+", subtract="-", multiply="*", divide="/")
   
8. 
   
9. def index(request):
   
10.   if "op" not in request.REQUEST:
    
11.     return render('index.mako', request, dict())
    
12.   a = float(request.REQUEST["a"])
    
13.   b = float(request.REQUEST["b"])
    
14.   op = request.REQUEST["op"]
    
15.   result = OPS[op](a, b)
    
16.   return render('index.mako', request,
    
17.     dict(a=a, b=b, op=OP_STRING[op], result=result))

复制代码

五、调试Django



我们故意少输入一个，点击计算会出现错误：
 



可以使用调试控制台，和代码展示。这就是runserver_plus的方便之处了。