Cascading html template sheet (CHTS) description and specifications early draft
For a description of the purpose and reasons for this to be created check Templates and presentation logic
The language will be similar to css (will have css selectors to select the corresponding html elements), it will allow for full CSS 3 selectors to make it as flexible as the latest version of CSS.
I chose CSS as a base because it does something similar for styles and is a proven working solution. It's also easier for people with prior CSS knowledge to learn to use it faster.
Why not XSLT ? XSLT is more than what we needed, is a full featured language. We don't want to make calculations or some strange things with the xml (html).
we just want to alter the HTML to put some data into it (template). XSLT is overkill for this, because is designed to do much more.
The list of modifier will grow as new needs arise, it will also be easy to add custom modifiers
And because everything can be explained easier with examples here are some:
import base.chts;//you can have a file that contains all common template rules
#name
{
value:$name;
}
/* or shortcut */
#name:$name;
.productName
{
value:upperCase($productName);
}
/* or shortcut */
.productName:upperCase($productName);
#welcome
{
visible:!empty($name);//if $name is empty then #welcome will not be shown
}
#pleaseLogin
{
visible:empty($name);//if $name is empty then show the pleaseLogin element
}
.product
{
//loop special construct
loop:$products(.title:$title,.price:$price)
}
/* or shortcut */
.product:$products{.title:$title,.price:$price}
/* or shortcut */
.product:loop:$products;//would be nice, but this can't be implemented because there is no way of knowing the keys of the $products map or hash
//cascading
.product .title
{
value:upperCase();//if no parameter is given to upperCase then use the current parameter
}
.price
{
//if special construct
if:($price > 300 )//conditions, it will allow logic like <, >, >=, <=, ||, &&
{
//you can any elements excepts if's, nesting is not allowed because you can put more conditions, more if's in the same statement or use cascade
addClass:"redPrice";
}
else://else cannot be declared standalone, it must follow an if declaration.
{
addClass:"greenPrice";
}
//there can be any number of if statements, unlike "value" that gets overwritten
if:($price > 500)
{
value:"This is an expensive item";
}
}
#sidebar
{
include:file("/includes/sidebar.html");//file function is need so that include can be extended in the future with more wrappers (url for example)
}
/* or shortcut */
#sidebar:include:file("/includes/sidebar.html");
There might still be some undiscovered errors in the design that can be more easily detected latter by using it, These will probably go away when I will finish the the first implementation.
The code will be implemented as a html preprocessor that takes the rules and modifies it according to the desired language output.
For the first release a binary will be provided, but in the future I have plans to write interfaces to hook up the code as php and python extensions.
Anyone will be able to write extensions for other languages.
Is very easy to extend languages like php, python etc because all the code is written in portable C++, this was also a very good reason besides excellent performance and good libraries (Boost Spirit) to choose C++ for the job.
A new language back-end will be easily added by providing a new configuration for the language.
Initial support will be provided for some of the popular languages used for web development, php, ruby, python and java, anyone will be able to add new languages later.
In your favorite language you will be able to send data just like you were using a normal template engine.
If we were using php the php code will be look like this
$view -> value = 'John Doe';
$view -> productName = 'Dell PC';
$view -> products = array(
array('title' => 'Wireless mouse', 'price' => '20$'),
array('title' => 'Wireless keyboard', 'price' => '50$'),
array('title' => 'Wireless mouse', 'price' => '100$'),
);
$view -> render('index.html');
I finished implementing the parser for the language and also wrote a html parser that parses any html no matter how broken and kind of a dom (document object model) to hold the html representation in memory to allow complex transformations.
I only have to write the CSS selectors engine, html transformation code and language back-end, there is still some hard work ahead.
I will post the code and binary when I finish the first alpha version.
All code will be licensed under LGPL
I hope other people that find this useful can contribute and help make web development easier and more fun.
Please post your suggestions, critics, anything to make this better.
Share this with the world
Related
Comments
Sounds like your trying to do on the server side what it'd be trivial to do using jQuery on the client side.
Posted on 2009-01-11 21:43:46It supports css selection, DOM transforms, etc... If you gave it a JSON object for rendering in the view... it'd transform the page any way you wrote it to.
You might want to look into server side JavaScript. If for no other reason than it seems to line up pretty well with what you're thinking.
My 2 cents
You might want to take a look at TAL (or PHPTAL for the php implementation). From what I gather it comes pretty close to solving most (if not all) of the problems and demands you wrote about in both your posts on CHTS. If it doesn't solve your problem, I'm pretty sure it'll be a nice point of inspiration.
Posted on 2009-02-17 10:15:28(Although I might be missing some of your points... I've tried to read both your post attentionately, but I feel like I might be too tired right now to really absorb it properly...)
I dislike your idea:
Posted on 2009-05-22 13:49:37is is not css, people must learn new syntax:
"if:($price > 300 )//conditions"
and if to parse html, then why not xslt? it's at least standartised. And time does not matter here if to use caching.
Make yourself heard