In this section, we will use the master/content feature of PRADO to share common layout among pages. Common layout refers to the area that is the same or largely the same for a set of pages. For example, in our blog system, all pages will share the same header, footer and side-bar containing shortcut links. A straightforward implementation is to repeat the common layout in every page. However, this approach is prone to error and is hard to maintain. The master/content feature allows us to treat the common layout as a control which centralizes the logic and presentation of the common layout for every page.
We now create the master control MainLayout to represent the common layout shared by our blog pages. The MainLayout control is a template control extending from TTemplateControl. It requires a template file MainLayout.tpl and a class file MainLayout.php located under the same directory. To facilitate maintenance, we create a new directory protected/layouts to hold them.
For the moment, MainLayout only contains a simple header and a footer, as shown in the following. In future, we will add a side-bar to it. Readers are also encouraged to enhance the layout with other features.
The above shows the content in the template file MainLayout.tpl. Three new tags are used:
The class file MainLayout.php is very simple:
To use the newly created master control, we will modify Home.page and Contact.page. In particular, we need to remove the header and footer from them because the master control will be responsible for displaying them; and we need to tell the two pages that they should use MainLayout as their master.
The following shows the content in Contact.page after the change:
Please fill out the following form to let me know your feedback on my blog. Thanks!
...textbox and validator for user's name... ...textbox and validators for user's email... ...textbox and validator for user's feedback content... <com:TButton Text="Submit" OnClick="submitButtonClicked" /> </com:TContent>Content enclosed within the <com:TContent> tag will be inserted into the place that is reserved by <com:TContentPlaceHolder> in the master template.
Besides <com:TContent>, we also see another new tag <%@ %> in the above, which is called template control tag. It contains name-value pairs which are used to initialize the corresponding properties for the template owner, namely, the Contact page.
By setting MasterClass property as Application.layouts.MainLayout, we instruct the Contact page to use MainLayout as its master. Here, we are using the namespace format to refer to the MainLayout class.
There are several additional ways to specify the master class for a page.
We can specify master in code like the following to enable dynamic change of layout:
In the above, we specify MasterClass in the onPreInit() method which is inherited from TPage. The method is invoked by PRADO right after the page instance is created. We thus can dynamically determine the layout to use when the page is requested. For example, when the page is requested by a registered user we use layout A, and layout B is used if a guest user is requesting the page.
We can also specify master in application configuration or page configuration. The following shows the updated application configuration for our blog system:
By doing so, we save the trouble of specifying master in every page template. If we decide to use a different master for the pages, we only need to change the application configuration. For this reason, in our blog system we will use this approach to specify master.