CODEWITHSUNDEEP
sapui5
user2644620
user2644620

Reputation: 199

What is the difference between router and eventBus in SAPUI5

Can anybody explain what are the difference between Event Bus and Router in SAPUI5? Please help me in which scenario we have to use Router or Event Bus.

Upvotes: 0

Views: 2923

Answers (2)

Rahul Bhardwaj
Rahul Bhardwaj

Reputation: 2353

Let me try to explain you in a shopping scenario.

Suppose you are browsing the "MyshopWebsite" shopping website. Let's think it is developed using SAP UI5 library.

Major Functionlity :

  1. Infinite scrolling on Home page ( Loading,say, n items first and then 10 more items as soon as you hit bottom.
  2. Click on product and you can see its details in separate page.
  3. Suggestions Shown on side panel based on your selections.

Scenario 1: Now, on home page you are scrolling. As soon as you hit bottom, new products are loaded. Note :

  1. Here, we need to show more information on same page. We are not navigating or changing the browser HASH.

  2. Router is used to navigate to a different page than the current one and pass required data. So, I will not use it here. I want to be on same page and not change browser URL and its current hash.

  3. So, how do I show more products after reaching the end of page ? Check the browser end of Page ( through JS) and load more. Many ways are there.

So, let's think there is Messenger, X, whose job is to tell the world : Hey, he reached end of page !! He reached End of Page. We need more Products!!!

And there is a listener, L, who keeps listening to our Messenger, X. When he hears him, he sends him new data.

So, lets convert it to technical term.

function initMethod() {
    var eventBus = sap.ui.getCore().getEventBus();
    eventBus.subscribe("homePage", "reachedEndOfPage", handleEndOfPage, this); // Listener L
}

function reachedEndOfPage() {
    var eventBus = sap.ui.getCore().getEventBus();
    eventBus.publish("homePage", "reachedEndOfPage"); // Messenger X

}

function handleEndOfPage() {
    // Ok.. lets send more data
}

Scenario 2 : Clicked on a Product. Simple, move him to a new page. Show the information of the page. Change Broswer URL and hash so it can be bookmarked.

What to choose: Router.

Our SAPUI5 router is based on Crossroads JS. They say Crossroads is :

It is a powerful and flexible routing system. If used properly it can reduce code complexity by decoupling objects and also by abstracting navigation paths and server requests.

Router used for Navigation.

But can event bus be used here for Navigation. How ? In press event of Product, Publish event (saying 'Product Clicked'), then create a handler who will subscribe for 'Product Clicked' event and then Fire App.navTo or Router.navTo.

So, difference is Event bus creates listeners for ANY TYPE OF EVENT which you can fire manually.

Where as Router is used to NAVIGATION and is ONLY LISTENING TO BROWSER HASH changes.

Scenario 3 : Now, I hope it gets clear. I'm NOT NAVIGATING but I want to listen/react to every time user clicks a Product.

So, I will create a Messenger, 'Click', who will shout(Publish) when I click on any Product. And a Suggestion Listener, say Listener 'Suggest', who will be listen/react to Published events by our Messenger :'Click'.

I hope it helps you. Let me know if you still have confusion. Will try to add more info as needed.

Upvotes: 2

Marc
Marc

Reputation: 6190

With the router you can navigate between different targets. One target consists of one or two views.

Say you have a list in view A and a form containing the details of a list item in view B. When pressing on a list item in view A you can navigate to your detail view B using the router.

With the event bus you can communicate between different active controllers.

Say you have a split app with a master and a detail view. You can fire events in your master view and listen to these events in your detail view (and vice versa)

Upvotes: 1

Related Questions