3 Replies Latest reply on Jan 14, 2015 12:44 PM by ddadlani

    Errai UI question

    hr.stoyanov
    hr.stoyanov Jan 14, 2015 2:20 AM

      Hi all,

      I am trying to define an Errai page template (in a particular HTML framework, more on that later) with SIDEBAR, CONTENT and FOOTER as follows:

      <body >
      <div id="template">


        <div class="sidebar" id="sidebar">
        ...
        </div>
       

      <div class="pusher" id="pusher">
          <div class="page grid" id="content">
          ....
          </div>
          <div class="footer" id="footer">
          ....
          </div>
        </div>

      </div>
      <body>

       

      However, the HTML framework is very opinionated on how to lay out the elements: the SIDEBAR and PUSHER classes must be direct descendants of the BODY element (don't ask me why!). So, I am forced to have an HTML template as follows:

       

      <body >


        <div class="sidebar menu" id="sidebar">
        ...
        </div>

      <div class="pusher" id="template">
          <div class="page grid" id="content">
          ....
          </div>
          <div class="ui footer" id="footer">
          ....
          </div>
        </div>


      <body>

       

      This seems to make the HTML framework happy, but breaks my Errai page design - the sidebar is never injected in the generated HTML as it is not part of the page template. Is there any trick to have the sidebar HTML injected on top of the template html at application initialization time? I assume the sidebar must be a singleton ...

       

      Thanks!

      • 224 Views
      • Tags:
        • 1. Re: Errai UI question
          ddadlani
          ddadlani Jan 14, 2015 12:05 PM (in response to hr.stoyanov)

          Hello Hristo,

           

          Have you tried eliminating the template div by using <body id="template">? Does that work for you?

           

          If not, you could try manually adding the sidebar. To do that you have to inject your sidebar as a separate bean and append it to your page as a child of the <div class="sidebar menu">.
          That should do the trick.

           

          Cheers,
          Divya

            • Actions
          • 2. Re: Errai UI question
            hr.stoyanov
            hr.stoyanov Jan 14, 2015 12:26 PM (in response to ddadlani)

            Thanks Divya

            I am able to insert the sidebar into the generated html with something like below. Now I need to get better control over the Errai "page manager",  so I can insert my pages u den PUSHER div. Should I hack the root panel?

            ...

            @EntryPoint

            public class WebApp extends Composite {

             

                @Inject

                @DataField

                protected Sidebar  sidebar;

             

                @AfterInitialization

                public void afterInit() {

                    //We insert the sidebar as a first direct child element under BODY

                    BodyElement theBody = Document.get().getBody();

                    theBody.insertFirst(sidebar.getElement());

                }

             

            }

              • Actions
            • 3. Re: Errai UI question
              ddadlani
              ddadlani Jan 14, 2015 12:44 PM (in response to hr.stoyanov)

              Yes. You can insert your pages into your content div (or PUSHER div) so that your pages are rendered within that div.

               

              You'll need to inject your div as a panel (content, in this example), and then use this in your afterInit method:

              content.add(navigation.getContentPanel()));
              RootPanel.get().add(this);

                • Actions