import 'package:mdl/mdl.dart';
import 'package:mdl/mdlobservable.dart';
@MdlComponentModel
class ModelTest {
    final ObservableProperty<String> minimodel = new ObservableProperty<String>("test");
    final ObservableProperty<String> os1 = new ObservableProperty<String>("");
    final ObservableProperty<String> os2 = new ObservableProperty<String>("");
    final ObservableProperty<String> wifi = new ObservableProperty<String>("never");
    final List<ObservableProperty<String>> lights = [ new ObservableProperty<String>(""), new ObservableProperty<String>("") ];
    final ObservableProperty<int> intensity = new ObservableProperty<int>(90);
}
@MdlComponentModel @di.Injectable()
class Application extends MaterialApplication {
    final Logger _logger = new Logger('main.Application');
    final ModelTest modelTest = new ModelTest();
    Application() {
        _bind();
    }
    @override
    void run() {
    }
    //- private -----------------------------------------------------------------------------------
    void _bind() {
        modelTest.os1.onChange.listen((final PropertyChangeEvent event) {
            _logger.info("OS1-Value changed from: ${event.oldValue} to ${event.value}");
        });
    }
}
main() async {
    final Logger _logger = new Logger('main.Model');
    registerMdl();
    final MaterialApplication application = await componentFactory().
    rootContext(Application).run(enableVisualDebugging: true);
    application.run();
}
To use any MDL component, you must include the minified CSS file in the <head> section of the page:
More about theming...
<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: <span class="mdl-color-text--accent-500" mdl-observe="modelTest.minimodel"></span><br>
        OS1: <span class="mdl-color-text--accent-500" mdl-observe="modelTest.os1"></span><br>
        OS2: <span class="mdl-color-text--accent-500" mdl-observe="modelTest.os2"></span><br>
        WIFI: <span class="mdl-color-text--accent-500" mdl-observe="modelTest.wifi"></span><br>
        Light #1: <span class="mdl-color-text--accent-500" mdl-observe="modelTest.lights[0]"></span><br>
        Light #2: <span class="mdl-color-text--accent-500" mdl-observe="modelTest.lights[1]"></span><br>
        Intensity: <span class="mdl-color-text--accent-500" mdl-observe="modelTest.intensity"></span><br>
    </div>
</div>

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:

<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>

 2. Add the mdl-model attribute to your component and specify the variable you want to observe. In this
case "myModel"

<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>

 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.

@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