\chapter{UIDL - User Interface Description Language}

\section{Inleiding}

Tegenwoordig bestaan er verschillende talen om een user interface (UI) te programmeren. Enkele voorbeelden hiervan zijn System Windows Forms (SWF), de grafische UI toolkit van Microsoft\footnote{http://www.microsoft.com} die ge\"integreerd is met het .NET platform; Java Swing, de grafische UI toolkit voor het Java platform; GTK , Qt, enzovoorts. Het gebruik van deze toolkits brengt echter enkele problemen met zich mee. Ten eerste gebruiken ze hun eigen benamingen. Als we een label willen aanmaken, moeten we in SWF gebruik maken van de klasse \texttt{System.Windows.Forms.Label}, terwijl Java Swing hiervoor de klasse \texttt{javax.swing.JLabel} heeft (zie figuur \ref{toolkits}). Het gebruik van verschillende benamingen slaat niet enkel op klasses, maar ook op functies. Ten tweede gebruiken ze verschillende code structuren. Een voorbeeld hiervan is het zorgen dat slechts \'e\'en thread aan een variabele kan. In SWF wordt gebruikt gemaakt van het sleutelwoord \texttt{lock}, in Java volstaat het om gewoon het sleutelwoord \texttt{synchronized} te gebruiken bij het aanmaken van de functie. In listing \ref{sync_example} zien we een voorbeeld. De functie \texttt{increase()} verhoogt de waarde van een teller.

		\begin{figure}[h]
			\center
			\includegraphics[scale=0.75]{images/toolkits.jpg}
			\caption{Verschillende benamingen voor hetzelfde widget}
			\label{toolkits}
		\end{figure}

\lstset{basicstyle=\footnotesize, frameround=fttt, numbers=left, numberstyle=\tiny, language=XML}
\begin{lstlisting}[float, frame=bt, caption=Gesynchroniseerde toegang tot een variabele, label=sync_example]
[SWF => C#]
public void increase ()
{
	lock(counter)
	{
		counter++;
	}
}

[Java Swing => Java]
public synchronized void increase ()
{
	counter++;
}
\end{lstlisting}
		
		\begin{figure}[h]
			\center
			\includegraphics[scale=0.5]{images/xml_mapping.png}
			\caption{XML mapping van \textit{button} op \textit{System.Windows.Forms.Button}}
			\label{xml_mapping}
		\end{figure}
		
Het is dus voor de UI ontwerper moeilijk om verschillende toolkits te gebruiken voor elk platform.

\section{UIDL}
Sinds de opkomst van mobiele toestellen is de nood gekomen voor een meer algemene methode voor het maken van UI's. Een UIDL of \textit{User Interface Description Language} wordt gebruikt om een UI te beschrijven. Het is gebonden aan een specifieke UI toolkit, zoals GladeXML of XAML die later zullen uitgelegd worden. Het beschrijven van de UI kan gebeuren in bijvoorbeeld XML. Een XML tag kan dan worden gemapt op een UI element (zie figuur \ref{xml_mapping}), waardoor er minder programmeerkennis nodig is om een UI te ontwerpen.

\subsection{GladeXML}

GladeXML is een formaat dat door het programma Glade Interface Designer\footnote{http://glade.gnome.org/} wordt gebruikt voor het voorstellen van UI's. In dit XML-formaat wordt gebruikt gemaakt van de volgende tags:
\begin{description}
	\item[\texttt{$<$widget$>$}] om een bepaald widget voor te stellen, bijvoorbeeld \texttt{$<$widget class=``GtkWindow'' id=``MainWindow''$>$\ldots$<$/widget$>$} stelt een window voor met id 'MainWindow'. Om properties te veranderen
	\item[\texttt{$<$property$>$}] om een property van een widget te wijzigen, bijvoorbeeld \texttt{$<$property name=``visible''$>$True$<$/property$>$} om een widget zichtbaar te maken
	\item[\texttt{$<$child$>$}] om kinderen van een widget te defini\"eren, bijvoorbeeld \texttt{$<$child$>$\ldots$<$/child$>$}
	\item[\texttt{$<$signal$>$}] om een event te koppelen, bijvoorbeeld \texttt{$<$signal name=``clicked'' handler=``button\_clicked'' /$>$} zal het 'clicked' event koppelen aan de functie 'button\_clicked' voor het widget waarin deze tag gedefinieerd is.
\end{description}

\subsection{XAML}
XAML \cite{msdn_xaml} of \textit{eXtensible Application Markup Language} is een declaratieve, XML-gebaseerde, taal dat het ontwikkelen van UI's vergemakkelijkt. Het ondersteunt zowel vector als bitmap graphics, multimedia bestanden en rich text. XAML is een deel van het .NET 3.0\cite{dotnet_3_0} framework van Microsoft en wordt vooral gebruik in combinatie met Windows Presentation Foundation (WPF), voor het beschrijven van UI elementen, events, data binding, \ldots. WPF is het UI subsysteem in Windows Vista\footnote{http://www.microsoft.com/netherlands/windows/products/windowsvista/default.mspx}, het nieuwste besturingssysteem van Microsoft. Het haalt zijn voordeel uit de ge\"avanceerde 3D graphics capaciteiten in moderne machines. Een voorbeeld hiervan is de ``Aero'' skin die een transparant, op glas gebaseerde window randen geeft\cite{computer_encyclopedia_wpf}. Momenteel is XAML enkel beschikbaar voor het Windows platform. Een voorbeeld hoe je XAML programmeert, is te vinden in listing \ref{xaml_demo}, waarin eerst een grid wordt gemaakt waarin later enkele widgets worden geplaatst. Deze grid definieert de achtergrondkleur en de hoogte voor iedere rij (100px). Hierna wordt er een textbox en een knop (button) in deze grid geplaatst. Het resultaat is te vinden in figuur \ref{xaml_demo_result}\cite{gvangool}.

XAML heeft zogenaamde 'Property Triggers' ingebouwd die toestaan om zonder logische code, bepaalde gebeurtenissen te beschrijven samen met de actie die moet worden uitgevoerd als deze gebeurtenis zich voordoet. In listing \ref{xaml_rectangles} is te zien dat er een rechthoek wordt getekend op het scherm. Aan deze rechthoek worden enkele propertytriggers gekoppeld. Wanneer er met de muis over de rechthoek wordt bewogen, wordt de rechthoek opgevuld met een groene kleur en wordt de zichtbaarheid op 100\% gezet. Wanneer de rechthoek niet langer actief is, worden zowel de rand als de rechthoek zelf grijs ingekleurd. Het resultaat van de verschillende stappen is te vinden in figuur \ref{xaml_rectangles_result}. Events kunnen gemakkelijk gekoppeld worden. Iedere event wordt gezien als een attribuut waaraan de functie kan gekoppeld worden die moet worden opgegeroepen wanneer dit event plaatsvindt. Stel dat we een object van het type \texttt{Canvas} hebben en we zijn ge\"interesseerd in het event \texttt{Loaded}, dan volstaat het om in de code te zetten: \texttt{<Canvas Loaded="CanvasIsLoaded"></Canvas>}.

\lstset{basicstyle=\footnotesize, frameround=fttt, numbers=left, numberstyle=\tiny, language=XML}
\begin{lstlisting}[float, frame=bt, caption=XAML Demo, label=xaml_demo]
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
	xmlns:sys="clr-namespace:System;assembly=mscorlib" 
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
	<Window.Title>Demo</Window.Title>
	<Window.Height>200</Window.Height>
	<Window.Width>200</Window.Width>
	
	<Grid Background="LightBlue">
		<Grid.ColumnDefinitions>
			<ColumnDefinition />
		</Grid.ColumnDefinitions>
		<Grid.RowDefinitions>
			<RowDefinition Height="100" />
			<RowDefinition>
				<RowDefinition.Height>100</RowDefinition.Height>
			</RowDefinition>
		</Grid.RowDefinitions>
		
		<TextBox Grid.Column="0" Grid.Row="1">Hello world!</TextBox>
		<Button Grid.Column="0" Grid.Row="0">Click me!</Button>
	</Grid>
</Window>
\end{lstlisting}
		
		\begin{figure}[h]
			\center
			\includegraphics[scale=0.75]{images/demo_for_ingo.jpg}
			\caption{Resultaat van listing \ref{xaml_demo}}
			\label{xaml_demo_result}
		\end{figure}
		
\lstset{basicstyle=\footnotesize, frameround=fttt, numbers=left, numberstyle=\tiny, language=XML}
\begin{lstlisting}[float, frame=bt, caption=XAML Mouse Over Voorbeeld, label=xaml_rectangles]
<Style>
  <Rectangle Fill="Gold" Stroke="Red" StrokeThickness="3" Width="150"
      Height="100" Margin="10" RadiusX="10" RadiusY="10" Opacity="0.25"/>
  <Style.VisualTriggers>
    <PropertyTrigger Property="IsMouseOver" Value="true">
      <Set PropertyPath="Fill" Value="green"/>
      <Set PropertyPath="Opacity" Value="1.0"/>
    </PropertyTrigger>
    <PropertyTrigger Property="IsEnabled" Value="false">
      <Set PropertyPath="Fill" Value="gray"/>
      <Set PropertyPath="Stroke" Value="gray"/>
    </PropertyTrigger>
  </Style.VisualTriggers>
</Style>
\end{lstlisting}
		
		\begin{figure}[h]
			\center
			\includegraphics[scale=0.75]{images/SimpleInteractive.JPG}
			\caption{Resultaat van listing \ref{xaml_rectangles}}
			\label{xaml_rectangles_result}
		\end{figure}

\section{HLUIDL}

Een HLUIDL of \textit{High-level User Interface Description Language} gaat nog een stap verder. Zoals de naam het al zegt is dit een taal op een hoger niveau dan een UIDL. Het biedt de mogelijkheid om een apparaat-onafhankelijke en abstracte beschrijving van een gebruikersinterface te cre\"eeren met een taal die gemakkelijk te gebruiken is in heterogene omgevingen. Een heteregone omgeving wil zeggen dat er gebruik gemaakt wordt van verschillende soorten hard- en software van verschillende producenten. De extra laag die HLUIDL voorziet zorgt ervoor dat er met een document een applicatie kan gerenderd worden die platform- en toolkit-onafhankelijk wordt. Applicaties kunnen dus met min of meer hetzelfde document op verschillende apparaten draaien (zie figuur \ref{multiple}) zoals bijvoorbeeld een PDA, desktop computer, smartphone, \ldots. 

		\begin{figure}[h]
			\center
			\includegraphics[scale=0.75]{images/multiple.jpg}
			\caption{Verschillende apparaten}
			\label{multiple}
		\end{figure}

Met de kennis van enkel de syntax van een HLUIDL kan je programma's ontwikkelen die gemakkelijk uit te breiden en herbruikbaar zijn op verschillende platformen. Ondanks dat verschillende HLUIDs geen gebruik maken van XML, is XML toch de meest aangewezen taal voor het beschrijven van HLUIDs \cite{luyten_phd}. Daar XML een declaratieve taal is, kan het ook gebruikt worden door niet-programmeurs of occasionele gebruikers \cite{nathalie_souchon}.

\subsection{XForms}

XForms is een XML formaat dat origineel bedoeld was om HTML\footnote{HyperText Markup Language} en XHTML\footnote{eXtensible HyperText Markup Language} te vervangen. Het kan echter ook op een stand-alone manier gebruik worden om UI's te beschrijven. In tegenstelling tot HTML hebben de ontwerpers van XForms zich gebaseerd op het Model-View-Controller patroon. Dit is een patroon dat gebruikt wordt in software engineering. De data wordt gescheiden van de UI, zodat veranderingen aan de UI geen effect zullen hebben op de afhandeling van de data en dat data gere\"organiseerd kan worden zonder de UI te veranderen\cite{wiki_mvc}. In figuur \ref{mvc} zien we een schematische voorstelling van het Model-View-Controller patroon.
		
		\begin{figure}[h]
			\center
			\includegraphics[scale=1]{images/mvc.png}
			\caption{Model-View-Controller patroon\cite{wiki_mvc}}
			\label{mvc}
		\end{figure}

Door het gebruik van het Model-View-Controller patroon wordt het mogelijk om formulieren, gemaakt met XForms, te hergebruiken omdat deze niet afhankelijk zijn van de pagina waarop ze gebruikt worden. Bovendien is XForms niet langer beperkt tot XHTML, het kan ge\"integreerd worden in iedere markup language. Een voorbeeld van XForms is te vinden in listing \ref{xforms_card}. In dit voorbeeld zien we dat er een model wordt gemaakt in de tag \texttt{$<$head$>$}. Dit is een soort van template, die later gebruikt kan worden in de body. \texttt{$<$xforms:input ref="method"$>$} komt overeen met \texttt{$<$method/$>$}. \texttt{input} wil zeggen dat dit item als een textbox moet worden weergegeven (zie figuur \ref{xforms_card_result}). De tag \texttt{xforms:label} is het label dat voor de textbox komt te staan.

XForms laat het defini\"eren van regels toe\cite{xforms_site_tests}, zo wordt bepaald hoe een formulier zich gedraagd zonder de nood voor scripting. De types van regels die gebruikt kunnen worden zijn verdeeld in statische en dynamische eigenschappen.

\lstset{basicstyle=\footnotesize, frameround=fttt, numbers=left, numberstyle=\tiny, language=XML, breaklines=true}
\begin{lstlisting}[float, frame=bt, caption=XForms Card Voorbeeld, label=xforms_card]
<html>
	<head>
		<title>Pay Info</title>
		<xforms:model>
			<xforms:instance>
				<ecommerce xmlns="">
					<method/>
					<number/>
					<expiry/>
				</ecommerce>
			</xforms:instance>
			<xforms:submission action="http://example.com/submit" method="post" id="submit" includenamespaceprefixes=""/>
		</xforms:model>
	</head>
	<body>
		<xforms:select1 ref="method">
			<xforms:label>Select Payment Method:</xforms:label>
			<xforms:item>
				<xforms:label>Cash</xforms:label>
				<xforms:value>cash</xforms:value>
			</xforms:item>
			<xforms:item>
				<xforms:label>Credit</xforms:label>
				<xforms:value>cc</xforms:value>
			</xforms:item>
		</xforms:select1>
		<xforms:input ref="number">
			<xforms:label>Credit Card Number:</xforms:label>
		</xforms:input>
		<xforms:inputref="expiry">
			<xforms:label>Expiration Date:</xforms:label>
		</xforms:input>
		<xforms:submit submission="submit">
			<xforms:label>Submit</xforms:label>
		</xforms:submit>
	</body>
</html>
\end{lstlisting}
		
		\begin{figure}[h]
			\center
			\includegraphics[scale=1]{images/xforms_card.JPG}
			\caption{Resultaat van listing \ref{xforms_card}}
			\label{xforms_card_result}
		\end{figure}
		
\subsection{UIML}

\textit{User Interface Markup Language} (UIML) laat toe om op een abstracte manier UI's te beschrijven. De op XML gebaseerde beschrijving van de UI kan gemapt worden op \'e\'en of meerdere UI toolkits. Het maakt geen gebruik van specieke elementen zoals \texttt{<button>}, maar gebruikt het generieke element \texttt{<part>} dat op eender welk widget gemapt kan worden. Meer hierover in hoofdstuk \ref{uiml}.

\subsection{XUL}

\textit{XML User interface Language} (XUL) is ontwikkeld voor gebruik in het Mozilla\footnote{http://www.mozilla.org} project. Deze UI taal is gebaseerd op XML en laat toe om applicaties te ontwikkelen die kunnen draaien op meerdere platformen. XUL hangt af van de huidige web standaarden en technologi\"en zoals CSS, JavaScript, en DOM. Hierdoor kan XUL gemakkelijk worden aangeleerd door mensen die al wat ervaring hebben in web-programmeren en -design\cite{wiki_xul}. Zoals in HTML kan je in XUL een UI cre\"eren door middel van een markup language. Bovendien heb je \textit{Cascading Style Sheets} (CSS) om de looks en JavaScript om het gedrag te bepalen. XUL biedt in tegenstelling tot HTML een krachtige set van UI widgets om menu's, toolbars, \ldots te cre\"eeren\cite{xul_planet}.
Dit betekent dat je niet meer moet gaan zoeken naar code of een groot stuk JavaScript code moet invoegen om enkel een pop-up menu te tonen. Bovendien zijn de elementen zo ontworpen dat ze de `look and feel' hebben van een native applicatie (ondersteuning van Windows XP en MaxOS X), maar je kan CSS gebruiken om de applicatie een eigen look te geven\cite{xul_planet}. Een voorbeeld\footnote{http://www.xulplanet.com/testcases/example-viewer.xul} is te vinden in listing \ref{xul_example}. Dit voorbeeld itereert over een aantal diersoorten.  Voor iedere soort wordt een menulijst gemaakt. We zien dat er twee regels worden gebruikt. De eerste regel zorgt ervoor dat er een \texttt{hbox} wordt aangemaakt met een label. De tweede regel zorgt ervoor dat ieder dier opgehaald wordt en als een lijst wordt weergeven in de parent \texttt{hbox}, die aangemaakt is in de eerste regel. Omdat de template builder automatisch recursie doet, zal de tweede regel enkel effect hebben op de binnenste items. De bouw van de tweede regel vertoont veel gelijkenis met de bouw van een regel in UIML (meer informatie is te vinden in sectie \ref{behavior}). Het resultaat van het voorbeeld is te vinden in figuur \ref{xul_result}.

\lstset{basicstyle=\footnotesize, frameround=fttt, numbers=left, numberstyle=\tiny, language=XML, breaklines=true}
\begin{lstlisting}[float, frame=bt, caption=XUL Voorbeeld, label=xul_example]
<vbox datasources="animals.rdf" ref="http://www.some-fictitious-zoo.com/all-animals">
  <template>
    <rule iscontainer="true">
      <hbox align="left" uri="rdf:*">
        <label value="rdf:http://www.some-fictitious-zoo.com/rdf#name"/>
      </hbox>
    </rule>
    <rule>
      <conditions>
          <content uri="?uri"/>
          <member container="?uri" child="?animal"/>
          <triple subject="?animal"
                  predicate="http://www.some-fictitious-zoo.com/rdf#name"
                  object="?name"/>
      </conditions>
      <action>
        <menulist>
          <menupopup>
            <menuitem uri="?animal" label="?name"/>
          </menupopup>
        </menulist>
      </action>
    </rule>
  </template>
</vbox>
\end{lstlisting}

		\begin{figure}[h]
			\center
			\includegraphics[scale=.65]{images/xul_results.png}
			\caption{Resultaat van listing \ref{xul_example}}
			\label{xul_result}
		\end{figure}
		
\section{Conclusie}

We kunnen concluderen dat UIDL een makkelijke manier is voor het beschrijven van een UI zonder dat een ontwikkelaar veel programmeerkennis moet hebben van een UI toolkit. UIDL voldoet echter niet wanneer de ontwikkelaar te maken heeft met meerdere toolkits. Hiervoor is het gebruik van een HLUIDL een betere optie. In tabel \ref{conclusion_toolkits} is een samenvatting te vinden van de UI talen die besproken zijn.

\begin{sidewaystable}[p]
	\centering
	\begin{tabular}{rlll}
		\hline
					& \textbf{Type} 	 & \textbf{Abstractie} 											& \textbf{Condities} \\
		\hline
		XAML 		& UIDL 	 & Specifieke widgets  									& PropertyTriggers \\
					& 		 & (\texttt{<TextBox>}, \texttt{<Grid>}) 				& attribute=``Functie" (bv Loaded=``PageLoaded") \\
		\hline
		UIML 		& HLUIDL & Generieke elementen  									& Condition / action  \\
					& 		 & (\texttt{<part>})										& (\texttt{<op>}, \texttt{<equal>}, \texttt{<event>})\\
		\hline
		GladeXML 	& UIDL	 & Specieke elementen									 & Signal koppelen aan functie \\
					& 		 & (\texttt{<widget class='Button'>} mapt op Gtk.Button) & \\
		\hline
		XUL 		& HLUIDL & Specifieke widgets  									& Condition / action \\
					& 		 & (\texttt{<label>}, \texttt{<menuitem>}) 				& \\
		\hline
		XForms 		& HLUIDL & Specifieke widgets  									& Triggers koppelen \\
					& 		 & (\texttt{<xforms:label>}, \texttt{<xforms:input>}) 	& \\
		\hline
	\end{tabular}
	\caption{Overzicht UI talen}
	\label{conclusion_toolkits}
\end{sidewaystable}