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.

Názov atribútu	Typ	Povinný	Predvolená hodnota	Popis

Názov atribútu	Typ	Povinný	Predvolená hodnota	Popis
connection	object			Obsahuje informácie o pripojení k D2000 ako názov aplikácie a meno prihláseného užívateľa. Atribút je nastavovaný automaticky.

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ú:

Názov atribútu	Typ	Povinný	Predvolená hodnota	Popis
d2	object	áno		Odkaz na komponent DataContainer. Odovzdáva sa z rodičovského kontajneru.
datasource	string	áno		Názov D2000 objektu typu schéma, ktorá má byť zobrazená.

ValueComponent

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

Názov atribútu	Typ	Povinný	Popis
d2	object	áno	Odkaz na komponent DataContainer. Odovzdáva sa z rodičovského kontajneru.
datasource	string	áno	Názov D2000 objektu, ktorého hodnota má byť zobrazovaná.
returnFields	string[]		Zoznam atribútov hodnoty, ktoré majú byť spolu s hodnotou objektu zaslané. Možné atribúty sú popísané na stránke Serializácia dát medzi klientom a API rozhraniami.
description	string		Manuálne definovaný popis objektu - má prednosť pred popisom definovaným v D2000.
technicalUnits	string		Manuálne definované technické jednotku objektu - majú prednosť pred definovanými v D2000.
numberFormat	string		Formát pre číselné hodnoty objektu v tvare pre knižnicu Numeral.js. Ak je definovaný, má prednosť pred formátovanou hodnotou zaslanou z D2000.
dateFormat	string		Formát pre hodnoty typu absolútny čas v tvare pre knižnicu Moment.js. Ak je definovaný, má prednosť pred formátovanou hodnotou zaslanou z D2000.
missingDescription	string		Popis, ktorý sa použije v prípade, že nebol definovaný manuálne, ani v D2000.
missingFormattedValue	string		Formátovaná hodnota, ktorá sa použije v prípade, že objekt nemá platnú hodnotu.
missingTechnicalUnits	string		Technické jednotky, ktoré sa použijú v prípade, že neboli definované manuálne, ani v D2000.
className	string		Názov CSS triedy, ktorá bude aplikovaná na HTML element <span> zobrazujúci hodnotu objektu.
style	object		CSS štýl, ktorý bude aplikovaný na HTML element <span> zobrazujúci hodnotu objektu.

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é:

Názov atribútu	Typ	Povinný	Predvolená hodnota	Popis

Názov atribútu	Typ	Predvolená hodnota	Popis
name	string		Unikátne meno pre HTML element <input>.
className	string		Názov CSS triedy, ktorá bude aplikovaná na HTML element <input> zobrazujúci vybraný dátum.
defaultValue	string date		Predvolená hodnota. Môže byť zadaná ako text alebo ako objekt date.
disabled	bool	false	Zakáže alebo povolí modifikáciu.
enableKeyboardEdit	bool	true	Povolí alebo zakáže modifikáciu pomocou kláves.