Permalink
Browse files

feature: mdl-model added, works for checkbox,radio-group, slider, tex…

…tfield and switch
  • Loading branch information...
MikeMitterer committed Jul 16, 2015
1 parent df8706a commit 98cec091e74a19983b2a728b381d50e3a3e39e68
@@ -0,0 +1,62 @@
##Introduction
With the Material Design Lite (MDL) **model** component you can automatically observer your data-model.
###To include an MDL **model** component:
 1. Code one of the supported elements for example a checkbox:
```html
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-1">
<input type="checkbox" id="checkbox-1" class="mdl-checkbox__input" value="android"/>
<span class="mdl-checkbox__label">Android</span>
</label>
```
&nbsp;2. Add the mdl-model attribute to your component and specify the variable you want to observe. In this
case "myModel"
```html
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-1">
<input type="checkbox" id="checkbox-1" class="mdl-checkbox__input" value="android"
mdl-model="myModel"/>
<span class="mdl-checkbox__label">Android</span>
</label>
```
&nbsp;3. In your Application-class - add the model you want to observe, in this case "myModel". The variable-type should be
ObservableProperty to provide the full functionality.
```dartlang
@MdlComponentModel @di.Injectable()
class Application extends MaterialApplication {
final Logger _logger = new Logger('main.Application');
final ObservableProperty<String> myModel = new ObservableProperty<String>("");
Application() {
}
@override
void run() {
}
}
main() async {
registerMdl();
final MaterialApplication application = await componentFactory().
rootContext(Application).run(enableVisualDebugging: true);
application.run();
}
```
### Supported components
You can use mdl-model with the following components:
- mdl-checkbox
- mdl-textfield
- mdl-radio-group
- mdl-switch
- mdl-slider
@@ -0,0 +1,67 @@
<section class="demo-section demo-section--model demo-page--model">
<div id="usage" class="mdl-include mdl-js-include" data-url="views/usage/model.html">
Loading...
</div>
<div class="demo-preview-block">
<div class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="text" id="sample1" mdl-model="modelTest.minimodel"/>
<label class="mdl-textfield__label" for="sample1">Type Something...</label>
</div>
<div class="groups">
<div class="mdl-checkbox-group">
<div class="choose">Choose OS:</div>
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-1">
<input type="checkbox" id="checkbox-1" class="mdl-checkbox__input" value="android"
mdl-model="modelTest.os1"/>
<span class="mdl-checkbox__label">Android</span>
</label>
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-2">
<input type="checkbox" id="checkbox-2" class="mdl-checkbox__input"
mdl-model="modelTest.os2"/>
<span class="mdl-checkbox__label">iOS</span>
</label>
iOS-checkbox has no "value" set. So it shows the default value!
</div>
<div class="mdl-radio-group" mdl-model="modelTest.wifi">
<div class="choose">Choose WIFI:</div>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="wifi1">
<input type="radio" id="wifi1" class="mdl-radio__button" name="wifi[]" value="always"/>
<span class="mdl-radio__label">Always</span>
</label>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="wifi2">
<input type="radio" id="wifi2" class="mdl-radio__button" name="wifi[]" value="plugged in"/>
<span class="mdl-radio__label">Only when plugged in</span>
</label>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="wifi3">
<input type="radio" id="wifi3" class="mdl-radio__button" name="wifi[]" value="never"/>
<span class="mdl-radio__label">Never</span>
</label>
</div>
<div class="switch-group">
<div class="choose">Lights:</div>
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-bedroom">
<input type="checkbox" id="switch-bedroom" class="mdl-switch__input" mdl-model="modelTest.lights[0]"/>
<span class="mdl-switch__label">Bedroom</span>
</label>
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-livingroom">
<input type="checkbox" id="switch-livingroom" class="mdl-switch__input" mdl-model="modelTest.lights[1]" />
<span class="mdl-switch__label">Living room</span>
</label>
</div>
</div>
<div class="slider">
<div class="choose">Intensity:</div>
<input class="mdl-slider mdl-js-slider" type="range" min="0" max="100" value="0" tabindex="0"
mdl-model="modelTest.intensity"/>
</div>
<div class="output mdl-color--200 mdl-color-text--white">
Text in TextField: <mdl-property class="mdl-color-text--accent-500" observe="modelTest.minimodel"></mdl-property><br>
OS1: <mdl-property class="mdl-color-text--accent-500" observe="modelTest.os1"></mdl-property><br>
OS2: <mdl-property class="mdl-color-text--accent-500" observe="modelTest.os2"></mdl-property><br>
WIFI: <mdl-property class="mdl-color-text--accent-500" observe="modelTest.wifi"></mdl-property><br>
Light #1: <mdl-property class="mdl-color-text--accent-500" observe="modelTest.lights[0]"></mdl-property><br>
Light #2: <mdl-property class="mdl-color-text--accent-500" observe="modelTest.lights[1]"></mdl-property><br>
Intensity: <mdl-property class="mdl-color-text--accent-500" observe="modelTest.intensity"></mdl-property><br>
</div>
</div>
</section>
@@ -2,25 +2,29 @@
<div id="usage" class="mdl-include mdl-js-include" data-url="views/usage/radio.html">
Loading...
</div>
<div class="demo-preview-block">
<p>A radio button can either be a primary action or a secondary action.</p>
<section class="demo-preview-block">
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="wifi1">
<input type="radio" id="wifi1" class="mdl-radio__button" name="wifi[]" value="1" checked />
<span class="mdl-radio__label">Always</span>
</label>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="wifi2">
<input type="radio" id="wifi2" class="mdl-radio__button" name="wifi[]" value="2" />
<span class="mdl-radio__label">Only when plugged in</span>
</label>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="wifi3">
<input type="radio" id="wifi3" class="mdl-radio__button" name="wifi[]" value="3" />
<span class="mdl-radio__label">Never</span>
</label>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="wifi4">
<input type="radio" id="wifi4" class="mdl-radio__button" name="wifi[]" value="3" disabled />
<span class="mdl-radio__label">Unavailable option</span>
</label>
</section>
<div class="demo-preview-block">
<p>A radio button can either be a primary action or a secondary action.</p>
<section class="demo-preview-block">
<div id="wifi" class="mdl-radio-group">
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="wifi1">
<input type="radio" id="wifi1" class="mdl-radio__button" name="wifi[]" value="1" checked/>
<span class="mdl-radio__label">Always</span>
</label>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="wifi2">
<input type="radio" id="wifi2" class="mdl-radio__button" name="wifi[]" value="2"/>
<span class="mdl-radio__label">Only when plugged in</span>
</label>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="wifi3">
<input type="radio" id="wifi3" class="mdl-radio__button" name="wifi[]" value="3"/>
<span class="mdl-radio__label">Never</span>
</label>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="wifi4">
<input type="radio" id="wifi4" class="mdl-radio__button" name="wifi[]" value="3" disabled/>
<span class="mdl-radio__label">Unavailable option</span>
</label>
</label>
</div>
<button id="show-wifi-value" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect">Show value</button>
</section>
</div>
</section>
@@ -4,8 +4,8 @@
</div>
<div class="demo-preview-block">
<div class="mdl-textfield mdl-js-textfield">
<input id="item" class="mdl-textfield__input" type="text" id="sample1" autofocus />
<label class="mdl-textfield__label" for="sample1">Type Something...</label>
<input id="item" class="mdl-textfield__input" type="text" autofocus />
<label class="mdl-textfield__label" for="item">Type Something...</label>
</div>
<button id="add" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect">
Add
@@ -0,0 +1,8 @@
template: usage
dart: ->usage.model.dart
html: ->usage.model.html
readme: ->usage.model.readme
component: model
~~~
@@ -1,4 +1,5 @@
[
{ "name": "observe", "link": "#/observe" },
{ "name": "model", "link": "#/model" },
{ "name": "repeat", "link": "#/repeat" }
]
@@ -0,0 +1,51 @@
import &#39;package:mdl&#47;mdl.dart&#39;;
import &#39;package:mdl&#47;mdlobservable.dart&#39;;
@MdlComponentModel
class ModelTest &#123;
final ObservableProperty&lt;String&gt; minimodel = new ObservableProperty&lt;String&gt;(&quot;test&quot;);
final ObservableProperty&lt;String&gt; os1 = new ObservableProperty&lt;String&gt;(&quot;&quot;);
final ObservableProperty&lt;String&gt; os2 = new ObservableProperty&lt;String&gt;(&quot;&quot;);
final ObservableProperty&lt;String&gt; wifi = new ObservableProperty&lt;String&gt;(&quot;never&quot;);
final List&lt;ObservableProperty&lt;String&gt;&gt; lights = [ new ObservableProperty&lt;String&gt;(&quot;&quot;), new ObservableProperty&lt;String&gt;(&quot;&quot;) ];
final ObservableProperty&lt;int&gt; intensity = new ObservableProperty&lt;int&gt;(90);
&#125;
@MdlComponentModel @di.Injectable()
class Application extends MaterialApplication &#123;
final Logger _logger = new Logger(&#39;main.Application&#39;);
final ModelTest modelTest = new ModelTest();
Application() &#123;
_bind();
&#125;
@override
void run() &#123;
&#125;
&#47;&#47;- private -----------------------------------------------------------------------------------
void _bind() &#123;
modelTest.os1.onChange.listen((final PropertyChangeEvent event) &#123;
_logger.info(&quot;OS1-Value changed from: $&#123;event.oldValue&#125; to $&#123;event.value&#125;&quot;);
&#125;);
&#125;
&#125;
main() async &#123;
final Logger _logger = new Logger(&#39;main.Model&#39;);
registerMdl();
final MaterialApplication application = await componentFactory().
rootContext(Application).run(enableVisualDebugging: true);
application.run();
&#125;
@@ -0,0 +1,62 @@
&lt;div class=&quot;demo-preview-block&quot;&gt;
&lt;div class=&quot;mdl-textfield mdl-js-textfield&quot;&gt;
&lt;input class=&quot;mdl-textfield__input&quot; type=&quot;text&quot; id=&quot;sample1&quot; mdl-model=&quot;modelTest.minimodel&quot;&#47;&gt;
&lt;label class=&quot;mdl-textfield__label&quot; for=&quot;sample1&quot;&gt;Type Something...&lt;&#47;label&gt;
&lt;&#47;div&gt;
&lt;div class=&quot;groups&quot;&gt;
&lt;div class=&quot;mdl-checkbox-group&quot;&gt;
&lt;div class=&quot;choose&quot;&gt;Choose OS:&lt;&#47;div&gt;
&lt;label class=&quot;mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect&quot; for=&quot;checkbox-1&quot;&gt;
&lt;input type=&quot;checkbox&quot; id=&quot;checkbox-1&quot; class=&quot;mdl-checkbox__input&quot; value=&quot;android&quot;
mdl-model=&quot;modelTest.os1&quot;&#47;&gt;
&lt;span class=&quot;mdl-checkbox__label&quot;&gt;Android&lt;&#47;span&gt;
&lt;&#47;label&gt;
&lt;label class=&quot;mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect&quot; for=&quot;checkbox-2&quot;&gt;
&lt;input type=&quot;checkbox&quot; id=&quot;checkbox-2&quot; class=&quot;mdl-checkbox__input&quot;
mdl-model=&quot;modelTest.os2&quot;&#47;&gt;
&lt;span class=&quot;mdl-checkbox__label&quot;&gt;iOS&lt;&#47;span&gt;
&lt;&#47;label&gt;
iOS-checkbox has no &quot;value&quot; set. So it shows the default value!
&lt;&#47;div&gt;
&lt;div class=&quot;mdl-radio-group&quot; mdl-model=&quot;modelTest.wifi&quot;&gt;
&lt;div class=&quot;choose&quot;&gt;Choose WIFI:&lt;&#47;div&gt;
&lt;label class=&quot;mdl-radio mdl-js-radio mdl-js-ripple-effect&quot; for=&quot;wifi1&quot;&gt;
&lt;input type=&quot;radio&quot; id=&quot;wifi1&quot; class=&quot;mdl-radio__button&quot; name=&quot;wifi[]&quot; value=&quot;always&quot;&#47;&gt;
&lt;span class=&quot;mdl-radio__label&quot;&gt;Always&lt;&#47;span&gt;
&lt;&#47;label&gt;
&lt;label class=&quot;mdl-radio mdl-js-radio mdl-js-ripple-effect&quot; for=&quot;wifi2&quot;&gt;
&lt;input type=&quot;radio&quot; id=&quot;wifi2&quot; class=&quot;mdl-radio__button&quot; name=&quot;wifi[]&quot; value=&quot;plugged in&quot;&#47;&gt;
&lt;span class=&quot;mdl-radio__label&quot;&gt;Only when plugged in&lt;&#47;span&gt;
&lt;&#47;label&gt;
&lt;label class=&quot;mdl-radio mdl-js-radio mdl-js-ripple-effect&quot; for=&quot;wifi3&quot;&gt;
&lt;input type=&quot;radio&quot; id=&quot;wifi3&quot; class=&quot;mdl-radio__button&quot; name=&quot;wifi[]&quot; value=&quot;never&quot;&#47;&gt;
&lt;span class=&quot;mdl-radio__label&quot;&gt;Never&lt;&#47;span&gt;
&lt;&#47;label&gt;
&lt;&#47;div&gt;
&lt;div class=&quot;switch-group&quot;&gt;
&lt;div class=&quot;choose&quot;&gt;Lights:&lt;&#47;div&gt;
&lt;label class=&quot;mdl-switch mdl-js-switch mdl-js-ripple-effect&quot; for=&quot;switch-bedroom&quot;&gt;
&lt;input type=&quot;checkbox&quot; id=&quot;switch-bedroom&quot; class=&quot;mdl-switch__input&quot; mdl-model=&quot;modelTest.lights[0]&quot;&#47;&gt;
&lt;span class=&quot;mdl-switch__label&quot;&gt;Bedroom&lt;&#47;span&gt;
&lt;&#47;label&gt;
&lt;label class=&quot;mdl-switch mdl-js-switch mdl-js-ripple-effect&quot; for=&quot;switch-livingroom&quot;&gt;
&lt;input type=&quot;checkbox&quot; id=&quot;switch-livingroom&quot; class=&quot;mdl-switch__input&quot; mdl-model=&quot;modelTest.lights[1]&quot; &#47;&gt;
&lt;span class=&quot;mdl-switch__label&quot;&gt;Living room&lt;&#47;span&gt;
&lt;&#47;label&gt;
&lt;&#47;div&gt;
&lt;&#47;div&gt;
&lt;div class=&quot;slider&quot;&gt;
&lt;div class=&quot;choose&quot;&gt;Intensity:&lt;&#47;div&gt;
&lt;input class=&quot;mdl-slider mdl-js-slider&quot; type=&quot;range&quot; min=&quot;0&quot; max=&quot;100&quot; value=&quot;0&quot; tabindex=&quot;0&quot;
mdl-model=&quot;modelTest.intensity&quot;&#47;&gt;
&lt;&#47;div&gt;
&lt;div class=&quot;output mdl-color--200 mdl-color-text--white&quot;&gt;
Text in TextField: &lt;mdl-property class=&quot;mdl-color-text--accent-500&quot; observe=&quot;modelTest.minimodel&quot;&gt;&lt;&#47;mdl-property&gt;&lt;br&gt;
OS1: &lt;mdl-property class=&quot;mdl-color-text--accent-500&quot; observe=&quot;modelTest.os1&quot;&gt;&lt;&#47;mdl-property&gt;&lt;br&gt;
OS2: &lt;mdl-property class=&quot;mdl-color-text--accent-500&quot; observe=&quot;modelTest.os2&quot;&gt;&lt;&#47;mdl-property&gt;&lt;br&gt;
WIFI: &lt;mdl-property class=&quot;mdl-color-text--accent-500&quot; observe=&quot;modelTest.wifi&quot;&gt;&lt;&#47;mdl-property&gt;&lt;br&gt;
Light #1: &lt;mdl-property class=&quot;mdl-color-text--accent-500&quot; observe=&quot;modelTest.lights[0]&quot;&gt;&lt;&#47;mdl-property&gt;&lt;br&gt;
Light #2: &lt;mdl-property class=&quot;mdl-color-text--accent-500&quot; observe=&quot;modelTest.lights[1]&quot;&gt;&lt;&#47;mdl-property&gt;&lt;br&gt;
Intensity: &lt;mdl-property class=&quot;mdl-color-text--accent-500&quot; observe=&quot;modelTest.intensity&quot;&gt;&lt;&#47;mdl-property&gt;&lt;br&gt;
&lt;&#47;div&gt;
&lt;&#47;div&gt;
Oops, something went wrong.

0 comments on commit 98cec09

Please sign in to comment.