Page Controller

The sample application contains one page called index.html and exists in the root of the project directory.

The page controller is the code-behind for the page. In the sample application, the page controller for the index.html page is index.controller.js.

The page controller allows components and other DOM elements in HTML on the page to be programmed. It sits between these page elements and the data access layer which exists in the Page Data module.

Page Data Reference

The page data module is imported into the page controller and an instance created on a public property called data.

import { IndexPageData } from "./index.data.js";
...

class IndexPageController {

    ...
    
    data = new IndexPageData();
    
    ...
}

DOM References

Public methods on the page controller can be reference directly in HTML using the page variable set on the global window object.

window.page = new IndexPageController();

Data Binding

The index page uses three Bootstrap components: Input, Select, and Table.

Each of the input components on the page are bound to different properties on the datasource defined in the page data module using the model configuration property. See component data binding for details on binding components to data.

this.serviceRoot = new wire.bsInput().render("#service-root", {
    model: { obj: this.data.datasource, property: "ServiceRoot" },
    ...
});

Validation

Values entered in the input components are required by setting the validate property and are validated before any calls are made to the query service. See validating components in WireBootstrap for more on validating inputs.

this.serviceRoot = new wire.bsInput().render("#service-root", {
   ...
    validate: {required: true}
});

Discover

The Connect button on the page calls the connect method on the page controller when clicked.

<button ... onclick="page.connect(this)">Connect</button>

This method gets a list of entities in a database by calling getEntities on the page data module.

connect(el) {
    ...
    this.data.getEntities(this._bindEntities);
}

It then binds the list to the Select component by calling _bindEntities.

 _bindEntities = (tblEntities)  => {

    const entities = new wire.bsSelect().render("#entities", {
       data: tblEntities
       ...
    });

}

Query

When a new entity is selected from the list of entities, a change event is triggered and the _bindSampleData function is called.

 _bindEntities = (tblEntities)  => {

    const entities = new wire.bsSelect().render("#entities", {
        ...
        events: {
            change: () => {
            
                this._bindSampleData(entities.val());

            }                
        }
    });

}

_bindSampleData gets an updated dataset that includes the entity in the query and binds it to the Table component.

_bindSampleData = (entity) => {

    const table = new wire.bsTable().render("#table", {
        data: this.data.getSampleDataSet(entity)
        ...
    });

}