html templates using clear silver
TRANSCRIPT
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