HTML Templates Using Clear Silver
- 1. HTML Templating using ClearSilver Paul Wayper CLUG Programming SIG
- 3. Why templates? Separate content from code Good for big design projects: Web designers do web design Coders write code
- 4. Why templates? Separate content from code Works for small projects too: Easier to make sure the HTML validates
- 5. 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
- 6. 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
- 7. 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?
- 8. 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
- 9. Why ClearSilver ?
- 10. Why ClearSilver? Fast Code originally written for OneList / Yahoo Groups Used on Google Groups, Discogs, Orkut, trac...
- 11. Why ClearSilver? Fast Language Neutral Parser written in C Bindings for C++, Python, Perl, Ruby, Java
- 12. Why ClearSilver? Fast Language Neutral Simple syntax <?cs var:doc.title ?>
- 13. Why ClearSilver? Fast Language Neutral Simple syntax Editable in any HTML editor <?cs var:doc.title ?>
- 14. Why ClearSilver? Fast Language Neutral Simple syntax Data loaded from file or by code Template: index.cs Data: index.hdf
- 15. 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
- 16. Show us the template!
- 17. ClearSilver Templates Variables <?cs var:doc.title ?>
- 18. ClearSilver Templates Variables Variables can be used inside HTML tags <a href=”<?cs var:doc.url ?>”>
- 19. ClearSilver Templates Variables Include other files <?cs include:”footer.cs” ?>
- 20. 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>
- 21. 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>
- 22. ClearSilver Templates Variables Include other files If/Then/Else – if set, display, otherwise... <?cs alt:page.name ?>No page name set.<?cs /alt ?>
- 23. ClearSilver Templates Variables Include other files If/Then/Else Looping <?cs loop:i = 1, 10, 2 ?><?cs var:i ?><?cs /loop ?>
- 24. 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
- 25. ClearSilver Templates Variables Include other files If/Then/Else Looping through data structures <?cs each:cd = cds ?><?cs var:cd.name ?><?cs /each ?>
- 26. 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 ?>
- 27. 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 ?>
- 28. Show us the data!
- 29. ClearSilver Data Objects HDF – Hierarchical Data Format
- 30. ClearSilver Data Objects HDF – Hierarchical Data Format Key = Value pairs page.name = Welcome to linux.conf.au!
- 31. ClearSilver Data Objects HDF – Hierarchical Data Format Key = Value pairs Where's the 'hierarchical' bit?
- 32. 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
- 33. 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 }
- 34. 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 } }
- 35. 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>
- 36. ClearSilver Data Objects HDF – Hierarchical Data Format Data in text files: Menu { 0 { Name = About } 1 { Name = Products } }
- 37. 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);
- 38. ClearSilver Data Objects HDF – Hierarchical Data Format Data from script from file: my $hdf = ClearSilver::HDF->new; $hdf ->readFile(“defaults.hdf”);
- 39. Put it all together!
- 40. Complete example my $hdf = ClearSilver::HDF->new; $hdf->readFile(“defaults.hdf”); my $cs = ClearSilver::CS->new($hdf); $cs->parseFile(“default.cs”); print $cs->Render();
- 41. It can't be that simple!?
- 42. Things I've learnt - HDF Absence of a data value = false
- 43. 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 ?>
- 44. Things I've learnt - HDF Absence of a data value = false You can test on name
- 45. 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 ?>
- 46. Things I've learnt - CS Row fetch -> put into HDF key/value pairs -> key/value pairs
- 47. Things I've learnt - CS Row fetch -> put into HDF get_data($sql) Executes query Iterates through rows Row fetch -> put into HDF
- 48. Things I've learnt - CS get_data($sql, @params) Prepares query Executes query with params Iterates through rows Row fetch -> put into HDF
- 49. 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
- 50. 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
- 51. 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
- 52. 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
- 53. 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
- 54. 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
- 55. Where do we get it?