Commit 96e74457 authored by Laros's avatar Laros
Browse files

Added tal lecture.

parent e162ebfc
../../submodules/presentation/Makefile
\ No newline at end of file
../../submodules/presentation/beamerthemelumc.sty
\ No newline at end of file
../../submodules/presentation/gen2phen_logo.eps
\ No newline at end of file
../../submodules/presentation/lgtc_logo.eps
\ No newline at end of file
../../submodules/presentation/lumc_logo.eps
\ No newline at end of file
../../submodules/presentation/lumc_logo_small.eps
\ No newline at end of file
../../submodules/presentation/nbic_logo.eps
\ No newline at end of file
../../submodules/presentation/ngi_logo.eps
\ No newline at end of file
../../submodules/presentation/nwo_logo_en.eps
\ No newline at end of file
../../submodules/presentation/nwo_logo_nl.eps
\ No newline at end of file
\documentclass[slidestop]{beamer}
\title{The Template Attribute Language}
\providecommand{\myConference}{Bioinformatics work discussion}
\providecommand{\myDate}{Tuesday, 15 March 2011}
\author{Jeroen F. J. Laros}
\providecommand{\myGroup}{Leiden Genome Technology Center}
\providecommand{\myDepartment}{Department of Human Genetics}
\providecommand{\myCenter}{Center for Human and Clinical Genetics}
\providecommand{\lastCenterLogo}{
\raisebox{-0.1cm}{
\includegraphics[scale = 0.055]{lgtc_logo}
}
}
\providecommand{\lastRightLogo}{
\includegraphics[scale = 0.1]{nbic_logo}
}
\usetheme{lumc}
\begin{document}
% This disables the \pause command, handy in the editing phase.
%\renewcommand{\pause}{}
% Make the title page.
\bodytemplate
% First page of the presentation.
\section{Introduction}
\begin{frame}
The \emph{Template Attribute Language} templating language used to generate
dynamic HTML and XML pages.
\bigskip
\begin{itemize}
\item Simplify the collaboration between programmers and designers.
\item Works by embedding TAL statements inside \emph{valid} HTML or XML
tags.
\end{itemize}
\pause
\bigskip
Interesting attributes:
\begin{itemize}
\item Conditional output.
\begin{itemize}
\item Show or hide parts of a page.
\end{itemize}
\item Repeating (looping).
\begin{itemize}
\item Tables.
\end{itemize}
\item Macros.
\begin{itemize}
\item Code reuse.
\item Nesting.
\end{itemize}
\end{itemize}
\end{frame}
\begin{frame}
Allows for more \emph{modularity}.
\begin{itemize}
\item Separating the interface from the implementation.
\begin{itemize}
\item Allow for separate development of the interface.
\item Changes can be made to the interface without touching the code.
\item Changes can be made to the code without affecting the interface.
\end{itemize}
\end{itemize}
\pause
\bigskip
Because the interface is separated, \emph{multiple} interfaces can be easily
added.
\begin{itemize}
\item Interfaces don't interfere.
\begin{itemize}
\item The core is not written with one interface in mind.
\end{itemize}
\item No need to keep track everywhere in the code which interface is used.
\item Communicate via internal variables.
\end{itemize}
\end{frame}
\newcounter{lstlistingbackup}
\section{Generating a table}
\begin{frame}[fragile]
Generate a table from the following matrix:
\bigskip
\begin{lstlisting}[caption = {Example input}]
exonInfo = [
[ 5809, 5860, '1', '52' ],
[ 6758, 6874, '53', '169' ]
]
\end{lstlisting}
\pause
\bigskip
\bigskip
The output should be something like this:
\bigskip
\begin{table}
\begin{tabular}{r|r|r|r|r}
Number & Start (g.) & Stop (g.) & Start (c.) & Stop (c.) \\
\hline
1 & 5809 & 5860 & 1 & 52 \\
2 & 6758 & 6874 & 53 & 169 \\
\end{tabular}
\label{tab:output}
\caption{Example output}
\end{table}
\end{frame}
\section{Common implementations}
\begin{frame}[fragile]
This is a frequently used solution.
\bigskip
\begin{lstlisting}[language = Python, caption = {Common implementation},
label = lst:PythonWrong1]
print "<table class = \"raTable\"><tr>" \
"<td>Number</td><td>Start (g.)</td>" \
"<td>Stop (g.)</td><td>Start (c.)</td>" \
"<td>Stop (c.)</td></tr>"
for i in range(len(exonInfo)) :
print "<tr><td>" + str(i + 1) + "</td>"
for j in exonInfo[i] :
print "<td>" + str(j) + "</td>"
print "</tr>"
#for
print "</table>"
\end{lstlisting}
\pause
Problems with this implementation:
\begin{itemize}
\item Parts of the HTML code has to be escaped.
\item The output is a mess.
\end{itemize}
\end{frame}
\begin{frame}[fragile]
The output works, but has no indentation.
\bigskip
\begin{lstlisting}[language = HTML,
caption = {Output of the code in Listing~\protect\ref{lst:PythonWrong1}}]
<table class = "raTable"><tr><td>Number</td>
<td>Start (g.)</td><td>Stop (g.)</td>
<td>Start (c.)</td><td>Stop (c.)</td></tr>
<tr><td>1</td>
<td>5809</td>
<td>5860</td>
<td>1</td>
<td>52</td>
</tr>
<tr><td>2</td>
<td>6758</td>
<td>6874</td>
<td>53</td>
<td>169</td>
</tr>
</table>
\end{lstlisting}
\end{frame}
\begin{frame}[fragile]
This is a slightly better approach.
\bigskip
\begin{lstlisting}[language = Python, label = lst:PythonWrong2,
caption = {Fix indentation}]
print "<table class = \"raTable\">"
print " <tr>"
print " <td>Number</td>"
print " <td>Start (g.)</td>"
print " <td>Stop (g.)</td>"
print " <td>Start (c.)</td>"
print " <td>Stop (c.)</td>"
print " </tr>"
for i in range(len(exonInfo)) :
print " <tr>"
print " <td>" + str(i + 1) + "</td>"
print " ",
for j in exonInfo[i] :
print "<td>" + str(j) + "</td>",
print "\n </tr>"
#for
print "</table>"
\end{lstlisting}
\end{frame}
\begin{frame}[fragile]
The output looks fine now.
\bigskip
\begin{lstlisting}[language = HTML,
caption = {Output of the code in Listing~\protect\ref{lst:PythonWrong2}}]
<table class = "raTable">
<tr>
<td>Number</td>
<td>Start (g.)</td>
<td>Stop (g.)</td>
<td>Start (c.)</td>
<td>Stop (c.)</td>
</tr>
<tr>
<td>1</td>
<td>5809</td><td>5860</td><td>1</td><td>52</td>
</tr>
<tr>
<td>2</td>
<td>6758</td><td>6874</td><td>53</td><td>169</td>
</tr>
</table>
\end{lstlisting}
\end{frame}
\begin{frame}[fragile]
\begin{lstlisting}[language = PHP, caption = {PHP example}]
<table class = "raTable">
<tr>
<td>Number</td>
<td>Start (g.)</td>
<td>Stop (g.)</td>
<td>Start (c.)</td>
<td>Stop (c.)</td>
</tr>
<?
print("\r");
for ($i = 0; $i < count($exonInfo); $i++) {
print(" <tr>\n");
print(" <td>" . ($i + 1) . "</td>\n ");
for ($j = 0; $j < count($exonInfo[$i]); $j++) {
print("<td>" . $exonInfo[$i][$j] . "</td>");
}//for
print("\n </tr>\n");
}//for
?>
</table>
\end{lstlisting}
\end{frame}
\section{Doing the same with TAL}
\begin{frame}[fragile]
A TAL template is pure HTML or XML.
\bigskip
\begin{lstlisting}[language = HTML, caption = {TAL example},
deletekeywords = {content}]
<table class = "raTable">
<tr>
<td>Number</td>
<td>Start (g.)</td>
<td>Stop (g.)</td>
<td>Start (c.)</td>
<td>Stop (c.)</td>
</tr>
<tr tal:repeat = "i exonInfo">
<td tal:content = "repeat/i/number"></td>
<td tal:repeat = "j i" tal:content = "j"></td>
</tr>
</table>
\end{lstlisting}
\pause
\begin{itemize}
\item This template can be viewed with a browser.
\item Modifications to the template are easy.
\end{itemize}
\end{frame}
\begin{frame}[fragile]
Here we see an example of how to compile a template.
\bigskip
\begin{lstlisting}[language = Python, caption = {Compiling the template},
label = lst:PythonTal]
from simpletal import simpleTALES
from simpletal import simpleTAL
from cStringIO import StringIO
context = simpleTALES.Context()
context.addGlobal("exonInfo", exonInfo)
handle = open("TAL_example.html", 'r')
template = simpleTAL.compileHTMLTemplate(handle)
handle.close()
io = StringIO()
template.expand(context, io)
print io.getvalue()
\end{lstlisting}
\pause
We write this only once\ldots
\end{frame}
\begin{frame}[fragile]
We put the functionality of Listing~\ref{lst:PythonTal} in a function.
\bigskip
\begin{lstlisting}[language = Python,
caption = {Template compiling function}]
args = {
"exonInfo" : exonInfo,
"version" : 2.0,
"welcome" : "Hello"
}
processTal("TAL_example.html", args)
\end{lstlisting}
\pause
\bigskip
\bigskip
For each page, we can now make a template, and call the
\lstinline!processTal()! function with the associated parameters.
\end{frame}
\section{Demonstration}
\begin{frame}
\vspace{3cm}
\begin{center}
\bt{http://www.mutalyzer.nl/}
\end{center}
\end{frame}
\section{Conclusions}
\begin{frame}
Abstract the interface from your code.
\begin{itemize}
\item Write your code independent from the interface.
\item And the other way around.
\begin{itemize}
\item No mixed languages.
\item Opens the road for other interfaces.
\item No interference with other interfaces.
\end{itemize}
\end{itemize}
\pause
\bigskip
Divide expertise.
\begin{itemize}
\item Allow other people to write / modify the interface.
\pause
\item Work with templates.
\begin{itemize}
\item Modify your template easily.
\item Templates can be viewed without compilation or a web server.
\item Templates can be nested.
\begin{itemize}
\item A menu structure as a template, with a template inside.
\end{itemize}
\end{itemize}
\end{itemize}
\end{frame}
\section{Questions?}
\lastpagetemplate
\begin{frame}
\begin{center}
Some implementations:
\vspace{2cm}
\begin{tabular}{l@{\ \ --\ \ }l}
Java & \bt{http://christophermrossi.com/jpt/} \\
Perl & \bt{http://search.cpan.org/dist/Petal/} \\
PHP & \bt{http://phptal.org/} \\
Python & \bt{http://www.owlfish.com/} \\
\end{tabular}
\end{center}
\end{frame}
\end{document}
../../submodules/presentation/ul_logo.eps
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment