> For the complete documentation index, see [llms.txt](https://docs.wirebootstrap.com/wirebootstrap/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.wirebootstrap.com/wirebootstrap/working-with-themes/pages.md).

# Pages

The `\pages` directory contains the HTML source and TypeScript code-behind for theme projects.

## HTML

![Project Pages Directory](/files/OUOCuqNZioyUKozI5xP5)

The HTML pages are in this directory's root. These pages provide samples for the components available in the theme running in WireBootstrap.

## Code-Behind

The code-behind for a page is stored in a subdirectory in the `code` directory with the same name as the page.  The code-behind for a page consists of a `PageController` and `PageData` class file.

![Code-behind for the Bootstrap Select Example](/files/6cCdcda1aGT3TXe4bOJ7)

### Modules

Code-behind files are [ES6 modules](https://www.typescriptlang.org/docs/handbook/2/modules.html).

### Data

Each page contains a dedicated class that contains all the data concerns for the page.  By convention, this page is called `[page].data.ts`.

The following is an excerpt from `filters-select.data.ts` showing the configuration for the dataset used with the Bootstrap Select component on the `filters-select.html`page.

```javascript
public dsProducts = new wire.data.DataSet({

    // use the sample data source
    Source: sampleDataSource,

    // select top 10 distinct products
    Query: wire.data.select("Product").distinct().top(10),

    // turn off event listening for filters
    Events: false

});
```

### Controller

Page controllers allow interaction between the DOM elements on the HTML page and the code-behind for the page.  This includes features such as binding components and calling methods on the controller from DOM elements.  By convention, page controllers are called `[page].controller.ts`.

In the continuing example here, the controller for the `filters-select.html`page is called `filters-select.controller.ts`.

#### Initialization

When a page loads, the `init` method is called to run any initialization needed for the page.  This initialization often includes binding components with data.

#### Bindings

The following binds the Bootstrap Select component to a DOM element with an id of `select` to a dataset defined in the page data class illustrated above called `dsProducts`.  

```javascript
const select = new wire.bs.select().render("#select", {
    data: this.data.dsProducts,
    datamap: { id: "Product", label: "Product"},           
});
```

#### Methods

To call a public method on a page controller from the DOM, call the method on the `page` object.

Consider the following method on a controller.  

```javascript
sayHello() {
    wire.ui.MessageDialog("Hello");
}
```

To call this method from inside the DOM, use the `page` reference.

```markup
<button ... onclick="page.sayHello()">Say Hello</button>
```