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