async def on_click(ctx: BindingContext):
await ctx.set_aspect(
'output',
children=core.Container([
core.Container('from click', identity='trigger'),
core.Input(value=ctx.trigger.value,
type='number', identity='store-clicks')
])
)
import asyncio
import json
from dazzler.components import core
from dazzler.system import Page, Trigger, BindingContext, State
page = Page(
'binding-tree',
core.Container([
core.Button('trigger', identity='trigger'),
core.Container([
core.Container([
core.Input(identity=f'output-{i}', type='number')
for i in range(1, 3)
]),
core.Container([
core.Input(identity=f'value-{i}', type='number')
for i in range(1, 11)
]),
core.Container('[]', identity='output'),
core.Container(identity='done')
])
]))
@page.bind(Trigger('trigger', 'clicks'))
async def trigger_click(context: BindingContext):
await context.set_aspect('output-1', value=1)
# Got to alternate the inputs for the first set to complete and let
# frontend to register the state and all,
# so as long as this start after and the other delay
# is a little higher it should be ok.
"""
Page initial_trigger of dazzler
Created 2019-06-15
"""
from dazzler.components import core
from dazzler.system import Page, Trigger, BindingContext, State
page = Page(
'initial-trigger',
core.Container([
core.Input(value=10, identity='input'),
core.Container(identity='output'),
core.Input(value=88, identity='state'),
core.Container(identity='state-output')
]))
@page.bind(Trigger('input', 'value'), State('state', 'value'))
async def on_value(context: BindingContext):
await context.set_aspect('output',
children=f'Input {context.trigger.value}')
await context.set_aspect(
'state-output', children=F'State {context.states["state"]["value"]}')
"""
from dazzler.components import core
from dazzler.system import Page, Trigger, BindingContext, State
from tests.components import spec_components as spec
arr = list(range(1, 12))
page = Page(
__name__,
core.Container([
spec.ComponentAsAspect(
identity='component',
single=core.Button('single', identity='single'),
array=[
core.Input(value=x, identity=f'array-{x}', type='number')
for x in arr
],
shape={'shaped': core.Button('shaped', identity='shaped')},
list_of_dict=[
{
'label': core.Container(
f'label{x}', identity=f'label-{x}'
),
'value': f'label-{x}'
} for x in arr
]
),
core.Container(identity='single-output'),
core.Container([
core.Container(identity=f'output-array-{x}') for x in arr
"""
Page same_identity of dazzler
Created 2019-06-17
"""
from dazzler.components import core
from dazzler.system import Page, Trigger, BindingContext, State
page = Page(
__name__,
core.Container([
core.Container(
core.Input(value=0, type='number', identity='same'),
identity='container'
),
core.Button('click', identity='click')
])
)
@page.bind(Trigger('click', 'clicks'), State('container', 'children'))
async def on_click(ctx: BindingContext):
component = ctx.states['container']['children']
component.value = ctx.trigger.value
await ctx.set_aspect(
'container',
children=component
)
Page regex_bindings of dazzler
Created 2020-01-12
"""
import re
from dazzler.components import core
from dazzler.system import Page, Trigger, BindingContext, State
page = Page(
__name__,
core.Container([
core.Button('btn1', identity='btn1'),
core.Button('btn2', identity='btn2'),
core.Container(identity='output1'),
core.Container(identity='output2'),
core.Input(identity='state1'),
core.Store(data='store', identity='state2'),
core.Container(identity='state-output')
]))
@page.bind(Trigger(r'btn\d', 'clicks', regex=True),
State(r'state\d', '(value|data)', regex=True))
async def on_any_click(ctx: BindingContext):
await ctx.set_aspect(
re.compile(r'output\d'),
children=f'clicked from button {ctx.trigger.identity}')
output = []
for identity, aspects in ctx.states.items():
for aspect_name, aspect_value in aspects.items():
core.Container(core.Container(core.Container([
core.Html(
'div', core.Container('inside html div'),
identity='inside-html'
),
core.Html(
'div',
attributes={'children': core.Html('span', 'attribute')}
),
])), identity='nested-components'),
core.Container(identity='nested-output'),
core.Button('get-aspect-click', identity='get-aspect-trigger'),
core.Container(
core.Input(value='input-value'),
identity='input'
),
core.Container(core.Input(value=4747), identity='as-state'),
core.Container(identity='get-aspect-output'),
core.Container(identity='as-state-output')
])
)
@page.bind(Trigger('component', 'children'))
async def trigger(ctx: BindingContext):
await ctx.set_aspect(
'output', children=f'From component: {ctx.trigger.value.children}'
)
"""
Page get_aspect of dazzler
Created 2019-06-15
"""
import asyncio
import json
from dazzler.components import core
from dazzler.system import Page, Trigger, BindingContext
page = Page(
'get-aspect',
core.Container([
core.Input(value=0, type='number', identity='input'),
core.Button('Start', identity='starter'),
core.Button('Updater', identity='updater'),
core.Container(identity='done'),
core.Container(identity='done-output')
]))
@page.bind(Trigger('starter', 'clicks'))
async def starter(ctx: BindingContext):
value = 0
values = set()
while value < 100:
value = await ctx.get_aspect('input', 'value')
values.add(value)
await asyncio.sleep(0.05)
await ctx.set_aspect(
from dazzler.components import core
from dazzler.system import Page, BindingContext
page = Page(
__name__,
core.Container([
core.Input(identity='input'),
core.Button('click me', identity='btn1'),
core.Button('click me 2', identity='btn2'),
core.Container(identity='output-state'),
core.Container(identity='output-trigger')
]))
@page.bind(['clicks@btn1', 'clicks@btn2'], 'value@input')
async def on_click(ctx: BindingContext):
await ctx.set_aspect('output-trigger', children=ctx.trigger.identity)
await ctx.set_aspect('output-state', children=ctx.states['input']['value'])
from dazzler.system import Page, Trigger, BindingContext
lb_component = core.ListBox(
[core.Container(f'initial-{x}', class_name='item') for x in range(5)],
identity='list-box')
page = Page(
__name__,
core.Container([
lb_component,
core.Container([
core.Button('append', identity='append-btn'),
core.Button('prepend', identity='prepend-btn'),
core.Button('concat', identity='concat-btn'),
core.Button('insert', identity='insert-btn'),
core.Input(identity='index-input', type='number'),
core.Button('delete', identity='delete-btn')
])
]))
# Add an element to the end.
@page.bind(Trigger('append-btn', 'clicks'))
async def on_append(ctx: BindingContext):
await ctx.set_aspect('list-box',
append=core.Container('appended',
class_name='item append'))
# Add an element to the start of the list.
@page.bind(Trigger('prepend-btn', 'clicks'))
],
title=movie['director']),
'value': {
**movie, 'genres': movie['genres'].split('|')
}
} for movie in movies],
identity='search-dropdown',
searchable=True,
scrollable=True,
multi=True),
core.Dropdown(['title', 'keyword', 'genres', 'year'],
identity='search-props-dropdown',
multi=True),
core.Container([
'Search label',
core.Input(type='checkbox', identity='search-label-checkbox')
]),
core.Dropdown(backend_options,
identity='search-backend-dropdown',
searchable=True,
search_backend=True),
core.Container(identity='simple-output'),
core.Container(identity='multi-output')
],
style={
'width': '300px',
'padding': '1rem'
}))
@page.bind('value@simple-dropdown')
"""
Page interval of dazzler
Created 2019-06-13
"""
from dazzler.components import core
from dazzler.system import Page, Trigger, BindingContext, State
page = Page(
__name__,
core.Container([
core.Interval(timeout=250, identity='interval'),
core.Container(identity='output'),
core.Input(type='checkbox', identity='toggle'),
]))
@page.bind(Trigger('interval', 'times'), State('toggle', 'checked'))
async def on_time(ctx: BindingContext):
await ctx.set_aspect('output', children=f'Times: {ctx.trigger.value}')
if ctx.trigger.value > 5 and not ctx.states['toggle']['checked']:
await ctx.set_aspect('interval', active=False)
@page.bind(Trigger('toggle', 'checked'))
async def on_check(ctx: BindingContext):
await ctx.set_aspect('interval', active=ctx.trigger.value)
from dazzler.components import core
from dazzler.system import Page, Trigger, BindingContext
text_inputs = ('text', 'search', 'tel', 'password', 'email')
page = Page(
'input-output',
core.Container([
# Textual inputs
core.Html(
'form',
[
core.Container(
list(
itertools.chain(
*((core.Input(type=text, identity=text, name=text),
core.Container(f'{text}-output',
identity=f'{text}-output'))
for text in text_inputs)))),
core.Input(identity='number', type='number', name='num'),
core.Input(identity='checkbox', type='checkbox'),
core.Container(identity='number-output'),
core.Container(identity='checkbox-output'),
# FIXME Reset doesn't work with controlled components.
# Maybe add a proper Form component and reset button?
# core.Input(type='reset'),
]),
]))
async def on_value(ctx: BindingContext):
