Default

HTML Templating using ClearSilver

Paul Wayper
CLUG Programming SIG

Why HTML Templates?

Why templates?

Separate content from code

Good for big design projects:

Web designers do web design

Coders write code

Why templates?

Separate content from code

Works for small projects too:

Easier to make sure the HTML validates

Why templates?

Separate content from code

Works for small projects too:

Easier to make sure the HTML validates

Nicer layout of HTML

How you want it, not how the module writer wanted it

Why templates?

Separate content from code

Works for small projects too:

Easier to make sure the HTML validates

Nicer layout of HTML

Makes 'skins' really easy

Simply load a different template for the same data

Why templates?

Separate content from code

Works for small projects too:

Easier to make sure the HTML validates

Nicer layout of HTML

Makes 'skins' really easy

Easy to understand how the page comes together

Where's the function that causes DIVs to come out doubled?

Why templates?

Separate content from code

Works for small projects too:

Easier to make sure the HTML validates

Nicer layout of HTML

Makes 'skins' really easy

Easy to understand how the page comes together

Can be used to generate static HTML pages

Mix CSV -> Mix Template -> HTML -> Edit -> put on website

Why ClearSilver?

Why ClearSilver?

Fast

Code originally written for OneList / Yahoo Groups

Used on Google Groups, Discogs, Orkut, trac...

Why ClearSilver?

Fast

Language Neutral

Parser written in C

Bindings for C++, Python, Perl, Ruby, Java

Why ClearSilver?

Fast

Language Neutral

Simple syntax

Why ClearSilver?

Fast

Language Neutral

Simple syntax

Editable in any HTML editor

Why ClearSilver?

Fast

Language Neutral

Simple syntax

Data loaded from file or by code

Template:index.cs

Data:index.hdf

Why ClearSilver?

Fast

Language Neutral

Simple syntax

Data loaded from file or by code

Template:index.cs

Data:index.hdf

Rendered by Apache/other module directly

Show us the template!

ClearSilver Templates

Variables

ClearSilver Templates

Variables

Variables can be used inside HTML tags

ClearSilver Templates

Variables

Include other files

If/Then

Hello, !

ClearSilver Templates

Variables

Include other files

If/Then/Else

Hello, !

ClearSilver Templates

Variables

Include other files

If/Then/Else if set, display, otherwise...

No page name set.

ClearSilver Templates

Variables

Include other files

If/Then/Else

Looping

ClearSilver Templates

Variables

Include other files

If/Then/Else

Looping

Loops are guaranteed to be finite

ClearSilver Templates

Variables

Include other files

If/Then/Else

Looping through data structures

ClearSilver Templates

Variables

Include other files

If/Then/Else

Looping (through data structures)

Instances of data structures

ClearSilver Templates

Variables

Include other files

If/Then/Else

Looping (through data structures)

Instances of data structures

Macros

Show us the data!

ClearSilver Data Objects

HDF Hierarchical Data Format

ClearSilver Data Objects

HDF Hierarchical Data Format

Key = Value pairs

page.name = Welcome to linux.conf.au!

ClearSilver Data Objects

HDF Hierarchical Data Format

Key = Value pairs

Where's the 'hierarchical' bit?

ClearSilver Data Objects

HDF Hierarchical Data Format

Key = Value pairs

Where's the 'hierarchical' bit?

page.name = Welcome to linux.conf.au!
page.name.fgcol = darkblue
page.name.bgcol = white

ClearSilver Data Objects

HDF Hierarchical Data Format

Key = Value pairs

Where's the 'hierarchical' bit?

Page {
name = Welcome to linux.conf.au!
name.fgcol = darkblue
name.bgcol = white
}

ClearSilver Data Objects

HDF Hierarchical Data Format

Key = Value pairs

Dots in names make it hierarchical

Data sets:

Menu {
0 {
Name = About
}
1 {
Name = Products
}
}

ClearSilver Data Objects

HDF Hierarchical Data Format

Key = Value pairs

Dots in names make it hierarchical

Data sets:

Menu {
0 {
Name = About
}
1 {
Name = Products
}
}

ClearSilver Data Objects

HDF Hierarchical Data Format

Data in text files:

Menu {
0 {
Name = About
}
1 {
Name = Products
}
}

ClearSilver Data Objects

HDF Hierarchical Data Format

Data from script:

my $hdf = ClearSilver::HDF->new;
$hdf->setValue(Menu.0.Name,About);
$hdf->setValue(Menu.1.Name,Products);

ClearSilver Data Objects

HDF Hierarchical Data Format

Data from script from file:

my $hdf = ClearSilver::HDF->new;
$hdf->readFile(defaults.hdf);

Put it all together!

Complete example

my $hdf = ClearSilver::HDF->new;
$hdf->readFile(defaults.hdf);

my $cs = ClearSilver::CS->new($hdf);
$cs->parseFile(default.cs);
print $cs->Render();

It can't be that simple!?

Things I've learnt - HDF

Absence of a data value = false

Things I've learnt - HDF

Absence of a data value = false

CD listing:

...


There are no CDs.

Things I've learnt - HDF

Absence of a data value = false

You can test on name

Things I've learnt - HDF

Absence of a data value = false

You can test on name

evenrow>

Things I've learnt - CS

Row fetch -> put into HDF

key/value pairs -> key/value pairs

Things I've learnt - CS

Row fetch -> put into HDF

get_data($sql)

Executes query

Iterates through rows

Row fetch -> put into HDF

Things I've learnt - CS

get_data($sql, @params)

Prepares query

Executes query with params

Iterates through rows

Row fetch -> put into HDF

Things I've learnt - CS

get_data($sql, $xfrm_href, @params)

Prepares query

Executes query with params

Iterates through rows

Row fetch -> put into HDF

Iterates through keys of xfrm_href

Sets row key as return of xfrm function

Things I've learnt - CS

get_data($sql, $xfrm_href, @params)

Prepares query

Executes query with params

Set blank $state_href;

Iterates through rows

Row fetch -> put into HDF

Iterates through keys of xfrm_href

Sets row key as return of xfrm function

gets $row_ref, $rowcount, $state_href

Things I've learnt - CS

get_data($sql, $xfrm_href, @params)

set_navigation($table, $sort_field, $curr_id)

Retrieves first, previous, next and last rows
from table based on current position

Things I've learnt - CS

get_data($sql, $xfrm_href, @params)

set_navigation($table, $sort_field, $curr_id)

Retrieves first, previous, next and last rows
from table based on current position

Independent of table primary key

Things I've learnt - CS

get_data($sql, $xfrm_href, @params)

set_navigation($table, $sort_field, $curr_id)

Retrieves first, previous, next and last rows
from table based on current position

Independent of table primary key

select min($sort_field), 'frst' from $table
union select max($sort_field), 'prev' from $table where $sort_field < ?
union select min($sort_field), 'next' from $table where $sort_field > ?
union select max($sort_field), 'last' from $table

Things I've learnt - CS

get_data($sql, $xfrm_href, @params)

set_navigation($table, $sort_field, $curr_id)

Retrieves first, previous, next and last rows
from table based on current position

Independent of table primary key

select min($sort_field), 'frst' from $table
union select max($sort_field), 'prev' from $table where $sort_field < ?
union select min($sort_field), 'next' from $table where $sort_field > ?
union select max($sort_field), 'last' from $table

Must handle edge cases in CS and HDF

Where do we get it?

http://www.clearsilver.net

Click to edit the title

Click to edit the outline text format

Second Outline Level

Third Outline Level

Fourth Outline Level

Fifth Outline Level

Sixth Outline Level

Seventh Outline Level

Eighth Outline Level

Ninth Outline Level

CLUG Programming SIG Feb 2008

HTML Templating using ClearSilver