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
Určitě si přečtěte

Operační systém běžným počítačům nedal Bill Gates, ale Gary Kildall

Operační systém běžným počítačům nedal Bill Gates, ale Gary Kildall

** Gary Kildall pochopil, že levné výpočetní čipy mohou posloužit jako univerzální počítače pro všechny ** Připravil pro ně proto první operační systém ** Později mu systém vyfoukl Microsoft a nazval ho MS DOS

23.  4.  2017 | Pavel Tronner | 56

Umělá inteligence je sice v plenkách, už teď ale přestáváme rozumět, jak vlastně funguje. To je problém

Umělá inteligence je sice v plenkách, už teď ale přestáváme rozumět, jak vlastně funguje. To je problém

** Už je to tady, lidé přestávají chápat počítače ** Systémy neuronových sítí začínají pracovat tak, že ani jejich tvůrci přesně neví, co se uvnitř děje ** Do budoucna to může být závažný problém

24.  4.  2017 | Jakub Čížek | 112

Před 35 lety měl premiéru legendární počítač ZX Spectrum. Připomeňte si „Gumáka“

Před 35 lety měl premiéru legendární počítač ZX Spectrum. Připomeňte si „Gumáka“

** Slavný osmibitový počítač Sinclair ZX Spectrum byl uveden právě před 35 lety ** Připomeňte si tento průkopnický počítač v tematických článcích ** Podívejte se, jak funguje dnes

23.  4.  2017 | Pavel Tronner | 13

Správný počítač má alespoň dva monitory. Anebo je to jinak?

Správný počítač má alespoň dva monitory. Anebo je to jinak?

** David si nedokáže představit práci bez dvou a více monitorů ** Kubovi naopak stačí jeden a ve více displejích se ztrácí ** Jaký přístup je lepší?

23.  4.  2017 | Jakub Čížek | 59

Brněnské soudy daly stop Uberu. Je to dobře, nebo krok zpět?

Brněnské soudy daly stop Uberu. Je to dobře, nebo krok zpět?

** Před několika měsíci začal Uber nabízet své služby i v Brně ** Nyní ale narazil, soudům se to totiž nelíbí ** Má sdílená ekonomika dostat zelenou?

22.  4.  2017 | Jakub Čížek | 28


Aktuální číslo časopisu Computer

Supertéma: moderní cestování

Kdy opravdu přijdou nové baterie?

Velké testy: 6 herních notebooků a 8 volantů

Recenze: AMD Ryzen řady 5