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