Introduction
Working on real-world Web applications may require modeling a large project. In this situation it’s important to be able to manage the project to avoid loss of control and duplication of model parts. WebRatio Platform lets you easily work on large projects thanks to its modeling capabilities, which allow you to break down a model into parts, and reuse them wherever you need. The main advantages of this approach are ease of maintenance as well as readability and elegance of the obtained model. In fact you can "centralize" the part of user interaction model that you want to reuse and put it in a single place, and that will be the only place where you will have to make changes, thus saving time and reducing errors. Also you can better navigate the IFML Model. When you deal with big projects, you often have a complex model with many view components and pages, so finding something may become difficult.
This lesson gives you the basic knowledge required to define common content in an IFML model through the "Master Page" concept.
Master Page
The "Master Page" is a "View Container" containing only "View Components".
User Details - An Example of Master Page
As an example, the "Master Page" allows you to see the details of the currently logged-in user in each page of the Web application. Without the "Master Page", you would have to place the same piece of the model into each page. If you use a "Master Page" instead, you can place the common content there and avoid having to duplicate portions of the model.
Multiple Master Page
You can have more than one "Master Page" in your Web Project. Specifically, you can model one "Master Page" for each level of the "Site View". This means that you can have a "Master Page" inside the "Site View", and one "Master Page" inside each area of the "Site View". If your model contains nested areas, you can also model a "Master Page" in each nested area.
Remember that only one Master Page's Content is considered for each page. The idea is that the "Master Page" that is closer to the page is used as a source of common content. For example, the "Search for Companies" page inherits the content of the "Master Page" inside the "Companies Information" area. The "Home Employees" page instead inherits the content of the "Master Page" inside the "Employee" area.
This feature can be useful when you want to override the content of the main "Master Page" for some Web application sections.
How to Add a Master Page
Let’s see how to model a "Master Page" in practice. For this example we continue working on our "CRM" web project in which you have the Domain Model, the "Sales Manager" site view, and some pages such as the "Company Details" and "Search Companies by keyword". Each Page contains the same set of "View Components" in order to see the "User Details".
Let's create a "Master Page" in the "Sales Manager" site view. Select the "Master Page" element from the "Container" section of the toolbar and click in the work area. Type a meaningful name for it, such as "Master Page".
You can copy the "View Components" from the "Companies Details" page and paste them into the "Master Page". Let's select the "View Components" we want to add to the "Master Page" from the "Companies Details" page. You can click on each "View Component" while keeping the "CTRL" key pressed (on a PC) or the command key (on a Mac). Then, right-click on the elements and select the "Copy" option. Let's select the "Master Page", right-click and than select the "Paste" option.
Custom Locations: Master Page Content
The Master Page Content is content for which you must set an explicit location inside the "Layout View".
Let's consider a page of a Web application. Usually it is structured in a set of main sections such as header, footer, menu and content. The "Content Section" is the place where you see the content of each modeled page. But since the "Master Page" contains content shared by all other pages it’s not possible to place this content in the "Content" section.
The "Content" section is in fact used by the pages to display their content. This means that what you see inside the "Content" Section is reloaded every time that you change the page. You want to load the "Content" of the "Master Page" only once for the entire scope of the "Master Page" so we have to specify a different location for this kind of content. This is the aim of "Custom Locations".
A "Custom Location" is the definition of a specific portion of the page in which additional content may be placed. For example, you can have a "Custom Location" used for the user profile. The set of available "Custom Locations" comes with the style you apply on the project. You can learn more about how to apply a style to your project watching that specific lesson.
How to Use Custom Locations
To be able to place the "Master Page" Content in a "Custom Location" let’s select the "Master Page" element and then move to the "Layout View". The "Layout View" is structured in this way. There's a Pool containing all the "View Components" modeled in a Page, in this case in the "Master Page".
In the "Locations Overview" Section, you can see the full list of "Custom Locations" available for the current style. You can select the location you want to use. Then, in the "Layout Grid" you can place the content inside the specific "Location".
Placing the Content
Let's see in practice how you can place the content of the "Master Page" into the "Custom Location". After selecting the "Master Page" in the work area, the first step is to open its "Layout View".
You can see that the "Main Grid" is empty and contains a message that reminds you to select a "Custom Location" from the "Locations Overview" panel. Click on the hyperlink "Locations Overview". Now you can see the list of all the "Custom Locations" made available from the adopted "Page Layout".
The default choice for the "WebRatio/Basic" style page shows the "Locations": "Left", "Page Links", "Right", "Top" and "User". Each one has its own meaning, and since the "Master Page" shows user profile data, our choice will be the "User" custom location. Close the "Location Overview". Now just select the "User Details" details component, from the "Layout Pool" and drag and drop it inside the "User" custom location. The "User" custom location will now show the "View Component" to be displayed.
Let's configure the layout of the Component to show the user information as in the image. Select the Details Component and move to the Properties View to change the settings. Set the "None" option for the "Frame Layout" property to remove the graphical container. Choose the "WRDefault/User" template created for the "User" custom location in the "Component Layout" property.
To test the "Master Page" you can now save and use the "Generate and Run" command.