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.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)

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

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 = None

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

js_files = None

List of required javascript files

css_files = None

List of required css files

css_id

Generate random css id for component

set_object(object, force=False)

Set object for rendering component and set object to all components

Parameters:object – Returns:

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
• 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)
• component: Render field with given component, row object will be set as the component object

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:

render_field(field, data)

Render field for given data

get_rendered_object(obj=None)

Render object

get_rendered_objects()

Render objects

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

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

attr = None

Dict with html attributes

get_attr_text()

Get html attr text to render in template

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

Html single html tag

valid_attr = []

Valid attributes that can be used

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

Img tag

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

Input tag

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

Bootstrap button group

class trionyx.layout.Button(label, url=None, model_url=None, model_params=None, model_code=None, dialog=False, dialog_options=None, dialog_reload_tab=None, **options)

Bootstrap button

• link_url
• dialog_url
• onClick

set_object(object)

Set object and onClick

format_dialog_options()

Fromat options to JS dict

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.Panel(title, *components, **options)

Bootstrap panel available options

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

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

Bootstrap description, fields are the params. available options

• horizontal

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

Bootstrap table description, fields are the params

class trionyx.layout.Table(objects, *fields, **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