...
Blok kódu | ||
---|---|---|
| ||
// 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
...
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.
Blok kódu | ||
---|---|---|
| ||
// 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 | ||||
---|---|---|---|---|
|
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 | ||
---|---|---|
| ||
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 | ||||
---|---|---|---|---|
|
...
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 |
---|---|---|---|---|
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. |
Kotva | ||||
---|---|---|---|---|
|
BootstrapDatePicker
...
Komponenty Komponenta výberovníka dátumu. Založené sú na komponente Bootstrap Datepicker, ktorého atribúty rozširujú o nasledovné:
...
ThemedBootstrapDatePicker sa od BootstrapDatePicker odlišuje len tým, že je naštýlovaný predvolenými CSS štýlmi.
...
BootstrapDateRangePicker
Komponenty BootstrapDateRangePicker a ThemedBootstrapDateRangePicker sú rozšírením Komponenta BootstrapDateRangePicker je rozšírením dátumovníka. Zobrazujú Zobrazuje dva dátumy, ktorými sa definuje interval. Atribúty zabaleného komponentu Bootstrap Datepicker 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. | ||
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. | ||
betweenDatesText | string | "do" | Text zobrazený medzi dátumami. | |
disabled | bool | false | Zakáže alebo povolí modifikáciu. | |
enableKeyboardEdit | bool | true | Povolí 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. Komponent KomponentKomponent rozpoznáva nasledovné atribúty:
Názov atribútu | Typ | Povinný | Predvolená hodnota | Popis |
---|---|---|---|---|
loadHandler | function | 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. | |
batchSize | number | 10 | Predvolený počet prvkov, ktorý je načítavaný v jednej dávke. Odovzdáva sa ako parameter do funkcie loadHandler. |
Kotva | ||||
---|---|---|---|---|
|
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 | ||||
---|---|---|---|---|
|
DataTable a ThemedDataTable
...