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 ) 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

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 ); 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