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

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

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

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

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?

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

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...

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

Fast

Language Neutral

Parser written in C

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

Why ClearSilver? Fast Language Neutral Simple syntax <?cs var:doc.title ?>

Fast

Language Neutral

Simple syntax

Why ClearSilver? Fast Language Neutral Simple syntax Editable in any HTML editor <?cs var:doc.title ?>

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

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

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 <?cs var:doc.title ?>

Variables

<?cs var:doc.title ?>

ClearSilver Templates Variables Variables can be used inside HTML tags <a href=”<?cs var:doc.url ?>”>

Variables

Variables can be used inside HTML tags

<a href=”<?cs var:doc.url ?>”>

ClearSilver Templates Variables Include other files <?cs include:”footer.cs” ?>

Variables

Include other files

<?cs include:”footer.cs” ?>

ClearSilver Templates Variables Include other files If/Then <div class=”userlogin”><p> <?cs if:user.logged_in ?> Hello, <?cs var:user.name ?>! </cs /if ?> </div>

Variables

Include other files

If/Then

<div class=”userlogin”><p>

<?cs if:user.logged_in ?>

Hello, <?cs var:user.name ?>!

</cs /if ?>

</div>

ClearSilver Templates Variables Include other files If/Then/Else <div class=”userlogin”><p> <?cs if:user.logged_in ?> Hello, <?cs var:user.name ?>! </cs else ?> <!-- display log in form --> </cs /if ?> </div>

Variables

Include other files

If/Then/Else

<div class=”userlogin”><p>

<?cs if:user.logged_in ?>

Hello, <?cs var:user.name ?>!

</cs else ?>

<!-- display log in form -->

</cs /if ?>

</div>

ClearSilver Templates Variables Include other files If/Then/Else – if set, display, otherwise... <?cs alt:page.name ?>No page name set.<?cs /alt ?>

Variables

Include other files

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

<?cs alt:page.name ?>No page name set.<?cs /alt ?>

ClearSilver Templates Variables Include other files If/Then/Else Looping <?cs loop:i = 1, 10, 2 ?><?cs var:i ?><?cs /loop ?>

Variables

Include other files

If/Then/Else

Looping

<?cs loop:i = 1, 10, 2 ?><?cs var:i ?><?cs /loop ?>

ClearSilver Templates Variables Include other files If/Then/Else Looping <?cs loop:i = 1, 10, “-2” ?><?cs var:i ?><?cs /loop ?> Loops are guaranteed to be finite

Variables

Include other files

If/Then/Else

Looping

<?cs loop:i = 1, 10, “-2” ?><?cs var:i ?><?cs /loop ?>

Loops are guaranteed to be finite

ClearSilver Templates Variables Include other files If/Then/Else Looping through data structures <?cs each:cd = cds ?><?cs var:cd.name ?><?cs /each ?>

Variables

Include other files

If/Then/Else

Looping through data structures

<?cs each:cd = cds ?><?cs var:cd.name ?><?cs /each ?>

ClearSilver Templates Variables Include other files If/Then/Else Looping (through data structures) Instances of data structures <?cs with:cd = cds.0 ?><?cs var:cd.name ?><?cs /with ?>

Variables

Include other files

If/Then/Else

Looping (through data structures)

Instances of data structures

<?cs with:cd = cds.0 ?><?cs var:cd.name ?><?cs /with ?>

ClearSilver Templates Variables Include other files If/Then/Else Looping (through data structures) Instances of data structures Macros <?cs def:show_cd(cd) ?><?cs var:cd.name ?><?cs /def ?> <?cs each:cd in cds ?><?cs call:show_cd(cd) ?><?cs /each ?>

Variables

Include other files

If/Then/Else

Looping (through data structures)

Instances of data structures

Macros

<?cs def:show_cd(cd) ?><?cs var:cd.name ?><?cs /def ?>

<?cs each:cd in cds ?><?cs call:show_cd(cd) ?><?cs /each ?>

Show us the data!

ClearSilver Data Objects HDF – Hierarchical Data Format

HDF – Hierarchical Data Format

ClearSilver Data Objects HDF – Hierarchical Data Format Key = Value pairs page.name = Welcome to linux.conf.au!

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?

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

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 }

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 } }

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 } } <table><tr> <?cs each:item = Menu ?> <td> <?cs var:item.Name ?> </td> <?cs /each ?> </tr></table>

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 } }

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);

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”);

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();

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

Absence of a data value = false

Things I've learnt - HDF Absence of a data value = false <?cs if:cds.0.title ?> <h1>CD listing:</h1> <?cs each:cd = cds ?> ... <?cs /each ?> <?cs else ?> <p class=”error”>There are no CDs.</p> <?cs /if ?>

Absence of a data value = false

<?cs if:cds.0.title ?> <h1>CD listing:</h1> <?cs each:cd = cds ?> ... <?cs /each ?> <?cs else ?> <p class=”error”>There are no CDs.</p> <?cs /if ?>

Things I've learnt - HDF Absence of a data value = false You can test on name

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 <?cs each:cd = cds ?> <p class=”<?cs if:name(cd) % 2 ?>oddrow<?cs else ?>evenrow<?cs /if ?>”> <?cs var:cd.name ?> </p> <?cs /each ?>

Absence of a data value = false

You can test on name

<?cs each:cd = cds ?> <p class=”<?cs if:name(cd) % 2 ?>oddrow<?cs else ?>evenrow<?cs /if ?>”> <?cs var:cd.name ?> </p> <?cs /each ?>

Things I've learnt - CS Row fetch -> put into HDF key/value pairs -> key/value pairs

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

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

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

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

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

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

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

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

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