Layout the page display

We have a template and a page now for our web application. The next step is to layout the page so that the information is presentable for the user. Now we will have to add the content of DeptVO from the data control and add it to the dept.jspx page. We will add model layer content from the data control to the page by dragging-and-dropping the view object instance as explained in the previous chapter. Once the content is added to the content facet of the page, it looks like the one shown in the following screenshot:

You can see the difference between the index.jspx page and the dept.jspx in the following screenshot as the new page has a blue border and the content is stretched completely. This is because the dept.jspx page is based on the page template and the index.jspx page does not have the page template defined for it.

Our next step is to create the layout which contains a navigation menu to the left-hand side of the page and the content will be displayed at the...