HTML Templates Using Clear Silver

4,702 views

Published on

An introduction to ClearSilver, a fast and functional HTML templating language for C, Perl, Python and other languages. This talk demonstrates the basics of how to write ClearSilver templates, how to load data into the HDF object in your code, and how to combine the two to generate a web page.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
4,702
On SlideShare
0
From Embeds
0
Number of Embeds
33
Actions
Shares
0
Downloads
78
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

HTML Templates Using Clear Silver

  1. 1. HTML Templating using ClearSilver Paul Wayper CLUG Programming SIG
  2. 2. Why HTML Templates?
  3. 3. Why templates? <ul><li>Separate content from code </li></ul><ul><ul><li>Good for big design projects: </li></ul></ul><ul><ul><ul><li>Web designers do web design </li></ul></ul></ul><ul><ul><ul><li>Coders write code </li></ul></ul></ul>
  4. 4. Why templates? <ul><li>Separate content from code </li></ul><ul><ul><li>Works for small projects too: </li></ul></ul><ul><ul><ul><li>Easier to make sure the HTML validates </li></ul></ul></ul>
  5. 5. Why templates? <ul><li>Separate content from code </li></ul><ul><ul><li>Works for small projects too: </li></ul></ul><ul><ul><ul><li>Easier to make sure the HTML validates </li></ul></ul></ul><ul><ul><ul><li>Nicer layout of HTML </li></ul></ul></ul><ul><ul><ul><ul><li>How you want it, not how the module writer wanted it </li></ul></ul></ul></ul>
  6. 6. Why templates? <ul><li>Separate content from code </li></ul><ul><ul><li>Works for small projects too: </li></ul></ul><ul><ul><ul><li>Easier to make sure the HTML validates </li></ul></ul></ul><ul><ul><ul><li>Nicer layout of HTML </li></ul></ul></ul><ul><ul><ul><li>Makes 'skins' really easy </li></ul></ul></ul><ul><ul><ul><ul><li>Simply load a different template for the same data </li></ul></ul></ul></ul>
  7. 7. Why templates? <ul><li>Separate content from code </li></ul><ul><ul><li>Works for small projects too: </li></ul></ul><ul><ul><ul><li>Easier to make sure the HTML validates </li></ul></ul></ul><ul><ul><ul><li>Nicer layout of HTML </li></ul></ul></ul><ul><ul><ul><li>Makes 'skins' really easy </li></ul></ul></ul><ul><ul><ul><li>Easy to understand how the page comes together </li></ul></ul></ul><ul><ul><ul><ul><li>Where's the function that causes DIVs to come out doubled? </li></ul></ul></ul></ul>
  8. 8. Why templates? <ul><li>Separate content from code </li></ul><ul><ul><li>Works for small projects too: </li></ul></ul><ul><ul><ul><li>Easier to make sure the HTML validates </li></ul></ul></ul><ul><ul><ul><li>Nicer layout of HTML </li></ul></ul></ul><ul><ul><ul><li>Makes 'skins' really easy </li></ul></ul></ul><ul><ul><ul><li>Easy to understand how the page comes together </li></ul></ul></ul><ul><ul><ul><li>Can be used to generate static HTML pages </li></ul></ul></ul><ul><ul><ul><ul><li>Mix CSV -> Mix Template -> HTML -> Edit -> put on website </li></ul></ul></ul></ul>
  9. 9. Why ClearSilver ?
  10. 10. Why ClearSilver? <ul><li>Fast </li></ul><ul><ul><li>Code originally written for OneList / Yahoo Groups </li></ul></ul><ul><ul><li>Used on Google Groups, Discogs, Orkut, trac... </li></ul></ul>
  11. 11. Why ClearSilver? <ul><li>Fast </li></ul><ul><li>Language Neutral </li></ul><ul><ul><li>Parser written in C </li></ul></ul><ul><ul><li>Bindings for C++, Python, Perl, Ruby, Java </li></ul></ul>
  12. 12. Why ClearSilver? <ul><li>Fast </li></ul><ul><li>Language Neutral </li></ul><ul><li>Simple syntax </li></ul><?cs var:doc.title ?>
  13. 13. Why ClearSilver? <ul><li>Fast </li></ul><ul><li>Language Neutral </li></ul><ul><li>Simple syntax </li></ul><ul><ul><li>Editable in any HTML editor </li></ul></ul><?cs var:doc.title ?>
  14. 14. Why ClearSilver? <ul><li>Fast </li></ul><ul><li>Language Neutral </li></ul><ul><li>Simple syntax </li></ul><ul><li>Data loaded from file or by code </li></ul><ul><ul><li>Template: index.cs </li></ul></ul><ul><ul><li>Data: index.hdf </li></ul></ul>
  15. 15. Why ClearSilver? <ul><li>Fast </li></ul><ul><li>Language Neutral </li></ul><ul><li>Simple syntax </li></ul><ul><li>Data loaded from file or by code </li></ul><ul><ul><li>Template: index.cs </li></ul></ul><ul><ul><li>Data: index.hdf </li></ul></ul><ul><ul><li>Rendered by Apache/other module directly </li></ul></ul>
  16. 16. Show us the template!
  17. 17. ClearSilver Templates <ul><li>Variables </li></ul><ul><ul><li><?cs var:doc.title ?> </li></ul></ul>
  18. 18. ClearSilver Templates <ul><li>Variables </li></ul><ul><ul><li>Variables can be used inside HTML tags </li></ul></ul><ul><ul><li><a href=”<?cs var:doc.url ?>”> </li></ul></ul>
  19. 19. ClearSilver Templates <ul><li>Variables </li></ul><ul><li>Include other files </li></ul><ul><ul><li><?cs include:”footer.cs” ?> </li></ul></ul>
  20. 20. ClearSilver Templates <ul><li>Variables </li></ul><ul><li>Include other files </li></ul><ul><li>If/Then </li></ul><ul><ul><li><div class=”userlogin”><p> </li></ul></ul><ul><ul><li><?cs if:user.logged_in ?> </li></ul></ul><ul><ul><ul><li>Hello, <?cs var:user.name ?>! </li></ul></ul></ul><ul><ul><li></cs /if ?> </li></ul></ul><ul><ul><li></div> </li></ul></ul>
  21. 21. ClearSilver Templates <ul><li>Variables </li></ul><ul><li>Include other files </li></ul><ul><li>If/Then/Else </li></ul><ul><ul><li><div class=”userlogin”><p> </li></ul></ul><ul><ul><li><?cs if:user.logged_in ?> </li></ul></ul><ul><ul><ul><li>Hello, <?cs var:user.name ?>! </li></ul></ul></ul><ul><ul><li></cs else ?> </li></ul></ul><ul><ul><ul><li><!-- display log in form --> </li></ul></ul></ul><ul><ul><li></cs /if ?> </li></ul></ul><ul><ul><li></div> </li></ul></ul>
  22. 22. ClearSilver Templates <ul><li>Variables </li></ul><ul><li>Include other files </li></ul><ul><li>If/Then/Else – if set, display, otherwise... </li></ul><ul><ul><li><?cs alt:page.name ?>No page name set.<?cs /alt ?> </li></ul></ul>
  23. 23. ClearSilver Templates <ul><li>Variables </li></ul><ul><li>Include other files </li></ul><ul><li>If/Then/Else </li></ul><ul><li>Looping </li></ul><ul><ul><li><?cs loop:i = 1, 10, 2 ?><?cs var:i ?><?cs /loop ?> </li></ul></ul>
  24. 24. ClearSilver Templates <ul><li>Variables </li></ul><ul><li>Include other files </li></ul><ul><li>If/Then/Else </li></ul><ul><li>Looping </li></ul><ul><ul><li><?cs loop:i = 1, 10, “-2” ?><?cs var:i ?><?cs /loop ?> </li></ul></ul><ul><ul><li>Loops are guaranteed to be finite </li></ul></ul>
  25. 25. ClearSilver Templates <ul><li>Variables </li></ul><ul><li>Include other files </li></ul><ul><li>If/Then/Else </li></ul><ul><li>Looping through data structures </li></ul><ul><ul><li><?cs each:cd = cds ?><?cs var:cd.name ?><?cs /each ?> </li></ul></ul>
  26. 26. ClearSilver Templates <ul><li>Variables </li></ul><ul><li>Include other files </li></ul><ul><li>If/Then/Else </li></ul><ul><li>Looping (through data structures) </li></ul><ul><li>Instances of data structures </li></ul><ul><ul><li><?cs with:cd = cds.0 ?><?cs var:cd.name ?><?cs /with ?> </li></ul></ul>
  27. 27. ClearSilver Templates <ul><li>Variables </li></ul><ul><li>Include other files </li></ul><ul><li>If/Then/Else </li></ul><ul><li>Looping (through data structures) </li></ul><ul><li>Instances of data structures </li></ul><ul><li>Macros </li></ul><ul><ul><li><?cs def:show_cd(cd) ?><?cs var:cd.name ?><?cs /def ?> </li></ul></ul><ul><ul><li><?cs each:cd in cds ?><?cs call:show_cd(cd) ?><?cs /each ?> </li></ul></ul>
  28. 28. Show us the data!
  29. 29. ClearSilver Data Objects <ul><li>HDF – Hierarchical Data Format </li></ul>
  30. 30. ClearSilver Data Objects <ul><li>HDF – Hierarchical Data Format </li></ul><ul><ul><li>Key = Value pairs </li></ul></ul><ul><ul><ul><li>page.name = Welcome to linux.conf.au! </li></ul></ul></ul>
  31. 31. ClearSilver Data Objects <ul><li>HDF – Hierarchical Data Format </li></ul><ul><ul><li>Key = Value pairs </li></ul></ul><ul><ul><li>Where's the 'hierarchical' bit? </li></ul></ul>
  32. 32. ClearSilver Data Objects <ul><li>HDF – Hierarchical Data Format </li></ul><ul><ul><li>Key = Value pairs </li></ul></ul><ul><ul><li>Where's the 'hierarchical' bit? </li></ul></ul><ul><ul><ul><li>page.name = Welcome to linux.conf.au! page.name.fgcol = darkblue page.name.bgcol = white </li></ul></ul></ul>
  33. 33. ClearSilver Data Objects <ul><li>HDF – Hierarchical Data Format </li></ul><ul><ul><li>Key = Value pairs </li></ul></ul><ul><ul><li>Where's the 'hierarchical' bit? </li></ul></ul><ul><ul><ul><li>Page { name = Welcome to linux.conf.au! name.fgcol = darkblue name.bgcol = white } </li></ul></ul></ul>
  34. 34. ClearSilver Data Objects <ul><li>HDF – Hierarchical Data Format </li></ul><ul><ul><li>Key = Value pairs </li></ul></ul><ul><ul><li>Dots in names make it hierarchical </li></ul></ul><ul><ul><li>Data sets: </li></ul></ul><ul><ul><ul><li>Menu { 0 { Name = About } 1 { Name = Products } } </li></ul></ul></ul>
  35. 35. ClearSilver Data Objects <ul><li>HDF – Hierarchical Data Format </li></ul><ul><ul><li>Key = Value pairs </li></ul></ul><ul><ul><li>Dots in names make it hierarchical </li></ul></ul><ul><ul><li>Data sets: </li></ul></ul><ul><ul><ul><li>Menu { 0 { Name = About } 1 { Name = Products } } </li></ul></ul></ul><table><tr> <?cs each:item = Menu ?> <td> <?cs var:item.Name ?> </td> <?cs /each ?> </tr></table>
  36. 36. ClearSilver Data Objects <ul><li>HDF – Hierarchical Data Format </li></ul><ul><ul><li>Data in text files: </li></ul></ul><ul><ul><ul><li>Menu { 0 { Name = About } 1 { Name = Products } } </li></ul></ul></ul>
  37. 37. ClearSilver Data Objects <ul><li>HDF – Hierarchical Data Format </li></ul><ul><ul><li>Data from script: </li></ul></ul><ul><ul><ul><li>my $hdf = ClearSilver::HDF->new; $hdf ->setValue(“Menu.0.Name”,”About”); $hdf ->setValue(“Menu.1.Name”,”Products); </li></ul></ul></ul>
  38. 38. ClearSilver Data Objects <ul><li>HDF – Hierarchical Data Format </li></ul><ul><ul><li>Data from script from file: </li></ul></ul><ul><ul><ul><li>my $hdf = ClearSilver::HDF->new; $hdf ->readFile(“defaults.hdf”); </li></ul></ul></ul>
  39. 39. Put it all together!
  40. 40. Complete example <ul><li>my $hdf = ClearSilver::HDF->new; $hdf->readFile(“defaults.hdf”); my $cs = ClearSilver::CS->new($hdf); $cs->parseFile(“default.cs”); print $cs->Render(); </li></ul>
  41. 41. It can't be that simple!?
  42. 42. Things I've learnt - HDF <ul><li>Absence of a data value = false </li></ul>
  43. 43. Things I've learnt - HDF <ul><li>Absence of a data value = false </li></ul><ul><li><?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 ?> </li></ul>
  44. 44. Things I've learnt - HDF <ul><li>Absence of a data value = false </li></ul><ul><li>You can test on name </li></ul>
  45. 45. Things I've learnt - HDF <ul><li>Absence of a data value = false </li></ul><ul><li>You can test on name </li></ul><ul><li><?cs each:cd = cds ?> <p class=”<?cs if:name(cd) % 2 ?>oddrow<?cs else ?>evenrow<?cs /if ?>”> <?cs var:cd.name ?> </p> <?cs /each ?> </li></ul>
  46. 46. Things I've learnt - CS <ul><li>Row fetch -> put into HDF </li></ul><ul><ul><li>key/value pairs -> key/value pairs </li></ul></ul>
  47. 47. Things I've learnt - CS <ul><li>Row fetch -> put into HDF </li></ul><ul><li>get_data($sql) </li></ul><ul><ul><li>Executes query </li></ul></ul><ul><ul><li>Iterates through rows </li></ul></ul><ul><ul><ul><li>Row fetch -> put into HDF </li></ul></ul></ul>
  48. 48. Things I've learnt - CS <ul><li>get_data($sql, @params) </li></ul><ul><ul><li>Prepares query </li></ul></ul><ul><ul><li>Executes query with params </li></ul></ul><ul><ul><li>Iterates through rows </li></ul></ul><ul><ul><ul><li>Row fetch -> put into HDF </li></ul></ul></ul>
  49. 49. Things I've learnt - CS <ul><li>get_data($sql, $xfrm_href, @params) </li></ul><ul><ul><li>Prepares query </li></ul></ul><ul><ul><li>Executes query with params </li></ul></ul><ul><ul><li>Iterates through rows </li></ul></ul><ul><ul><ul><li>Row fetch -> put into HDF </li></ul></ul></ul><ul><ul><ul><li>Iterates through keys of xfrm_href </li></ul></ul></ul><ul><ul><ul><ul><li>Sets row key as return of xfrm function </li></ul></ul></ul></ul>
  50. 50. Things I've learnt - CS <ul><li>get_data($sql, $xfrm_href, @params) </li></ul><ul><ul><li>Prepares query </li></ul></ul><ul><ul><li>Executes query with params </li></ul></ul><ul><ul><li>Set blank $state_href; </li></ul></ul><ul><ul><li>Iterates through rows </li></ul></ul><ul><ul><ul><li>Row fetch -> put into HDF </li></ul></ul></ul><ul><ul><ul><li>Iterates through keys of xfrm_href </li></ul></ul></ul><ul><ul><ul><ul><li>Sets row key as return of xfrm function </li></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>gets $row_ref, $rowcount, $state_href </li></ul></ul></ul></ul></ul>
  51. 51. Things I've learnt - CS <ul><li>get_data($sql, $xfrm_href, @params) </li></ul><ul><li>set_navigation($table, $sort_field, $curr_id) </li></ul><ul><ul><li>Retrieves first, previous, next and last rows from table based on current position </li></ul></ul>
  52. 52. Things I've learnt - CS <ul><li>get_data($sql, $xfrm_href, @params) </li></ul><ul><li>set_navigation($table, $sort_field, $curr_id) </li></ul><ul><ul><li>Retrieves first, previous, next and last rows from table based on current position </li></ul></ul><ul><ul><li>Independent of table primary key </li></ul></ul>
  53. 53. Things I've learnt - CS <ul><li>get_data($sql, $xfrm_href, @params) </li></ul><ul><li>set_navigation($table, $sort_field, $curr_id) </li></ul><ul><ul><li>Retrieves first, previous, next and last rows from table based on current position </li></ul></ul><ul><ul><li>Independent of table primary key </li></ul></ul><ul><ul><li>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 </li></ul></ul>
  54. 54. Things I've learnt - CS <ul><li>get_data($sql, $xfrm_href, @params) </li></ul><ul><li>set_navigation($table, $sort_field, $curr_id) </li></ul><ul><ul><li>Retrieves first, previous, next and last rows from table based on current position </li></ul></ul><ul><ul><li>Independent of table primary key </li></ul></ul><ul><ul><li>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 </li></ul></ul><ul><ul><li>Must handle edge cases in CS and HDF </li></ul></ul>
  55. 55. Where do we get it?
  56. 56. http://www.clearsilver.net

×