# How CT3 Works in a Browser

This page explains how Caplin’s services are implemented and displayed in a browser via a layout manager, and describes _Webcentric_ and _Presenter_; Caplin main layout managers. You may find it useful to read [How CT3 Fits Together](ct3-how-ct3-fits-together.md) if you have not already done so.

## Overview

![ct3_ov_diagram_inside_browser](../../images/ct3_ov_diagram_inside_browser.png)

Once the homepage is fully loaded, the app is initialised by JavaScript code. There will be a single "main" class (the name of which can be anything you choose) that is responsible for bootstrapping the app. This class will:

* Create instances of the service implementations required by the app.
* Add these service instances to the ServiceRegistry.
* Perform any other required initialisation.
* Create a layout manager, instructing it to draw the app on the screen.

The layout manager is responsible for managing and arranging a set of "display component" instances on the screen. _Caplin Trader_ provides both [_Webcentric_](webcentric/index.md) and [_Presenter_](presenter/index.md) as layout managers. Layout managers retrieve instances of components from the _Component Service_, which is itself accessed via the _Service Registry_.

## Webcentric

When [_Webcentric_](webcentric/index.md) starts, it retrieves an XML-based configuration file from the server. It uses this information to configure itself, creating a menu structure and an area where a set of "layouts" is displayed. The information for each layout is held in an XML document, which is stored in a relational database on the server. _Webcentric_ makes a series of requests to a servlet to retrieve the set of layouts for the current user. Screen layouts are displayed within a tabbed container, with only a single layout being visible at any one time. The user can change and copy their layouts, saving them back to the database.

## Presenter

[_Presenter_](presenter/index.md) allows you to build an app by laying it out in standard HTML/CSS, and then embedding Caplin components by tying them to the DOM elements with special _data-bind_ attributes, like this one:

```html
<div data-bind='component:grid'> ... </div>
```

_Presenter_ supports nested HTML templates that can also be used to display lists of objects. You can therefore create apps ranging from a single grid in a web-page to a complex multi-view system, with menus and modal dialogs. _Presenter_ can be used to create Caplin components as well as manage them, so it’s also often used to build trade tickets that are embedded in _Webcentric_ panels and dialogs.

[Learn about Services in _Caplin Trader 3_...](ct3-services-in-caplin-trader-3.md)