documentate how to use mdl on dynamic websites

[kasperpeulen]

I couldn't find out to use mdl on dynamic websites. At http://www.getmdl.io/started/index.html there is a note about this, how to do this with javascript:

[MikeMitterer]

Here is the Dart version: BTW: The JS sample leads into timing problems. upgradeElement takes a while to do it's job. In Dart we have Futures so waiting until upgradeElement is ready is easy. In JS they should wait for a "ready" event... (can't remember the event-name but you know what I mean...)

Version I - with Future

main() {

    configLogging();

    registerMdl();

    componentFactory().run().then((_) {

        final dom.ButtonElement btn = new dom.ButtonElement()
            ..text = "Click me"
            ..id = "mybutton"
        ;

        btn.className = "mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored";
        btn.style.marginTop = "12px";

        componentHandler().upgradeElement(btn).then( (_) {
            dom.querySelector(".demo-section").append(btn);

            final MaterialButton button = MaterialButton.widget(dom.querySelector("#mybutton"));
            button.disable();
        });

    });
}

Version II with async:

main() async {
    configLogging();

    registerMdl();

    await componentFactory().run();

    final dom.ButtonElement btn = new dom.ButtonElement()
        ..text = "Click me"
        ..id = "mybutton"
    ;

    btn.className = "mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored";
    btn.style.marginTop = "12px";

    await componentHandler().upgradeElement(btn);
    dom.querySelector(".demo-section").append(btn);

    final MaterialButton button = MaterialButton.widget(dom.querySelector("#mybutton"));
    button.disable();
}

But there are better ways to add dynamic content: 1 - write your own component, it's easy, if you need help. Contact me 2 - http://samples.material-design-lite.pub/spa_content/ 3 - http://samples.material-design-lite.pub/spa_include/index.html

[kasperpeulen]

thanks !

[MikeMitterer]

@kasperpeulen This is how I write a component: https://www.youtube.com/watch?v=XBjEeGLzSUU

[kasperpeulen]

@MikeMitterer thanks for the video :)

I still think there needs to be some info at http://www.material-design-lite.pub/ though. I think it is hard for new people to find out how things like these work in the mdl package.

[kasperpeulen]

@MikeMitterer I tried a bit more complex example with a menu, but I couldn't get it to work with the upgradeElement function. If I do everything statically it works, and also if I do await componentFactory().run(); after I've inserted all my dynamic content. Is that also an good option ?

import 'dart:html';
import 'dart:async';

import 'package:mdl/mdl.dart';

DivElement wrapper = querySelector('#wrapper');

main() async {
  registerMdl();
  // await componentFactory().run();
  wrapper.append(await mdlMenu());
  wrapper.append(await mdlButton());
  await componentFactory().run();
}

Future<DivElement> mdlMenu() async {
  final DivElement menu = new DivElement()
    ..text = 'You clicked me !'
    ..className = 'mdl-menu  mdl-js-menu'
    ..attributes.addAll({'for': 'dynamic'});
  // await componentHandler().upgradeElement(menu);
  return menu;
}

Future<ButtonElement> mdlButton() async {
  final ButtonElement btn = new ButtonElement()
    ..text = "Click me dynamic"
    ..id = "dynamic"
    ..className = "mdl-button mdl-js-button mdl-button--raised "
        "mdl-js-ripple-effect mdl-button--colored";
  // await componentHandler().upgradeElement(btn);
  return btn;
}