# 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>
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.wirebootstrap.com/wirebootstrap/working-with-themes/pages.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.