Overview
Below is a summary of the key components that make up the core of the WireBootstrap framework.
The WireBootstrap library contains the objects and classes that make up the WireBootstrap framework. These are grouped into the following namespaces. Visit the reference sections for details.
Name | Description |
wire | This is the root namespace for everything that makes up WireBootstrap. It also contains many utilities and helper functions that make developing applications easier. |
wire.data | This namespace contains all the objects related to accessing and processing data. |
wire.ui | This namespace contains all the objects related to user interface concerns including components and data events. |
wire.[vendor]* | Components and services published by WireBootstrap that support third party integration are created off the wire root and begin with a unique spelling. For example, wire.bsTable is the native Bootstrap Table component. This naming convention is recommended but not required for new components. |
A DataSource object is the connection object for any communications to data services from inside the WireBootstrap framework. This object is located at
wire.data.DataSource.The following example creates a new DataSource against a custom
account web service.// account-service.js
export const accountService = new wire.data.DataSource("custom", {
ServiceRoot: "./account"
});
A TableQuery is a query for two-dimensional data from a data service. Often times this is run against data that resides in a relational database, but its up to the data service to source the data specified in the query.
There is a
select helper on the wire.data namespace that will return a new TableQuery and allows one to be built up using chained methods on the object. The syntax of the methods are similar to SQL select statements.The following example, creates a query to pull down two fields for a specific account number from the
AccountInfo entity or method on a web service.// account-query.js
export const accountQuery = wire.data.select("accountNumber", "accountName")
.from("AccountInfo")
.where()
.eq("accountNumber", "BN-39734");
Data from any data service will be transformed into a DataTable object located at
wire.data.DataTable when it returns from the data service. The following example executes the query against the
accounts web serviceimport {accountService} from "./account-service";
import {accountQuery} from "./account-query";
const tableAccounts = await accountService.execAsync(accountQuery);
The DataTable is a powerful object with dozens of methods that allow an array of objects to be manipulated and transformed locally in JavaScript.
The components and widgets used in Bootstrap themes are extended by WireBootstrap to have a standard set of interfaces for binding to data and handling events. These events include both the native component events as well as the data events that allow them to broadcast data changes to each other.
All WireBootstrap components can be bound to a WireBootstrap data table the same way. Most components are all located off of the
wireroot namespace.The following example binds the result of the
account service query to an instance of the Bootstrap HTML table....
const table = new wire.bsTable().render("#accountsTable", {
data: tableAccounts
});
The example above executes a query against a data service and binds a static data table to a component. This is a one-way, one-time binding.
A DataSet however allows the binding to be dynamic. Data sets can listen for data events emitted by components as users interact with them. Data sets are located at
wire.data.DataSet.When a data set finds an event that affects a field or other aspect of their query, they can make the appropriate changes to the query, execute it against the data service, pull down the updated data, and then update any consumers including UI components that are bound to that data set to reflect the changes.
The following example creates a data set using the same data source and query seen the examples above. It the binds the HTML table to the data set instead of a data table.
import {accountService} from "./account-service";
import {accountQuery} from "./account-query";
const datasetAccounts = new wire.data.DataSet({
Source: accountService,
Query: accountQuery
});
const table = new wire.bs.table().render("#accountsTable", {
data: datasetAccounts
});
The same bindings can be done inside many popular web frameworks such as Angular, React, Vue, and Web Components.
The following example illustrates the same binding as in previous examples using WireBootstrap for Web Components. With web components, the dataset can be imported directly using an attribute reference to the module export with the name of the data set as a pipe-delimited parameter.
In the following example, the same
datasetAccounts data set is dynamically imported into the component and set on the data property of the component class. The HTML table component is then able to render the data set.// dataset-accounts.js
import {accountService} from "./account-service";
import {accountQuery} from "./account-query";
export const datasetAccounts = new wire.data.DataSet({
Source: accountService,
Query: accountQuery
});
<wire-bs-table wr-import-data="./dataset-accounts.js | datasetAccounts">
</wire-bs-table>
Last modified 9mo ago