5 Replies Latest reply on Jun 20, 2013 10:27 AM by Jörn Tysper

    Using Errai UI Navigation in MVP based application

    Jörn Tysper Newbie

      Hi all,

       

      we are currently developing an Errai 2.2.1 (soon 2.3.0) based application using the MVP paradigma and a Sencha GXT based UI.

      We started out using the examples provided in http://errai-blog.blogspot.de/2012/03/large-scale-application-development.html and the mentioned google article.

       

      This turned out to introduce a lot of boilerplate code and we would like to follow a more declarative approach like the one introduced with Errai UI Navigation.

      At the same time we would like to leverage its very nice page-lifecycle model.

       

      In the MVP approach the presenters are the masters of the application and are responsible for binding the views which are only containing representational logic (which we don't unit test for example).

      So we were able to focus our unit tests on the presenter layer and could stay inside the JVM without the need to bootstrap a GWT Test.

       

      With the Errai UI Navigation based approach it seems to us that now the Pages are the masters and the UI became fully managed by Errai UI.

      In the documentation for example the only thing the EntryPoint does is add the Navigations ContentPanel to the RootPanel.

       

      Our question now is:

      How to transform the old way of having a presenter that contains the real application logic that binds itself to a view (via manual bind() or UIBinder) to the new way of having declarative Pages that are "fully managed"?

       

      Since all seems now to happen inside of the pages, we are forced to put the applications logic into the view layer again.

      Did we miss something?

       

      How can we encapsulate a non-ui layer we could test against like we did with the presenters? (with non-ui I mean something not dependend on one specific view technology)

       

      We haven't been able to find good examples for this specific way of using Errai UI so you might be able to help us.

       

       

      Regards

      Jörn

        • 1. Re: Using Errai UI Navigation in MVP based application
          Jonathan Fuerth Master

          Hi Jörn,

           

          You raise some excellent questions here. Errai UI is still a brand new programming model for us, so the best we can do is to take a look at things that have come before, make some judgment calls, and try something new!

           

          If I understand correctly, your main goals are to take advantage of the page navigation and lifecycle model without giving up the ability to run fast, headless unit tests on the behaviour of your UI.

           

          We could borrow from Swing programming style: factor out the code that manipulates the model objects into "Action" classes. Inject these actions into the pages, and just call their methods to make stuff happen. Centre your UI unit testing around these actions, which only maniuplate the model and not the UI. Leave the Page code simple enough that it does not benefit from unit testing, and catch the (rare) true UI-layer bugs during a full-on integration test using Selenium WebDriver (you'll always need this kind of test anyway to discover browser compatibility problems).

           

          Sorry for the delay in responding. I hope some part of my response has been helpful to you! If you have different ideas, please share them with us!

           

          Jonathan

          • 2. Re: Using Errai UI Navigation in MVP based application
            Jörn Tysper Newbie

            Hi Jonathan,

             

            first of all thanks for the reply!

            It's really a big help to be able to directly talk to the guys that are building the thing you are working with.

             

            Although I have to admit that this is exactly the answer I had been afraid of :-)

             

            Although there are most certainly different ways to solve our problem of decoupling unit tests, we don't really want to invent a completely new web development paradigm (like "Swing + DI in the Web") while there are already good practices out there (MVP) that "just" need to be supported by the way ErraiUi is implemented.

             

            So what would really really help us (now) is if ErraiUi (as well as Errai itself) would keep in mind where we are coming from.

            There's currently another open change request created by someone else that is not even assigned to anyone: https://issues.jboss.org/browse/ERRAI-486

            I guess that's exactly the thing that we (guys still having to integrate with "old" MVP based solutions) might be missing in ErraiUi.

             

            I really like the new ideas that Errai and ErraiUi introduce (especially the declarative stuff and "lightweight-ness")!

            I'd just feel a lot more confident in recommending the usage of Errai to other teams inside of our company, if you guys always keep a backdoor open and give us, who have to maintain a large code base that is based on a certain widely-used paradign, the possibility to at least map to those things in a natural way.

             

            Thanks and Regards

            Jörn

            • 3. Re: Using Errai UI Navigation in MVP based application
              Jonathan Fuerth Master

              Hi Jörn,

               

              We actually had someone volunteer to take on ERRAI-486 shortly after it was filed, but unfortunately her work has stalled indefinitely. If you'd like to tackle this item and send a pull request, there shouldn't be any conflicts! If not, we will get to it eventually. Right now, we're all heads-down working on other stuff.

               

              Beyond the ability to annotate an IsWidget with @Page (ERRAI-486), what else would help make the mix of a big MVP app with Errai UI more comfortable? At this point, you have more experience developing a big app with Errai UI than we do. Your feedback and suggestions are extremely valuable. This is a good discussion to be having.

               

              Cheers,

              Jonathan

              • 4. Re: Using Errai UI Navigation in MVP based application
                crinaldi Newbie

                We have developed an application using MVP (Activities and Places) with Errai UI without using Errai Navigation ....

                Each view is a template

                 

                public interface AdminBarView extends IsWidget {

                    public interface Presenter {

                        public void editProfile();

                    }

                   

                    HasText getUserName();

                 

                    public void setPresenter(Presenter presenter);

                }

                -----------------------

                @LoadAsync

                @Singleton

                @Templated("#adminBarComponent")

                public class AdminBarViewComponent extends Composite implements AdminBarView{

                 

                    Presenter presenter;

                   

                    ......

                    ......

                 

                   @Override

                    public void setPresenter(Presenter presenter) {

                        this.presenter = Preconditions.checkNotNull(presenter, "SET", "Presenter is NULL");

                    }

                 

                    @Override

                    public HasText getUserName() {

                        return userName;

                    }

                    ....

                    ....

                }

                -----------------------------------------------------------------------------------------------------------------------------------------

                @Dependent

                public class AdminBarActivity extends AbstractActivity implements AdminBarView.Presenter {

                 

                     @Inject 

                     private AdminBarView view;

                     .....

                     ......

                 

                   

                   @Override

                    public void start(AcceptsOneWidget panel, EventBus eventBus) {

                         view.setPresenter(this);

                         panel.setWidget(view);

                         . . . .

                         . . . . 

                    }

                }

                 


                One problem I found is that the activities are dependent on the view, as the view is singleton, the activity is still being created, because the ActivityManager not removed and remains.
                I saw this when you have methods that observe events CDI, the activity, not the current one that has its sights set, the other is linked to the event handler is executed.
                The quick fix was to Singleton activity, but not the most appropriate.


                @Page I see very related to view component. Would be nice to link the two things @ Page with Places, and to use the Activities ...
                Like what you see?

                • 5. Re: Using Errai UI Navigation in MVP based application
                  Jörn Tysper Newbie

                  Hi guys,

                   

                  sorry for the late response. I have been on vacation.

                   

                  Cristians suggestion seems pretty promising!

                  I read up on Activities and Places (which weirdly hasn't met our attention before..) and it looks like a piece of functionality that could reduce our boilerplate code to a minimum.

                  Thanks for that :-)

                   

                  You're using it in the opposite way though. We don't want to use the @Tempated part of Errai UI but the Navigation part.

                  So as you are already saying: Would be nice to link Activities and Places to Errai UI Navigation.

                   

                  So appart from the issue with the registration of views.. have you found other problems while using Actitivies and Places within the Errai IOC / CDI container?

                  For example the lifecycle methods of the activities are provided a EventBus instance. As far as I understood this is GWTs own event bus which is used for eventing within As&Ps.

                  Is this an issue when using the Errai Bus for application events or could they stay completely decoupled with the GWT Bus just beeing an implementation detail of As&Ps?

                   

                  Regarding the @Page alignment I have to take the time to look into the source of Errai UI and get an idea what happens there.

                  Although this might take some time - once I know more I will come back and report my findings.

                   

                  Thanks and regards

                  Jörn