Building a Componentized, Menu-driven Application with Model Container

Overview

From a user interface perspective, Web Experience Factory (WEF) provides builders to generate customizable navigation menus for multi-channel applications (traditional desktop browsers, Smartphones, and Tablets). From an application design perspective, WEF also allows you to break apart your application into logical and manageable components encapsulated in WEF models. This article demonstrates both of these concepts by building a simplistic menu-driven Order Service System application that can launch two different order applications built in other models.

Before talking about the architecture, here's how the application works at runtime. (Keep in mind that the UI is simple and minimally styled for brevity. Using WEF builders, CSS and modern JavaScript frameworks you're free to style application components in any fashion you want.)

From the main menu, two applications can be launched: Current Orders or Order App 2. Both of these applications are built in other models.



Clicking Current Orders will open the Current Orders application. The user can click "Back to Main Menu" to return to the screen above.



Clicking "Order App 2" will open Order App 2. For this example, the Order App 2 simply displays a page.

Setup

• Create a new WEF project.
• When prompted during the new project wizard, enable the Tutorials and Samples feature set. (The UI relies on a sample provider model in this feature set). If you accidentally forget to enable the Tutorials and Samples feature set, don't worry; you can right click your project, select Properties > Web Experience Factory > Feature Info > and enable the Tutorials and Samples feature set.
• Right click the project, select Import > Web Experience Factory archive. Select the attached file in this article.

Architecture

There are two discreet applications for working with Orders: web-inf/models/samples/Nav_Model_Container/Orders/Orders.model and web-inf/models/samples/Nav_Model_Container/App2/Application2.model. Both are separate WEF applications and can be tested and developed independently. Orders.model simply uses the Orders sample application available in the Tutorials and Samples Feature Set in WEF. Application2.model is for illustrative purposes and simply serves as a placeholder that displays a page.

The Application entry point is MainMenu.model. It defines two pages: mainpage.htm and content_page.htm.

mainpage.htm is simple: It defines a named div where the navigation menu will be placed.

content_page.htm is much more interesting. Rather than having a separate Page and Model Container combination for each application you wish to launch off your menu, it is a common container page in charge of rendering the selected WEF application from the Main Menu. Specifically, it defines a named div called "content" where the Model Container builder will dynamically render Web Experience Factory UI models on this page. You'll see shortly how we'll programatically tell Model Container to dynamically swap in and out other model UI's when an application is selected from the menu. content_page.htm also defines a title named element where the selected application name will render as well as a "Return to Main Menu" button for returning to the main menu.

A closer look at content_page.htm :


Now we can delve into each model.

MainMenu.model

A "Main" Action List is the entry point and simply loads mainpage.htm, defined in an Imported Page builder called mainpage.

mainpage.htm looks like this.

The Page Navigation builder lets us add navigational elements to the page. After selecting a page and named location to put the navigation menu, it allows for selecting a menu UI from several out of the box templates. (You can also define your own templates along with CSS). Here I chose Multi-Line Navigation List, which is also nice for mobile devices.

The Navigation input allows you to define the choices in your menu. I've defined two choices: Current Orders and Order App 2. I've also defined a Description for each.



Notice above that in the Navigation input I'm also defining an Action to run when a navigation menu is clicked. The action is swapModelContainer which is an Action List that accepts one parameter: the model name. But what does swapModelContainer do? Hold that question; we have to talk about the common content_page.htm and the Model Container builder first.

An Imported Model builder imports content_page.html into the web application. Noticed the named div called "content"; this is where the Model Container builder will load the UI from another model.


Here you can see the Model Container targeting the "content" named element on the content_page and initially loading the UI from a model called samples/Nav_Model_Container/Empty.model at that spot. As you might have guessed, Empty.model displays nothing, but we need a model to initially feed the Model Container.



Notice in content_page.html the two named elements, title and backbutton.



The Page Navigation builder above will automatically add whatever you typed in the "Name" input to the title named element and it will add a "Return to Main Menu" button to the named location called "backbutton". Note that the Back Button text is customizable.



Now that we have a main page with a navigation menu and a common page to show the UI's of other models, how do they work together?

Remember that the Page Navigation builder has a Navigation input that allows to to define the selections in your navigation as well as what action to run when the selection is clicked. Each Action is configured to call swapModelContainer, passing it the path of a model name starting from web-inf/models. Now we can see what swapModelContainer does.



Given a model name path starting from web-inf/models, swapModelContainer calls a setModelName method automatically added to your model by the Model Container builder. Meaning, MC_content.setModelName() is a Linked Java Object (LJO) automatically provided by the aforementioned Model Container builder which can be used to tell the Model Container that it should display another model's UI instead. So the Page Navigation builder will pass the unique name of the model to swapModelContainer and it will tell the Model Container it should now render the passed model in the named location before re-rendering the content_page.



Again, this nice thing about this approach is that if you want to add applications to your menu, you can simply edit the Page Navigation menu in MainMenu.model and add a new menu element to call this method. There is no need to add a separate Page and Model Container combination for each item in your menu.

Lastly, we can look at the two applications that are rendered by the Model Container when they are selected from the navigation menu. As you can see from the Page Navigation builder from above, these are models/samples/Nav_Model_Container/Orders/Orders and models/samples/Nav_Model_Container/App2/Application2.

Orders.model

This model simply uses the Imported Model builder to import and re-use the Orders sample application that is shipped out of the box with the Tutorials and Samples feature set.

Application2

This model is a simple model that just displays a page. Using your imagination, you can imagine that this model is another application that actually does something useful. :-)

Summary

It's quite easy to add customized Navigation menus to your application using WEF's Page Navigation builder and other builders. You can use the out of the box navigation templates or create your own HTML template and CSS navigation templates to use with the builder. You can also use the Model Container to place the UI of another model at a named location on a page. Finally, as shown in this example, the Model Container builder is especially powerful in that you can dynamically tell it to swap in and out different models at runtime.