História stránky

...

// 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'

Kotva
alert alert

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

Alert

...

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

Blok kódu
language js
// 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 (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 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>
        );
    }
};

Kotva
d2 d2

...

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.

...

Kotva
datetime datetime

Komponenty dátumovníka (framework/components/datetime)

BootstrapDatePicker

...

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

Názov atribútu	Typ	Povinný	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.

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

BootstrapDateRangePicker a ThemedBootstrapDateRangePicker

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 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ú  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. Komponent KomponentKomponent rozpoznáva nasledovné atribúty:

Kotva
react react

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.

...

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.

Kotva

...

table

...

DataTable a ThemedDataTable

table

Tabuľkový komponent (framework/components/table)

DataTable a ThemedDataTable

Tabuľkový komponent Table v sebe zabaľuje 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ú 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>
        );
    }
});

...