Element issues with using HTML linking

[cpboyd]

I removed the on-the-fly linking of Polymer elements and hard-coded them in the HTML to utilize vulcanization and minification tools.

e.g.

<link rel="import" href="js/bower-components/paper-menu/paper-menu.html">

However, this seems to result in my PaperMenu widgets not parsing properly. If I add a PaperMenu widget to a PaperMenuDropdown widget, it just displays directly below the dropdown.

However, if I use:

panel.add(new PaperMenuDropdown(paperMenu.toString()))

Then it seems to work fine.

However, I then lose the ability to easily add click handlers to the paperMenu widget.

Moreover, the setSelected(String) and setAttrForSelected(String) don't seem to work. I have to instead use getPolymerElement().setAttribute(String, String) for both which isn't as much of an issue, but may point to the cause of the widget issue.

[manolo]

Could you share a project so as I can play with it?

[cpboyd]

I don't have a project to share currently, but here's some of the code I use to generate the dropdowns and add them to the rootPanel which is an HTMLPanel:

String DataValue = "data-value";
String value = "0";
String[] setting = {"English", "German", "French"};
PaperMenu menu = new PaperMenu();
// Doesn't work with the toString():
//menu.setSelected(value);
//menu.setAttrForSelected(DataValue);
menu.getElement().setAttribute("selected", value);
menu.getElement().setAttribute("attr-for-selected", DataValue);
menu.addStyleName("dropdown-content");
for (int i = 0; i < setting.length; i++) {
    PaperItem item = new PaperItem(setting[i]);
    item.getElement().setAttribute(DataValue, Integer.toString(i));
    menu.add(item);
}
// Quirk with Polymer pre-load, need to use inner HTML rather than add widget:
PaperDropdownMenu dropdownMenu = new PaperDropdownMenu(menu.toString());
dropdownMenu.setLabel(name);
rootPanel.add(dropdownMenu);

Moreover, I've also noticed a similar issue with the rendering of PaperTabs, where the selection bar isn't displayed if I try to add a new PaperTabs to the rootPanel rather than convert it to a string and make a new HTMLPanel as shown in the example below:

String value = "0";
String[] setting = {"English", "German", "French"};
PaperTabs tabs = new PaperTabs();

for (int i = 0; i < setting.length; i++) {
    tabs.add(new PaperTab(setting[i]));
}
tabs.setSelected(value);
rootPanel.add(new HTMLPanel(tabs.toString()));

[cpboyd]

I've committed my HTML: https://github.com/cpboyd/gwt-polymer-elements/commit/f2800b31c0fea64b3fe4031ac68b5897386b414f

The paper-header-panel doesn't seem to handle the "fit" class on the content properly. (Content appears over the toolbar).

There's no bottom bar under the paper-tabs in the Tabs Example page.

Again, I use a modified Polymer.java as well to prevent on-the-fly Polymer linking. If I don't, then GWT tries to load the references a second time. (Because I use relative links... While GWT checks for full URIs, without accounting for relative links.)

It's possible that I missed a link, but I don't think so.

[cpboyd]

The issue with paper-header-panel seems to be that the paper-toolbar ends up as a child of the mainContainer.

EDIT: Surrounding the PaperToolbar with a wrapper of class "paper-header" will obviously fix it (code below)...

However, it's curious to me that the element doesn't get processed properly in the first place.

<div class="paper-header">
    <p:PaperToolbar addStyleNames="{style.toolbar}" >
        <p:PaperIconButton icon="menu" attributes="paper-drawer-toggle" />
        <span ui:field="currentLabel" class="{style.current}"></span>
        <span class="flex"></span>
        <p:PaperButton ui:field="help" addStyleNames="{style.buttons}"><i:IronIcon icon="help"/>About</p:PaperButton>
        <div class="{style.source-buttons} bottom flex">
            <spam>VIEW SOURCE: </spam>
            <p:PaperButton ui:field="javaButton" addStyleNames="{style.buttons}">.java<i:IronIcon icon="launch"/></p:PaperButton>
            <p:PaperButton ui:field="xmlButton" addStyleNames="{style.buttons}">.ui.xml<i:IronIcon icon="launch"/></p:PaperButton>
        </div>
    </p:PaperToolbar>
</div>