

% add the PATH to retrieve cls and sty beamer styles files
\makeatletter
\providecommand*{\input@path}{}
\edef\input@path{{../../support/beamer/}\input@path}% prepend
\makeatother

% \documentclass{pharoslides}
% \documentclass[aspectratio=169]{pharoslides} % format 16/9
\documentclass[withvideo]{pharoslides} % format 16/9 + incrustation video

\graphicspath{{./figures/}{../}{../../support/beamer/imgs/}}

%Information to be included in the title page:
\title{Seaside: Rendering Components}
\subtitle{}
\author{Damien Cassou, Stéphane Ducasse and Luc Fabresse}
\institute{http://stephane.ducasse.free.fr}
\date{}
\slidesid{W4S09}

\begin{document}

\frame[plain]{\titlepage}



\begin{frame}[fragile]

\frametitle{Remember}

\begin{itemize}
\item \code{renderContentOn:} is dedicated to HTML generation 
\item parameter named \code{html} (\code{WAHtmlCanvas}) defines a DSL like API to generate valid HTML 
\end{itemize}

\begin{listing}{}
WACounter >> renderContentOn: html
    html heading: count.
    html anchor
        callback: [ self increase ];
        with: '++'.
    html space.
    html anchor
        callback: [ self decrease ];
        with: '--'
\end{listing}
\end{frame}



\begin{frame}[fragile]

\frametitle{Rendering components}

Using a DSL 

\begin{itemize}
\item Brushes to emit HTML
\begin{itemize}
\item OO API to generate HTML
\item Generated HTML valid by construction
\end{itemize}

\item CSS-based
\end{itemize}
\end{frame}



\begin{frame}[fragile]

\frametitle{Generating a Title}

\begin{listing}{}
html div id: 'title'; with: 'Title'
\end{listing}

\begin{listing}{}
<div id="title">Title</div>
\end{listing}
\end{frame}



\begin{frame}[fragile]

\frametitle{Generating a List}

\begin{listing}{}
html div id: 'list'; 
    with: [ 
        html span class: 'item'; with: 'Item 1'.
        html span class: 'item'; with: 'Item 2' ]
\end{listing}

\begin{listing}{}
<div id="list">
    <span class="item">Item 1</span>
    <span class="item">Item 2</span>
</div>
\end{listing}
\end{frame}



\begin{frame}[fragile]

\frametitle{Generating a List with a Loop}

\begin{listing}{}
html unorderedList 
    id: 'list'; 
    with: [
        1 to: 5 do: [ :i |
            html listItem 
                class: 'item'; 
                with: 'Item ', i asString ]]
\end{listing}

\begin{listing}{}
<ul id="list">
    <li class="item">Item 1</li>
    <li class="item">Item 2</li>
    <li class="item">Item 3</li>
    <li class="item">Item 4</li>
    <li class="item">Item 5</li>
</ul>
\end{listing}
\end{frame}



\begin{frame}[fragile]

\frametitle{Generating a List with a Loop}

\begin{listing}{}
html unorderedList 
    id: 'list'; 
    with: [
        1 to: 5 do: [ :i |
            html listItem 
                class: 'itemodd' if: i odd; 
                class: 'itemeven' if: i even; 
                with: 'Item ', i asString ]]
\end{listing}

\begin{listing}{}
<ul id="list">
    <li class="itemodd" >Item 1</li>
     <li class="itemeven">Item 2</li>
     <li class="itemodd" >Item 3</li>
     <li class="itemeven">Item 4</li>
     <li class="itemodd" >Item 5</li>
</ul>
\end{listing}

			
	
\end{frame}



\begin{frame}[fragile]

\frametitle{Twitter Bootstrap}


\begin{center}
\includegraphics[width=0.8\textwidth]{figures/TwitterBootstrap.png}\end{center}

\end{frame}



\begin{frame}[fragile]

\frametitle{Rendering Twitter Alerts}


\begin{center}
\includegraphics[width=0.5\textwidth]{figures/TwitterAlerts-cut.png}\end{center}


\begin{listing}{}
renderExampleOn: html
    html heading level: 2; with: 'Examples'.					
    html tbsAlert beSuccess;
        with: [ html strong: 'Well done!'. html text: ' You successfully read this important alert message.' ].
    html tbsAlert beInfo;
        with: [ html strong: 'Heads up!'. html text: ' This alert needs your attention, but it''s not super important.' ].
\end{listing}
\end{frame}



\begin{frame}[fragile]

\frametitle{Rendering Twitter Buttons}


\begin{center}
\includegraphics[width=0.6\textwidth]{figures/TwitterButtons.png}\end{center}
 

\begin{listing}{}
renderExampleOn: html
    html tbsButtonGroup: [ 
        html tbsButton beDefault; with: 'Left'.
        html tbsButton beDefault; with: 'Middle'.
        html tbsButton beDefault; with: 'Right' ].
\end{listing}
\end{frame}



\begin{frame}[fragile]

\frametitle{Implement a Counter using Twitter Bootstrap}

\begin{itemize}
\item Subclass \code{WACounter}
\end{itemize}

\begin{listing}{}
WACounter subclass: #WATwitterCounter
    instanceVariableNames: ''
    classVariableNames: ''
    package: 'Seaside-Examples-Misc'
\end{listing}

\begin{itemize}
\item Use JQuery and Bootstrap libraries
\end{itemize}

\begin{listing}{}
WATwitterCounter class >> initialize
    "self initialize"
    | app |
    app := WAAdmin register: self asApplicationAt: 'twittercounter'.
    app 
        addLibrary: JQDeploymentLibrary;
        addLibrary: TBSDevelopmentLibrary
\end{listing}
\end{frame}



\begin{frame}[fragile]

\frametitle{Implement a Counter using Twitter Bootstrap}

\begin{itemize}
\item Redefine \code{renderContentOn:}
\end{itemize}

\begin{listing}{}
WATwitterCounter >> renderContentOn: html
    html tbsContainer: [ 
        html form: [ 
            html tbsButtonGroup beSmall; with: [ 	
                html tbsButton beDefault; 
                    callback: [ self increase ]; with: '+'.
                html tbsButton beDefault; 
                    callback: [ self decrease ]; with: '-' ].
            html 
                space; 
                tbsBadge: self count ] ]
\end{listing}
\end{frame}



\begin{frame}[fragile]

\frametitle{Implement a Counter using Twitter}


\begin{center}
\includegraphics[width=0.7\textwidth]{figures/SeasideCounterBootstrap.png}\end{center}
 
\end{frame}



\begin{frame}[fragile]

\frametitle{Apply Your Own CSS Rules}

\begin{listing}{}
WATwitterCounter >> renderContentOn: html
    html tbsContainer: [ 
         html form: [ 
             "..."
             html space.
             html tbsBadge
                 class: 'odd' if: self count odd;
                 with: self count ] ]

WATwitterCounter >> style
    ^ '.odd { color: red; }'
\end{listing}

\begin{listing}{}
<span class="badge odd">7</span>
\end{listing}
\end{frame}



\begin{frame}[fragile]

\frametitle{Conclusion}

\begin{itemize}
\item A Web application = a root component
\item A Component renders itself in HTML (\code{renderContentOn:})
\item An exensible DSL helps to easily generate HTML 
\begin{itemize}
\item using brushes 
\item according to CSS frameworks such as Bootstrap, JQuery UI, ...
\item and scripting (loops, ...)
\end{itemize}

\end{itemize}
\end{frame}




% \setlength{\textwidth}{\originaltextwidth}
\setbeamertemplate{background canvas}{\insertBorderForHandout}

\begin{frame}[plain]

\begin{minipage}{\originaltextwidth}
\centering
\large


\vspace{2em}

A course by

\vspace{1em}

\hspace{-20px}\includegraphics[height=32px]{inriaLogo}\hspace{3em}\raisebox{7px}{and}\hspace{3em}\raisebox{-6px}{\includegraphics[height=30px]{logoutop}}

\vspace{2em}

in collaboration with

\vspace{1em}

\includegraphics[height=40px]{unisciellogo}\hskip 1.5em%
\raisebox{5px}{\includegraphics[height=30px]{unitlogo}}\hskip 2em%
\raisebox{8px}{\includegraphics[height=24px]{univLilleLogo}}\hskip 2em%
\raisebox{3px}{\includegraphics[height=29px]{logo-IMT}}\hskip 2em%
\raisebox{1px}{\includegraphics[height=32px]{minesDouaiLogo}}

\vspace{2.5em}

\includegraphics[width=50px]{by-nc-nd} \tiny \hskip 0.5em \raisebox{5px}{Inria 2016}

\medskip

\tiny
Except where otherwise noted, this work is licensed under CC BY-NC-ND 3.0 France

\url{https://creativecommons.org/licenses/by-nc-nd/3.0/fr/} 

\end{minipage}
\end{frame}

\end{document}

%%% Local Variables:
%%% mode: latex
%%% TeX-master: t
%%% End:
