reklama

Umíme ve Flashi – 10. díl – graf s tabulkou hodnot

V minulém díle jsme si ukázali zajímavý způsob dynamického generování grafů. Dnes navážeme na předchozí díly a zdrojová data grafu zobrazíme v tabulce pomocí komponenty DataGrid.

DataGrid komponenta

Tato velmi užitečná komponenta je dostupná uživatelům verze Flash Professional. Jedná se o výtečného pomocníka pro přehledné a strukturované zobrazení širokého spektra dat a dokonce i dalších komponent.

Vzhledem se jedná o klasickou tabulku, která má sloupce a řádky. První řádek slouží pro textový popis jednotlivých sloupců, zbylá políčka mohou obsahovat jak text, čísla tak i další komponenty. Ihned se zde nabízí zajímavé využití například jako seznam vybraného zboží nákupního košíku, kde je možné měnit množství, rozměry atd.

Hlavní část tabulky využívá List komponentu. Z tohoto důvodu jsme mírně omezeni, co se týče grafického nastavení komponenty. Jedná se především o možnost zprůhlednění pozadí. Lépe řečeno, průhledné pozadí lze vytvořit, ale jednotlivé buňky tabulky se stanou neaktivními a to je v tomto případě dost podstatné omezení.

Graf s tabulkou

Využijeme zdrojového souboru z minulého dílu. Pokud jej nemáme, nalezneme jej zde. Až na drobné úpravy zůstane vše při starém, pouze nahradíme kombobox novou komponentou DataGrid.

Otevřeme si tedy zdrojový soubor z minulého dílu a na hlavní scéně vymažeme komponentu ComboBox. Pokud budeme dál využívat tento soubor, doporučuji vymazat komponentu i z knihovny, protože je u ní nastaven export a zbytečně zvětšuje výslednou velikost swf souboru.

Nyní asi bude nejjednodušší, když vymažeme kompletně všechny příkazy z prvního snímku a nahradíme je těmito:

import flash.filters.DropShadowFilter;
import flash.filters.BevelFilter;
prostorDef = function (cil) {
 var distance:Number = 3;
 var angleInDegrees:Number = 45;
 var highlightColor:Number = 0xFFFFFF;
 var highlightAlpha:Number = .8;
 var shadowColor:Number = 0x000000;
 var shadowAlpha:Number = .8;
 var blurX:Number = 5;
 var blurY:Number = 5;
 var strength:Number = 1;
 var quality:Number = 3;
 var type:String = "inner";
 var knockout:Boolean = false;
 var filterb:BevelFilter = new BevelFilter(distance, angleInDegrees, highlightColor, highlightAlpha, shadowColor, shadowAlpha, blurX, blurY, strength, quality, type, knockout);
 var filterArrayb:Array = new Array();
 filterArrayb.push(filterb);
 cil.filters = filterArrayb;
 vzdalenost = 5;
 uhel = 45;
 barva = 0x000000;
 pruhlednost = 0.8;
 rozmazX = 5;
 rozmazY = 5;
 sila = 1;
 kvalita = 2;
 var filter:DropShadowFilter = new DropShadowFilter(vzdalenost, uhel, barva, pruhlednost, rozmazX, rozmazY, sila, kvalita);
 var filterArrayc:Array = new Array();
 filterArrayc.push(cil.filters[0]);
 filterArrayc.push(filter);
 cil.filters = filterArrayc;
};
maxH = 250;
maxVal = 500;
posuv = maxVal/maxH;
rychlost = 8;
graf = function (target) {
 for (ax=1; ax<rychlost; ax++) {
  if (target.sloupek._height<=target.hodnota/posuv) {
   target.actHodnota++;
   target.sloupek._height += 0.5;
   target.num.text = target.sloupek._height*posuv-1;
   target.num._y = -1*target.sloupek._height-target.num._height;
   prostorDef(target);
  } else {
   break;
  }
 }
};
xpozice = 110;
ypozice = 260;
sloupcu = 0;
createGraf = function (poleHodnot) {
 for (i=0; i<sloupcu; i++) {
  eval("graf"+i).removeMovieClip();
 }
 hodnoty = new Array();
 hodnoty = poleHodnot;
 for (i=0; i<hodnoty.length; i++) {
  this.attachMovie("graf", "graf"+i, i);
  eval("graf"+i)._x = xpozice+2.3*i*eval("graf"+i)._width;
  eval("graf"+i)._y = ypozice;
  eval("graf"+i).hodnota = hodnoty[i];
  eval("graf"+i).actHodnota = 0;
 }
 sloupcu = hodnoty.length;
};

Změnilo se jen pár detailů. Asi nejvýraznější je změna u první funkce, která generuje animaci nárůstu sloupku grafu. Doplnili jsme ji o cyklus FOR s proměnnou „rychlost“. Ta určuje, jak rychle se budou grafy generovat. Je zřejmé, že čím větší hodnota, tím rychleji porostou jednotlivé sloupky.

Uvedenou funkci jsme použili, protože jsme zjemnili posuv sloupku na hodnotu „0.5“ a pokud bychom to tak nechali, než by grafy narostly, mohli bychom si dát jedno dobré kafe. Zjemnění jsme použili kvůli zpřesnění zobrazovaných dat. Více změn není třeba.

Vytvoření tabulky

Otevřeme si okno komponent a na scénu vložíme DataGrid komponentu. Pojmenujeme jí „tabulka“ a do akcí prvního snímku dopíšeme následující řádky:

tabulka.setStyle("themeColor", "haloOrange");
var hodnoty:Array = new Array();
for (i=1; i<10; i++) {
 nazevPol = "zboží"+i;
 for (a=1; a<6; a++) {
  set("pol"+a, Math.round(Math.random()*maxVal));
 }
 hodnoty.push({nazev:nazevPol, hodn1:pol1, hodn2:pol2, hodn3:pol3, hodn4:pol4, hodn5:pol5});
 tabulka.dataProvider = hodnoty;
 tabulka.getColumnAt(0).headerText = "Položka";
 tabulka.getColumnAt(1).headerText = "rok 1999";
 tabulka.getColumnAt(2).headerText = "rok 2000";
 tabulka.getColumnAt(3).headerText = "rok 2001";
 tabulka.getColumnAt(4).headerText = "rok 2002";
 tabulka.getColumnAt(5).headerText = "rok 2003";
}
var getValues:Object = new Object();
getValues.cellPress = function(evt_obj:Object) {
 obj = new Object();
 obj = tabulka.getItemAt(evt_obj.itemIndex);
 poleHdn = new Array();
 for (ii=1; ii<6; ii++) {
  poleHdn.push(eval("obj.hodn"+ii));
 }
 createGraf(poleHdn);
};
tabulka.addEventListener("cellPress", getValues);

První řádek je jasný, změníme barevné schéma na oranžové. Následuje funkce pro naplnění tabulky hodnotami a pomocí vlastnosti komponenty „dataProvider“ nakonec vložíme pole hodnot jednoho řádku. Opět si zde pro ulehčení vygenerujeme náhodné hodnoty a název v prvním políčku řádky zvolíme obecně, například „zboží+číslo“. Na konci přiřadíme pole hodnot tabulce a upravíme názvy jednotlivých sloupců.

Abychom mohli graf vygenerovat, potřebujeme mít pole hodnot, které se mají zobrazit. Toto pole vytvoříme z hodnot jednotlivých buněk řádku tabulky a dobře nám k tomuto účelu poslouží objekt „getValues“, reagující na kliknutí na buňku tabulky „cellPress“.

Jakmile máme potřebné hodnoty uložené v poli, zavoláme funkci „createGraf()“ a je téměř hotovo. Nesmíme zapomenout přiřadit objekt pro detekci události na komponentu tabulky.

Nyní otestujeme a vyzkoušíme si, jak reaguje tabulka na výběr jednotlivých řádků.

Ukázku výsledku si můžete prohlédnout zde. Zdrojový soubor je k dispozici zde.

Témata článku: Software, Programování, Distance

1 komentář

Nejnovější komentáře

  • gully, gully 12. 12. 2005 0:28:39
    http://diskuse-zaciname-s-flash-mx-2004.wz.cz
reklama
Určitě si přečtěte

Vybíráte herní periferii nebo hardware? Pak zapomeňte na nálepku Gaming

Vybíráte herní periferii nebo hardware? Pak zapomeňte na nálepku Gaming

** Herní hardware se od toho běžného často liší jen vzhledem ** Při výběru stále nezapomínejte na základní parametry ** Poradíme jak vybrat herní hardware i periferie

20.  2.  2017 | Stanislav Janů | 35

10 nejhorších produktů v historii Microsoftu

10 nejhorších produktů v historii Microsoftu

20.  2.  2017 | Karel Javůrek | 131

Pojďme programovat elektroniku: Žádný bastlíř se neobejde bez armády švábů

Pojďme programovat elektroniku: Žádný bastlíř se neobejde bez armády švábů

** Každý bastlíř se po čase neobjede bez armády švábů ** Dnes si některé z nich vyzkoušíme ** Třeba zázračný posuvný registr

19.  2.  2017 | Jakub Čížek | 39

Facebook o nás ví vše. Díky dobře skrytému vyhledávači se to dozví i ostatní

Facebook o nás ví vše. Díky dobře skrytému vyhledávači se to dozví i ostatní

** Facebook o nás ví vše, protože mu to sami řekneme ** V jeho nitru se skrývá mocný vyhledávač ** Mohou jej zneužít stalkeři, sociální inženýři a další nezbedníci

16.  2.  2017 | Jakub Čížek | 76

Vyhledávání ve Windows není dokonalé, zkuste to 5× jinak

Vyhledávání ve Windows není dokonalé, zkuste to 5× jinak

** V macOS funguje vyhledávání Spotlight, ve Windows podobně propracovaná funkce chybí ** Alternativy se zaměřují na rychlé hledání souborů i externí zdroje ** Mnohé mohou vyhledávání ve Windows kompletně nahradit

18.  2.  2017 | Stanislav Janů | 58


Aktuální číslo časopisu Computer

Stavba 3D tiskárny

Výbava domácí elektrodílničky

Budoucnost 5G sítí

Velké testy microSD karet a vodních chladičů

Přehled mobilních tarifů

reklama
reklama