História stránky

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 logicky rozčlenené do adresárov podľa ich určenia.

Dialógové okná (alert)

Alert a ThemedAlert

...

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'

Alert a ThemedAlert

Komponenta Alert slúži na zobrazovanie dialógových okien. Komponenta používajú ako zdrojovú knižnicu SweetAlert2 a ich rozhranie je zhodné s rozhraním knižnice SweetAlert2. Komponentá má aj naštýlovanú verziu  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'})

Kotva
auth auth

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

...

   );
    }
};

Kotva
d2 d2

...

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.

...

Kotva
datetime datetime

Komponenty dátumovníka (datetime)

BootstrapDatePicker a ThemedBootstrapDatePicker

...