分享

Hue二次开发(一):创建App

问题导读
1、maven,需要依赖jdk什么版本?
2、创建一个自己的app?





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

二、技术架构
1.png



三、编译
  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. # Static resources
  13. calculator/src/calculator/static/art/calculator.png # logo
  14. calculator/src/calculator/static/css/calculator.css
  15. 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. $ ./build/env/bin/python tools/app_reg/app_reg.py --list 2>&1 | grep calculator
  6. 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:
1.png



4.4定制视图和模板
自动生成的模板calculator/src/calculator/templates/index.mako是这样的:
  1. <%!from desktop.views import commonheader, commonfooter %>
  2. <%namespace name="shared" file="shared_components.mako" />
  3. ${commonheader("Calculator", "calculator", user, "100px")}
  4. ${shared.menubar(section='mytab')}
  5. ## Use double hashes for a mako template comment## Main body
  6. <div class="container-fluid">
  7.   <h2>Calculator app is successfully setup!</h2>
  8.   <p>It's now ${date}.</p>
  9. </div>
  10. ${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. <%namespace name="shared" file="shared_components.mako" />
  5. ${commonheader("Calculator", "calculator", user, "100px")| n,unicode }
  6. ${shared.menubar(section='mytab')}
  7. ## Use double hashes for a mako template comment## Main body
  8. <div class="container-fluid">
  9.   <h2>Calculator app is successfully setup!</h2>
  10.   <p>It's now ${date}.</p>
  11. </div>
  12. ${ commonfooter(messages) | n,unicode }
复制代码

1.png

好了能正常显示,我们将修改模板,添加计算页面:
  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. ${commonheader("Calculator", "calculator", user, "100px")| n,unicode }${shared.menubar(section='mytab')}
  7. ## Use double hashes for a mako template comment## Main body
  8. <div class="container-fluid">
  9.   % if op:
  10.   <span>${a} ${op} ${b} = ${result}</span>
  11.   % endif
  12.   <form action=${url("calculator.views.index")} method=POST>
  13.     <input name="a">
  14.     <input type="radio" name="op" value="add">+</input>
  15.     <input type="radio" name="op" value="subtract">-</input>
  16.     <input type="radio" name="op" value="multiply">*</input>
  17.     <input type="radio" name="op" value="divide">/</input>
  18.     <input name="b">
  19.     <input type="submit" value="Calculate">
  20.   </form>
  21. </div>
  22. ${ commonfooter(messages) | n,unicode }
复制代码


是这个样子了:
1.png


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

自动生成的calculator/src/calculator/views.py是这样的:
  1. from desktop.lib.django_util import render
  2. import datetime
  3. def index(request):
  4.   return render('index.mako', request, dict(date=datetime.datetime.now()))
复制代码


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



五、调试Django



我们故意少输入一个,点击计算会出现错误:
1.png



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






本文共享自:http://blog.csdn.net/wsscy2004/article/details/27690191

没找到任何评论,期待你打破沉寂

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

推荐上一条 /2 下一条