Api

Core
Widget
Form Widget

Element

class flask_uio.element.Element(tag_name, inner_text=None, hide_id=True, self_closing_tag=False, **attrs)[source]

Element is the core of FlaskUIO, it is basically to build an HTML element/tag string.

Parameters

  • tag_name (string) – html tag name.

  • inner_text (string, optional) – element’s inner text. Defaults to None.

  • hide_id (bool, optional) – hide id attribute. Defaults to True.

  • self_closing_tag (bool, optional) – open-close tags or single tag. Defaults to False.

  • **attrs – html’s attribute, use “_” following by attribute’s name. Example: _class=’container’, _style=’color: red;’

append(*elements)[source]

Append inner elements

Returns: self

find_element(*types)[source]

Find inner element by type

Returns: list[Element]

get_html()[source]

Generate html string

Returns: string

Example 1: Create elements

>>> from flask_uio import Element
>>> box1 = Element('div', 'Box 1', _style='background-color: #333;')
>>> box1.get_html()
'<div style="background-color: #333;">Box 1</div>'
>>> a = Element('a', 'Google', _href='http://google.com')
>>> a.get_html()
'<a href="http://google.com">Google</a>'

Example 2: Append elements

html = Element('html', _lang='en')
head = Element('head')
head.append(
    Element('title', 'Your Website'),
    Element('meta', _charset='UTF-8'),
    Element('meta', _name='viewport', _content='width=device-width, initial-scale=1.0'),
)
html.append(head)
print(html.get_html())

Body

class flask_uio.element.Body(elements=None, scripts=None, injected_scripts=None, **attrs)[source]

Body widget for building html body element.

Parameters

  • elements (list[Element], optional) – list of element. Defaults to None.

  • scripts (list[Script], optional) – list of script. Defaults to None.

  • injected_scripts (list[Script], optional) – list of script that will be injected later. Defaults to None.

append(*elements)[source]

Append elements to body

append_injected_script(*scripts)[source]

Append injected scripts to body

append_script(*srcs)[source]

Append scripts to body

get_html()[source]

Generate html string

Return: string

Html

class flask_uio.element.Html(title)[source]

Html widget for building html element.

Parameters

title (string) – Page’s title

Script

class flask_uio.element.Script(src='index.js')[source]

Script widget for building html script element

Parameters

src (str, optional) – url path. Defaults to ‘index.js’.

FieldElement

class flask_uio.element.FieldElement(tag_name, id=None, name=None, placeholder=None, disabled=False, required=False, readonly=False, validators=None, **attrs)[source]

Field element is used for providing functionality to form field.

Parameters

  • tag_name (string) – html tag name.

  • id (string, optional) – set custom id html attribute. Defaults to None.

  • name (string, optional) – set name html attribute. Defaults to None.

  • placeholder (string, optional) – set placeholder. Defaults to None.

  • disabled (bool, optional) – set disabled attribute. Defaults to False.

  • required (bool, optional) – set required attribute. Defaults to False.

  • readonly (bool, optional) – set readonly attribute. Defaults to False.

  • validators (list[Validator], optional) – add validators (auto add RequiredValidator if required). Defaults to None.

property data

Override depend on field data type

property form_data

Request form data

Returns

request form data

Return type

data

validate()[source]

Validate form data

Raises

Exception – if not an instance of Validator.

Returns

status and message.

Return type

Error

Document

class flask_uio.base.Document(title, summernote=False)[source]

Document widget (HTML)

Parameters

  • title (string) – Page’s title.

  • summernote (bool, optional) – enable summernote. Defaults to False.

More Info:

class flask_uio.base.FomanticBody(elements=None, scripts=None, summernote=False, **attrs)[source]

Body widget with Fomantic UI

Parameters

  • elements (list[Element], optional) – list of element. Defaults to None.

  • scripts (list[Script], optional) – list of script. Defaults to None.

  • summernote (bool, optional) – enable summernote. Defaults to False.

class flask_uio.base.FomanticHead(title, elements=None, links=None, scripts=None, summernote=False, **attrs)[source]

Head widget with Fomantic UI

Parameters

  • title (string) – Page’s title.

  • elements (list[Element], optional) – list of element. Defaults to None.

  • links (list[Link], optional) – list of link. Defaults to None.

  • scripts (list[Script], optional) – list of script. Defaults to None.

  • summernote (bool, optional) – enable summernote. Defaults to False.

Button

class flask_uio.button.Button(title, form_id=None, **attrs)[source]

Button widget

Parameters

  • title (str) – button’s title.

  • form_id (str) – id of form to be submitted.

Defaults:

attrs:

type=’submit’ class=’ui button’

class flask_uio.button.LinkButton(title, url, **attrs)[source]

Link button widget

Parameters

  • title (str) – button’s title.

  • url (str) – linked url.

  • attrs – element’s attributes.

Defaults:

attrs:

class=’ui button’

Card

class flask_uio.card.Card(*elements, url=None, **attrs)[source]

Card widget

Parameters

url (string, optional) – link url. Defaults to None.

Defaults:

If url, tag_name=’a’ or else ‘div’ class=’ui card’

class flask_uio.card.CardContent(*cards, **attrs)[source]

Card content widget used for adding content to card

Defaults:

class=’content’

class flask_uio.card.CardContentDesc(text, **attrs)[source]

Card content description widget add description to card content

Parameters

text (string) – description

Defaults:

class=’description’

class flask_uio.card.CardContentHeader(title, **attrs)[source]

Card content header widget add header to card content

Parameters

title (string) – header’s title

Defaults:

class=’header’

class flask_uio.card.CardContentMeta(text, **attrs)[source]

Card content meta widget add meta to card content

Parameters

text (string) – meta text

Defaults:

class=’meta’

class flask_uio.card.CardImage(src)[source]

Card image widget for showing image in card (Card widget’s child)

Parameters

src (string) – path to image.

Defaults:

class=’image’

class flask_uio.card.Cards(*cards, nb_card=None, **attrs)[source]

Cards widget for managing multiple cards

Parameters

nb_card (string, optional) – number of cards. Defaults to None.

Raises

Exception – If child is not Card object.

Container

class flask_uio.container.Container(*elements, **attrs)[source]

Container widget

Raises

ValueError – if element is not an instance of CoreElement.

Defaults:

class=’ui container’

Dropdown

class flask_uio.dropdown.Dropdown(title, *dropdown_menus, **attrs)[source]

Dropdown widget

Parameters

title (string) – dropdown’s title

Defaults:

class=’ui dropdown’

class flask_uio.dropdown.DropdownMenu(*dropdown_menu_items, **attrs)[source]

Dropdown menu widget

Defaults:

class=’menu’

class flask_uio.dropdown.DropdownMenuItem(name, url=None, icon=None, desc=None, **attrs)[source]

Dropdown menu item

Parameters

  • name (string) – item’s name

  • url (string, optional) – link url. Defaults to None.

  • icon (Element, optional) – item’s icon. Defaults to None.

  • desc (string, optional) – item’s description. Defaults to None.

Defaults:

class=’item’

Example: Create gender dropdown

d = Dropdown('Gender',
    DropdownMenu(
        DropdownMenuItem('Male', icon=Element('i', _class='male icon')),
        DropdownMenuItem('Female', icon=Element('i', _class='female icon')),
    ),
)

# or use **append(*elements)**

Divider

class flask_uio.divider.Divider(label=None, **attrs)[source]

Divider widget

Parameters

label (string, optional) – divider’s label. Defaults to None.

Defaults:

class=’ui divider’

Breadcrumb

class flask_uio.breadcrumb.Breadcrumb(is_dividing=True, **attrs)[source]

Breadcrumb widget

Parameters

is_dividing (bool, optional) – Seperate between sections. Defaults to True.

More Info:

class flask_uio.breadcrumb.BreadcrumbDividerIcon(icon_css_class=None)[source]

Breadcrumb divider icon

Parameters

icon_css_class (string, optional) – fomantic-ui icon class. Defaults to ‘right chevron icon divider’.

class flask_uio.breadcrumb.BreadcrumbSection(title, url=None, is_active=False)[source]

Breadcrumb section

Parameters

  • title (string) – section’s title

  • url (string, optional) – section’s url. Defaults to None.

  • is_active (bool, optional) – apply active style to section. Defaults to False.

Icon

class flask_uio.icon.Icon(css_class)[source]

Icon widget

Parameters

css_class (str) – set icon css class.

class flask_uio.icon.LinkIcon(css_class, url, target=None)[source]

LinkIcon widget

Parameters

  • css_class (str) – set icon css class.

  • url (str) – url.

  • target (str, optional) – ‘_self’, ‘_blank’, ‘_parent’, ‘_top’

More Info:

Modal

class flask_uio.modal.ConfirmModal(title, message, more_message=None, submit_url=None, yes='yes', yes_color='red', no='no', no_color='cancel', icon=None, calling_id=None, form_id=None, **attrs)[source]

Confirmation modal widget

Parameters

  • title (string) – modal’s title

  • message (string) – modal’s message

  • more_message (string, optional) – modal’s more description. Defaults to None.

  • submit_url (string, optional) – form’s action url. Defaults to None.

  • yes (str, optional) – customize yes text. Defaults to ‘yes’.

  • yes_color (str, optional) – customzie yes button’s color. Defaults to ‘red’.

  • no (str, optional) – customize no text. Defaults to ‘no’.

  • no_color (str, optional) – customzie no button’s color. Defaults to ‘cancel’.

  • icon (Icon, optional) – modal’s icon. Defaults to None.

  • calling_id (string, optional) – element’s id that is clicked to open the modal. Defaults to None.

  • form_id (string, optional) – form’s id where yes’s button submitted to. Defaults to None.

class flask_uio.modal.MessageModal(title, content_elements=None, action_elements=None, icon=None, scroll_content=False, calling_id=None, **attrs)[source]

Message modal widget

Parameters

  • title (string) – modal’s title

  • content_elements (list[Element], optional) – modal’s content. Defaults to None.

  • action_elements (list[Element], optional) – modal’s action button. Defaults to None.

  • icon (Icon, optional) – modal’s icon. Defaults to None.

  • scroll_content (bool, optional) – enable scroll content. Defaults to False.

  • calling_id (string, optional) – id of element that is clicked to open the modal. Defaults to None.

More Info:

Image

class flask_uio.image.Image(src, **attrs)[source]

Image widget

Parameters

src (string) – img’s src.

More Info:

class flask_uio.image.LinkImage(src, url, **attrs)[source]

Link Image widget

Parameters

  • src (string) – img’s src.

  • url (string) – link url.

Message

class flask_uio.message.Message(message, opt_css_class=None, desc=None, icon=None, spacing=False, hideable=True)[source]

Message widget

Parameters

  • message (string) – message’s text

  • opt_css_class (string, optional) – option fomantic ui css class. Defaults to None.

  • desc (string, optional) – message’s description. Defaults to None.

  • icon (Icon, optional) – message’s icon. Defaults to None.

  • spacing (bool, optional) – enable vertical spacing between elements. Defaults to False.

  • hideable (bool, optional) – auto hide message (10s). Defaults to True.

More Info:

Field

class flask_uio.field.Field(*elements, required=False, error=False, disabled=False, css_class=None)[source]

Field widget for styling control with fomantic-ui.

Parameters

  • required (bool, optional) – apply required style. Defaults to False.

  • error (bool, optional) – apply error style. Defaults to False.

  • disabled (bool, optional) – apply disabled style. Defaults to False.

  • css_class (string, optional) – apply custom style. Defaults to None.

CheckBoxField

class flask_uio.field.CheckBoxField(name, disabled=False, readonly=False, **attrs)[source]

Checkbox field widget

Parameters

  • name (string) – input’s name.

  • disabled (bool, optional) – apply disabled style. Defaults to False.

  • readonly (bool, optional) – apply readonly attribute to input. Defaults to False.

  • **attrs – html attributes.

property data

Override depend on field data type

DateField

class flask_uio.field.DateField(name, required=False, disabled=False, readonly=False, placeholder=None, validators=None)[source]

Date field widget

Parameters

  • name (string) – input’s name

  • required (bool, optional) – set required attribute. Defaults to False.

  • disabled (bool, optional) – set disabled attribute. Defaults to False.

  • readonly (bool, optional) – set readonly attribute. Defaults to False.

  • placeholder (string, optional) – set placeholder. Defaults to None.

  • validators (list[Validator], optional) – add validators (auto add RequiredValidator if required). Defaults to None.

property data

Override depend on field data type

DateTimeField

class flask_uio.field.DateTimeField(name, required=False, disabled=False, readonly=False, placeholder=None, validators=None)[source]

DateTime field widget

Parameters

  • name (string) – input’s name

  • required (bool, optional) – set required attribute. Defaults to False.

  • disabled (bool, optional) – set disabled attribute. Defaults to False.

  • readonly (bool, optional) – set readonly attribute. Defaults to False.

  • placeholder (string, optional) – set placeholder. Defaults to None.

  • validators (list[Validator], optional) – add validators (auto add RequiredValidator if required). Defaults to None.

property data

Override depend on field data type

QueryDropDownField

class flask_uio.field.QueryDropDownField(name, required=False, disabled=False, readonly=False, dbname=None, field_id=None, field_name=None, from_table=None, where=None, order_by=None, additional_where=None, fk_field_id=None, parents=None)[source]

Query dropdown field widget

Parameters

  • name (string) – field’s name.

  • required (bool, optional) – set required attribute. Defaults to False.

  • disabled (bool, optional) – set disabled attribute. Defaults to False.

  • readonly (bool, optional) – set readonly attribute. Defaults to False.

  • dbname (string, optional) – database’s name (required setup app config). Defaults to None.

  • field_id (string, optional) – key field’s name. Defaults to None.

  • field_name (string, optional) – value field’s name. Defaults to None.

  • from_table (string, optional) – table’s name. Defaults to None.

  • where (string, optional) – sql query for where. Defaults to None.

  • order_by (string, optional) – sql query for order by. Defaults to None.

  • additional_where (string, optional) – sql query for where additionally. Defaults to None.

  • fk_field_id (string, optional) – field’s name for children dropdown query. Defaults to None.

  • parents (list[QueryDropDownField], optional) – for dependent dropdown. Defaults to None.

Note

  • Support only flask_sqlalchemy

Setup:

app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///test.db'
app.config['SQLALCHEMY_DATABASE_URI_DICT'] = {
    'test': 'sqlite:///test.db',
}
app.config['FLASK_UIO_FERNET_SECRET_KEY'] = 'your_fernet_secret_key'
# >>> from flask_uio import Token
# >>> Token.key()

Example:

category = uio.QueryDropDownField(
    'category',
    True,
    dbname='test',
    field_id='id',
    field_name='name',
    from_table='category',
    order_by='name desc',
)
post = uio.QueryDropDownField(
    'post',
    True,
    dbname='test',
    field_id='id',
    field_name='title',
    from_table='post',
    where=f'category_id = {category.data if category.data else 0}',
    parents=[category]
)
property data

Override depend on field data type

TextField

class flask_uio.field.TextField(name, required=False, disabled=False, readonly=False, placeholder=None, input_type='text', validators=None)[source]

Text field widget

Parameters

  • name (string) – input’s name.

  • required (bool, optional) – set required attribute. Defaults to False.

  • disabled (bool, optional) – set disabled attribute. Defaults to False.

  • readonly (bool, optional) – set readonly attribute. Defaults to False.

  • placeholder (string, optional) – set placeholder. Defaults to None.

  • input_type (str, optional) – input’s type “text”, “password”,…etc. Defaults to ‘text’.

  • validators (list[Validator], optional) – add validators (auto add RequiredValidator if required). Defaults to None.

property data

Override depend on field data type

TextAreaField

class flask_uio.field.TextAreaField(name, rows=None, required=False, disabled=False, readonly=False, placeholder=None)[source]
property data

Override depend on field data type

TextAreaSummernoteField

class flask_uio.field.TextAreaSummernoteField(name, rows=None, required=False, disabled=False, readonly=False, placeholder=None)[source]
property data

Override depend on field data type

UploadField

class flask_uio.field.UploadField(name, required=False, disabled=False, readonly=False, placeholder=None, validators=None)[source]
property data

Override depend on field data type

property form_data

Request form data

Returns

request form data

Return type

data

Form

class flask_uio.form.Form(method='POST', action=None, has_file=None, **attrs)[source]

Form widget

Parameters

  • method (str, optional) – form’s method. Defaults to ‘POST’.

  • action (string, optional) – form’s action. Defaults to None.

  • has_file (bool, optional) – required for fileupload. Defaults to None.