Welcome to the MacNN Forums.

aleph_null · Jan 20, 2006, 01:22 PM

Hi there -

So a few years ago I needed to re-design a site and was sort of despising Dreamweaver. Being the naive re-inventing-the-wheel kinda guy I am, I wrote a templating engine in php, with the goal of making it behave the way I'd want a templating engine to behave. This was without really investigating the options already out there, so it wasn't necessarily the wisest thing to do, maybe, but I wanted to play.

So it's kinda spiffy, and I've been improving it here and there, and I'll probably open-source it at some point as a stand-alone system.

But it does require coding by hand, AND knowing what files have to go where, and some copy-paste boilerplate, and so on. It's not that hard to set up and maintain, but it is unneeded annoyance.

So what I'm more excited about is making a GUI front-end for it. It'd be Cocoa, so OS X-only. It would still be targetted at people who know HTML at least and PHP at best. It would NOT be a WYSIWYG editor, but an HTML/PHP editor with built-in template/localization engine and instant viewing of results using the Safari engine. It would help manage a local development version of your site as well as a remote deployment version. (Maybe with a simple built-in ftp client for keeping them synched?)

I don't think there's anything quite like that already out there. (Is there?) So I'm curious whether anyone except me would be interested in such a thing.

aleph_null · Jan 20, 2006, 01:30 PM

Some details about the engine itself ...

The templating engine has two main tricks.

First, an element here is a piece of arbitrary php and html. You define it in an xml file like so:

Code:
<elements>
<element name="blah!">
blahblahblah ...  <?php echo "blah!"; ?>
</element>
...
</elements>

You can embed other elements in any element, like so:

Code:
<element name="yadda!">
<p>yadda yadda ... <?element name="blah!" ?></p>
</element>

When rendered, the yadda! element would resolve to

Code:
<p>yadda yadda ... blahblahblah ...  blah!</p>

With a couple of restrictions, you can mix elements, php, and html freely, to arbitrary depths. It's a bit like a context-free language generator.

You can pass "arguments" to an element via an attribute list:

Code:
<element name="login-bar">
Welcome, <?attribute name="username" ?>. You are logged in.
</element>

...

<element name="header">
<div><?element name="header-splash" ?></div>
<div class="login-block"><?element name="login-bar" username="Hardcore Teddy Bear" ?></div>
</element>

Which would render the header as whatever the header-splash element resolved to, followed by "Welcome, Hardcore Teddy Bear. You are logged in." Not that you'd hard-wire a username like that, but you get the idea.

So that's the first trick. I've simplified things a bit here. There are, for example, ways to specify that a version of an individual element should be used for different languages or themes. So effectively there are localization and themeing engines built in.

----------------------

The second trick has to do with where you put these xml files that define your elements. The rendering engine uses the file system hierarchy to help you keep your code where it makes sense to keep it. Typically in a project I wanted to have the most common templates usable globally, but in certain places I wanted to be able to override the common version with something else.

So what happens is that you set up your site like this:

mysite.com/
mysite.com/news
mysite.com/software
mysite.com/software/project1
mysite.com/software/project2

... and so on. Let's say you define all the common elements in the site root. So things like the header, footer, and layout elements are defined in the single file mysite.com/elements.xml. If you do that, then those elements are all automatically available from any page in any file below the site root.

(The system actually allows for more sophisticated ways of doing this but what I describe here will work, too.)

So in mysite.com/elements.xml you have:

Code:
<elements>

<element name="default-layout">
<div><?element name="header" ?></div>
<div><?element name="content" ?></div>
<div><?element name="footer" ?></div>
</element>

<element name="header">
Welcome to mysite.com.
</element>


<element name="footer">
copyright 2006 mysite.com
</element>

<element name="content">
Homepage!<br />
<a href="news">mysite.com/news</a><br />
<a href="software">mysite.com/software</a><br />
</element>

</elements>

Now all you do is put some boilerplate in the header of mysite.com/index.php, and rendering your page comes down to one line in the body:

Code:
<?php renderElement( "name=default-layout" ); ?>

Copy mysite.com/index.php into mysite.com/software/index.php, and the same page will be rendered there. The issue, of course, is that the content is wrong. http://mysite.com/software looks exactly like http://mysite.com.

That's easy to fix. Make the file mysite.com/software/elements.xml:

Code:
<elements>

<element name="content">
The software page!<br />
<a href="project1">Project 1</a><br />
<a href="project2">Project 2</a><br />
</element>

</elements>

And you're done! http://mysite.com/software/ has the header and footer of the homepage, but the content is now what you'd expect.

What happens, of course, is that the system overrides named elements as it traverses the file system hierarchy, from the site root, drilling down into whatever current directory is being rendered.

----------------------

I'm leaving out some detail (handling of stylesheets, for example), but that's how you use this thing in a nutshell.

This isn't available right now, but if there's interest I'll bump making it ready for general consumption in my priority queue of work.

I appreciate your attention, and any feedback you may have. =)