Comment on page
Pages
The
\pages
directory contains the HTML source and TypeScript code-behind for theme projects.
Project Pages Directory
The HTML pages are in this directory's root. These pages provide samples for the components available in the theme running in WireBootstrap.
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
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.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
});
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
.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.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
. const select = new wire.bs.select().render("#select", {
data: this.data.dsProducts,
datamap: { id: "Product", label: "Product"},
});
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.
sayHello() {
wire.ui.MessageDialog("Hello");
}
To call this method from inside the DOM, use the
page
reference.<button ... onclick="page.sayHello()">Say Hello</button>