How to user MDL with Wakanda Studio prototype?

Question

How could I use MDL with a Wakanda Studio prototype?

I added the css and script of the mdl to the document properties and added classes to the components but it takes no effect.

Answer 1

MDL can be used on runtime applying the proper classes to each Wakanda Studio prototype widget.

However on design phase it's a completely different matter. First, MDL initializes its DOM classes after the page is loaded. That's because MDL want to achieve different dynamic events as input labels positioning and similar stuff.

In the prototyper in order to achieve the correct behaviour you have to:

• ensure the compatibility between Wakanda Studio webview and MDL: Wakanda Studio webview is pretty dated. It will be updated soon but for the moment I can't affirm that MDL will works with a webview system comparable to IE9.
• run in the widget.js file of each widget an MLD javascript function to initialise the element. The generic function for this is componentHandler.upgradeDom();. This will run an upgrade dom on every element, I am sure you can find a more specific alternative but it's up to your researches.

So to sum up:

1. MDL is perfectly compatible as-is on runtime.
2. MDL should be adjusted to the Wakanda Studio environment creating custom widgets for design phase. You can follow this tutorial about how to create a Custom Widget. (Example: The official TextArea widget repository).

If MDL it's your thing then you should create a specific suite of Widgets. A similar approach is done with React and the React-MDL components.