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)[source]¶ Layout object that holds components
-
find_component_by_id
(id=None, current_comp=None)[source]¶ Find component by id, gives back component and parent
-
set_object
(object)[source]¶ 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)[source]¶ 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:
-
-
class
trionyx.layout.
Component
(*components, **options)[source]¶ 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)[source]¶ 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:
-
-
class
trionyx.layout.
ComponentFieldsMixin
[source]¶ 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.
-
parse_string_field
(field_data)[source]¶ 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:
-
-
class
trionyx.layout.
HtmlTemplate
(template_name, context=None, css_files=None, js_files=None, **options)[source]¶ HtmlTemplate render django html template
-
class
trionyx.layout.
HtmlTagWrapper
(*args, **kwargs)[source]¶ 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
-
-
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)[source]¶ HTML tag with onlick for url or dialog
-
class
trionyx.layout.
Field
(field, renderer=None, format=None, **options)[source]¶ Render single field from object
-
class
trionyx.layout.
Alert
(html, alert='success', no_margin=False, **options)[source]¶ Bootstrap alert
-
class
trionyx.layout.
Panel
(title, *components, **options)[source]¶ Bootstrap panel available options
- title
- footer_components
- collapse
- contextual: primary, success, info, warning, danger
-
class
trionyx.layout.
DescriptionList
(*fields, **options)[source]¶ Bootstrap description, fields are the params. available options
- horizontal
-
class
trionyx.layout.
ProgressBar
(field='', value=0, max_value=100, size='md', striped=False, active=False, **options)[source]¶ Bootstrap progressbar, fields are the params
-
class
trionyx.layout.
TableDescription
(*fields, **options)[source]¶ 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)[source]¶ Bootstrap table
- footer: array with first items array/queryset and other items are the fields,
- Same way how the constructor works
Can be string with field name relation, Queryset or list
Get all footer fields
Render footer object
Render footer objects