Custom UI Controls

You can create any type of a reusable UI control. Remember to take a look at default controls in ajenti/plugins/main for guidance.


In this example, we’ll create a HTML5 slider control.


from ajenti.api import plugin
from ajenti.plugins.main.api import SectionPlugin
from ajenti.ui import on, p, UIElement

class Test (SectionPlugin):
    def init(self):
        self.title = 'Controls'
        self.icon = 'smile'
        self.category = 'Demo'

    @on('check', 'click')
    def on_show(self):
        self.context.notify('info', 'Value is %i' % self.find('slider').value)

@p('value', type=int, default=0)
class Slider (UIElement):
    typeid = 'slider'


            <formline text="Slider">
                <slider id="slider" value="0" />
                <button icon="ok" id="check" text="Get value" />

Control class is decorated with ajenti.ui.p() for each of its properties. The main client-side logic is implemented through CoffeeScript code (though you can try to get away with pure-JS).


class window.Controls.slider extends window.Control
    createDom: () ->
        # createDom() must return HTML
                <input type="range" min="0" max="10" />

    setupDom: (dom) ->
        # setupDom may attach event handler and perform other DOM manipulations
        # use hash to populate control with its current state
        @input = $(@dom).find('input')

    detectUpdates: () ->
        # detectUpdates() should return a hash containing only changed properties
        # be sure to not report unchanged properties since this will lead to infinite update loops
        r = {}
        value = parseInt(@input.val())
        if value != @properties.value
            r.value = value
        return r

Download this example

comments powered by Disqus