Overview

Below is a summary of the key components that make up the core of the WireBootstrap framework.
Installation
The core WireBootstrap JavaScript library is wire.js.  This and other core related files can be installed from the NPM package registry at@wirebootstrap/wire.
1
npm install @wirebootstrap/wire
Copied!
Namespaces
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.
The following is a summary of the main classes and objects in WireBootstrap. 
DataSource
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.
1
//
2
// Create a new data source object pointing to a custom account 
3
// web service at a relative Url location.
4
//
5
const accountService = new wire.data.DataSource("custom", {
6
    ServiceRoot: "./account"
7
});
Copied!
Visit the Connecting to Data section for more on data sources.
TableQuery
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.
1
//
2
// Create a query to pull down two fields for a specific account number
3
// from the AccountInfo entity or method on a web service 
4
//
5
const query = wire.data.select("accountNumber", "accountName")
6
    .from("AccountInfo")
7
    .where()
8
        .eq("accountNumber", "BN-39734");
Copied!
Visit the Working with Queries section for more on creating and executing queries.
DataTable
Data from any data service will be transformed into a DataTable object located at wire.data.DataTable when it returns from the data service.  
1
//
2
// Execute the query against the accounts web service
3
//
4
const tableAccounts = await accountService.execAsync(query);
Copied!
The DataTable is a powerful object with dozens of methods that allow an array of objects to be manipulated and transformed locally in JavaScript.
Visit the Working with DataTables section for more on data tables.
Component
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 the wireroot namespace.
1
//
2
// Bind the DataTable to an instance of the Bootstrap HTML table
3
//
4
const table = new wire.bsTable().render("#accountsTable", {
5
    data: tableAccounts
6
});
Copied!
Note, the wire.bs* contains many of the native Bootstrap components.  
Visit the Working with Components section for more on components.
DataSet
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.  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.  
Data sets are located at wire.data.DataSet.
1
//
2
// Create a data set using the same data source and query
3
//
4
const datasetAccounts = new wire.data.DataSet({
5
    Source: accountService,
6
    Query: wire.data.select("accountNumber", "accountName")
7
        .from("AccontInfo")
8
        .where()
9
            .eq("accountNumber", "BN-39734")
10
});
11
​
12
//
13
// Bind the HTML table to the data set instead of the data table
14
//
15
const table = new wire.bs.table().render("#accountsTable", {
16
    data: datasetAccounts
17
});
Copied!
Visit the Working with DataSets section for more on data sets.
​

Introduction

Getting Started

Last modified 7mo ago

Copy link

Contents