Components

The SmartWeb framework for facilitating the development of web applications built on the React JavaScript library offers several preset components with connection to the D2000 system via D2Api. Supplied components are located in the components directory of the SmartWeb framework and they are further logically divided into directories according to their designation. Some components can be imported alternatively also with CSS styles - in that case, the file name has the prefix "themed". "Themed" versions of components are basically the "unthemed" ones together with preset CSS styles. For example:

// themed version of alert component
import alert from 'framework/components/alert/themedAlert'


// alert component version without CSS styles - unthemed, it is necessary to import CSS manually
import alert from 'framework/components/alert/alert'

Dialogue Windows (framework/components/alert)

Alert

The Alert component serves for displaying dialogue windows. The component uses SweetAlert2 as a source library and its interface is identical with the interface of the SweetAlert2 library. The component has a styled version with the predefined CSS styles too.

// themed version of alert component
import alert from 'framework/components/alert/themedAlert'
// alert component version without CSS styles - unthemed, it is necessary to import CSS manually
// import alert from 'framework/components/alert/alert'

// example of usage
alert({title: 'Success', text: 'It was successful!', type: 'success'});

Authentication Components (framework/components/auth)

LoginForm

The LoginForm component represents a form with which the user logs in to the web application - to the D2000 system. To use the LoginForm component, it is necessary to define a text field (html element <input>) with the name "j_username" as a user name, a text field with the name "j_password" for the password of a user and the submitting button (element <button type="submit">). The login operation itself is implemented on the SmartWeb level and after successful authentication, the user is redirected to the page pages/index.html.

import React from 'react'
import SimplePageContainer from 'framework/components/react/simplePageContainer'
import LoginForm from 'framework/components/auth/loginForm'

// Simple example of LoginForm component usage
SimplePageContainer.renderComponent(class LoginPage extends React.Component {
        render() {
            return (
                <LoginForm {...this.props}>
                    <input type="text" placeholder="User name" required="" name="j_username"/>
                    <input type="password" placeholder="Password" name="j_password"/>
                    <button type="submit">Login</button>
                </LoginForm>
            );
        }
    }
);

LogoutLink

The LogoutLink component is a simple reference (html element <a>); for clicking it, there will be a confirming dialogue of user's logout displayed. After confirming, the user is logged out of the application and redirected to the initial (login) page.

import React from 'react';
import LogoutLink from "framework/components/auth/logoutLink";

// Example of LogoutLink component usage as one of menu items
export default class PageHeader extends React.Component {
    render() {
        return (
            <div className="container-fluid">
                <div className="row">
                    <div className="col-xs-4">
                        <a href="#section1">Section 1</a>
                    </div>
                    <div className="col-xs-4">
                        <a href="#section2">Section 2</a>
                    </div>
                    <div className="col-xs-4">
                        <a href="#section3">Section 3</a>
                    </div>
                    <div className="col-xs-4">
                        <LogoutLink>Logout</LogoutLink>
                    </div>
                </div>
            </div>
        );
    }
};

Components for Communication with D2000 ( framework/components/d2)

DataContainer

It is a basic component of the SmartWeb Framework. This descendant of the SimplePageContainer component packs the D2Api interface and automatically follows and ends connection to D2000. It also secures support for keyboard shortcuts to switch debugging mode (CTRL+ALT+D) a to rebundle application (CTRL+ALT+R). It is promoted as an attribute with the name d2 into other components.

Attribute name	Type	Mandatory	Default value	Description

Attribute name	Type	Mandatory	Default value	Description
connection	object			It contains information about the connection to D2000 as an application name and logged in user name. The attribute is set automatically.

TclScheme

This component serves for displaying the D2000 scheme using the technology of a thin client (TCL). The scheme will be entered to the page as the HTML element <iframe>. Component attributes are:

Attribute name	Type	Mandatory	Default value	Description
d2	object	yes		Reference to the DataContainer component. It is submitted from the parent container.
datasource	string	yes		It is the name of the D2000 object of the scheme type that should be displayed.

ValueComponent

This component shows the current value of the D2000 object. The value is displayed in the HTML element <span>. The following table describes the attributes of the component:

Attribute name	Type	Mandatory	Description
d2	object	yes	Link to the DataContainer component. It is submitted from the parent container.
datasource	string	yes	It is the name of the D2000 object and its value should be displayed.
returnFields	string[]		List of value attributes that should be sent together with the object value. Possbile attributes are described on the page Serialization of Data between Client and API Interface.
description	string		Manually defined object description - it is preferred to the description defined in D2000.
technicalUnits	string		Manually defined technical object units - they are preferred to those defined in D2000.
numberFormat	string		Format for numerical object values in the form fit for the Numeral.js library. If it is defined, it will be preferred to the format value sent from D2000.
dateFormat	string		Format for values of the absolute time type in the form fit for the Moment.js library. If it is defined, it will be preferred to format value sent from D2000.
missingDescription	string		The description that is used when it was not defined manually nor in D2000.
missingFormattedValue	string		Format value used when the object does not have a valid value.
missingTechnicalUnits	string		Technical units used when they were not defined manually nor in D2000.
className	string		Name of the CSS class that will be applied to the HTML element <span> displaying object value.
style	object		CSS style that will be applied to the HTML element <span> displaying object value.

Components of Datepicker (framework/components/datetime)

BootstrapDatePicker

It is the component of a datepicker based on the Bootstrap Datepicker component which has the following attributes:

Attribute name	Type	Mandatory	Default value	Description

Attribute name	Type	Default value	Description
name	string		Unique name for the HTML element <input>.
className	string		Name of the CSS class that will be applied to the HTML element <input> displaying the chosen date.
defaultValue	string date		Default value. It can be entered as a text or as a date object.
disabled	bool	false	It forbids or allows modification.
enableKeyboardEdit	bool	true	It allows or forbids modification by a keyboard.