for value in range(start, stop):
await context.set_aspect(f'value-{value}', value=value)
await asyncio.sleep(0.15)
async def trigger_output(context: BindingContext):
value = context.trigger.value
current = json.loads(context.states['output']['children'])
current.append(value)
await context.set_aspect(
'output',
children=json.dumps(current),
)
if value == 10:
await context.set_aspect('done', children='done')
for i in range(1, 3):
page.bind(Trigger(f'output-{i}', 'value'))(trigger_input)
for i in range(1, 11):
page.bind(Trigger(f'value-{i}', 'value'),
State('output', 'children'))(trigger_output)
if __name__ == '__main__':
from dazzler import Dazzler
app = Dazzler(__name__)
app.add_page(page)
app.start()
import functools
from dazzler.components import core
from dazzler.system import Page, Trigger, BindingContext
page = Page(
'binding-chain',
core.Container([
core.Button(x, identity=f'trigger-{x}') for x in range(1, 21)
] + [core.Container(identity='output')])
)
async def update_next(context: BindingContext, num: int = 0):
await context.set_aspect(
f'trigger-{num+1}',
clicks=1,
)
@page.bind(Trigger('trigger-20', 'clicks'))
async def last_trigger(context: BindingContext):
await context.set_aspect('output', children='output generated')
for i in range(1, 20):
page.bind(Trigger(f'trigger-{i}', 'clicks'))(
functools.partial(update_next, num=i)
)
]),
core.Button('click sum', identity='click-sum'),
core.Container(identity='sum-output'),
core.Container(identity='shaped-output'),
])
)
async def bind_click(ctx: BindingContext):
await ctx.set_aspect(
f'{ctx.trigger.identity}-output',
children=f'Click {ctx.trigger.identity}: {ctx.trigger.value}'
)
page.bind(Trigger('single', 'clicks'))(bind_click)
page.bind(Trigger('shaped', 'clicks'))(bind_click)
async def bind_array_value(ctx: BindingContext):
await ctx.set_aspect(
f'output-{ctx.trigger.identity}',
children=f'{ctx.trigger.identity} value: {ctx.trigger.value}'
)
for i in arr:
page.bind(Trigger(f'array-{i}', 'value'))(bind_array_value)
@page.bind(
'fontSize': 777
},
'json': True,
},
}
button_ids = ['set-{}'.format(y) for y in aspect_types]
output_ids = ['out-{}'.format(y) for y in aspect_types]
layout = core.Container([
core.Container([core.Button(x, identity=x) for x in button_ids]),
spec.TestComponent('', identity='spec-output', id='spec-output'),
])
page = Page('page', url='/', layout=layout)
app.add_page(page)
async def on_click_render_type(context: BindingContext):
identity = context.trigger.identity.replace('set-', '')
await context.set_aspect(
'spec-output', **{f'{identity}_prop': aspect_types[identity]['value']})
for button in button_ids:
page.bind(Trigger(button, 'clicks'))(on_click_render_type)
if __name__ == '__main__':
app.start('-v --debug=1 --port=8155'.split())
core.Container([
core.Button(
f'Modify {x}', identity=f'modify-{x}'
)
for x in views
]),
core.ViewPort('one', {
x: core.Container(x) for x in tabs
}, identity='tabs', tabbed=True, tab_labels={
x: x.upper() for x in tabs
}, rounded_tabs=True, bordered=True),
])
)
async def activate_view(ctx: BindingContext):
await ctx.set_aspect(
'viewport',
active=ctx.trigger.identity.replace('toggle-', '')
)
async def modify(ctx: BindingContext):
identity = ctx.identity.replace('modify-', '')
await ctx.set_aspect(identity, children=f'Modified {identity}')
for view in views:
page.bind(Trigger(f'toggle-{view}', 'clicks'))(activate_view)
page.bind(Trigger(f'modify-{view}', 'clicks'))(modify)
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):
await ctx.set_aspect(
f'{ctx.trigger.identity}-output',
children=f'{ctx.trigger.identity} value {ctx.trigger.value}')
for identity in (text_inputs + ('number', )):
page.bind(Trigger(identity, 'value'))(on_value)
@page.bind(Trigger('checkbox', 'checked'))
async def on_check(ctx: BindingContext):
await ctx.set_aspect('checkbox-output',
children=f'Checked: {ctx.trigger.value}')
from dazzler.components import core
from dazzler.system import Page, Trigger, BindingContext
page = Page(
__name__,
core.Container([
core.Html('button', 'click me', events=['click'], identity='click'),
core.Html('input', events=['focus', 'blur'], identity='focus'),
core.Html('div',
'mouse',
events=[
'mouseup', 'mouseenter', 'mouseleave', 'mousedown',
'mouseover'
],
identity='mouse'),
core.Container(identity='click-output'),
core.Container(identity='focus-output'),
core.Container(identity='mouse-output'),
]))
async def on_event(ctx: BindingContext, output=''):
await ctx.set_aspect(output, children=json.dumps(ctx.trigger.value))
for identity in ('click', 'focus', 'mouse'):
page.bind(Trigger(identity,
'event'))(functools.partial(on_event,
output=f'{identity}-output'))
