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

Microsoft: Zbavte se už konečně zastaralých a děravých Windows 7

Microsoft: Zbavte se už konečně zastaralých a děravých Windows 7

** Microsoft pomalu začíná kritizovat svůj nejpopulárnější OS ** Chce konečně dostat podniky na Desítky ** Bezpečnostní podpora Sedmiček vydrží ještě necelé tři roky

17.  1.  2017 | Jakub Čížek | 366

Pojďme programovat elektroniku: Sestavíme si mobil a pošleme SMS

Pojďme programovat elektroniku: Sestavíme si mobil a pošleme SMS

** Kolik stál váš mobilní telefon? ** Základní GSM modem koupíte za stovku ** Umí telefonovat, posílat SMS a zvládne i GPRS

13.  1.  2017 | Jakub Čížek | 27

Český státní blacklist už funguje. Ministerstvo financí se pochlubilo s detaily

Český státní blacklist už funguje. Ministerstvo financí se pochlubilo s detaily

** Dva týdny po Novém roce zajím zeje prázdnotou ** Ministerstvo vydalo metodický pokyn ** Takhle to bude fungovat v praxi

16.  1.  2017 | Jakub Čížek | 49


Aktuální číslo časopisu Computer

99 nejlepších programů pro váš počítač

Zvykejte si na umělou inteligenci

Velké testy PC zdrojů a gamepadů

Alternativní zdroje energie

reklama
reklama