Nested layouts - How to design them
From PRADO Wiki
Nested layouts - How to design them? Simply way to simplify our work
Contents |
The purpose
In small or big site alway we find common part of page layout. For this purpose we use master layout, but what when we want to extend our master layout? Then we use nested layouts. This is really usefull and helpful and not so hard to underestand.
Introduction
Creating nested layouts at first flash looks hard, but is not! First what we should do is planning. So we start with designing our master layout. For this tutorial we create master layout as below.
MasterLayout overview
----------------------------- | (1) | ----------------------------- | | | | | | | | | | (2) | (3) | | | | | | | | | | -----------------------------
(1) is a header of our page (2) is a content (3) is a right panel where we find menus
This is a base for our web site.
NestedLayout overview
We want to have pages where
- we can register to our web site
- we can join newsletter
- write email to admin.
This all tree pages have similar parts, which we extract now: (4) header, where we can find info (description) about page where we are (5) box where we show errors when they occured when we fill formular (6) formular with fields and buttons.
So our NestedLayout for content page (2) should look like bellow:
------------------------- | (4) | ------------------------- | (5) | ------------------------- | | | (6) | | | -------------------------
MasterLayout & NestedLayout
...and toogether whith MainLayout:
----------------------------- | (1) | ----------------------------- | (4) | | -----------------------| | | (5) | | -----------------------| (3) | | | | | (6) | | | | | -----------------------------
First step: Designing MasterLayout
When we finished our designing part it's time to coding.
an PHP file for MasterLayout
First what we must to do, is to define MainLayout. We do this creating PHP file (name we can choose freely) in which we inherit from class: TTemplateControl which is a basic class for templates.
<?php /** * class MainLayout */ class MainLayout extends TTemplateControl { } ?>
an TPL file for MasterLayout
Latter we create template file (*.tpl) which describe design of our page (see introduction). Caution: for clearing code of not important code we ommited header part
<body id="home"> <com:TForm> <div id="whole_page"> <div id="header"></div> <div id="content"><com:TContentPlaceHolder ID="Main"/></div> <div id="right_bar"></div> </div> </com:TForm> </body>
As we see in code upper content of page (2) in our tpl file is marked as a TContentPlaceHolder and we set for it ID="Main".
application.xml modifications
Of course we don't forget to join our MainLayout to application.xml file.
<services> <!-- page service --> <service id="page" class="TPageService" BasePath="Application.Pages" DefaultPage="our_default_page"> <pages MasterClass="path_to_our_Main_Layout" Theme="our_theme_name" /> </service> </services>
e.g
<pages MasterClass="Application.Data.Layouts.MainLayout" Theme="Flowers"/>
Second step: Designing nested layout
Usually we put in our *.page in first line information about layout like below (layout path is here: /Data/Layouts/MainLayout.tpl).
<%@ MasterClass="Application.Data.Layouts.MainLayout" %>
an PHP file for NestedLayout
How to use nested template? First we should to create them :). We proceed like usually when we create layout... so... We create PHP file NestedLayout.php like below:
<?php class SmallerLayout extends TTemplateControl { } ?>
As we see is similar with step 3.1 an PHP file for MasterLayout
an TPL file for NestedLayout
Next step is also similar to step which we made for MasterLayout, so we create a *.TPL file which describe areas marked as (4) - nested header (5) - box (6) - formular in our nested template. Let's do this:
<div id="nestedheader"><com:TContentPlaceHolder ID="cphHeader"/></div> some extra text <div id="box"><com:TContentPlaceHolder ID="cphBox"/></div> some other extra text <div id="formular"><com:TContentPlaceHolder ID="cphForm"/></div>
We mark areas, but we didn't tell PRADO that this template (tpl) is within another, so we must to add in our tpl this line which describe MasterClass of our layout:
<%@ MasterClass="Application.Path_to_Main_Layout.MainLayout %>
where Path_to_Main_Layout is a path to MainLayout which we create in previous steps :)
Finally we have: (I replaced Path_to_Main_Layout with really path)
<%@ MasterClass="Application.Data.Layouts.MainLayout" %> <com:TContent ID="Main"> <div id="nestedheader"><com:TContentPlaceHolder ID="cphHeader"/></div> some extra text <div id="box"><com:TContentPlaceHolder ID="cphBox"/></div> some other extra text <div id="formular"><com:TContentPlaceHolder ID="cphForm"/></div> </com:TContent>
Caution: In this file header data is not forbidden because we indeed warking with content of HTML file.
Our template will have 3 dynamic areas, which we will fill and 2 static texts: "some extra text", "some other extra text", which will be always displayed! We tell also PRADO that this 3 dinamic area and 2 static text should be shown in the place which we mark in our MainLayout as TContentPlaceHolder ID="Main"
Finalization
Now we can create our tree different pages: join page, newsletter page, email page. I show how to create one of them (email page), latter we create the same way.
Creating pages...
Like usually when we create page, we must to create: 'PHP file and *.page file. I skip PHP file because is obvious how it should look, I'll just describe how to create page file.
<%@ MasterClass="Application.Data.Path_to_Smaller_Layout.SmallerLayout" %> <com:TContent ID="cphHeader">we put there some text which will be displayed at top of our area (2), e.g: Contact with adminstrator</com:TContent> text which will be not displayed, beacuse is out of TContent, which replace TContentPlaceHolder's which we define in aur template <com:TContent ID="cphBox">this area we can leave empty or put there what we want</com:TContent> <com:TContent ID="cphForm">there we can put our THtmlArea or TTextBox which have TextMode propert set as multiline.</com:TContent>
Summary
Summary What we have done? We just tell PRADO that TContentPlaceHolder ID="cphHeader" must replace own content this what is within TContent Id="cphHeader" tag (analogically: ID="cphBox" and ID="cphForm"). We also tell PRADO that our page should be inserted in NestedLayout (we use to this MasterClass property). Previous we tell NestedLayout that it should replace MainLayout
Finally end:)
Like you have seen, it's nothing hard to create nested templates. If you are reading this sentence I'm really happy that U read whole article (or you just scroll to the end :)) I hope that this articles is usefull to You.
