

% 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: Composing Components}
\subtitle{}
\author{Damien Cassou, Stéphane Ducasse and Luc Fabresse}
\institute{http://stephane.ducasse.free.fr}
\date{}
\slidesid{W5S01}

\begin{document}

\frame[plain]{\titlepage}



\begin{frame}[fragile]

\frametitle{Remember: Seaside}

\begin{itemize}
\item Think in terms of \textbf{reusable} and \textbf{stateful components}
\item A web application = a root component
\item Live Debugging
\begin{itemize}
\item through the debugger, you can modify objects and proceed to generate the HTML response
\end{itemize}

\end{itemize}
\end{frame}



\begin{frame}[fragile]

\frametitle{Roadmap}

3 mechanisms to reuse components:

\begin{itemize}
\item Components aggregation 
\item The \code{call:} / \code{answer:} mechanism
\item Definition of workflows (Task)
\end{itemize}
\end{frame}



\begin{frame}[fragile]

\frametitle{Roadmap}

3 mechanisms to reuse components:

\begin{itemize}
\item \textbf{Components aggregation}
\item The \code{call:} / \code{answer:} mechanism
\item Definition of workflows (Task)
\end{itemize}
\end{frame}



\begin{frame}[fragile]

\frametitle{Remember: Counter / TwitterCounter}

\begin{columns}

\begin{column}{0.5\textwidth}

\code{WACounter}

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

\end{column}


\begin{column}{0.5\textwidth}

\code{WATwitterCounter}

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

\end{column}

\end{columns}

\end{frame}



\begin{frame}[fragile]

\frametitle{How to Build a Multi-Counter Application?}

\code{WAMultiCounter}

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

\end{frame}



\begin{frame}[fragile]

\frametitle{WAMultiCounter}

\begin{listing}{}
WAExampleComponent subclass: #WAMultiCounter
    instanceVariableNames: 'counters'
    classVariableNames: ''
    package: 'Seaside-Examples-Misc'.
	
WAMultiCounter >> initialize
    super initialize.
    counters := (1 to: 5) collect: [ :each | WACounter new ].

WAMultiCounter >> children
    ^ counters
		
WAMultiCounter >> renderContentOn: html
    counters do: [ :each | html render: each ]
\end{listing}
\end{frame}



\begin{frame}[fragile]

\frametitle{How to Compose Components?}

A composite:

\begin{itemize}
\item Stores subcomponents in an instance variable (e.g. \code{counters})
\item Sends \code{render:} to subcomponents in its \code{renderContentOn:} method
\item Redefines \code{children} to return the collection of its subcomponents 
\end{itemize}
\end{frame}



\begin{frame}[fragile]

\frametitle{Aggregating Different Subcomponents}

\begin{listing}{}
WAExampleComponent subclass: #MyApp
    instanceVariableNames: 'children'
    classVariableNames: ''
    package: 'Seaside-Examples-Misc'.

MyApp >> initialize
    super initialize.
    children := { Greeter new. 
		 WATwitterCounter new. WACounter new }.

MyApp >> children
    ^ children

MyApp >> renderContentOn: html
    children do: [ :each | html render: each ]
        separatedBy: [ html line ]
\end{listing}
\end{frame}



\begin{frame}[fragile]

\frametitle{Aggregating Different Subcomponents}


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

\end{frame}



\begin{frame}[fragile]

\frametitle{Rendering Only One Subcomponent}

\begin{columns}

\begin{column}{0.5\textwidth}


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

\end{column}


\begin{column}{0.5\textwidth}


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

\end{column}

\end{columns}

\end{frame}



\begin{frame}[fragile]

\frametitle{Rendering Only One Subcomponent}

\begin{listing}{}
MyApp >> initialize
    "..."
	 selectedChild := children first

MyApp >> renderContentOn: html
	self renderMenuOn: html.
	html render: selectedChild 

MyApp >> renderMenuOn: html
    html unorderedList: [ 
        self children doWithIndex: [ :child :i |
            html listItem: [ 
                html anchor 
                    class: 'selected' if: child = currentComponnent ;
                    callback: [ selectedChild := self children at: i ];
						  with: child className  
    ] ] ]
\end{listing}
\end{frame}



\begin{frame}[fragile]

\frametitle{Roadmap}

3 mechanisms to reuse components:

\begin{itemize}
\item Components aggregation
\item \textbf{The \code{call:} / \code{answer:} mechanism}
\item Definition of workflows (Task)
\end{itemize}
\end{frame}



\begin{frame}[fragile]

\frametitle{call:}


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

\end{frame}



\begin{frame}[fragile]

\frametitle{call:}


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

\end{frame}



\begin{frame}[fragile]

\frametitle{answer:}


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

\end{frame}



\begin{frame}[fragile]

\frametitle{answer:}


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

\end{frame}



\begin{frame}[fragile]

\frametitle{call:/answer: Example}


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


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


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

\end{frame}



\begin{frame}[fragile]

\frametitle{call:/answer: Example}

\begin{listing}{}
WATwitterCounter >> renderContentOn: html
    "..."
    html tbsButton beDefault; 
        callback: [ self setCountToUserValue ]; with: 'Set Value'
    "..."

WATwitterCounter >> setCountToUserValue
    | webDialog newCounterValueByUser |
    webDialog := WAInputDialog new
        addMessage: 'Enter a new value for the counter:';
        default: '0';
        label: 'Ok';
        yourself.
    newCounterValueByUser := self call: webDialog.
    count := newCounterValueByUser asNumber
\end{listing}
\end{frame}



\begin{frame}[fragile]

\frametitle{WAInputDialog Internals}

\code{WAInputDialog} 

\begin{itemize}
\item is a reusable component
\item it \code{answer:} a result
\end{itemize}

\begin{listing}{}
WAInputDialog >> renderContentOn: html
	html form
		defaultAction: [ self answer: value ];
		with: [
			html div: [
				html textInput on: #value of: self.
				html space.
				html submitButton
					callback: [ self answer: value ];
					text: self label ] ]
\end{listing}
\end{frame}



\begin{frame}[fragile]

\frametitle{Roadmap}

3 mechanisms to reuse components:

\begin{itemize}
\item Components aggregation
\item The \code{call:} / \code{answer:} mechanism
\item \textbf{Definition of workflows (Task)}
\end{itemize}
\end{frame}



\begin{frame}[fragile]

\frametitle{Encapsulating Workflows}

Tasks are simple components:

\begin{itemize}
\item No UI part (i.e. no \code{renderContentOn:})
\item Orchestrating several components
\begin{itemize}
\item use \code{call:}/\code{answer:} behind the scene
\end{itemize}

\end{itemize}
\end{frame}



\begin{frame}[fragile]

\frametitle{A Simple Web Task}

\begin{listing}{}
WATask subclass: #Adder
    instanceVariableNames: ''
    classVariableNames: ''
    package: 'SeaExample'
\end{listing}

\begin{listing}{}
Adder >> go
    | value1 value2 |
    value1 := self request: 'first number'.
    value2 := self request: 'second number'.
    self inform: value1 asNumber + value2 asNumber
\end{listing}

\begin{listing}{}
WAAdmin register: self asApplicationAt: 'Adder'.
\end{listing}
\end{frame}



\begin{frame}[fragile]

\frametitle{How request: is Implemented?}

\code{request:} uses \code{call:} / \code{answer:} on a \code{WAInputDialog}

\begin{listing}{}
WAComponent >> request: aRequestString label: aLabelString default: aDefaultString onAnswer: aBlock
	"Display an input dialog with the question aRequestString, the button label aLabelString and the default string aDefaultString. Passes the answer into aBlock."
	
    self 
         call: (WAInputDialog new
            addMessage: aRequestString;
            default: aDefaultString;
            label: aLabelString;
            yourself)
        onAnswer: aBlock	
\end{listing}
\end{frame}



\begin{frame}[fragile]

\frametitle{How inform: is Implemented?}

\code{inform:} uses \code{call:} / \code{answer:} on a \code{WAFormDialog}

\begin{listing}{}
WAComponent >> inform: aString onAnswer: aBlock	
    "Display a dialog with aString to the user until he clicks the ok button. Continue by evaluating aBlock."

    self 
        call: (WAFormDialog new
            addMessage: aString;
            yourself)
        onAnswer: aBlock
\end{listing}
\end{frame}



\begin{frame}[fragile]

\frametitle{Stepping Back}

\begin{itemize}
\item \textbf{No} manual request parsing
\item \textbf{No} request routing 
\item \textbf{No} hardcoding of next page
\item \textbf{No} XML configuration files
\end{itemize}
\end{frame}



\begin{frame}[fragile]

\frametitle{Conclusion}

Seaside provides:

\begin{itemize}
\item Stateful components
\item Components composition (children)
\item Components scheduling using \code{call:} / \code{answer:}
\item Tasks to encapsulate workflows
\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:
