2 Replies Latest reply on Jul 13, 2015 7:50 AM by protoss78

    Errai Getting Started Guide and Polymer 1.0

    protoss78
    protoss78 Jul 8, 2015 10:12 AM

      I recently forked the Errai Getting Started Guide and started experimenting with it using Polymer 1.0 components. I was able to move the navigation bar into a paper-header-panel and wrapped the sidebar menu inside a custom element using the paper-menu component.

      But when I tried to move the sidebar and main containers into a paper-drawer-panel, the application would produce strange Javascript errors:

      console error.png

      Here is the problematic GettingStartedGuide.html content:

      html error.png

       

      Funny thing was, when I removed the paper-drawer-panel component from GettingStartedGuide.html everything worked fine again. It even worked when I put the paper-drawer-panel somewhere else inside GettingStartedGuide.html:

      html success.png


      But as soon as I tried to move the span elements with ids sidebar and container, I ran into the same Javascript error again.

       

      Here is a link to the forked project:

      Protoss78/getting-started-guide · GitHub

       

      Any help is very much appreciated. :-)

        • 1. Re: Errai Getting Started Guide and Polymer 1.0
          ddadlani
          ddadlani Jul 10, 2015 6:52 PM (in response to protoss78)

          Hello Roman,

           

          I looked at your code, and the issue is that <span id="sidebar" drawer> and <span id="content" main> are not visible to Errai UI, because of how the <paper-drawer-panel> renders these elements.

          If you look into how the paper-drawer-panel works, you'll see that it renders your elements as a <div id="drawer"> and <div id="main">. Therefore in this case, the workaround would be to change your data-fields to "drawer" and "main" instead of "sidebar" and "content" in both the template and the Java class, since these ids are enforced by the paper-drawer-panel. But this is a very specific workaround, and it may be better to rearrange the templates to avoid accidentally putting Errai UI data-fields into the shadow DOM of a web component, where they cannot be accessed.

           

          Hope this helps,

           

          Divya

            • Actions
          • 2. Re: Errai Getting Started Guide and Polymer 1.0
            protoss78
            protoss78 Jul 13, 2015 7:50 AM (in response to ddadlani)

            Thanks Divya,

             

            Completely overlooked that the paper-drawer-panel overwrites my id.

             

            Thanks for clarifying,

            8-) Roman

              • Actions