WireBootstrap
HomeDocsBuySupport
  • Introduction
  • Overview
  • Getting Started
  • Installation
  • Connecting to Data
    • Data Connectors
      • SQL Data
      • Custom Web Services
      • Local Data
      • Other Sources
    • Data Sources
    • Discovery
    • Building a Data Connector
  • Working With Queries
    • Select Queries
      • Query Extensions
    • Stored Procedures
    • Custom Web Services
    • Executing Queries
    • ORM
  • Writing Data
  • Updates
  • Deletes
  • Working with DataTables
    • Introduction
    • Filter and Sort
    • Select and Calculate
    • Joins
    • Rows
    • Columns
  • Working with DataSets
  • Introduction
  • Executing Queries
  • Transforms
  • Writing Data
  • Data Events
  • Working with Components
    • Introduction
    • Encapsulation
    • Configuration
      • Data
      • Events
      • Observables
      • Validation
      • Display
      • Vendor
      • Custom
    • Component
    • Web Frameworks
    • Building a Component
      • Hello World
      • Data Events
      • DataSets
  • Working With Data Events
    • Introduction
    • Event Basics
    • Event Data
    • Event Actions
  • Working with Themes
    • Introduction
    • Sample Data
    • Libraries
    • Pages
    • Building a Theme Project
  • Utilities
    • Formatting
    • Expressions
    • Collections
    • Spinners
    • Copy and Merge
    • Validation
    • Loading Assets
    • Service Calls
    • Download Files
    • Browser Location
    • Types
    • Promise
  • Reference
    • wire
      • wire.Collection
      • wire.download
      • wire.validate
    • wire.data
      • wire.data.DataEvent
      • wire.data.DataModel
      • wire.data.DataPromise
      • wire.data.DataSet
      • wire.data.DataSource
      • wire.data.DataTable
        • Columns
        • Rows
      • wire.data.StoredProcedure
      • wire.data.TableQuery
    • wire.ui
      • wire.ui.Component
      • wire.ui.validate
Powered by GitBook
On this page
  • HTML
  • Code-Behind
  • Modules
  • Data
  • Controller

Was this helpful?

  1. Working with Themes

Pages

PreviousLibrariesNextBuilding a Theme Project

Last updated 3 years ago

Was this helpful?

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

HTML

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.

Modules

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.htmlpage.

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.htmlpage 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.

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.

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

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

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

Code-behind files are .

ES6 modules
Project Pages Directory
Code-behind for the Bootstrap Select Example