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í, Výsledný nárůst, Jednotlivý soubor, Grafické nastavení, První snímek, Jednotlivé komponenty, Jednotlivý snímek, Jednotlivý díl, Distance, Jednotlivá buňka, Tab, Graf, Dobré zpřesnění, Díl

Určitě si přečtěte

Dnes je Black Friday: Přehled slev na elektroniku a počítače

Dnes je Black Friday: Přehled slev na elektroniku a počítače

** Začala slevová mánie zvaná Black Friday ** Pozor, ne všechny slevy jsou opravdu výhodné ** Průběžně sledujeme slevové akce v počítačových e-shopech

22.  11.  2017 | David Polesný | 37

Google Mapy mají nový design. Líbí se vám víc než předchozí? Tady je srovnání

Google Mapy mají nový design. Líbí se vám víc než předchozí? Tady je srovnání

** Nový design Google Map přijde na počítače i mobilní telefony. ** Zaměřuje se na zvýraznění konkrétních míst, mapové podklady jsou mnohdy upozaděné. ** Lépe pracuje s chráněnými oblastmi a parky.

20.  11.  2017 | Vladislav Kluska | 30

Microsoftu se invaze na Android daří, jeho launcher aktivně používá přes milion lidí

Microsoftu se invaze na Android daří, jeho launcher aktivně používá přes milion lidí

** Microsoft se zabydluje na platformě Android ** Nedávno představený launcher už používá milion uživatelů ** Je to stále jen zanedbatelný zlomek uživatelů Androidu, ale slibný růst

22.  11.  2017 | Vladislav Kluska | 35

Co je to láska? Milujeme se pouze kvůli chemickým látkám, nebo je v tom něco víc?

Co je to láska? Milujeme se pouze kvůli chemickým látkám, nebo je v tom něco víc?

** Co je to vlastně láska? Dá se vysvětlit vědecky? ** Výzkum ukázal, že zamilovaní jedinci mají mj. zvýšenou hladinu fenyletylaminu a množství testosteronu ** Je ale rozdíl mezi zamilovaností a láskou

21.  11.  2017 | Vojtěch Malý | 22


Aktuální číslo časopisu Computer

Otestovali jsme 5 HDR 4K televizorů

Jak natáčet video zrcadlovkou

Vytvořte si chytrou domácnost

Radíme s koupí počítačového zdroje