\chapter{Uitgebreid voorbeeld}

In dit hoofdstuk wordt een volledig uitgewerkt voorbeeld gegeven van het gebruik van condities. Het voorbeeld is te vinden in bijlage \ref{example} en stelt een registratieformulier voor. In dit formulier is het verplicht om alle velden in te vullen om je te kunnen registreren. Indien deze velden niet zijn ingevuld en er wordt op de knop 'send' gedrukt, dan wordt er een gepaste foutboodschap gegeven.

% In het \texttt{$<$structure$>$} element zie we dat in een container een frame wordt aangemaakt. In dit frame krijgen we invoervelden (textboxes) voor het invullen van de voornaam, de achternaam, de straat, het huisnummer en het land. Ieder invoerveld heeft zijn eigen label. Hierna zien we dat er nog twee knoppen worden aangemaakt, \'e\'en om het formulier te verzenden en \'e\'en om het formulier te resetten. 
% In het \texttt{$<$style$>$} element wordt ieder element dat aangemaakt is voorzien van zijn eigenschappen. De grootte, de plaats, \ldots wordt ingvuld. Hierna is de volledige interface gedefinieerd.
% In het \texttt{$<$behavior$>$} element wordt dan het gedrag gekoppeld. We zien dat er drie regels worden gedefinieerd. De eerste regel geeft aan dat wanneer er op de knop `reset' wordt geklikt, dat in de bijhorende actie alle velden worden leeggemaakt. De tweede regel toont de boodschap `Succesvol geregistreerd' op het scherm wanneer alle velden zijn ingevuld. Tenslotte bij de derde en laatste regel toont de boodschap `Alle velden zijn verplicht!!' wanneer er \'e\'en of meerdere velden niet zijn ingevuld.


In het \texttt{<structure>} element (zie listing \ref{ex_structure}) zien we dat er een container wordt aangemaakt waarin verschillende widgets zullen gepositioneerd worden. Deze widgets zijn labels met elk een bijhorend invoerveld, zoals bijvoorbeeld \texttt{l\_firstName}, wat een label voorstelt met de tekst `First name:' en het bijhorende invoerveld \texttt{firstName} (zie figuur \ref{ex_pc}). Er worden ook twee knoppen aangemaakt. Deze knoppen dienen voor het leegmaken van het formulier (reset knop) en het versturen van het formulier (send knop).

\lstset{basicstyle=\footnotesize, frameround=fttt, numbers=none, language=XML, breaklines=false}
\begin{lstlisting}[frame=bt, caption=\texttt{<structure>} element, label=ex_structure]
...
	<structure>
		<part id="cont" class="Container">
			<part id="l_firstName" class="Label" />
			<part id="firstName" class="Text" />
			<part id="l_lastName" class="Label" />
			<part id="lastName" class="Text" />
			<part id="l_street" class="Label" />
			<part id="street" class="Text" />
			<part id="l_number" class="Label" />
			<part id="number" class="Text" />
			<part id="l_country" class="Label" />
			<part id="country" class="Text" />
			<part id="send" class="Button" />
			<part id="reset" class="Button" />
		</part>
	</structure>
...
\end{lstlisting}

		\begin{figure}[h]
			\center
			\subfigure[Weergegeven op desktop pc]{
				\includegraphics[scale=.75]{images/register.jpg}
			}
			\subfigure[Weergegeven op PDA]{
				\includegraphics[scale=.75]{images/pda_ex.jpg}
			}
			\caption{Screenshots}
			\label{ex_pc}
		\end{figure}
		
In het \texttt{<style>} element (zie listing \ref{ex_style}) worden de widgets van tekst voorzien en op een goede plaats in de UI gezet. Zie bijlage \ref{example}. We hebben nu een volledige UI gedefinieerd. Het enige wat nog ontbreekt is de interactie met de gebruiker. Er staan twee knoppen in de UI, die niets doen wanneer de gebruiker er op klikt. We komen dus bij het \texttt{<behavior>} element. Als we kijken naar het voorbeeld zien we dat er in totaal drie regels zijn.

\lstset{basicstyle=\footnotesize, frameround=fttt, numbers=none, language=XML, breaklines=false}
\begin{lstlisting}[frame=bt, caption=\texttt{<style>} element, label=ex_style]
...
	<style>
		<!-- Container -->
		<property part-name="cont" name="size">500,500</property>
		<!-- Label firstname -->
		<property part-name="l_firstName" name="text">Voornaam:</property>
		<property part-name="l_firstName" name="size">80,15</property>
		<property part-name="l_firstName" name="position">10,15</property>
		...
	</style>
...
\end{lstlisting}

\begin{enumerate}
	\item De eerste regel (zie listing \ref{ex_rule_one}) zorgt ervoor dat wanneer de gebruiker klikt op de knop met de tekst `reset' dat alle velden worden leeggemaakt door in ieder veld een lege string te plaatsen.
	\item De tweede regel (zie listing \ref{ex_rule_two}) gaat kijken of alle velden zijn ingevuld. Er is een mechanisme nodig om te kijken of ieder veld verschillend is van een lege string. Hiervoor dienen de binnenste \texttt{<op>} elementen. In figuur \ref{third_op} is een deel van de code gegeven. Dit stuk code kijkt of het veld \texttt{firstName} verschillend is van een lege constante waarde (de lege string). Om er zeker van te zijn dat \textbf{ieder} veld ingevuld is, moeten we de binnenste \texttt{<op>} elementen in een \texttt{<op>} element plaatsen met als attribuut \texttt{name=``and"}. \texttt{``and"} wil zeggen dat ieder elementen moet evalueren naar \textit{waar}. Nu hebben we bijna onze conditie samengesteld. Het enige dat nog mist, is een event zodat er ook op de knop met de tekst `send' geklikt kan worden. Als we dit event nog toevoegen samen met een extra \texttt{<op>} element (dezelfde reden als eerder) komen tot de volledige conditie.
	\item De derde en laatste regel (zie listing \ref{ex_rule_three}) gaat kijken of er \'e\'en of meerdere velden niet zijn ingevuld. Er wordt dan een gepaste boodschap op het scherm getoond. Er moet nu exact het omgekeerde gedaan worden van regel 2.
\end{enumerate}

\lstset{basicstyle=\footnotesize, frameround=fttt, numbers=none, language=XML, breaklines=false}
\begin{lstlisting}[frame=bt, caption=Het leegmaken van het formulier, label=ex_rule_one]
...
	<rule>
		<condition>
			<event part-name="reset" class="ButtonPressed" />
		</condition>
		<action>
			<property part-name="firstName" name="text"></property>
			<property part-name="lastName" name="text"></property>
			<property part-name="street" name="text"></property>
			<property part-name="number" name="text"></property>
			<property part-name="country" name="text"></property>
		</action>
	</rule>
...
\end{lstlisting}

\lstset{basicstyle=\footnotesize, frameround=fttt, numbers=none, language=XML, breaklines=false}
\begin{lstlisting}[frame=bt, caption=Kijk of alle velden zijn ingevuld, label=ex_rule_two]
...
	<rule>
		<condition>
			<op name="and">
				<event part-name="send" class="ButtonPressed" />
				<op name="and">
					<op name="notequal">
						<property part-name="firstName" name="text" />
						<constant value="" />
					</op>
					<op name="notequal">
						<property part-name="lastName" name="text" />
						<constant value="" />
					</op>
					...
				</op>
			</op>
		</condition>
		<action>
			<call name="Box.Show">
				<param>Succesvol geregistreerd</param>
			</call>
		</action>
	</rule>
...
\end{lstlisting}

\lstset{basicstyle=\footnotesize, frameround=fttt, numbers=none, language=XML, breaklines=false}
\begin{lstlisting}[frame=bt, caption=Kijk of er \'e\'en of meerdere velden niet zijn ingevuld, label=ex_rule_three]
...
	<rule>
		<condition>
			<op name="and">
				<event part-name="send" class="ButtonPressed" />
				<op name="or">
					<op name="equal">
						<property part-name="firstName" name="text" />
						<constant value="" />
					</op>
					<op name="equal">
						<property part-name="lastName" name="text" />
						<constant value="" />
					</op>
					...
				</op>
			</op>
		</condition>
		<action>
			<call name="Box.Show">
				<param>Alle velden zijn verplicht!!</param>
			</call>
		</action>
	</rule>
...
\end{lstlisting}

		\begin{figure}[h]
			\center
			\includegraphics[scale=.75]{images/waar_nietwaar.jpg}
			\caption{Checken of het invoerveld \texttt{firstName} niet leeg is}
			\label{third_op}
		\end{figure}

Regel 2 en 3 zijn noodzakelijk, ook al lijken ze sterk op elkaar. Het zou beter zijn als we deze twee regels konden combineren in \'e\'en regel. Op het eerste zicht zouden we de elementen \texttt{<when-true>} en \texttt{<when-false>} kunnen gebruiken. Om tot hetzelfde resultaat te komen, hebben we echter een extra test nodig in deze elementen. Volgens de specificatie lijkt dit mogelijk te zijn, maar de praktijk wijst zich anders uit. De UIML standaard moet dus eerst verder uitgebreid en/of aangepast worden. Een andere mogelijkheid is templates te gebruiken. We kunnen dan van een \texttt{<rule>} element een template maken omdat de twee regels enkel verschillen in het gebruik van ``and'' in plaats van ``or'', ``equal'' in plaats van ``notequal'' en ze geven elk een andere boodschap weer. Op deze manier kunnen we dit stukje UIML code hergebruiken. In listing \ref{aTemplate} is het voorbeeld herwerkt.


\lstset{basicstyle=\footnotesize, frameround=fttt, numbers=none, language=XML, breaklines=false}
\begin{lstlisting}[frame=bt, caption=Het gebruik van templates om de regels te combineren, label=aTemplate]
...
	<rule id="id1" source="#aCondition" how="replace">
		<template-parameters>
			<template-param id="outerOp">and</template-param>
			<template-param id="innerOp">notequal</template-param>
			<template-param id="text">Succesvol geregistreerd</template-param>
		</template-parameters>
	</rule>
	<rule id="id2" source="#aCondition" how="replace">
		<template-parameters>
			<template-param id="outerOp">or</template-param>
			<template-param id="innerOp">equal</template-param>
			<template-param id="text">Alle velden zijn verplicht!!</template-param>
		</template-parameters>
	</rule>
	<template id="aCondition">
		<d-template-parameters>
			<d-template-param>outerOp</d-template-param>
			<d-template-param>innerOp</d-template-param>
			<d-template-param>text</d-template-param>
		</d-template-parameters>
		<rule>
			<condition>
				<op name="and">
					<event part-name="send" class="ButtonPressed" />
					<op name="$outerOp">
						<op name="$innerOp">
							<property part-name="firstName" name="text" />
							<constant value="" />
						</op>
						<op name="$innerOp">
							<property part-name="lastName" name="text" />
							<constant value="" />
						</op>
						<op name="$innerOp">
							<property part-name="street" name="text" />
							<constant value="" />
						</op>
						<op name="$innerOp">
							<property part-name="number" name="text" />
							<constant value="" />
						</op>
						<op name="$innerOp">
							<property part-name="country" name="text" />
							<constant value="" />
						</op>
					</op>
				</op>
			</condition>
		</rule>
		<action>
			<call name="Box.Show">
				<param><template-param id="text" /></param>
			</call>
		</action>
	</template>
...
\end{lstlisting}