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ú 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 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". "Otémované" verzie komponentov sú vlastné tie neotémované spolu s prednastavenými CSS štýlmi. Napríklad:Themed" versions of components are basically the "unthemed" ones together with preset CSS styles. For example: 

// otémovanáthemed verziaversion komponentuof alert component
import alert from 'framework/components/alert/themedAlert'


// verziaalert komponentucomponent alertversion bezwithout CSS štýlovstyles - neotémovanáunthemed, it CSSis necessary jeto nutnéimport ručneCSS naimportovať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 má aj naštýlovanú verziu s preddefinovanými CSS štýlmiThe 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. The component has a styled version with the predefined CSS styles too.

// otémovanáthemed verziaversion komponentuof alert component
import alert from 'framework/components/alert/themedAlert'
// verziaalert komponentucomponent alertversion bezwithout CSS štýlovstyles - neotémovanáunthemed, it is CSSnecessary jeto nutnéimport ručneCSS naimportovaťmanually
// import alert from 'framework/components/alert/alert'

// príkladexample of použitiausage
alert({title: 'ÚspechSuccess', text: 'PodariloIt sawas tosuccessful!', type: 'success'});

Kotva
auth auth

...

Authentication Components (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 The LoginForm component represents a form with which the user logs in to the web application - to the D2000 system. To use the LoginForm component, it is necessary to define a text field (html element <input>) s názvom with the name "j_username" pre meno užívateľa, textové pole s názvom  as a user name, a text field with the name "j_password" pre heslo užívateľa a odosielacie tlačidlo for the password of a user and the submitting button (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 The login operation itself is implemented on the SmartWeb level and after successful authentication, the user is redirected to the page  pages/index.html.

import React from 'react'
import SimplePageContainer from 'framework/components/react/simplePageContainer'
import LoginForm from 'framework/components/auth/loginForm'

// JednoduchýSimple príkladexample použitiaof LoginForm component komponentuusage
SimplePageContainer.renderComponent(class LoginPage extends React.Component {
        render() {
            return (
                <LoginForm {...this.props}>
                    <input type="text" placeholder="PoužívateľskéUser menoname" required="" name="j_username"/>
                    <input type="password" placeholder="HesloPassword" name="j_password"/>
                    <button type="submit">Prihlásiť<>Login</button>
                </LoginForm>
            );
        }
    }
);

LogoutLink

Komponent LogoutLink je jednoduchým odkazom The LogoutLink component is a simple reference (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; for clicking it, there will be a confirming dialogue of user's logout displayed. After confirming, the user is logged out of the application and redirected to the initial (login) page.

import React from 'react';
import LogoutLink from "framework/components/auth/logoutLink";

// PríkladExample použitiaof komponentuLogoutLink LogoutLinkcomponent akousage jednejas zone položiekof menu items
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

...

Components for Communication with 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 It is a basic component of the SmartWeb Framework. This descendant of the SimplePageContainer component packs the D2Api interface and automatically follows and ends connection to D2000. It also secures support for keyboard shortcuts to switch debugging mode (CTRL+ALT+D) a rebundlovania aplikácie to rebundle application (CTRL+ALT+R). Do ostatných komponentov sa propaguje ako atribút s názvom d2.It is promoted as an attribute with the name d2 into other components. 

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

TclScheme

This component serves for displaying the D2000 scheme using the technology of a thin client (TCL). The scheme will be entered to the page as the HTML element <iframe>. Component attributes are:

ValueComponent

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

ValueComponent

This component shows the current value of the D2000 object. The value is displayed in the HTML element <span>. The following table describes the attributes of the component:

Kotva
datetime datetime

...

Components of Datepicker (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é:

It is the component of a datepicker based on the Bootstrap Datepicker component which has the following attributes:

Example of a usagePríklad použitia

// otémovanáthemed verziaversion komponentuof alert component
import DatePicker from 'framework/components/datetime/themedBootstrapDatePicker'
// verziacomponent komponentuversion bezwithout CSS štýlovstyles - neotémovanáunthemed, it CSSis necessary jeto nutnémanually ručneimport naimportovaťCSS
// import DatePicker from 'framework/components/datetime/bootstrapDatePicker'

// príkladusage použitiaexample vin 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é:

The BootstrapDateRangePicker component is an extension of the datepicker. It displays two dates by which the interval is defined. Apart from attributes of the packed component Bootstrap Datepicker, there are the following attributes: 

...

Components of Lists (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:

The LazyList component implements a list that supports gradual reading of content when scrolling downward. In its basic form, it displays content using elements <div>. For final usage, an overload of renderItem and render methods, which have are responsible for depicting the list content, is expected. The component recognizes the following attributes:

Kotva
react react

...

Basic Components Widening 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 This component serves as a wrapper for components that are not native React components. By creating a descendant of this component and by overloading methods configureComponent, render a wrappedInstance je im možné jednoducho pridať podporu zobrazovania pomocou React frameworku.

RootElement

and wrappedInstance, it is possible to simply add to them the support of displaying using the React framework. 

RootElement

A component that replaces the HTML element with the Komponent, ktorý nahradzuje HTML element s id = "root" za zvolený React komponent. Tento komponent má len interné využitie.

SimplePageContainer

for the chosen React component. This component has only internal usage. 

SimplePageContainer

A basic container of a web page. It secures support for keyboard shortcuts to switch debugging mode 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 and to rebundle applications (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.It is used for React pages that do not need a connection to D2000. For creating web pages which require a connection to D2000, the descendant of the DataContainer component serves. 

Kotva
table table

...

Table Component (framework/components/table)

...

DataTable and ThemedDataTable

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

The Table component encompasses the DataTables library. The interface of this library has these additional attributes:  

import React from 'react'
import {DataContainer} from '../custom/components'
import Table from 'framework/components/table/themedDataTable'
// verziacomponent komponentuversion bezwithout CSS štýlovstyles - neotémovanáunthemed, it CSSis necessary jeto nutnémanually ručneimport naimportovaťCSS
// import Table from 'framework/components/table/dataTable'

// PríkladExample použitiaof komponentuusing ThemedDataTable, ktorý načítavá dáta volaním component that reads data by calling 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: 'vysledokresult',
            value: []
        }).call();

        callback({
            data: response.vysledokresult,
            recordsTotal: response.vysledokresult.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: "MenoName", data: "menoname.value"},
                           {title: "VekAge", data: "vekage.value"}
                       ]}
                       select={true}
                       ref = {(component) => {
                           this.table = component;
                       }}/>
            </div>
        );
    }
});

...