advertisement

HTML Templates Using Clear Silver

100 %
0 %
advertisement
Information about HTML Templates Using Clear Silver
Technology

Published on January 26, 2009

Author: PaulWay

Source: slideshare.net

Description

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

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

Add a comment

Related presentations

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...

Related pages

ClearSilver

A high performance HTML template system with internationalization support, usable from Python and other languages. Code, documentation, forums, and news ...
Read more

797 Free Website Templates - TemplatesBox.com

Free website templates, free html templates, ... Clear Sound Company Full Website Template. Romantics Dating Agency Full Website Template.
Read more

Website Templates • Free Download • Open Designs

With over 2,000 website templates to choose from, you'll definitely find yourself a great new look for your website ... How to make a website using HTML
Read more

free HTML5 CSS responsive templates

free HTML5 CSS responsive templates. Home; ... v3.3.6 one-page template using alternative ... website template that is responsive HTML CSS and ...
Read more

Free Web Templates - Free web designs, templates and more!

A huge collection of 3400+ free website templates, ... Free Web Templates. ... Find and fix HTML markup errors. FWT ...
Read more

Free HTML Website Templates - Free Web Design Resources ...

HTML Website templates (62) HTML UI Kits (8) Miscellanea (123) Free stock photos NEW; Contact me; ... HTML website templates, fonts and other cool stuff.
Read more

Silverlight Templates - Template Monster

Moto CMS HTML Templates (1673) ... Clear filters. Categories Art & Culture (1) ... Silverlight Templates (36) Business ...
Read more

Website Templates | Web Templates | Template Monster

TemplateMonster offers web templates designed and ... Moto CMS HTML Templates ... Bold and captivating templates that combine quality visuals with clear ...
Read more

Understanding Angular's $templateCache - Thinkster

This tutorial will show you the different ways of using templates ... we can see that a separate request is used to retrieve our template from test.html ...
Read more