Tooling/designers

[ian.du...@honeywell.com]

Just wondering if there has been any discussion within the Polymer team on designer tooling support. There have been a few attempts at designers for HTML5 type content (Maqetta, Google Web Designer etc), but I am wondering about how Polymer/X-Tag web components would be designed. In particular, I am interested in any thoughts on how you might separate the "design-time" behaviour of a web component from its runtime behaviour - for example, you might want to seed a component with dummy data in design mode, and you might not want events like onclick to fire.

 

Regards,

Ian

[hilmar...@gmail.com]

humbled over this entry with a similar question in mind. In addition i am wondering how to reflect in this designtime on the webcomponent interface like attributes - light DOM is even worse as it is some untyped/unstructured interface to a webcomponent which is used implicitly to fill the shadow DOM.

Any comments on this?

Best Regards, Hilmar

[Rob Dodson]

We're currently working on a tool called designer which is a drag-and-drop Web Component builder. I put together an intro video over on Youtube. I'm in the process of documenting how others can add their own components to the designer tool. Designer uses a metadata.html file which it associates with a component. Using this file, you can stub out a version of your component to be dragged on stage. You can put as much HTML as you want in the template for your element, which means you're free to prepopulate attributes with dummy data. I believe the designer also mutes click events and things like that when you're in design mode (I talk about this in the video as I setup a few on-tap handlers). There's a separate preview mode which allows you to view your site/component in its own tab, and in that state the click events work again.

With regard to light DOM, that's also something that you can pop into the template of your element in its metadata.html. Or you can open the code editor and add elements and they will be saved as part of your sketch.

IMO there's a lot more room to grow in this area. I think Macaw does a great job of helping you flesh out HTML elements in a Photoshop/Illustrator like way. I'd love to see something like that done with Web Components. Our designer tool is open source so if anyone wants to borrow or steal ideas from it we really encourage that :)