Skip to content

F
Front-End
Commit eb117c73 authored by Adam Barth's avatar Adam Barth
Browse files
Options

Port Sky widgets demo to Dart 

This CL updates sky-box, sky-button, sky-checkbox, sky-input, and sky-radio to
work in Dart. We don't have a data binding system yet, so there's a bit more
plumbing in the code.

This CL adds support for sky-element@attributes, which lets you specify which
attributes your element supports. We use this information to synthesize getters
and setters for those attributes and to dispatch to mumbleChanged methods when
the attributes change.

I've also wrapped the widgets demo itself in a sky-scrollable so the whole
thing scrolls.

R=eseidel@chromium.org

Review URL: https://codereview.chromium.org/946813005
parent 01938c95
Show whitespace changes
Inline Side-by-side
Showing with 95 additions and 82 deletions
examples/widgets/index.sky
View file @ eb117c73
#!mojo mojo:sky_viewer #!mojo mojo:sky_viewer
<!-- <!--
// Copyright 2014 The Chromium Authors. All rights reserved. // Copyright 2015 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be // Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file. // found in the LICENSE file.
--> -->
<sky> <import src="widget-root.sky"/>
<import src="/sky/framework/sky-box.sky"/>
<import src="/sky/framework/sky-button.sky"/>
<import src="/sky/framework/sky-checkbox.sky"/>
<import src="/sky/framework/sky-element/sky-element.sky" as="SkyElement"/>
<import src="/sky/framework/sky-input.sky"/>
<import src="/sky/framework/sky-radio.sky"/>
<sky-element name="widget-root">
<template>
<style>
div {
display: flex;
align-items: center;
}
sky-checkbox {
margin: 5px;
}
.output {
margin-left: 48px;
}
</style>
<sky-box title='Text'>
<sky-input id="text" value="{{ inputValue }}" />
<div>value = {{ inputValue }}</div>
</sky-box>
<sky-box title='Buttons'>
<sky-button id='button' on-click='handleClick'>Button</sky-button>
<div>highlight: {{ myButton.highlight }}</div>
<div>clickCount: {{ clickCount }}</div>
</sky-box>
<sky-box title='Checkboxes'>
<div><sky-checkbox id='checkbox' checked='{{ checked }}'/>Checkbox</div>
<div class="output">highlight: {{ myCheckbox.highlight }}</div>
<div class="output">checked: {{ myCheckbox.checked }}</div>
<div><sky-checkbox id='checkbox' checked="true"/>Checkbox, default checked.</div>
<div class="output">checked: {{ checked }}</div>
</sky-box>
<sky-box title='Radios'>
<sky-box title='Group One'>
<div><sky-radio group='foo'/>one</div>
<div><sky-radio group='foo' selected='true' />two</div>
<div><sky-radio group='foo'/>three</div>
</sky-box>
<sky-box title='Group Two'>
<div><sky-radio group='bar'/>A</div>
<div><sky-radio group='bar'/>B</div>
<div><sky-radio group='bar' selected='true' />C</div>
</sky-box>
</sky-box>
</template>
<script>
module.exports = class extends SkyElement {
created() {
this.myButton = null;
this.myCheckbox = null;
this.myText = null;
this.clickCount = 0;
this.inputValue = "Ready";
this.checked = false;
}
attached() {
this.myButton = this.shadowRoot.getElementById('button');
this.myCheckbox = this.shadowRoot.getElementById('checkbox');
this.myText = this.shadowRoot.getElementById('text');
this.clickCount = 0;
}
handleClick(event) {
this.clickCount++;
this.checked = !this.checked;
this.inputValue = "Moar clicking " + this.clickCount;
}
}.register();
</script>
</sky-element>
<widget-root /> <widget-root />
</sky>
examples/widgets/widget-root.sky 0 → 100644
View file @ eb117c73
<!--
// Copyright 2015 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
-->
<import src="/sky/framework/sky-box.sky" />
<import src="/sky/framework/sky-button.sky" />
<import src="/sky/framework/sky-checkbox.sky" />
<import src="/sky/framework/sky-element.sky" />
<import src="/sky/framework/sky-input.sky" />
<import src="/sky/framework/sky-radio.sky" />
<import src="/sky/framework/sky-scrollable.sky" />
<sky-element>
<template>
<style>
div {
display: flex;
align-items: center;
}
sky-checkbox {
margin: 5px;
}
.output {
margin-left: 48px;
}
sky-scrollable {
height: -webkit-fill-available;
}
</style>
<sky-scrollable>
<sky-box title='Text'>
<sky-input id="text" value="{{ inputValue }}" />
<div>value = {{ inputValue }}</div>
</sky-box>
<sky-box title='Buttons'>
<sky-button id='button'>Button</sky-button>
<div>highlight: {{ myButton.highlight }}</div>
<div>clickCount: {{ clickCount }}</div>
</sky-box>
<sky-box title='Checkboxes'>
<div><sky-checkbox id='checkbox' checked='{{ checked }}'/>Checkbox</div>
<div class="output">highlight: {{ myCheckbox.highlight }}</div>
<div class="output">checked: {{ myCheckbox.checked }}</div>
<div><sky-checkbox id='checkbox' checked="true"/>Checkbox, default checked.</div>
<div class="output">checked: {{ checked }}</div>
</sky-box>
<sky-box title='Radios'>
<sky-box title='Group One'>
<div><sky-radio group='foo'/>one</div>
<div><sky-radio group='foo' selected='true' />two</div>
<div><sky-radio group='foo'/>three</div>
</sky-box>
<sky-box title='Group Two'>
<div><sky-radio group='bar'/>A</div>
<div><sky-radio group='bar'/>B</div>
<div><sky-radio group='bar' selected='true' />C</div>
</sky-box>
</sky-box>
</sky-scrollable>
</template>
<script>
import "dart:sky";
@Tagname('widget-root')
class WidgetRoot extends SkyElement {
Element _button;
Element _checkbox;
Element _text;
int _clickCount = 0;
String _inputValue = "Ready";
bool _checked = false;
void shadowRootReady() {
_button = this.shadowRoot.getElementById('button');
_checkbox = this.shadowRoot.getElementById('checkbox');
_text = this.shadowRoot.getElementById('text');
_button.addEventListener('click', _handleClick);
}
void _handleClick(_) {
_clickCount++;
_checked = !_checked;
_inputValue = "Moar clicking ${_clickCount}";
}
}
_init(script) => register(script, WidgetRoot);
</script>
</sky-element>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

HIAST - GitLab