Komponenty

SmartWeb framework pre uľahčenie vývoja webových aplikácií postavených na JavaScript knižnici React poskytuje niekoľko predpripravených komponentov s napojením na systém D2000 cez D2Api. Dodávané komponenty sa nachádzajú v adresári components SmartWeb frameworku a ďalej sú rozčlenené logicky podľa ich určenia.

Dialógové okná (alert)

Alert a ThemedAlert

Komponenty Alert a ThemedAlert slúžia na zobrazovanie dialógových okien. Tieto komponenty používajú ako zdrojovú knižnicu SweetAlert2 a ich rozhranie je zhodné s rozhraním knižnice SweetAlert2. Komponent ThemedAlert je na rozdiel od Alert aj naštýlovaný preddefinovanými CSS štýlmi.

Autentifikačné komponenty (auth)

LoginForm

Komponent LoginForm predstavuje formulár, ktorým sa užívateľ prihlasuje do webovej aplikácie resp. systému D2000. Pre použitie LoginForm komponentu je v ňom potrebné zadefinovať textové pole (html element <input>) s názvom "j_username" pre meno užívateľa, textové pole s názvom "j_password" pre heslo užívateľa a odosielacie tlačidlo (element <button type="submit">). Samotná akcia prihlásenia je implementovaná na úrovni SmartWeb-u a po úspešnej autentifikácii je užívateľ presmerovaný na stránku pages/index.html.

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

// Jednoduchý príklad použitia LoginForm komponentu
SimplePageContainer.renderComponent(class LoginPage extends React.Component {
        render() {
            return (
                <LoginForm {...this.props}>
                    <input type="text" placeholder="Používateľské meno" required="" name="j_username"/>
                    <input type="password" placeholder="Heslo" name="j_password"/>
                    <button type="submit">Prihlásiť</button>
                </LoginForm>
            );
        }
    }
);

LogoutLink

Komponent LogoutLink je jednoduchým odkazom (html element <a>), na kliknutie ktorého sa zobrazí potvrdzovací dialóg odhlásenia užívateľa. Po potvrdení je užívateľ z aplikácie odhlásený a presmerovaný na úvodnú (prihlasovaciu) stránku.

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

// Príklad použitia komponentu LogoutLink ako jednej z položiek menu
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>
        );
    }
};

Komponenty grafov (chart)

AmChart

Pre zobrazovanie grafov je vytvorený komponent AmChart, ktorý v sebe zabaľuje graf z knižnice AmCharts (potrebná samostatná licencia). Jeho atribúty rozširuje o nasledovné:

Základné komponenty pre komunikáciu s D2000 (d2)

DataContainer

Základný komponent SmartWeb Frameworku. Potomok komponentu SimplePageContainer, ktorý v sebe navyš zabaľuje rozhranie D2Api a automaticky nadväzuje a ukončuje pripojenie k D2000. Zároveň zabezpečuje podporu pre klávesové skratky na prepínanie režimu ladenia (CTRL+ALT+D) a rebundlovania aplikácie (CTRL+ALT+R). Do ostatných komponentov sa propaguje ako atribút s názvom d2.

TclScheme

Tento komponent slúži na zobrazenie D2000 schémy pomocou technológie tenkého klienta (TCL). Schéma bude na stránku vložená ako HTML element <iframe>. Atribúty komponentu sú:

ValueComponent

Komponent zobrazujúci aktuálnu hodnotu D2000 objektu. Hodnota je zobrazovaná v HTML elemente <span>. Nasledujúca tabuľka popisuje atribúty komponentu:

Komponenty dátumovníka (datetime)

BootstrapDatePicker a ThemedBootstrapDatePicker

Komponenty výberovníka dátumu. Založené sú na komponente Bootstrap Datepicker, ktorého atribúty rozširujú o nasledovné:

ThemedBootstrapDatePicker sa od BootstrapDatePicker odlišuje len tým, že je naštýlovaný predvolenými CSS štýlmi.

BootstrapDateRangePicker a ThemedBootstrapDateRangePicker

Komponenty BootstrapDateRangePicker a ThemedBootstrapDateRangePicker sú rozšírením dátumovníka. Zobrazujú dva dátumy, ktorými sa definuje interval. Atribúty zabaleného komponentu Bootstrap Datepicker rozširujú o nasledovné:

Komponenty zoznamov (list)

LazyList

Komponent LazyList implementuje zoznam, ktorý podporuje postupné načítavanie obsahu. Vo svojej základnej verzii zobrazuje obsah pomocou elementov <div>. Pre finálne použitie sa predpokladá preťaženie metód renderItem a render, ktoré majú na starosti vykresľovanie obsahu zoznamu. Komponent rozpoznáva nasledovné atribúty:

Základné komponenty rozširujúce React (react)

ConfigurableComponent

Tento komponent slúži ako wrapper pre komponenty, ktoré nie sú natívnymi React komponentami. Vytvorením potomka tohto komponentu a preťažením metód configureComponent, render a wrappedInstance je im možné jednoducho pridať podporu zobrazovania pomocou React frameworku.

RootElement

Komponent, ktorý nahradzuje HTML element s id = "root" za zvolený React komponent. Tento komponent má len interné využitie.

SimplePageContainer

Základný kontainer web stránky. Zabezpečuje podporu pre klávesové skratky na prepínanie režimu ladenia (CTRL+ALT+D) a rebundlovania aplikácie (CTRL+ALT+R). Jeho využitie je pre React stránky, ktoré nepotrebujú pripojenie k D2000. Na tvorbu web stránok, ktoré požadujú pripojenie k D2000 slúži potomok tohto komponentu DataContainer.

Tabuľkové komponenty (table)

DataTable a ThemedDataTable

Tabuľkové komponenty DataTable a ThemedDataTable (DataTable naštýlovaná CSS štýlmi) v sebe zabaľujú knižnicu DataTables. Rozhranie tejto knižnice rozširujú o nasledovné atribúty:

import React from 'react'
import {DataContainer} from '../custom/components'
import Table from 'framework/components/table/themedDataTable'

// Príklad použitia komponentu ThemedDataTable, ktorý načítavá dáta volaním RPC
DataContainer.renderComponent(class IndexPage extends React.Component {

    async loadData(data, callback, settings) {
        const d2Api = this.props.d2;
        const response = await d2Api.rpc("E.SmartWebApiTutorial", "GetPersonData", 1000, {
            type: 'record',
            structType: 'SD.Arr_Person',
            returnAs: 'vysledok',
            value: []
        }).call();

        callback({
            data: response.vysledok,
            recordsTotal: response.vysledok.length
        });
    }

    render() {
        return (
            <div>
                <Table className="table table-striped table-bordered dt-responsive nowrap dataTable" width="100%"
                       ajax = {(data, callback, settings) => {
                           this.loadData(data, callback, settings);
                       }}
                       columns = {[
                           {title: "Meno", data: "meno.value"},
                           {title: "Vek", data: "vek.value"}
                       ]}
                       select={true}
                       ref = {(component) => {
                           this.table = component;
                       }}/>
            </div>
        );
    }
});