63 lines
2.5 KiB
TeX
63 lines
2.5 KiB
TeX
\chapter{A Tour of TFW}
|
|
|
|
The purpose of this chapter is to further detail the built-in components
|
|
provided by the framework.
|
|
As previously mentioned, these components are implemented as event handlers
|
|
running in the \texttt{solvable} Docker container and frontend
|
|
components written in Angular.
|
|
For instance the built-in code editor requires a frontend component and an event
|
|
handler to function properly, while the frontend component responsible for
|
|
drawing out and managing other components implement no
|
|
event handler.
|
|
|
|
In the Tutorial Framework most of the built-ins define APIs, which are TFW messages
|
|
that can be used to interact with them.
|
|
For example, to inject a command into the terminal one would use a message like this:
|
|
\begin{lstlisting}[captionpos=b,caption={An API Message Capable of Writing in the Terminal}]
|
|
{
|
|
"key": "shell",
|
|
"data":
|
|
{
|
|
"command": "write",
|
|
"value": "echo 'Hello TFW World!'\n"
|
|
}
|
|
}
|
|
\end{lstlisting}
|
|
Notice the \texttt{``\\n''} at the end of the command.
|
|
By including a newline character, we are also capable of executing commands in the
|
|
user's terminal.
|
|
Were this newline omitted, the command would only be written to the terminal
|
|
(but not automatically executed) for users to inspect and potentially execute themselves.
|
|
|
|
Some components emit or broadcast messages on specific events, for instance the
|
|
\texttt{FSMManagingEventHandler} broadcasts the following message on state transitions:
|
|
\begin{lstlisting}[captionpos=b,caption={An FSM Update message}]
|
|
{
|
|
"key": "fsm_update",
|
|
"data" :
|
|
{
|
|
"current_state": ...string...,
|
|
"valid_transitions": ...[array of {"trigger": ...string...} objects]...,
|
|
"in_accepted_state": ...boolean...,
|
|
"last_event": ...
|
|
object like
|
|
{
|
|
"from_state": ...string...,
|
|
"to_state": ...string...,
|
|
"trigger": ...string...,
|
|
"timestamp": ...unix timestamp...
|
|
}
|
|
...
|
|
}
|
|
}
|
|
\end{lstlisting}
|
|
As you can see this message contains loads of useful information regarding what is
|
|
exactly happening in the tutorial at a given point and can be used by client code
|
|
to make informed decisions based on this knowledge.
|
|
|
|
It is not the purpose of this text to provide a complete API documentation, so in the
|
|
following I am only going to explain possibilities provided by given components rather
|
|
than showcasing actual, real-life API messages.
|
|
|
|
\section{Messages component}
|