Building a brand new application is more work but is ideal for creating a custom solution.
Note It is now more recommended to integrate external services (e.g. integrate a new SQL Datatase with the Editor, add a new visualization…) to the core Hue APIs instead of building brand new application. This page gives good content in both cases. Feel free to contact the community for advice.
Hue leverages the browser to provide users with an environment for exploring and analyzing data.
Build on top of the Hue SDK to enable your application to interact efficiently with Hadoop and the other Hue services.
By building on top of Hue SDK, you get, out of the box:
This document will orient you with the general structure of Hue and will walk you through adding a new application using the SDK.
Now that we have a high-level overview of what’s going on, let’s go ahead and create a new installation.
The Hue SDK is available from Github. Releases can be found on the download page. Releases are missing a few dependencies that could not be included because of licencing issues. So if you prefer to have an environment ready from scratch, it is preferable to checkout a particular release tag instead.
cd hue
## Build
make apps
## Run
build/env/bin/hue runserver
## Alternative run
build/env/bin/hue supervisor
## Visit http://localhost:8000/ with your web browser.
./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/static/calculator/art/calculator.png # logo
calculator/src/static/calculator/css/calculator.css
calculator/src/static/calculator/js/calculator.js
As you’ll discover if you look at calculator’s setup.py, Hue uses a distutils entrypoint to register applications. By installing the calculator package into Hue’s python virtual environment, you’ll install a new app. The “app_reg.py” tool manages the applications that are installed. Note that in the following example, the value after the “–install” option is the path to the root directory of the application you want to install. In this example, it is a relative path to “/Users/philip/src/hue/calculator”.
./build/env/bin/python tools/app_reg/app_reg.py --install calculator --relative-paths
=== Installing app at calculator
Updating registry with calculator (version 0.1)
--- Making egg-info for calculator
Congrats, you’ve added a new app!
You can now browse the new application.
# If you haven't killed the old process, do so now.
build/env/bin/hue runserver
And then visit http://localhost:8000/ to check it out! You should see the app in the left menu.
Now that your app has been installed, you’ll want to customize it.
As you may have guessed, we’re going to build a small calculator
application. Edit calculator/src/calculator/templates/index.mako
to include a simple form and a Knockout viewmodel:
<%!from desktop.views import commonheader, commonfooter %>
<%namespace name="shared" file="shared_components.mako" />
%if not is_embeddable:
${commonheader("Calculator", "calculator", user, "100px") | n,unicode}
%endif
## Main body
<div class="container-fluid calculator-components">
<div class="row">
<div class="span6 offset3 margin-top-30 text-center">
<form class="form-inline">
<input type="text" class="input-mini margin-right-10" placeholder="A" data-bind="value: a">
<!-- ko foreach: operations -->
<label class="radio margin-left-5">
<input type="radio" name="op" data-bind="checkedValue: $data, checked: $parent.chosenOperation" /><span data-bind="text: $data"></span>
</label>
<!-- /ko -->
<input type="text" class="input-mini margin-left-10" placeholder="B" data-bind="value: b">
<button class="btn" data-bind="click: calculate">Calculate</button>
</form>
<h2 data-bind="visible: result() !== null">The result is <strong data-bind="text: result"></strong></h2>
</div>
</div>
</div>
<script>
(function() {
var CalculatorViewModel = function () {
var self = this;
self.operations = ko.observableArray(['+', '-', '*', '/']);
self.a = ko.observable();
self.b = ko.observable();
self.chosenOperation = ko.observable('+');
self.result = ko.observable(null);
self.calculate = function () {
var a = parseFloat(self.a());
var b = parseFloat(self.b());
var result = null;
switch (self.chosenOperation()) {
case '+':
result = a + b;
break;
case '-':
result = a - b;
break;
case '*':
result = a * b;
break;
case '/':
result = a / b;
}
self.result(result);
}
};
$(document).ready(function () {
ko.applyBindings(new CalculatorViewModel(), $('.calculator-components')[0]);
});
})();
</script>
%if not is_embeddable:
${commonfooter(messages) | n,unicode}
%endif
The template language here is Mako,
which is flexible and powerful. If you use the “.html” extension, Hue
will render your page using
Django templates
instead.
Note that we use Knockout.js to do the heavy lifting of this app.
Let’s edit calculator/src/calculator/views.py to simply render the page:
#!/usr/bin/env python
from desktop.lib.django_util import render
def index(request):
return render('index.mako', request, {
'is_embeddable': request.GET.get('is_embeddable', False),
})
You can now go and try the calculator.