Components
SWAC is component based. Every component has a set of tasks it is
intended for. All components share a set of usefull options and
functions. There are two main kinds of components: views and
algorithms.
Components are bound to data, they work with the data thats
given to them. A component can load data at initialisation and
has methods for adding and removeing data.
Views
Views representing data and / or allowing user interaction with
the data. You can build up web applications useing components without
the need of writing javascript code.
Views are created trough Requestor Elements. Those contain
a swa attribute that defines the view component.
<div id="components_example1" swa="Present FROM ../../data/concepts/components_example1.json"></div>
Will create an presentation of example data.
Useing view functions from custom code
Most functions of views are public accessable and useable from custom code. See details
Algorithms
Algorithms purpose is to serve complex algorithms as standalone
accessable parts, that come without predefined userinterface and can
be integrated into views or custom code.
Algorithms can share data with views, so that an algorithmical
operation on the data is instantly shown to the user.
// Load an algorithm
window.swac.loadAlgorithm('AlgorithmsName','IdYouWantForTheAlgorithmInstance').then(function (requestor) {
// Get instantiated algorithm object
let cs = requestor.swac_comp;
console.log(cs);
// Here the Algorithm can be used
});
Component options
There are many more options available at the components. On each components documentation page all options are listed.
Option | Explanation |
---|---|
Setting options by global object
You just have to put the options into an global javascript object, that
is named after the schema YOUR_TAG_ID_options.
You can see a hint on javascript console that
says what options are available and where you can put your options.
The available options and a sample of useage you can find with the
SWAC Debugger. Simply click on the debugger button and scrol down.
Setting options from data
Another way is to use data as options. Simply add the datasource name
after the OPTIONS keyword in swa statement. It works the same way
as getting data for your component.
In this example we use a javascript file as datasource, but it can
be every datasource that is supported as datasource for displaying data.
<div id="components_example4" swa="Present FROM ../../data/concepts/components_example4.json OPTIONS ../../js/concepts/2_components_example4.json"></div>
See working example here
Plugins
SWAC components deliver a set of basic features that can be activated by options or automatically acitvated by data in the datasets. There are special sets of features "plugins" that can be activated by the options. See Plugins
Activate or deactivate components on conditions
When you want components only active in your app, when a condition is filled. You can use the activeOn option. It allowes definition of a datarequetor and the component is only is build up, when at least one dataset is returned.
See working example hereNext
See next how to use data with components at the data page.