[4.0.0-SNAPSHOT] Element interoperability

[hr.stoyanov]

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?

[hr.stoyanov]

.. 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();

[hr.stoyanov]

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

[mbarkley]

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.

[hr.stoyanov]

Thanks Max,

Maybe DOMUtils is a better home for such methods?

[hr.stoyanov]

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 ...

[mbarkley]

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.

[hr.stoyanov]

Thanks,

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