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()
"""
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"]}')
"""
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)
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(
Trigger('click-sum', 'clicks'),
*[State(f'array-{x}', 'value') for x in range(1, 10)]
)
async def bind_array_state_sum(ctx: BindingContext):
await ctx.set_aspect(
'sum-output',
children=f'Sum {sum(state["value"] for state in ctx.states.values())}'
)
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',
children=json.dumps(ctx.trigger.value)
)
@page.bind(Trigger('click', 'clicks'), State('empty-store', 'data'))
async def click_store(ctx: BindingContext):
data = ctx.states['empty-store']['data'] or {'clicks': 0}
data['clicks'] += 1
await ctx.set_aspect('empty-store', data=data)
@page.bind(Trigger('empty-store', 'data'))
async def click_output(ctx: BindingContext):
await ctx.set_aspect(
'click-output',
children=json.dumps(ctx.trigger.value)
)
"""
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
)
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'
})
data_value = context.states['dropdown']['data_value']
if data_value:
await context.set_aspect('datalist-output',
children=f'Data {data_value}')
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():
output.append(
core.Container(f'{aspect_name}@{identity}: {aspect_value}',
identity=f'{aspect_name}-{identity}-output'))
# FIXME Setting the array directly on children trigger
# the same identity bug #53
await ctx.set_aspect('state-output', children=core.Container(output))
await ctx.set_aspect(
'array-output',
children=f'Sum: {value}'
)
@page.bind(Trigger('nested-components', 'children'))
async def trigger_nested_components(ctx: BindingContext):
children = ctx.trigger.value.children.children
output = {
'len': len(children),
'insider': children[0].children.children,
# This one in the attributes, not the children as per the
# original component, the children prop is a different aspect.
'as_prop': children[1].attributes['children'].children,
}
await ctx.set_aspect('nested-output', children=json.dumps(output))
@page.bind(
Trigger('get-aspect-trigger', 'clicks'), State('as-state', 'children')
)
async def get_aspect_component_with_state(ctx: BindingContext):
component = await ctx.get_aspect('input', 'children')
await ctx.set_aspect(
'get-aspect-output', children=json.dumps({
'get-aspect': component.value,
'state': ctx.states['as-state']['children'].value
})
)
"""
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)