Spoznávame dojox/data/CsvStore

Veľkou výhodou frameworku Dojo je podpora práce s hromadnými dátami v rôznych formátoch. Medzi takéto formáty patrí aj textový formát CSV (Comma-separated values), ktorý je možné získať napríklad pri exporte dokumentov xls alebo kontaktov z poštového klienta. Takto získané dáta je možné jednoduchou formou prehľadne zobraziť na obrazovke používateľa alebo použiť ako výber pri zadávaní údajov do formulára. Oba uvedené spôsoby budú v tomto článku demonštrované a to deklaratívne aj programaticky.

Pre všetky uvedené príklady budú použité nasledujúce dáta. Uvedený obsah je potrebné vložiť do súboru data.csv. V CSV súbore je dôležitý prvý riadok. Ten definuje názvy entít, na ktoré sa budú viazať (bindovať) dáta vo widgetoch. Ostatné riadky sú už dáta. Prvý riadok sa nezobrazuje. Ide ako keby o riadiacu inštrukciu.

Pozor, názvy entít (prvý riadok) sú case sensitive, teda citlivé na veľkosť písmen. Akýkoľvek nesprávny zápis znakov znamená, že dáta nebudú widgetom spracované. V prípade DataGridu budú zobrazené bodky.

Príklad: Dáta pre demonštračné účely v súbore data.csv.

1
2
3
4
5
6
7
Car,Year
Honda,1993
Mazda,1998
Toyota,2000
Hyundai,2004
BMW,2001
Audi,2008
Car,Year
Honda,1993
Mazda,1998
Toyota,2000
Hyundai,2004
BMW,2001
Audi,2008

Zobrazovanie CSV dát vo widgete DataGrid

Ako prvý príklad bude demonštrácia prezentácie CSV dát prostredníctvom tabuľky. Pre tento účel bude použitý widget dojox/grid/DataGrid. Pre správne zobrazenie tabuľky je potrebné nahrať CSS šablónu s názvom claroGrid.css.

Príklad: Nahratie šablóny claroGrid.css.

1
2
3
<link rel="StyleSheet" type="text/css" 
href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.2/
dojox/grid/resources/claroGrid.css"/>
<link rel="StyleSheet" type="text/css" 
href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.2/
dojox/grid/resources/claroGrid.css"/>

Zápis šablóny predstavuje jeden riadok. Teraz stačí použiť už len deklaratívny zápis do elementu <body> (samozrejme použiť v šablóne pre Dojo) a prezentácia dát je hotová.

Príklad: Deklaratívny zápis CsVStore a DataGrid-u.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<article data-dojo-type="dojox/data/CsvStore" 
data-dojo-props="url : 'data.csv', urlPreventCache : true, 
separator : ','" data-dojo-id="csvData">
</article>
<table id="grid" data-dojo-type="dojox/grid/DataGrid" 
data-dojo-props="autoHeight : true, autoWidth : true, 
store : csvData">
  <thead>
    <tr>
      <th field="Car">Cars</th>
     <th field="Year">Year</th>
    </tr>
  </thead>
</table>
<article data-dojo-type="dojox/data/CsvStore" 
data-dojo-props="url : 'data.csv', urlPreventCache : true, 
separator : ','" data-dojo-id="csvData">
</article>
<table id="grid" data-dojo-type="dojox/grid/DataGrid" 
data-dojo-props="autoHeight : true, autoWidth : true, 
store : csvData">
  <thead>
    <tr>
      <th field="Car">Cars</th>
     <th field="Year">Year</th>
    </tr>
  </thead>
</table>

O nahrávanie dát zo súboru sa stará vlastnosť url. Pre zobrazenie dát v tabuľke je potrebné definovať oddeľovač dát, ktorým je v tomto prípade znak ,. Oddeľovač sa definuje prostredníctvom vlastnosti separator. Dáte pre grid sa definujú vo vlastnosti store. Hodnota vlastnosti store zodpovedá hodnote atribútu data-dojo-id. Týmto zápisom sa vložia dáta CsvStore do DataGridu. Atribút field definuje stĺpec, ktorého dáta sa majú zobraziť. Názov stĺpca je uvedený ako hodnota elementu <th>. Výsledok je možné vidieť na obrázku.

Obrázok: Zobrazenie CSV dát v tabuľke.

Druhý príklad bude vykonávať to isté, no zápis widgetov bude programatický, teda prostredníctvom JavaScriptu a nie jazyka HTML.

Príklad: Zápis do elementu <body>.

1
<div id="dataGrid"></div>
<div id="dataGrid"></div>

Príklad: Programatický zápis CsVStore a DataGrid do elementu <script>.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
require(["dojo/ready", "dojox/data/CsvStore", "dojox/grid/DataGrid",
"dojo/parser"], function(ready, CsvStore, DataGrid) {
  ready(function() {
 
    var store = new CsvStore({
      url: "data.csv",
      separator: ','
    });
 
    var layout = [{
      field: "Car",
      name: "Cars"
      }, {
      field: "Year",
      name: "Year"
    }];
 
    var datagrid = new DataGrid({
      store: store,
      structure: layout,
      autoHeight : true,
      autoWidth : true
    },
    "dataGrid");
 
    datagrid.startup(); // needed
  });
});
require(["dojo/ready", "dojox/data/CsvStore", "dojox/grid/DataGrid",
"dojo/parser"], function(ready, CsvStore, DataGrid) {
  ready(function() {

    var store = new CsvStore({
      url: "data.csv",
      separator: ','
    });

    var layout = [{
      field: "Car",
      name: "Cars"
      }, {
      field: "Year",
      name: "Year"
    }];

    var datagrid = new DataGrid({
      store: store,
      structure: layout,
      autoHeight : true,
      autoWidth : true
    },
    "dataGrid");

    datagrid.startup(); // needed
  });
});

Štruktúra tabuľky je definovaná v premennej layout. Vlastnosť field definuje stĺpec, ktorého dáta budú zobrazované a vlastnosť name jeho názov.

CSV dáta ako zdroj pre polia formulára

CSV dáta je možné nielen zobrazovať, ale aj použiť ako zdroj pre polia formulára. Príkladom je dijit/form/ComboBox. Opäť budú predstavené oba spôsoby zápisu, deklaratívny aj programatický. Deklaratívny zápis ComboBoxu je veľmi jednoduchý. Vo svojej podstate ide len o dva riadky.

Príklad: Zápis do elementu <body>.

1
2
3
4
5
6
7
8
<article data-dojo-type="dojox/data/CsvStore" 
data-dojo-props="url : 'data.csv', urlPreventCache : true, 
separator : ','" data-dojo-id="csvData">
</article>
 
<div data-dojo-type="dijit/form/ComboBox" 
data-dojo-props="store : csvData, searchAttr : 'Car', 
value : 'BMW'"></div>
<article data-dojo-type="dojox/data/CsvStore" 
data-dojo-props="url : 'data.csv', urlPreventCache : true, 
separator : ','" data-dojo-id="csvData">
</article>

<div data-dojo-type="dijit/form/ComboBox" 
data-dojo-props="store : csvData, searchAttr : 'Car', 
value : 'BMW'"></div>

Tak ako v elemente th bol použitý atribút field, v ComboBoxe túto rolu zastupuje vlastnosť s názvom searchAttr. Atribútom value je definovaná východiskový hodnota, ktorá bude zobrazená v poli formulára.

Obrázok: Použitie CSV dát v poli formulára.

Posledný príklad je ukážkou programatického zápisu widgetov ComboBox a CsvStore.

Príklad: Zápis do elementu <body>.

1
<div id="comboBox"></div>
<div id="comboBox"></div>

Príklad: Zápis do elementu <script>.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
require(["dojo/ready", "dojox/data/CsvStore",
"dijit/form/ComboBox",
"dojo/parser"], function(ready, CsvStore, ComboBox) {
  ready(function() {
 
  var store = new CsvStore({
    url: "data.csv",
    separator: ','
  });
 
  var comboBox = new ComboBox({
    name: "Cars",
    value: "BMW",
    store: store,
    searchAttr: "Car"
    },
    "comboBox");
  });
});
require(["dojo/ready", "dojox/data/CsvStore",
"dijit/form/ComboBox",
"dojo/parser"], function(ready, CsvStore, ComboBox) {
  ready(function() {

  var store = new CsvStore({
    url: "data.csv",
    separator: ','
  });

  var comboBox = new ComboBox({
    name: "Cars",
    value: "BMW",
    store: store,
    searchAttr: "Car"
    },
    "comboBox");
  });
});

Uvedený zápis nepotrebuje žiaden širší komentár. Ako prvé je vytvorený CsvStore s dátami zo súboru data.csv. Ako druhé je vytvorený ComboBox, ktorému sú priradené dáta z CsvStore.

Záver

Ako vidieť, práca s CsvStore je veľmi jednoduchá a použitie CSV dát v rôznych widgetoch tiež. Keďže CSV formát je veľmi jednoduchý, môže sa stať CsvStore veľmi dobrým pomocníkom.

Spoznávame dojox/data/CsvStore

Zobrazovanie CSV dát vo widgete DataGrid

CSV dáta ako zdroj pre polia formulára

Záver

Komentáre

Pridať komentár