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

UPC překopli páteřní kabel. V Brně i druhý den nejede internet ani kabelovka

UPC překopli páteřní kabel. V Brně i druhý den nejede internet ani kabelovka

** V Brně byl velký výpadek služeb UPC ** Důvodem je překopnutý páteřní kabel ** V některých lokalitách služby stále nefungují

5.  12.  2016 | Jakub Čížek | 99

ASUS ZenBook 3 se začal prodávat v Česku. Je ve všem lepší než MacBook, ale bude to stačit?

ASUS ZenBook 3 se začal prodávat v Česku. Je ve všem lepší než MacBook, ale bude to stačit?

** Novinka od Asusu míří přímo proti MacBooku od Applu ** Nabídne daleko více výkonu za stejné peníze

2.  12.  2016 | David Polesný | 144

17 expertek Microsoftu předpovědělo rok 2027. Splní se alespoň něco?

17 expertek Microsoftu předpovědělo rok 2027. Splní se alespoň něco?

** Zmizí klasické vyhledávače ** Budeme programovat buňky ** Kvantové počítače překonají šifry

Včera | Jakub Čížek | 33


reklama