7 Replies Latest reply on Apr 15, 2016 12:34 PM by Hristo Stoyanov

    [4.0.0-SNAPSHOT] Element interoperability

    Hristo Stoyanov Master

      The new Errai 4 uses an entirely different Node->Element->HTMLElement class hierarchy, which is not compatible with the GWT's Node->Elelment. How can one bridge the gap?

      The problem I have is with org.jboss.errai.ui.nav.client.local.Navigation. As the Errai documentation indicate (section 11.2.9) one can manipulate the internal content container like so:

       

      @EntryPoint

      public class Main {

          @Inject private Navigation navigation;

          @Inject  @DataField  private Pusher pusher;

          @AfterInitialization private void afterInitialization() {

             pusher.getContentContainer().appendChild(navigation.getContentPanel());

              RootPanel rootPanel = RootPanel.get();

              rootPanel.add(sidebarMenu);

              rootPanel.add(pusher);

              ...

      }

       

      However, if I switch to using the new Errai 4 elements, I do not see a way to use the Navigation anymore:

      @Templated("Skeleton.html#pusher") @ApplicationScoped

      public class Pusher extends Composite {

          @Inject    @DataField    private Div contentContainer;

          Div getContentContainer() {  return contentContainer;   }

      }

       

      Any idea? Btw, is anyone left in this forum?

        • 1. Re: [4.0.0-SNAPSHOT] Element interoperability
          Hristo Stoyanov Master

          .. well, after looking at the example mention in the blog, i came up with some code that uses the new Element API and does the job:

           

                   Document document = getDocument();

                  final Body body = document.getBody();

                 

                  //Add sidebar directly under body

                  body.appendChild(sidebarMenu.getElement());

                 

                  //Add pusher directly under body next

                  final HTMLElement pusher = document.createElement("div");

                  pusher.setClassName("pusher");

                  body.appendChild(pusher);

                 

                  //Add header menu under pusher

                  pusher.appendChild(headerMenu.getElement());

                 

                  //Add content container under pusher

                  final HTMLElement contentContainer = document.createElement("div");

                  contentContainer.setId("contentContainer");

                  pusher.appendChild(contentContainer);

                 

                  //Wire up navigation panel next

                  RootPanel.get(contentContainer.getId()).add(navigationPanel);

                 

                  sidebarMenu.initialize();

                  headerMenu.initialize();

          • 2. Re: [4.0.0-SNAPSHOT] Element interoperability
            Hristo Stoyanov Master

            ... still, maybe some new methods can be added to Navigation to make this easier with the new Element API?

            • 3. Re: [4.0.0-SNAPSHOT] Element interoperability
              Max Barkley Expert

              Hi Hristo,

               

              As you've discovered it should be possible to build your entire UI with elements in Errai's hierarchy. That being said, it is actually quite easy to cast between different element wrappers. If you have cast-checking disabled, you can simply cast between them since they are both essentially compile-time wrappers for JavaScript element objects.

               

              With cast-checking enabled, you can still transform between the two with JSNI methods. Here is code we use to do this in the framework: https://github.com/errai/errai/blob/master/errai-ui/src/main/java/org/jboss/errai/ui/shared/TemplateUtil.java#L158-L160

               

              Cheers.

              • 4. Re: [4.0.0-SNAPSHOT] Element interoperability
                Hristo Stoyanov Master

                Thanks Max,

                Maybe DOMUtils is a better home for such methods?

                • 5. Re: [4.0.0-SNAPSHOT] Element interoperability
                  Hristo Stoyanov Master

                  Max,

                  One more question - org.jboss.errai.ui.nav.client.local.TransitionAnchor is rooted into the old GWT Anchor class-->...-> Widget->UIObject. Are there any plans to switch to the new Anchor element class? Not sure you can do it in a backward compatible fashion, but placing it into another package might do the trick?

                   

                  I am also missing some of the UIObject methods for dynamically showing/hiding  UI stuff, such as:

                    - HasVisibility inteface

                    - public static native boolean isVisible(Element elem)

                    - public static native void setVisible(Element elem, boolean visible)

                   

                  I started coding stuff like this one below, but it'd be nice if Errai 4's new Element API  implemented similar helpers instead (in either DOMUtils or HTMLKElement?):

                  static public void setVisible(HTMLElement element, boolean visible) {

                          element.getStyle().setProperty("visibility", visible ? "visible" : "hidden");

                  }

                   

                  Similar logic goes for the DISPLAY property...

                   

                  Let me know if they already exist and I missed them ...

                  • 6. Re: [4.0.0-SNAPSHOT] Element interoperability
                    Max Barkley Expert
                    Are there any plans to switch to the new Anchor element class?

                    Yeah we will definitely have a replacement for that before 4 goes final.

                    As for the convenience methods, they're not high priority at the moment. But if you've written some convenience methods that you'd like to be in DOMUtils, please consider sending a pull request.

                    • 7. Re: [4.0.0-SNAPSHOT] Element interoperability
                      Hristo Stoyanov Master

                      Thanks,

                      I will try to come up with a pull request for the helpers.