How Else Can I Do This With Errai ??

[chaluwa]

The Problem

I want to be able to have modal overlays of certain @Page templates in my app such that the overlays can be invoked from any @Page showing in Errai UI Navigation Panel. Consider an managing Products that should be in a Category, traditionally I'd have views to create / list categories and products separately. I'd create a Category first and then create a Product, specifying the category of the product while creating it. This means that if I am already at the Product view and need to make a news Product for a category that does not yet exist, then I'd have to navigate back / away to the Category view to create it first before coming back to continue creating the Product I earlier wanted to create.

My Solution

A solution would be to have a button on the Product view that opens the same Category @Page (or another @Templated version of it) in a modal dialog. Such that the Product creation workflow is not interrupted by navigating away.

I tried this experiment with a @Templated LoginView component which I subclassed into a @Templated LoginPageView @Page and a @Templated LoginModalView component. LoginView is a @Dependent view that targets the whole of a login.html file and is @AutoBound to a @Portable and @Bindable Login POJO whose username and password fields are bound into the view with @DataField elements.

LoginPageView is a @Page that extends LoginView and targets a portion of the login.html file, it participates in Errai UI Navigation and is displayed within the navigation panel. LoginModalView is a @Templated component that also extends LoginView and also targets another portion of the same login.html file suited for the modal UI. Since both extend LoginView, they inherit her protected @DataFields bound to the username and password fields of the Login POJO.

The Outcome

Since I try to follow the MVP pattern, I have a "Presenter" that will drive these UIs / views, and thats where things begin to fall apart. I have a @ApplicationScoped AuthPresenter that should drive the login process like a controller. Within it, I inject the LoginPageView and I am able to use the app as planned. However, once I try to inject the LoginModalView (the second LoginView implementation), the app fails to run and complains thus : " org.jboss.errai.ioc.rebind.ioc.exception.InjectionFailure: unable to resolve type injector for: meshportal.client.local.LoginView "

The Question

It appears I can't inject and use both subclasses of the LoginView component within AuthPresenter. Am I missing something or is there a better  way to approach this ?? You can have a look at portions of my code here : http://ur1.ca/k2zm2

[ddadlani]

Hello Charles,

If you take a look at the GroceryList demo, it does something similar. The GroceryItemWidget displays an EditForm within the widget if the user wishes to edit the item.
You could possibly use the same idea to bring up an inline form to create a new Product within your Product view.

Hope this helps,
Divya

[chaluwa]

Thanks Divya Dadlani, the GroceryItemWidget serves as another good solution. I think it is a little different from what I am aiming at, which is to have a component with a slightly different UI (markup + CSS) for an existing view component. But a major concern is that both views need to share code so that I do not have to repeat myself within  both views, I have been able to make them work if they do not both inherit from a Templated superclass component, but in this case, I end up doing copy/past between them and this is not ready good for code maintenance. Thanks.

[ddadlani]

You can still subclass your LoginView if it is not templated. That way you can avoid copy-pasting some code.

As an example you can look at the BasicDemoPage and its subclasses in Errai's new Getting Started guide.

Cheers,
Divya

[jmbarone]

I needed to do the same thing ... create a category item from the item page.

"Overwrite" the item page with the navigation to the category page and then go back again is really bad, estethically and in usability also.

Well, i create the category page the standard way, with @Templated and @Page. Then, in the item page, in the click button "Create category" event i show a GWT PopupPanel.

Using the method setItem i "fill" the PopupPanel with the category widget.

Working with the template you can do a decent modal window of the category in the item page and also it works as a standard category page from the navigation bar.

It's not an "awesome" solution ... but it works and do what i want.

[chaluwa]

Thanks Jose. This is exactly the line I am toeing right now, but with modal windows from a pure HTML / CSS framework rather than with GWT PopupPanel. Same idea anyway. Thanks. I will update this thread with my solution when I am done.

[jmbarone]

Ok Charles. I tried a little with the bootstrap modal type, but inside errai you need to load the templated component as a "popup" (otherwise it's useless) and that's the problem ... the "connection" between bootstrap popup mechanism and errai components.

Maybe create a custom component to do this (@Inject BootstrapPopup ).

This will be very useful.

Regards.