Porovnávané verzie

Kľúč

  • Tento riadok sa pridal
  • Riadok je odstránený.
  • Formátovanie sa zmenilo.

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:The SmartWeb framework for facilitating the development of web applications built on the React JavaScript library offers several preset components with connection to the D2000 system via D2Api. Supplied components are located in the components directory of the SmartWeb framework and they are further logically divided into directories according to their designation. Some components can be imported alternatively also with CSS styles - in that case, the file name has the prefix "themed". "Themed" versions of components are basically the "unthemed" ones together with preset CSS styles. For example: 

Blok kódu
languagejs
// otémovanáthemed verziaversion komponentuof alert component
import alert from 'framework/components/alert/themedAlert'


// verziaalert komponentucomponent alertversion bezwithout CSS štýlovstyles - neotémovaná, CSS je nutné ručne naimportovaťunthemed, it is necessary to import CSS manually
import alert from 'framework/components/alert/alert'

Kotva
alert
alert

...

Dialogue Windows (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 The Alert component serves for displaying dialogue windows.  The component uses SweetAlert2 as a source library and its interface is identical with the interface of the SweetAlert2 library.  Komponent má aj naštýlovanú verziu s preddefinovanými CSS štýlmi.

Blok kódu
languagejs
// 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.

Blok kódu
languagejs
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>
            );
        }
    }
);

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.

Blok kódu
languagejs
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.

Názov atribútuTypPovinnýPredvolená hodnotaPopis
connectionobject

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útuTypPovinnýPredvolená hodnotaPopis
d2objectáno
Odkaz na komponent DataContainer. Odovzdáva sa z rodičovského kontajneru.
datasourcestringá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útuTypPovinnýPredvolená hodnotaPopis
d2objectáno
Odkaz na komponent DataContainer. Odovzdáva sa z rodičovského kontajneru.
datasourcestringáno
Názov D2000 objektu, ktorého hodnota má byť zobrazovaná.
returnFieldsstring[]

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.
descriptionstring

Manuálne definovaný popis objektu - má prednosť pred popisom definovaným v D2000.
technicalUnitsstring

Manuálne definované technické jednotku objektu - majú prednosť pred definovanými v D2000.
numberFormatstring

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.
dateFormatstring

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.
missingDescriptionstring

Popis, ktorý sa použije v prípade, že nebol definovaný manuálne, ani v D2000.
missingFormattedValuestring

Formátovaná hodnota, ktorá sa použije v prípade, že objekt nemá platnú hodnotu.
missingTechnicalUnitsstring

Technické jednotky, ktoré sa použijú v prípade, že neboli definované manuálne, ani v D2000.
classNamestring

Názov CSS triedy, ktorá bude aplikovaná na HTML element <span> zobrazujúci hodnotu objektu.
styleobject

CSS štýl, ktorý bude aplikovaný na HTML element <span> zobrazujúci hodnotu objektu.

Kotva
datetime
datetime
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útuTypPovinnýPredvolená hodnotaPopis
namestring

Unikátne meno pre HTML element <input>.
classNamestring

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.
disabledbool
falseZakáže alebo povolí modifikáciu.
enableKeyboardEditbool
truePovolí alebo zakáže modifikáciu pomocou kláves.

Príklad použitia

Blok kódu
languagejs
// 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é:

Názov atribútuTypPovinnýPredvolená hodnotaPopis
namestring

Unikátne meno pre HTML element <input>.
classNamestring

Názov CSS triedy, ktorá bude aplikovaná na HTML element <input> zobrazujúci vybraný dátum.
defaultFromValue

string

date



Predvolená hodnota začiatku intervalu. Môže byť zadaná ako text alebo ako objekt date.
defaultToValue

string

date



Predvolená hodnota konca intervalu. Môže byť zadaná ako text alebo ako objekt date.
betweenDatesTextstring
"do"Text zobrazený medzi dátumami.
disabledbool
falseZakáže alebo povolí modifikáciu.
enableKeyboardEditbool
truePovolí alebo zakáže modifikáciu pomocou kláves.

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:

Názov atribútuTypPovinnýPredvolená hodnotaPopis
loadHandlerfunction

function (size, callback) {

callback([]);

}


Funkcia, ktorá je volaná pri požiadavke na načítanie ďalších dát. Parameter size hovorí, maximálne koľko prvkov má byť načítaných a parameter callback je funkcia, ktorou budú načítané dáta doplnené na koniec zoznamu.
batchSizenumber
10Predvolený počet prvkov, ktorý je načítavaný v jednej dávke. Odovzdáva sa ako parameter do funkcie loadHandler.

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 configureComponentrenderwrappedInstance 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.

Kotva
table
table
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:

Názov atribútuTypPovinnýPredvolená hodnotaPopis
classNamestring

Názov CSS triedy, ktorá bude aplikovaná na hlavný HTML element zobrazujúci tabuľku.
styleobject

CSS štýl, ktorý bude aplikovaný na hlavný HTML element zobrazujúci tabuľku.
widthstring

Šírka tabuľky.
heightstring

Výška tabuľky.
renderFooterbool
falsePríznak či názvy stĺpcov budú zobrazené aj v pätičke tabuľky.


Blok kódu
languagejs
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>
        );
    }
});

...