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ú logicky rozčlenené do adresárov podľa ich určenia. Niektoré komponenty sa dajú naimportovat alternatívne aj s CSS štýlmi - vtedy má názov súboru predponu "themed". "Otémované" verzie komponentov sú vlastné tie neotémované spolu s prednastavenými CSS štýlmi. Napríklad:

// otémovaná verzia komponentu alert
import alert from 'framework/components/alert/themedAlert'


// verzia komponentu alert bez CSS štýlov - neotémovaná, CSS je nutné ručne naimportovať
import alert from 'framework/components/alert/alert'

Dialógové okná (framework/components/alert)

Alert

Komponent Alert slúži na zobrazovanie dialógových okien. Komponent používa ako zdrojovú knižnicu SweetAlert2 a jeho rozhranie je zhodné s rozhraním knižnice SweetAlert2. Komponent má aj naštýlovanú verziu s preddefinovanými CSS štýlmi.

// otémovaná verzia komponentu alert
import alert from 'framework/components/alert/themedAlert'
// verzia komponentu alert bez CSS štýlov - neotémovaná, CSS je nutné ručne naimportovať
// import alert from 'framework/components/alert/alert'

// príklad použitia
alert({title: 'Úspech', text: 'Podarilo sa to!', type: 'success'});

Autentifikačné komponenty (framework/components/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 pre komunikáciu s D2000 ( framework/components/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 (framework/components/datetime)

BootstrapDatePicker

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

Príklad použitia

// otémovaná verzia komponentu alert
import DatePicker from 'framework/components/datetime/themedBootstrapDatePicker'
// verzia komponentu bez CSS štýlov - neotémovaná, CSS je nutné ručne naimportovať
// import DatePicker from 'framework/components/datetime/bootstrapDatePicker'

// príklad použitia v JSX
<div className="row">
  <div className="col-md-2">
      <DatePicker defaultValue={new Date()}/>
  </div>
</div>

BootstrapDateRangePicker

Komponent BootstrapDateRangePicker je rozšírením dátumovníka. Zobrazuje dva dátumy, ktorými sa definuje interval. Atribúty zabaleného komponentu Bootstrap Datepicker rozširuje o nasledovné:

Komponenty zoznamov (framework/components/list)

LazyList

Komponent LazyList implementuje zoznam, ktorý podporuje postupné načítavanie obsahu pri scrolovaní smerom nadol. 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. KomponentKomponent rozpoznáva nasledovné atribúty:

Základné komponenty rozširujúce React (framework/components/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ý komponent (framework/components/table)

DataTable a ThemedDataTable

Tabuľkový komponent Table v sebe zabaľuje knižnicu DataTables. Rozhranie tejto knižnice rozširuje o nasledovné atribúty:

import React from 'react'
import {DataContainer} from '../custom/components'
import Table from 'framework/components/table/themedDataTable'
// verzia komponentu bez CSS štýlov - neotémovaná, CSS je nutné ručne naimportovať
// import Table from 'framework/components/table/dataTable'

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