This page is to introduce Ante. The name Ante comes from words such as Anterior, and Antechamber. It's a prefix meaning before, or in front. Ante is all about building a good front end to your web application.
Ante is another template engine.
Use Ante to seperate concerns. Ante is not a programming language like many other template engines become. It is specific to XHTML, and allows the template designer to design the pages with sample data without worrying about $longVariableNameFittingWhereOneCharacterWillBe.
Ante does not allow you to embed any form of programming logic into the template. The template instead creates a sample of what is to be produced and that gets used to decide where to put the variable data.
Ante encourages using a graphics designer or html editor to create templates since the template will look exactly like the output if the sample data is the data that will be output. In fact, the template designer can take the output and use it as the basis for the template, and could make changes without worrying about losing the information about where the variable data will go.
Ante, when given a template, converts the template to PHP code which is then compiled by the PHP engine ; therefore, parsing the template only happens once.
A list of other solutions:
As the name says, Ante is about the front of your web application. (Think of the words anteroom, antechamber or anterior all meaning out front.) An Ante template is a complete mock up (and sample page) of your web application. A change made to the sample page means an immediate change to the output of your web application. There is no cycle of changing the sample page to satisfy a customer's request and then having to go back to the template and make changes to it to try to reproduce that change. The sample page can be loaded directly into the template engine and the precompiled code will be changed to match.
Also, all of your output, by way of using Ante, is automatically
semantically marked. In Hello
<span class="aw_username">John</span> the name
John is marked as the username. Using appropriate names for the
variables you pass to the template (and in the template) allow you to
semantically mark all the variable text easily.
HTTP is the method for transfering data from a server to the web browser such as Internet Explorer, Safari, Firefox, or Opera (or others).
Each time a user clicks on a link, the browser uses HTTP to request another page from the web server. When it requests a Ante templated page, the PHP associated with the page is executed, and then the templated page has its variable data filled in and returned to the browser.
In the beginning of the web, web pages were static files that someone would hand edit and then the browser could retrieve and display
Then people wanted to be able to produce dynamic pages.
title = "This is the page title";
body = "This is the page body";
out.println("<html>\n");
out.println("<head>\n");
out.println("<title>");
out.println(title);
out.println("</title>\n");
out.println("</head>\n");
out.println("<body>");
out.println(body);
out.println("</body>\n");
out.println("</html>\n");
Then someone realised that the html and the variables could be
inverted so that you had this.
where title and body are set somewhere else. A template designer could
move the bits of <% ... %> around inside her HTML editor quite
easily.
<html>
<head>
<title><% out.println(title) %></title>
</head>
<body><% out.println(body) %></body>
</html>
And this is more or less how all template engines since have worked.
Stringtemplate, Velocity and others use $title instead of
<% out.println(title) %> but that is not a mockup.
An even more programmer oriented system is Tapestry. The Tapestry engine creates all kinds of new tags that are replaced by actual HTML, so that when you're creating the template you have to imagine what the output will be. You certainly can't use a standard HTML editor.
JSP tags are similar to that.
And then there's Wicket. It seems very programmer oriented, probably since it's actually a web application framework. It would make sense for creating a dashboard or similar page: lots of little components. It's templates are still not going to be designed by a web designer however. It does allow for simple mockups using the wicket:id tag which won't validate, but in more complicated examples there are special tags galore.
Ante, however, uses a mockup to show exactly what will be shown in
the template
where title and body are set in the DataSource. If you're a web
designer you don't need to worry about that. If you're a programmer,
we'll get to DataSources later (or you can follow the link to see
one way to set the datasource data).
<html>
<head>
<title class="aw_title">A sample title</title>
</head>
<body class="aw_body">A sample body</body>
</html>
Programmer Cookbook Link
What's interesting here is that the Ante template is what the Ante
template engine will also return, if title is "A sample title" and body
is "A sample body". So the template designer is working with how the
page is actually going to look, instead of having to remember that
$title
(or worse <% out.println(title) %>)
will be replaced with the real text.
Conditionals are ways of saying that you do or don't want a bit of text to show up depending on a variable. For instance, if the user may be viewing a page that will be different whether they are logged in or not.
Consider:
<html>
<head>
<title>Our front page</title>
</head>
<body>
<div class="aw_notloggedin">
<a href="login.php">Please login</a>
</div>
<div class="aw_body">
This will be replaced by the body text.
</div>
</body>
</html>
Programmer Cookbook Link
The div with the class aw_notloggedin will only show up if the variable notloggedin is set to something useful. If it's not set (the user is not not logged in (which means the user is logged in)) that div will simply disappear. Ante knows that this is a conditional because there are html elements inside the div, not just text as is seen on the div with class aw_body.
Conditionals are great, but they do get a little hairy when dealing, for instance, with gender. We could have two divs, one with a class of aw_male, aw_female, but then only one would show up and the template designer would not be able to tell that the body should have both. For such cases there are the ac_ classes.
Consider
<html>
<head>
<title>Our front page</title>
<style type="text/css">
.ac_gender_male { color: blue }
.ac_gender_female { color: pink }
</style>
</head>
<body>
Hello
<span class="ac_gender_male aw_name">
John
</span>
</body>
</html>
Programmer Cookbook Link
The first thing to notice in this code is that there are two classes on the same span. This is allowed according the the HTML spec. The browser will style according to the classes it knows about and ignore the rest. (Actually, this is why Ante uses the class variable for marking variable data.)
One of the classes is aw_name, which you can guess tells the engine to replace the contents of the span with name's contents.
The other class is another special class to the template engine. The name before the second underscore(_) is the name to look for in the datasource. The text after the second underscore is replaced with its value. This could be used to set a special class on the span that will change depending on the value of the value of the name in the datasource. In this instance, if gender is male, John's name will be rendered with blue, if gender is female it will be rendered with pink. We didn't specify which colour to render it if gender is something else.
One thing that programmers often worry about are namespaces. The
word 'name' can refer to the name of an employee, or the name of his
boss. For instance, consider a bit of code like this:
<html>
<head>
<title>Our Employee Page</title>
</head>
<body>
Hello
<span class="aw_name">
John
</span>
<span class="aw_boss">your boss's name is
<span class="aw_name">Mark</span>
</span>
</body>
</html>
Programmer Cookbook Link
Obviously, the Boss has a name and, in most cases, it won't be the same as the employee. We've wrapped the part "your boss's name is Mark" in a conditional so if John is unemployed or self-employed, he won't be told he has a boss, but what about the boss's name? Well, if the programmer has set things up correctly in this case, "boss" is treated as a name space, and any references inside of it are part of the boss so in the last aw_name case, name will refer to the boss's name instead of the employee's name.
Of course, if you're reading it and you're not
completely sure what you'll get, you could have done this:
<span class="aw_boss-name">Mark</span>
This reads as the name of the boss. You can also use this without
the conditional, but then the English text would not make sense if
there were no boss.
Okay, so we can show someone's boss, but what about all the employees
under a particular manager? We use an implicit loop.
<html>
<head>
<title>Our Employee Page</title>
</head>
<body>
Hello <span class="aw_name">Mark</span>
You manage <ul>
<li class="aw_employee-1">
<span class="aw_name">John</span>
</li>
</ul>
</body>
</html>
Programmer Cookbook Link
The thing to notice is aw_employee-1. The hyphen (-) we met in
the last section 'namespaces'. By ending an aw_ class with a number
after the last hypen, we tell the Ante template engine that there will
be a number of items here. The template engine will loop over the
contents of the list of items and treat the contents as being in the
namespace of each item. The output might be something like this:
<html>
<head>
<title>Our Employee Page</title>
</head>
<body>
Hello <span class="aw_name">Dan</span>
You manage <ul>
<li class="aw_employee-1">
<span class="aw_name">David</span>
</li>
<li class="aw_employee-2">
<span class="aw_name">Albert</span>
</li>
<li class="aw_employee-3">
<span class="aw_name">Joanne</span>
</li>
</ul>
</body>
</html>
The Ante template engine will increment the digits so that each item in the list will have its own number.
The items in the list don't have to be namespaces themselves. They
could be simple objects used like this:
<html>
<head>
<title>My fruit page</title>
</head>
<body>
Hello, I like:
<ul>
<li class="aw_fruit-1">
Apples
</li>
<li class="aw_fruit-2">
Bananas
</li>
</ul>
</body>
</html>
Programmer Cookbook Link
In all cases, the text in the datasource is escaped before being
inserted into the template. In some cases, the datasource may provide
some text that should not be escaped (for instance a blog posting), or
you may have a kind of skin that wraps around the outside (providing
menus or other things that are the same throughout the site) and then
have simpler templates for just the part of the page that's really
different. Obviously, you don't want that part of the page escaped.
For these cases, Ante allows you to include templates inside each
other.
<div class="at_inctemplate">
this part will be ignored provided it is well formed; IE,
all open tags (<span>) are matched (</span>)
</div>
Often you'll want to pass in a namespace to the included template
(for instance if you're looping over some blog postings).
In which case you can do something like this:
<html>
<head>
<title>My blog</title>
</head>
<body>
<div class="aw_comments-1">
<h3 class="aw_title">title</h3>
<div>Posted by <span class="aw_username" /> at <span class="aw_timestamp">2007/03/03</span></div>
<p class="at_ashtml aw_text">comment</p>
</div>
</body>
</html>
Programmer Cookbook Link
So far we've only been dealing with spans and
divs. That's okay as far as it goes, but what about
dealing with prefilling the forms?
Ante knows about input. When it finds this:
<input class="aw_input" /> and there's an object in the
datasource called "input" it will set the value
attribute and the name attribute to useful values. The
template writer does not have to worry about those fields at all as Ante
will overwrite them. The programmer can control them from the
datasource since they affect the programmer's work much more.
If the type attribute is not set, Ante will set it to
"text", otherwise it will leave it alone. It will also do the right
thing for checkboxes and radio buttons.
For textarea, Ante will also fill in the name attribute.
and escape the contents appropriately.
For select, Ante allows for some very interesting properties.
First consider
<select class="aw_where">
<option class="aw_where-la">Los Angeles</option>
<option class="aw_where-sf">San Francisco</option>
<option class="aw_where-ny">New York</option>
</select>
options and which option to set
as selected.
Now consider
<select class="aw_when">
<option class="aw_when-1">AM</option>
<option class="aw_when-2">Noon</option>
<option class="aw_when-3">Afternoon</option>
</select>
option list will come from the
datasource.
An Ante template could be sent to the web browser as is. Unfortunately, that would not be very interesting as it would not change any. First it has to be processed by the template engine. When a template is put into place, the Ante Template Engine (for PHP) translates the templates into PHP files which are then compiled by the PHP engine and executed. As long as the template file is not changed the template engine leaves the PHP file alone and the PHP engine continues to use the compiled version of it. When the template file is changed, the template engine creates a new PHP file from it, and the PHP engine will recompile it into object code for it to run.
Ante template files can be created with any web page editor that allows you to set classes on the HTML elements, and if you can't do that, you should invest in a modern web page editor. The same web page editor can later be used to easily modify the layout, all that the template writer needs to worry about is making sure the classes stay on the HTML elements. This is a great advantage over most template engines.
Next part is the Programmer Guide.