Layout and Components

Layouts are used to render a view for an object. Layouts are defined and registered in layouts.py in an app.

Example of a tab layout for the user profile:

@tabs.register('trionyx.profile')
def account_overview(obj):
    return Container(
        Row(
            Column2(
                Panel(
                    'Avatar',
                    Img(src="{}{}".format(settings.MEDIA_URL, obj.avatar)),
                    collapse=True,
                ),
            ),
            Column10(
                Panel(
                    'Account information',
                    DescriptionList(
                        'email',
                        'first_name',
                        'last_name',
                    ),
                )
            ),
        )
    )

class trionyx.layout.Colors

class trionyx.layout.Layout(*components, **options)

Layout object that holds components

get_paths()

Get all paths in layout for easy lookup

find_component_by_path(path)

Find component by path, gives back component and parent

find_component_by_id(id=None, current_comp=None)

Find component by id, gives back component and parent

render(request=None)

Render layout for given request

collect_css_files(component=None)

Collect all css files

collect_js_files(component=None)

Collect all js files

set_object(object)

Set object for rendering layout and set object to all components

Parameters:object – Returns:

add_component(component, id=None, path=None, before=False, append=False)

Add component to existing layout can insert component before or after component

Parameters:

• component –
• id – component id
• path – component path, example: container.row.column6[1].panel
• append – append component to selected component from id or path

Returns:

delete_component(id=None, path=None)

Delete component for given path or id

Parameters:

• id – component id
• path – component path, example: container.row.column6[1].panel

Returns:

class trionyx.layout.Component(*components, **options)

Base component can be use as an holder for other components

template_name = ''

Component template to be rendered, default template only renders child components

js_files = []

List of required javascript files

css_files = []

List of required css files

set_object(object, force=False, layout_id=None)

Set object for rendering component and set object to all components

when object is set the layout should be complete with all components. So we also use it to set the layout_id so it’s available in the updated method and also prevent whole other lookup of all components.

Parameters:object – Returns:

updated()

Object updated hook method that is called when component is updated with object

render(context, request=None)

Render component

class trionyx.layout.ComponentFieldsMixin

Mixin for adding fields support and rendering of object(s) with fields.

fields = []

List of fields to be rendered. Item can be a string or dict, default options:

• field: Name of object attribute or dict key to be rendered
• label: Label of field
• value: Value to be rendered (Can also be a component)
• format: String format for rendering field, default is ‘{0}’
• renderer: Render function for rendering value, result will be given to format. (lambda value, **options: value)

Based on the order the fields are in the list a __index__ is set with the list index, this is used for rendering a object that is a list.

fields = [
    'first_name',
    'last_name'
]

fields = [
    'first_name',
    {
        'label': 'Real last name',
        'value': object.last_name
    }
]

fields_options = {}

Options available for the field, this is not required to set options on field.

• default: Default option value when not set.

fields_options = {
    'width': {
        'default': '150px',
    }
}

objects = []

List of object to be rendered, this can be a QuerySet, list or string. When its a string it will get the attribute of the object.

The items in the objects list can be a mix of Models, dicts or lists.

add_field(field, index=None)

Add field

get_fields()

Get all fields

parse_field(field_data, index=0)

Parse field and add missing options

parse_string_field(field_data)

Parse a string field to dict with options

String value is used as field name. Options can be given after = symbol. Where key value is separated by : and different options by ;, when no : is used then the value becomes True.

Example 1: field_name

# Output
{
    'field': 'field_name'
}

Example 3 field_name=option1:some value;option2: other value

# Output
{
    'field': 'field_name',
    'option1': 'some value',
    'option2': 'other value',
}

Example 3 field_name=option1;option2: other value

# Output
{
    'field': 'field_name',
    'option1': True,
    'option2': 'other value',
}

Parameters:field_data (str) – Return dict:

get_value(field, data)

Get value

render_field(field, data)

Render field for given data

get_rendered_object(obj=None)

Render object

get_rendered_objects()

Render objects

get_objects()

Get objects

class trionyx.layout.HtmlTemplate(template_name, context=None, css_files=None, js_files=None, **options)

HtmlTemplate render django html template

render(context, request=None)

Render component

class trionyx.layout.HtmlTagWrapper(*args, **kwargs)

HtmlTagWrapper wraps given component in given html tag

tag = 'div'

Html tag nam

valid_attr = []

Valid attributes that can be used

color_class = ''

When color is set the will be used as class example: btn btn-{color}

attr = {}

Dict with html attributes

get_attr_text()

Get html attr text to render in template

class trionyx.layout.OnclickTag(*components, url=None, model_url=None, model_params=None, model_code=None, sidebar=False, dialog=False, dialog_options=None, dialog_reload_tab=None, dialog_reload_sidebar=False, dialog_reload_layout=False, **options)

HTML tag with onlick for url or dialog

updated()

Set onClick url based on object

format_dialog_options()

Fromat options to JS dict

class trionyx.layout.Html(html=None, **kwargs)

Renders html in a tag when set

class trionyx.layout.Field(field, renderer=None, format=None, **options)

Render single field from object

updated()

Update html

class trionyx.layout.Img(html=None, **kwargs)

Img tag

class trionyx.layout.Link(label=None, href=None, **kwargs)

Link tag

updated()

Update link

class trionyx.layout.OnclickLink(label, **options)

Link

class trionyx.layout.Container(*args, **kwargs)

Bootstrap container

class trionyx.layout.Row(*args, **kwargs)

Bootstrap row

class trionyx.layout.Column(*args, **kwargs)

Bootstrap Column

class trionyx.layout.Column2(*args, **kwargs)

Bootstrap Column 2

class trionyx.layout.Column3(*args, **kwargs)

Bootstrap Column 3

class trionyx.layout.Column4(*args, **kwargs)

Bootstrap Column 4

class trionyx.layout.Column5(*args, **kwargs)

Bootstrap Column 5

class trionyx.layout.Column6(*args, **kwargs)

Bootstrap Column 6

class trionyx.layout.Column7(*args, **kwargs)

Bootstrap Column 7

class trionyx.layout.Column8(*args, **kwargs)

Bootstrap Column 8

class trionyx.layout.Column9(*args, **kwargs)

Bootstrap Column 9

class trionyx.layout.Column10(*args, **kwargs)

Bootstrap Column 10

class trionyx.layout.Column11(*args, **kwargs)

Bootstrap Column 11

class trionyx.layout.Column12(*args, **kwargs)

Bootstrap Column 12

class trionyx.layout.Badge(value, **kwargs)

Bootstrap badge

class trionyx.layout.Alert(html, alert='success', no_margin=False, **options)

Bootstrap alert

class trionyx.layout.ButtonGroup(*args, **kwargs)

Bootstrap button group

class trionyx.layout.Button(label, **options)

Bootstrap button

class trionyx.layout.Thumbnail(src, **options)

Bootstrap Thumbnail

class trionyx.layout.Input(form_field=None, has_error=False, **kwargs)

Input tag

class trionyx.layout.Panel(title, *components, **options)

Bootstrap panel available options

• title
• footer_components
• collapse
• contextual: primary, success, info, warning, danger

set_object(*args, **kwargs)

Set object on component

class trionyx.layout.DescriptionList(*fields, **options)

Bootstrap description, fields are the params. available options

• horizontal

class trionyx.layout.UnorderedList(*fields, objects=None, **options)

Unordered list

updated()

Set html with rendered fields

class trionyx.layout.OrderedList(*fields, objects=None, **options)

Ordered list

class trionyx.layout.ProgressBar(field='', value=0, max_value=100, size='md', striped=False, active=False, **options)

Bootstrap progressbar, fields are the params

updated()

Set value with rendered field

class trionyx.layout.TableDescription(*fields, **options)

Bootstrap table description, fields are the params

class trionyx.layout.Table(objects, *fields, css_class='table', header=True, condensed=True, hover=False, striped=False, bordered=False, **options)

Bootstrap table

footer: array with first items array/queryset and other items are the fields,

Same way how the constructor works

footer_objects = None

Can be string with field name relation, Queryset or list

get_footer_fields()

Get all footer fields

get_rendered_footer_object(obj)

Render footer object

get_rendered_footer_objects()

Render footer objects

class trionyx.layout.Chart(objects, *fields, **options)

Chart component

get_json_value(value)

Get json value

get_colors(size, color_type)

Get colors

get_color(index, color_type)

Get color

class trionyx.layout.LineChart(objects, *fields, **options)

updated()

Set chart data and scales

class trionyx.layout.BarChart(objects, *fields, **options)

class trionyx.layout.PieChart(objects, *fields, **options)

BarChart

updated()

Set chart data and scales

class trionyx.layout.DoughnutChart(objects, *fields, **options)

BarChart