async def layout(request: web.Request): return core.Container([ core.Container(request.get('dummy', 'foobar'), identity='request-output'), core.Container(identity='cookie-output'), core.Button('Set from cookie', identity='cookie-setter') ])
async def test_session(start_visit, browser, backend): app = Dazzler(__name__) app.config.session.enable = False app.config.session.duration = 3 app.middlewares.append(SessionMiddleware(app, backend=backend(app))) page = Page(__name__, url='/', layout=core.Container([ core.Button('Click', identity='session-click'), core.Container(identity='session-output'), core.Button('Remove session', identity='remove-session'), ])) @page.bind(Trigger('session-click', 'clicks')) async def on_session(ctx: BindingContext): session = ctx.request['session'] clicks = await session.get('clicks') or 0 clicks += 1 await session.set('clicks', clicks) await ctx.set_aspect('session-output', children=f'Clicked {clicks}') @page.bind(Trigger('remove-session', 'clicks')) async def on_remove(ctx: BindingContext): session = ctx.request['session'] await session.delete('clicks') app.add_page(page) await start_visit(app) for i in range(1, 4): await browser.get('http://localhost:8150/') await browser.click('#session-click') await browser.wait_for_text_to_equal('#session-output', f'Clicked {i}') # Delete session item await browser.click('#remove-session') await browser.click('#session-click') await browser.wait_for_text_to_equal('#session-output', 'Clicked 1')
from dazzler.components import core from dazzler.system import Page, Trigger, BindingContext, State page = Page(name='home', url='/', layout=core.Container([ core.Button('Click me', identity='clicker'), core.Container(children='Not clicked', identity='output'), core.DataList([{ 'value': 'hello', 'label': 'world' }, { 'value': 'foo', 'label': 'Foo' }], identity='dropdown'), core.Container( 'No data', identity='datalist-output', ), ])) @page.bind(Trigger('clicker', 'clicks'), State('dropdown', 'data_value')) async def on_click(context: BindingContext): await context.set_aspect('output', children=f'Clicked {context.trigger.value}', style={ 'backgroundColor': 'blue' if context.trigger.value % 2 == 0 else 'red'
""" Page storage of dazzler Created 2019-07-17 """ import json from dazzler.components import core from dazzler.system import Page, Trigger, BindingContext page = Page( __name__, core.Container([ core.Button('Set local', identity='local-btn'), core.Container(identity='local-output'), core.Button('Set session', identity='session-btn'), core.Container(identity='session-output') ])) @page.bind(Trigger('local-btn', 'clicks')) async def on_click_local(ctx: BindingContext): data = await ctx.get_local_storage('data') if not data: data = {'clicks': 0} data['clicks'] += 1 await ctx.set_local_storage('data', data) await ctx.set_aspect('local-output', children=json.dumps(data)) @page.bind(Trigger('session-btn', 'clicks')) async def on_clicks_session(ctx: BindingContext):
""" Page viewport of dazzler Created 2019-06-24 """ from dazzler.components import core from dazzler.system import Page, Trigger, BindingContext views = ['first', 'second', 'third'] tabs = ['one', 'two', 'three'] page = Page( __name__, core.Container([ core.Container([ core.Button( f'Toggle {x}', identity=f'toggle-{x}' ) for x in views ], class_name='column'), core.ViewPort(views[0], { x: core.Container(x, identity=x) for x in views }, identity='viewport'), 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
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 progress of dazzler Created 2019-06-26 """ from dazzler.components import core from dazzler.system import Page, Trigger, BindingContext, State page = Page( __name__, core.Container([ core.ProgressBar(identity='progress', minimum=0, high=80, low=20, maximum=100, rounded=True, optimum=21, striped=True, progress_text='percent'), core.Button('add progress', identity='progress-btn'), core.Container(identity='counter') ])) @page.bind(Trigger('progress-btn', 'clicks'), State('progress', 'value')) async def on_meter(ctx: BindingContext): new_value = (ctx.states['progress']['value'] or 0) + 1 await ctx.set_aspect('progress', value=new_value) await ctx.set_aspect('counter', children=new_value)
('array', json.dumps, json.dumps), [ [1, 2, 3, 4], [1, 'foo', 'bar', 4], [{'arr': [1, 2, 3], 'foo': 'bar'}], [[1, 2, 4], ['foo', 'bar']] ] ) ] for i in range(0, 4)), 2))) page = Page( __name__, core.Container([ core.Store(identity='empty-store'), core.Store(data={'foo': 'bar'}, identity='initial-store'), core.Button('click', identity='click'), core.Container(identity='click-output'), core.Container(identity='initial-output'), core.Button('type-click', identity='type-click'), core.Store(identity='type-store'), core.Container(identity='type-output'), core.Button('get-aspect', identity='get-aspect-click'), core.Container(identity='get-aspect-output') ]) ) @page.bind(Trigger('initial-store', 'data')) async def initial(ctx: BindingContext): await ctx.set_aspect( 'initial-output',
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'])
async def on_click(context: BindingContext): await context.set_aspect('output', children=core.Button('click twice', identity='generated'))
""" Page button of dazzler Created 2019-07-06 """ from dazzler.components import core from dazzler.system import Page, Trigger, BindingContext page = Page( __name__, core.Container([ core.Button('Click me', identity='button', rounded=True), core.Container(identity='output') ])) @page.bind(Trigger('button', 'clicks')) async def on_click(ctx: BindingContext): await ctx.set_aspect('output', children=f'clicked: {ctx.trigger.value}')
Page list_box of dazzler Created 2019-11-28 """ from dazzler.components import core 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'))
""" Page modal of dazzler Created 2019-07-07 """ from dazzler.components import core from dazzler.system import Page, Trigger, BindingContext page = Page( __name__, core.Container([ core.Modal( core.Container('modal body', identity='modal-body'), header='modal header', footer='modal footer', identity='modal', close_button=False, ), core.Button('Show modal', identity='show') ])) @page.bind(Trigger('show', 'clicks')) async def on_show(ctx: BindingContext): await ctx.set_aspect('modal', active=True)
from dazzler.components import core from dazzler.system import Page, Trigger, BindingContext page = Page( 'removed-component', core.Container([ core.Container(core.Container(identity='set-me'), identity='remove-inner'), core.Button('remover', identity='remover'), core.Button('setter', identity='setter'), core.Container(identity='done') ])) @page.bind(Trigger('remover', 'clicks')) async def remover(context: BindingContext): await context.set_aspect('remove-inner', children=f'removed {context.trigger.value}') @page.bind(Trigger('setter', 'clicks')) async def on_set(context: BindingContext): await context.set_aspect('set-me', children='set') await context.set_aspect('done', children=f'done {context.trigger.value}')
""" 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(
Page component_as_aspect of dazzler Created 2019-06-17 """ 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'),
], identity='array-components'), core.Container(identity='array-output'), 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}'
from dazzler import Dazzler from dazzler.components import core from dazzler.system import Page, Trigger, BindingContext page = Page(name='page', url='/', layout=core.Container([ core.Button('click', identity='clicker'), core.Container('output', identity='output') ])) app = Dazzler(__name__) app.add_page(page) @page.bind(Trigger('clicker', 'clicks')) async def on_click(context: BindingContext): await context.set_aspect('output', children=core.Container('from binding', id='from-binding')) if __name__ == '__main__': app.start('-v --debug=1 --port=8151'.split())
""" 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():
""" Page get_aspect_error of dazzler Created 2019-06-15 """ from dazzler.components import core from dazzler.system import Page, Trigger, BindingContext from dazzler.errors import GetAspectError page = Page( __name__, core.Container([ core.Button('click error', identity='click-error'), core.Container(identity='error-output') ])) @page.bind(Trigger('click-error', 'clicks')) async def trigger_error(ctx: BindingContext): try: await ctx.get_aspect('invalid', 'error') except GetAspectError as err: await ctx.set_aspect('error-output', children=err.args[0])
'json': True, }, 'shape': { 'value': { 'color': '#000', '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:
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) )
""" Page extras of dazzler Created 2019-09-03 Gallery of extra components. """ from dazzler.components import core, extra from dazzler.system import Page, Trigger, BindingContext page = Page( __name__, core.Container([ core.Button('Notify', identity='notify-btn'), core.Button('Toaster', identity='toaster-btn'), extra.Notice('Notice', identity='notice'), extra.Spinner(identity='spin'), extra.PopUp( core.Container('Click on me to open a pop up.'), core.Container('Content'), ), core.Container([ core.Container('lorem', style={'padding': '2rem'}) for _ in range(20) ]), extra.Sticky( extra.Drawer( core.Container('drawed'), side='bottom', identity='draw' ), identity='stick', bottom='0', ),