Terminada interfaz web

5 files changed, 154 insertions, 12 deletions

diff --git a/img/browser-post.png b/img/browser-post.png
new file mode 100644
index 0000000..b45eab5
--- /dev/null
+++ b/img/browser-post.png
diff --git a/img/browser-pre.png b/img/browser-pre.png
new file mode 100644
index 0000000..f5849a6
--- /dev/null
+++ b/img/browser-pre.png
diff --git a/img/editor.png b/img/editor.png
new file mode 100644
index 0000000..7bdfa46
--- /dev/null
+++ b/img/editor.png
diff --git a/img/results.png b/img/results.png
new file mode 100644
index 0000000..c28f0d0
--- /dev/null
+++ b/img/results.png
diff --git a/memoria.tex b/memoria.tex
index 92db976..e88623a 100755
--- a/memoria.tex
+++ b/memoria.tex
@@ -6,7 +6,7 @@
 \usepackage{mathtools} \usepackage{listings} \usepackage{syntax}
 \usepackage[compact,small]{titlesec}\usepackage[usenames,dvipsnames]{xcolor}
 \usepackage[pagebackref,colorlinks=true,linkcolor=black,urlcolor=black,citecolor=blue]{hyperref}
-\usepackage{perpage}
+\usepackage{perpage}, \usepackage{subcaption}
 
 \usepackage{tikz}
 \usepackage{lib/minted}
@@ -212,7 +212,7 @@ un motor de resolución de \textbf{lógica de Hoare Relacional Probabilística}
 (ver sección \ref{sec:juicios}) \cite{BartheGB09}. EasyCrypt es un proyecto de
 software libre, distribuido bajo los términos de la licencia CeCILL-B, y su
 código fuente está accesible desde la página del
-proyecto\footnote{\url{https://www.easycrypt.info/}}.
+proyecto\footnote{\url{https://www.easycrypt.info}}.
 
 EasyCrypt funciona como un intérprete de un lenguaje de propósito general y de
 forma interactiva: cuando se le proporciona un fichero fuente a evaluar, lo
@@ -1189,13 +1189,45 @@ usuario.
 Como se ha mencionado anteriormente, el cliente podría clasificarse como
 <<pesado>>, ya que contiene más código y tiene más carga de trabajo que el
 servidor a la hora de realizar la tarea fundamental de toda la interfaz web: la
-edición y evaluación de código. El cliente se carga desde el servidor web al
-entrar en la página principal (``index'') con la sesión iniciada, y
+edición y evaluación de código. El cliente (<<index.js>>) se carga desde el servidor web al
+entrar en la página principal con la sesión iniciada, y
 posteriormente sólo se establece comunicación con el servidor web para
 intercambiar datos (actualización del contenido de un fichero, por ejemplo).
 
+Para evitar tener que estar escaneando el DOM constantemente para conocer la
+situación actual del sistema, se ha optado por separar la lógica de la
+presentación. Para gestionar la lógica del cliente se ha definido un objeto
+JavaScript llamado <<Workspace>> que contiene toda la funcionalidad del editor y
+su estado interno. De este modo, cualquier modificación en la interfaz altera el
+estado del Workspace y éste, a su vez, se encarga de reflejar los cambios en el
+DOM. Éste es el esquema de atributos (estado) que almacena el Workspace:
+
+\begin{code}
+  \begin{minted}{javascript}
+var Workspace = function() {
+  this.ui       = null;
+  this.projects = [];
+  this.tabs     = [];
+  this.active   = null;
+  this.editor   = null;
+
+  this.ui = {};
+  this.ui.treeview = $('#projects');
+  this.ui.contents = $('#contents');
+  this.ui.tabctl   = $('#tabs');
+  this.ui.editor   = $('#editor');
+}
+
+ws = new Workspace();
+  \end{minted}
+  \caption{Workspace (index.js)}
+\end{code}
+
+Cabe destacar la presencia del atributo <<Workspace.ui>>, que contiene
+referencias a los nodos DOM con los que se modifica la parte visible del editor.
+
 A continuación veremos los pasos que se han realizado para abordar la
-implementación de este componente, partiendo del diseño de la figura
+implementación del cliente, partiendo del diseño de la figura
 \ref{fig:prototype}.
 
 \subsection{Colocación de elementos}
@@ -1209,20 +1241,124 @@ empieza definiendo una serie de filas que se apilarán una sobre la otra. Dentro
 de cada fila debe haber una o varias columnas, y a cada una de ellas se le
 asigna un porcentaje de la anchura de la fila contenedora. Por último, las
 columnas pueden contener una o más filas para seguir asignando espacio cada vez
-con más precisión.
+con más nivel de detalle.
 
-TODO
+Con el sistema de rejillas de Bootstrap tenemos ya la colocación básica de los
+elementos de acuerdo al diseño de la figura \ref{fig:prototype}. A continuación
+pasamos a implementar los otros tres integrantes fundamentales de la interfaz
+web: el navegador de ficheros, la edición de código y la presentación de
+resultados.
+
+\subsection{Navegador de ficheros}
+\label{sec:naveg-de-fich}
+
+El navegador de ficheros se ha implementado usando, de nuevo, el sistema de
+rejillas de Bootstrap. Cada entrada (proyecto, fichero) es una fila y se usan
+columnas para colocar el texto y los botones (desplegar proyecto, crear/eliminar
+fichero). Al hacer click en el botón de desplegar proyecto se muestran los
+ficheros que contiene, como se ve en la figura \ref{fig:browser}.
+
+\begin{figure}[h]
+  \centering
+  \begin{subfigure}{.5\textwidth}
+    \centering
+    \includegraphics[width=.5\linewidth]{img/browser-pre.png}
+    \caption{Proyectos plegados}
+    \label{fig:browser-pre}
+  \end{subfigure}%
+  \begin{subfigure}{.5\textwidth}
+    \centering
+    \includegraphics[width=.5\linewidth]{img/browser-post.png}
+    \caption{Proyectos 1 y 3 desplegados}
+    \label{fig:browser-post}
+  \end{subfigure}
+  \caption{Navegador de ficheros}
+  \label{fig:browser}
+\end{figure}
+
+La lista de proyectos y su contenido se obtiene accediendo mediante GET a la URI
+<</projects>>. Los resultados (que viajan en formato JSON) se almacenan en el
+atributo <<projects>> del Workspace, y posteriormente se muestran en la
+interfaz. Este proceso se repite siempre que el usuario crea o elimina un
+fichero o un proyecto, para garantizar la sincronización de los datos.
+
+\subsection{Editor de código}
+\label{sec:editor-de-codigo}
+
+Cuando el usuario hace click en el nombre de un fichero se realizan varias
+tareas:
+
+\begin{itemize}
+\item Se busca el objeto <<File>> correspondiente al fichero
+\item Se crea una nueva pestaña usando el
+  widget\footnote{\url{http://jqueryui.com/tabs/}} de la biblioteca jQuery UI
+\item A la nueva pestaña se le asigna el fichero, una nueva sesión de editor
+  (para guardar la posición del cursor, las modificaciones no guardadas, etc.),
+  un título para mostrar y un enlace a su elemento correspondiente en el DOM por
+  comodidad
+\item Se \textbf{activa} la pestaña, lo que significa que el editor pasa a
+  mostrar el contenido del fichero
+\end{itemize}
+
+El comportamiento en casos similares es el que cabría esperar. Por ejemplo, en
+caso de que el fichero ya haya sido abierto, no se crea una nueva pestaña pero
+sí se activa para mostrar su contenido.
+
+El editor de código como tal es una instancia de Ace incrustada bajo el widget
+de pestañas dentro del hueco asignado por la columna de Bootstrap
+correspondiente. Tras su inicialización, lo único para lo que se accede a él es
+para modificar la sesión activa cuando se cambia de pestaña. El conjunto de
+pestañas y editor de código se muestra en la figura \ref{fig:editor}.
+
+\begin{figure}[H]
+  \centering
+  \includegraphics[width=0.8\textwidth]{img/editor.png}
+  \caption{Pestañas y editor de código}
+  \label{fig:editor}
+\end{figure}
+
+El coloreado sintáctico se ha tenido que definir a mano, ya que evidentemente
+Ace no incluye por defecto soporte para el coloreado de EasyCrypt. % TODO anexo?
+
+% TODO Ace soporta ... (guardar, ejecutar, colorear)
+
+\subsection{Presentación de resultados}
+\label{sec:pres-de-result}
+
+El mecanismo de evaluación se basa en <<pasos>>: el usuario pulsa una
+combinación de teclas (actualmente Ctrl-Mayus-n, pero se puede modificar) para
+que el editor busque el siguiente punto <<.>>, que es el caracter que EasyCrypt
+usa para separar sentencias. La sentencia se envía entonces mediante tecnología
+WebSockets al servidor EasyCrypt (sección \ref{sec:impl-serv-easycrypt}). Una
+función asíncrona se encarga de mostrar a la derecha del editor (figura
+\ref{fig:results}) todos los resultados que vayan llegando (lo cual permite, por
+ejemplo, seguir enviando sentencias aunque una de ellas no haya terminado de
+evaluarse).
+
+\begin{figure}[H]
+  \centering
+  \includegraphics[width=0.6\textwidth]{img/results.png}
+  \caption{Presentación de resultados}
+  \label{fig:results}
+\end{figure}
 
 \section{Implementación: servidor EasyCrypt}
 \label{sec:impl-serv-easycrypt}
 
-TODO
+El tercer y último componente del sistema es el servidor EasyCrypt, encargado de
+recibir sentencias mediante WebSockets, evaluarlas y reenviar los resultados.
 
-\emptypage
-\chapter{RESULTADOS Y CONCLUSIONES}
-\label{cha:result-y-concl}
+Para esta tarea se ha utilizado un sencillo programa intermediario escrito en
+Python. El programa simplemente abre un puerto y queda a la espera de crear
+conexiones WebSockets en el mismo (todo esto lo implementa la biblioteca
+Tornado).
 
-TODO
+Al abrirse una conexión se ejecuta una nueva instancia de EasyCrypt y se
+mantiene el acceso a sus entrada y salida estándares a través de objetos Stream,
+de nuevo proporcionados por Tornado. El programa asigna una función asíncrona
+<<callback>> que responde al evento lanzado al haber datos disponibles ya sea en
+la salida estándar de EasyCrypt o en el WebSocket, y los redirige al otro
+extremo (WebSocket o entrada de EasyCrypt, respectivamente).
 
 \emptypage
 \chapter{CONTRIBUCIONES}
@@ -1231,6 +1367,12 @@ TODO
 TODO
 
 \emptypage
+\chapter{RESULTADOS Y CONCLUSIONES}
+\label{cha:result-y-concl}
+
+TODO
+
+\emptypage
 \chapter{ANEXOS}
 \label{cha:anexos}