Another useful feature is a bunch of pre-designed layouts and dynamic switching between them.
To learn more about the framework see the [baseimage-tutorial-framework](https://github.com/avatao-content/baseimage-tutorial-framework) repo.
For more on creating, building and running TFW-based tutorials (not just the frontend) consult [test-tutorial-framework](https://github.com/avatao-content/test-tutorial-framework).
These APIs are documented in the `baseimage-tutorial-framework` repository as docstrings in the [lib/tfw/components](https://github.com/avatao-content/baseimage-tutorial-framework/tree/master/lib/tfw/components) directory (this is where the event handler implementations live).
## Configuration
Most of the time it is not necessary to edit the source code of our components as you can easily customise their behaviour through the `src/app/config.ts` config file.
The most notable setting available in this file is the enabling of different layouts the user and you can switch between.
Layouts describe which components are visible and where they are on the screen.
This essentially provides a fully functional terminal session in the browser.
You can write to it (and thus execute commands) and read what commands were executed in `bash` using the API exposed by the `TerminalEventHandler` instance.
The IDE automatically saves any changes made to the files (the interval is configurable).
It connects to an `IdeEventHandler` instance on the backend which handles the reading/writing of files and the selection of directories as well.
It is also capable of dynamically displaying any changes made to these files from the terminal or any other process (this means that you always see a live view of the files).
### Messages
This is a simple chat-like component you can use to instruct, help and guide your users.
It displays messages sent to the frontend with the key `message.`
In some of our layouts there is space allocated for a custom webservice or Angular component.
This allows you to embed your own website in the TFW frontend.
There are two ways to do this:
If you'd like to avoid Angular you can run your own webserver on the backend and use our dashboard's `iframe`ing capabilities to include it.
To enable this feature you have to edit `src/app/config.ts` and set `config.dashboard.iframeUrl` to the route your server is listening on.
Note that setting up a custom server is documented in the [test-tutorial-framework](https://github.com/avatao-content/test-tutorial-framework) repo.
Alternatively you can create your own Angular component(s) in `src/app/web`.
Just rewrite `WebComponent` as you please or even nest more components into it if needed.
Note that you must set `config.dashboard.iframeUrl` to an empty string(`''`) to enable the displaying of `WebComponent` (this also disables `iframe`ing).
Edit `src/app/config.ts` to change the layout settings.
Set `config.dashboard.currentLayout` to the layout you want to display by default.
You can specify the layouts you allow in `config.dashboard.enabledLayouts` (the user can switch between them using a sidebar).
This list must include the value of `currentLayout`.
Available layouts– with self explaining names:
-`terminal-ide-web`
-`terminal-ide-vertical`
-`erminal-ide-horizontal`
-`terminal-only`
-`terminal-web`
-`ide-web-vertical`
-`ide-only`
-`web-only`
It also exposes a frontend API to dynamically change layouts any time using a message format as such (note that the layout you switch to must be enabled):