Web Experience Factory (WEF) v8.0 has some great and easy-to-use features to make portlets send events to each other. Here's a short tutorial.
A common scenario in a web application is navigating from a summary to a detail page. The summary has a few pieces of information about a particular item, and the detail shows all the pertinent data, and also possibly gives you the ability to edit that data. In the non-portal world, users typically click on a link in a summary table, and are taken to a separate page which has the detail. The user then has to navigate back to the summary page in order to select the next item.
In the WebSphere Portal world, both the summary and detail information can be in separate portlets on the same page. When users click on a row in the summary portlet, they see the detail portlet displaying that row, while the summary portlet doesn't change at all. Here's how easy it is to implement this in WEF.
- Create a new WEF project. Be sure to add the Building Models feature set from the Tutorials and Samples category. This gives us the data provider which we'll use in this example.
- Create a new model, using the Data Services UI Service Consumer wizard. This wizard will create a full-function portlet from a provider which identifies its CRUD (create, read, update, delete) functions. The provider which comes with the Building Models feature set is such a one; take a look at it to see how that is implemented. You'll find this wizard in the Select Model panel when you create a model. Select it and choose Next.
- Give your model the name OrdersSummary, and select the samples/gettingstarted/OrdersServiceProvider, then choose Next.
- On the next page, deselect all services but the List Page, and choose Next.
- The next page is Field Settings Information. Here you can configure some display settings. You might want to resize this window and the columns in it to see everything clearly. Choose to hide all but the ORDER_ID, DATE_ORDERED, and STATUS fields. Choose Next.
- Give the model the name OrdersSummary and choose Finish.
You're done with the Summary portlet. Now let's create the Details portlet. Follow step 2 above to create another model which also uses the Data Services UI Service Consumer wizard. Name it OrdersDetail and also choose the samples/gettingstarted/OrdersServiceProvider provider, then click Next.
- On the list of which services to include, deselect everything but the Details Page. You'll notice that when you deselect the List Page, a dropdown will appear below the list. Use it to select OrdersSummaryDSUIOrdersSummaryDetailsEvent. Here is what's happening: In the first model, you chose to have a List Page, but no Details Page. WEF understands that you may want to create a Details Page somewhere else, so it created an event. That event will broadcast a row's key to any other model which may be listening for it. Then when you created another model and only chose a Details Page, WEF assumes you might want to receive an event and display details. It queried the other models and found this event. When you select it, all the plumbing for sending and receiving the events will be created for you. Make sure your panel looks like the following, then choose Next.
- In the Field Settings Information panel, leave everything at the defaults and choose Next.
- Give the model the name OrdersDetail and choose Finish.
- You've created a couple of portlets, so now publish your project to WebSphere Portal, then add OrdersSummary and OrdersDetail to a page.
- Click on a row in the summary portlet, and you should see the details appear in the details portlet.
- That's it! Here is my example.