NuSphere Forums Forum Index
NuSphere Forums
Reply to topic
Dynamic Templates


Joined: 09 Oct 2003
Posts: 60
Location: Bristol, England
Reply with quote
Hi,

I can't see any posts with this suggestion, so I thought I'd just drop it in.

I think what would make phpEd absolutely perfect (as if it's not already Wink ) would be to be able to have templates that when you make a change to one, any file in the website that is linked to it is automatically updated with that change, including any nested templates and their dependent files.

I know I shouldn't mention the dreaded Dreamweaver, but this is the only feature that keeps me using it as I find it so easy to maintain large websites by using it's template feature.

As a curiosity exercise, I did look at a lot of other editors, but none had this type of template feature (of the ones that had a template feature, only new pages could be based on a template). So, if phpEd had a dynamic template feature as above, then perhaps we could drum DW out of the market? Heehee. Well, why else would anyone use it?

Yours hopefully,

DebbieLeigh
View user's profileFind all posts by Debbie-LeighSend private messageVisit poster's website
Site Admin

Joined: 13 Jul 2003
Posts: 7887
Reply with quote
Hi,
I'm sorry Embarassed I didn't work in Dreamweaver for very long time...
So probably I miss something, could you tell me in more details how the templates should work ? Would be fine to see a sample or two Smile
View user's profileFind all posts by dmitriSend private messageVisit poster's website


Joined: 09 Oct 2003
Posts: 60
Location: Bristol, England
Reply with quote
Hi ddmitrie,

I totally understand and don't blame you. Smile

OK, well maybe if I describe the setup I'm using, it might be clearer.

I have 3 levels:
  • on the top level are the main templates which control the overall layout of the website pages.
  • on the second level are the templates for each section, which are linked to the appropriate top level template and control a more specific layout for each section. I call these type of templates, nested templates.
  • on the third level are the actual pages, which are linked to the second level templates.

Now, when I make a change to a top level template and I save the template, that change is automatically reflected in all the second level templates and third level pages that are linked to that top level template. Obviously, there can be more or less than the three levels that I use.

What DW does to keep track of which parts of a page belong to the template is to insert it's own template comments into each page that is based on a template. They are:
  • Everything in a template page is regarded as text that should be replaced in any page that uses that template, except for text between <!-- TemplateBeginEditable name="(a name to identify this editable area)" --> and <!-- TemplateEndEditable --> comments which denote areas that contain page-specific text that should be left alone.
  • These template tags are replaced by <!-- InstanceBeginEditable name="(name)" --> and <!-- InstanceEndEditable --> tags in a dependent page (which obviously can be a normal page or a nested template).
  • At the top of a dependent page is a <!-- InstanceBegin template="(path/to/template-page.dwt)" --> comment that specifies the template to use for that page.
  • There is also a <!-- TemplateInfo codeOutsideHTMLIsLocked="(true or false)" --> template tag inserted at the top of a template page that just states whether to regard any text that appears outside the <html></html> tags as changeable too (like code for instance).

That's pretty much all there is to it. Now, whenever a template is changed, DW scans the website for all the pages that refer to the template and replaces all the template text in each page.

There are a some other features it includes which do make the template feature flexible (these are options on a menu):
  • 'Make Attribute Editable' in a template page. This is for when there is some attribute of an html tag within the template text that you want to be editable by a dependent page (see the 'onload' example in the listings below). These are changable via a dialog, which puts the appropriate code into the template page. Another dialog in the dependent page changes the value.
  • 'Apply Template To Page', which adds the template text to the appropriate parts of a page.
  • 'Detach Template From Page', which just deletes the template tags and leaves the text alone.

I hope my explanation wasn't too long winded. I've given an example of each level below, so you can see how it all fits together:

This is a top level template (called mainpage.dwt):
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" />
<html>
<head>
<!-- TemplateInfo codeOutsideHTMLIsLocked="false" -->
<!-- TemplateBeginEditable name="Doctitle" -->
<title>Main Page</title>
<!-- TemplateEndEditable -->
<meta name="author" content="Me" />
<meta name="COPYRIGHT" content="Copyright owned by Me" />
<meta name="REVISIT-AFTER" content="7 days" />
<meta http-equiv="Content-Type" content="text/html; charset="iso-8859-1" />
<meta http-equiv="Content-Language" content="en-us" />
<!-- TemplateBeginEditable name="Styles" -->
<link href="../styles/main.css" rel="stylesheet" type="text/css" />
<!-- TemplateEndEditable -->
<script language="JavaScript" src="../scripts/mainscript.js">
</script>
<!-- TemplateBeginEditable name="Head" -->

<!-- TemplateEndEditable -->

<!-- TemplateParam name="onload" type="text" value="" -->
</head>

<body class="bg-site" background="../images/bg.gif" onLoad="@@(onload)@@">
<table width="100%" border="0" align="center" valign="top" cellpadding="0" cellspacing="0" class="bg-mainpage">
<!-- TemplateBeginEditable name="Main Page" -->
<tr valign="top">
   <td valign="top">
      <p>&nbsp;</p>
      <p>&nbsp;</p>
   </td>
</tr>
<!-- TemplateEndEditable -->
</table>
</body>
</html>


This is a second level template (called about.dwt):
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" />
<html>
<!-- InstanceBegin template="/Templates/mainpage.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
 
<!-- InstanceBeginEditable name="Doctitle" -->
<title>About Page</title>
<!-- InstanceEndEditable -->
<meta name="author" content="Me" />
<meta name="COPYRIGHT" content="Copyright owned by Me" />
<meta name="REVISIT-AFTER" content="7 days" />
<meta http-equiv="Content-Type" content="text/html; charset="iso-8859-1" />
<meta http-equiv="Content-Language" content="en-us" />
<!-- InstanceBeginEditable name="Styles" -->
<link href="../styles/about.css" rel="stylesheet" type="text/css" />
<!-- TemplateBeginEditable name="Styles Passthru" -->

<!-- TemplateEndEditable -->
<!-- InstanceEndEditable -->
<script language="JavaScript" src="../scripts/mainscript.js">
</script>
<!-- InstanceBeginEditable name="Head" -->

<!-- InstanceEndEditable -->

<!-- InstanceParam name="onload" type="text" value="" -->
</head>

<body class="bg-site" background="../images/bg.gif" onLoad="">
<table width="100%" border="0" align="center" valign="top" cellpadding="0" cellspacing="0" class="bg-mainpage">
<!-- InstanceBeginEditable name="Main Page" -->
<!-- TemplateBeginEditable name="Main Page Passthru" -->
<tr valign="top">
   <td valign="top">
      <p>&nbsp;</p>
      <p>&nbsp;</p>
   </td>
</tr>
<!-- TemplateEndEditable -->
<!-- InstanceEndEditable -->
</table>
</body>
<!-- InstanceEnd -->
</html>


This is a template-dependent page (called about.htm):
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" />
<html>
<!-- InstanceBegin template="/Templates/about.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
 
<!-- InstanceBeginEditable name="Doctitle" -->
<title>About Us</title>
<!-- InstanceEndEditable -->
<meta name="author" content="Me" />
<meta name="COPYRIGHT" content="Copyright owned by Me" />
<meta name="REVISIT-AFTER" content="7 days" />
<meta http-equiv="Content-Type" content="text/html; charset="iso-8859-1" />
<meta http-equiv="Content-Language" content="en-us" />

<link href="../styles/about.css" rel="stylesheet" type="text/css" />
<!-- InstanceBeginEditable name="Styles Passthru" -->

<!-- InstanceEndEditable -->
 
<script language="JavaScript" src="../scripts/mainscript.js">
</script>
<!-- InstanceBeginEditable name="Head" -->

<!-- InstanceEndEditable -->


</head>

<body class="bg-site" background="../images/bg.gif" onLoad="">
<table width="100%" border="0" align="center" valign="top" cellpadding="0" cellspacing="0" class="bg-mainpage">

<!-- InstanceBeginEditable name="Main Page Passthru" -->
<tr valign="top">
   <td valign="top">
      My About Us page text
   </td>
</tr>
<!-- InstanceEndEditable -->

</table>

</body>
<!-- InstanceEnd -->
</html>


DebbieLeigh
View user's profileFind all posts by Debbie-LeighSend private messageVisit poster's website
Guest


Reply with quote
Looks resonable. Okay, suppose you made a linked list like this t1->t2->t3 and you need to see the resulted page. When and what tool does create the final html or php file ?

On the other hand, I think that Smarty is the best template-oriented way for PHP developers. Why don't you use Smarty ?
Dynamic Templates


Joined: 09 Oct 2003
Posts: 60
Location: Bristol, England
Reply with quote
Hi ddmitrie,

Think of it more as a specialised find and replace function, which is really all that it is, rather than Smarty-like templates. It works on the content part of the pages (i.e. the bit containing the html rather than the bit containing the code).

I only recently came across Smarty and do agree that it is a very good concept and tool to use. However, I have always designed my applications with modularisation and separation of logic from content in mind, so my website already does what Smarty does anyway. But even Smarty doesn't have this find/replace template functionality as it's not really designed for that.

I modularise and parameterise a lot of the content of my pages similar to the way Smarty works, however I've found there are certain things, like layouts, that don't lend themselves easily to modularising, which is where this template functionality real comes into it's own.

So to answer your question, relating the example you gave (t1->t2->t3) to my example:
  • t1 would be the top level, which controls the general layout of all pages in the website
  • t2 would be a template that controls more specific features e.g. for a section of the website
  • t3 would be the actual pages in that section that are seen in the browser.

So if I changed, say, the attributes of a table in t1 and saved t1, then the same table in t2 would be automatically changed and so would all the t3 level pages that are based on the t2 template. If I changed something in t2, t1 wouldn't be affected, but all the t3 pages would be changed.

There is no 'tool' that creates the final page as all the pages are just normal html/php pages. As I said earlier, this is just a find/replace tool that helps enormously in the maintenance of websites.

I'm not sure whether that's clear enough, but I can't think how else to explain it.

DebbieLeigh
View user's profileFind all posts by Debbie-LeighSend private messageVisit poster's website
Guest


Reply with quote
smarty rocks


Joined: 23 Mar 2009
Posts: 1
Reply with quote
Here's a big tip I just spent hours figuring out...

Notice that in this example, you could not actually specify the Onload attribute in a page created from the second level template.

In order to do this, you need to the second-level nested template and select Modify, Template Properties... and then check "Allow nested templates to control this"

_________________
A2
View user's profileFind all posts by ApexTwoSend private message
Dynamic Templates
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
All times are GMT - 5 Hours  
Page 1 of 1  

  
  
 Reply to topic