UI komponenty
Co je to komponent?
Komponent, n∞kdy takΘ zvan²
SmartClip je MovieClip, kter² je naprogramovan² pro urΦit² ·Φel, z
n∞ho₧ jsou na povrch "vyvedeny" n∞kterΘ prom∞nnΘ, kterΘ
jsou d∙le₧itΘ pro chod komponentu. Tyto prom∞nnΘ pak m∙₧e animßtor
editovat. Komponent si lze p°edstavit jako zamΦenou Φernou sk°φ≥ku
s ovlßdacφm panelem (kter² vÜak vidφ jen animßtor). Komponent
ze strany u₧ivatele vypadß jako obyΦejn² MovieClip.
UI znamenß z°ejm∞ User Interface. Komponenty jako takovΘ existujφ
u₧ od verze 5, ale UI komponenty pou₧φvajφ novΘ funkce ActionScriptu,
tak₧e ve verzi 5 nefungujφ.
Instanci UI komponentu umφstφte na scΘnu jeho p°eta₧enφm z okna "Components" (Window -> Components)
Jen doplnφm, ₧e vÜechny p°φkazy ovliv≥ujφcφ UI komponenty naleznete
v sekci "Flash UI Components"
Druhy komponent∙
Druhy UI komponent∙ prakticky vychßzφ z formulß°∙ v jazyce HTML.
- PushButton (tlaΦφtko)
- ComboBox (roletovΘ menu)
- ListBox (roletovΘ menu - trvale otev°enΘ)
- CheckBox (zaÜkrtßvacφ pole)
- RadioButton (v²b∞rovΘ pole)
- Scrollbar (posuvnφk)
- SrollPane (n∞co jako frame - umo₧≥uje zobrazovat MovieClip)
1. Push button
Prvnφ a nejjednoduÜÜφ z rodiny UI Komponet∙. Jednß se o klasickΘ
tlaΦφtko
Pokud ho p°etßhnete na scΘnu, zobrazφ se na panelu "Properties"
okno s nßzvem "Parameters":
Prßv∞ v tomto okn∞ jsou vyvedeny ony editovatelnΘ prom∞nnΘ. V tomto
p°φpad∞ jen 2.
Metody objektu PushButton:
| getEnabled |
Vracφ hodnotu true/false jestli je komponent
zablokovan² |
| getLabel |
Vracφ hodnotu popisku |
| setClickHandel |
Nastavuje funkci, kterß bude volßna po kliknutφ |
| setEnabled |
Umo₧≥uje zablokovat/odblokovat komponent |
| setLabel |
Nastavuje popisek |
| setSize |
Nastavuje rozm∞ry (W, H) |
2. Combo Box
Voln² p°eklad by byl nejspφÜ "roletovΘ menu".
Combo Box obsahuje n∞kolik polo₧ek, ze kter²ch je mo₧no jednu zvolit.
- Editable (true/false)
Pokud zvolφte "true", p∙jde, krom∞ volby jednΘ mo₧nosti, napsat vlastnφ
hodnota
- Labels (popisky)
Pokud klepnete na lupu vpravo, otev°e se okno, kde je mo₧nΘ definovat
popisky mo₧nostφ
- Data
Zde p°i°adφte mo₧nostem hodnoty, kterΘ budou nastavovat
- Row Count (Φφslo)
PoΦet °ßdk∙, kterΘ majφ b²t viditelnΘ p°i rozbalenφ
- Change Handler (funkce)
Funkce, kterß mß b²t volßna p°i zvolenφ polo₧ky
function akce() {
gotoAndStop(_root.roletka1.getValue());
}
Zde je pou₧ita metoda objektu ComboBox getValue() udßvajφcφ
hodnotu "Data" vybranΘ polo₧ky. Je samoz°ejm∞ nutnΘ instanci komponentu
pojmenovat (roletka1). Pokud te∩ vybereme nap°klad polo₧ku "hruÜky",
p°ejde animace na snφmek 2.
Metody objektu ComboBox:
| addItem |
P°idß polo₧ku: addItem("popisek", data) |
| addItemAt |
P°idß polo₧ku na urΦenΘ mφsto (index) |
| getItemAt |
Vracφ popisek: getItemAt(4).label nebo data:
...(4).data |
| getLength |
Vracφ poΦet polo₧ek |
| getRowCount |
Vracφ poΦet °ßdk∙ p°i rozbalenφ |
| getScrollPosition |
Vracφ index polo₧ky zobrazenΘ nejv²Üe v seznamu |
| getSelectedIndex |
Vracφ index vybranΘ polo₧ky |
| getSelectedItem |
Vracφ popisek/data vybranΘ polo₧ky (viz getItemAt) |
| getValue |
Vracφ data vybranΘ polo₧ky |
| removeAll |
Odstranφ vÜechny polo₧ky |
| removeItemAt |
Odstran∞nφ urΦitΘ polo₧ky (index) |
| replaceItemAt |
P°epsat polo₧ku: replaceItemAt(4, "novynazev",
data) |
| setChangeHandler |
nastavenφ funkce, kterß mß b²t volßna p°i zvolenφ polo₧ky |
| setDataProvider |
Nastavφ hodnotu dat polo₧ek podle pole Array() |
| setEditable |
viz Editable |
| setItemSymbol |
Zobrazenφ symbolu v rozbalovacφm seznamu |
| setRowCount |
Nastavφ poΦet °ßdk∙ p°i rozbalenφ |
| setSelectedIndex |
Nastavφ index vybranΘ polo₧ky |
| setValue |
Nastavφ hodnotu editovatelnΘ polo₧ky (viz Editable) |
| SortItemsBy |
Se°adφ polo₧ky bu∩ podle popisku nebo podle dat |
| ...ostatnφ viz d°φve |
|
3. List Box
Pracuje na stejnΘm principu jako Combo Box (v k≤du HTML tyto 2
objekty dokonce reprezentuje jeden tag). Jednß se o trvale
rozbalenΘ menu Jedinß odliÜnost je v mo₧nosti vybrat vφce
polo₧ek najednou (Select Multiple) Metody objektu ListBox:
| getSelectedIndices |
Vracφ indexy vybran²ch prvk∙ zapsanΘ do pole Array |
| getSelectedItems |
Vracφ popisky/data vybran²ch prvk∙ zapsanΘ do pole
Array (syntaxe viz getItemAt) |
| getSelectMultiple |
Sd∞luje jestli jsou povoleny vφcenßsobnΘ volby |
| setAutoHideScrollBar |
Nastavuje zobrazenφ posuvnφku (true/false) |
| setSelectedIndices |
Nastavuje vybranΘ prvky podle index∙ zapsan²ch v poli
Array |
| setSelectMultiple |
Povoluje nebo zakazuje vφcenßsobnΘ volby |
| ...ostatnφ viz d°φve |
|
4. Check Box
ZaÜktrßvacφ pole. Nab²vß jen 2 hodnot: oznaΦeno/neoznaΦeno (true/false)
- Label
viz d°φve
- Initial value (true/false)
PoΦßteΦnφ hodnota
- Label Placement (left/right)
Pozice popisku
- Change Handler
viz d°φve
Metody objektu CheckBox:
| getValue |
Zφskßnφ hodnoty pole (true/false) |
| setValue |
Nastavenφ hodnoty pole (true/false) |
| setLabelPlacement |
Nastavenφ pozice popisku ("left"/"right") |
| ...ostatnφ viz d°φve |
|
5. Radio Button
Podobnß funkce jako v p°edchozφm p°φpad∞ s tφm rozdφlem, ₧e Radio Button∙
musφ b²t 2 a vφce v jednΘ skupin∞ a je mo₧nΘ vybrat v₧dy jen jednu z
mo₧nostφ v jednΘ skupin∞.
- Label
viz d°φve
- Initial State
viz d°φve
- Group Name (nßzev skupiny)
Nßzev skupiny musφ b²t samoz°ejm∞ u vÜech prvk∙ skupiny stejn²
- Data
Data p°id∞lenß polo₧ce
- Label Placement
viz d°φve
- Change Handler
viz d°φve
Metody objektu RadioButton:
| getGroupName |
Zφskßnφ nßzvu skupiny |
| setGroupName |
Nastavenφ nßzvu skupiny |
| getState |
Zφskßnφ stavu (true/false) |
| setState |
Nastavenφ stavu (true/false) |
| ...ostatnφ viz d°φve |
|
6. Scrollbar
Posuvnφk, kter² je mo₧no p°ipojit k textovΘmu poli typu "Multiline".
Pokud scrollbar p°esunete "dovnit°" textovΘho pole, automaticky se p°ichytφ
a nastavφ se target.
- Target TextField (jmΘno instance - nikoliv zobrazovanΘ
prom∞nnΘ)
OvlßdanΘ textovΘ pole
- Horizontal (true/false)
Pokud zvolφte true, bude posuvnφk vodorovn²
Metody objektu ScrollBar:
| getScrollPosition |
Udßvß Φφslo °ßdku zobrazenΘho nejv²Üe |
| setHorizontal |
vodorovn² (true) nebo normßlnφ (false) posuvnφk |
| setLargeScroll |
Nastavuje posuv (°ßdky) v p°φpad∞ kliknutφ do drßhy |
| setScrollPosition |
Nastavuje pozici posuvnφku (Φφslo nejvyÜÜφho °ßdku) |
| setScrollProperties |
setScrollProperties(celk. poΦet °ßdk∙,
Φ. °ßdku v nejvyÜÜφ pozici jezdce, Φ. °ßdku v nejni₧Üφ
pozici jezdce) |
| setScrollTarget |
Nastavφ jmΘno ovlßdanΘ instance textovΘho pole |
| setSize |
Nastavuje dΘlku posuvnφku v pixelech |
| setSmallScroll |
Nastavuje posuv (°ßdky) p°i kliknutφ na Üipku |
| ...ostatnφ viz d°φve |
|
7. Scroll Pane
Poslednφ z rodiny UI komponent∙. Tento element se tak trochu podobß in
line frame z HTML. Je to okno, kterΘ umφ uvnit° zobrazovat MovieClipy.
Pokud je MC v∞tÜφ, ne₧ okno, zobrazφ se pat°iΦn² posuvnφk.
- Scroll Content (JmΘno MovieClipu)
Zobrazovan² obsah
- Horizontal Scroll (auto/true/false)
Vodorovn² posuvnφk
- Verical Scroll (auto/true/false)
Svisl² posuvnφk
- Drag Content (true/false)
Povolit/zakßzat mo₧nost uchopenφ MC
Metody objektu ScrollPane:
| getPaneHeight |
Udßvß Üφ°ku pole |
| getPaneWidth |
Udßvß v²Üku pole |
| getScrollContent |
Udßvß nßzev zobrazovanΘho MovieClipu |
| getScrollPosition |
pozice MC (za p°φkaz je nutno p°idat .x nebo
.y) |
| loadScrollContent |
NaΦte do pole externφ SWF nebo JPEG (URL, [funkce
zavolanß po naΦtenφ], [pozice funkce]) |
| refreshPane |
znovunaΦtenφ obsahu (nap°. po zm∞n∞ jeho vlastnostφ) |
| setDragContent |
Povolit/zakßzat mo₧nost uchopenφ MC |
| setHScroll |
Zobrazenφ vodorovnΘho posuvnφku (auto/true/false) |
| setVScroll |
Zobrazenφ svislΘho posuvnφku (auto/true/false) |
| setScrollContent |
Nastavenφ zobrazovanΘho MC |
| setScrollPosition |
Nastavenφ pozice MC (viz getScrollPosition) |
| setSize(Ü, v) |
Nastavenφ velikosti pole |
| ...ostatnφ viz d°φve |
|
Stylovßnφ UI komponent∙
Stylovßnφ komponent∙ pova₧uji za jejich nejsiln∞jÜφ zbra≥. Äel bohu se
jednß p°evß₧n∞ jen o zm∞nu barvy toho kterΘho prvku. Existuje n∞kolik
mo₧nostφ stylovßnφ 1. Globßlnφ
T²kß se veÜker²ch komponent∙ v animaci. Pou₧φvß se objektu
globalStyleFormat. Mal² p°φklad:
globalStyleFormat.arrow = 0xFF0000;
globalStyleFormat.applyChanges();
V prvnφm °ßdku je definovßna vlastnost objektu globalStyleFormat "arrow" jako
hexadecimßlnφ barevnß hodnota (v naÜem p°φpad∞ Φervenß) Nßsleduje
metoda applyChanges(), kterß aplikuje zm∞ny. D∙sledek bude takov², ₧e
veÜkerΘ Üipky (ComboBox, ScrollBar, ...) budou obarveny na Φerveno.
PovÜimn∞te si, ₧e objekt globalStyleFormat nepot°ebuje konstruktor (viz
Objekty). 2.
SkupinovΘ
Jak ji₧ vφte, objekt globalStyleFormat ovliv≥uje vÜechny instance
komponent∙ na scΘn∞. My si ale te∩ vytvo°φme vlastnφ objekt, kter²
bude ovliv≥ovat jen urΦitou skupinu komponent∙.
skupina1 = new FStyleFormat();
skupina1.addListener(radio1);
skupina1.addListener(radio2);
skupina1.radioDot = 0xFF0000;
skupina1.applyChanges();
Zde ji₧ musφme pou₧φt konstruktor "new" pro vytvo°enφ svΘho objektu. Dßle musφme nastavit, kter²ch
instancφ se bude formßtovßnφ t²kat addListener(nazev instance).
P°irozen∞ je nutnΘ instance pojmenovat. OpaΦn² efekt mß metoda
removeListener(nßzev instance). Ve 4. °ßdku pak definujeme
vlastnost radioDot jako op∞t Φervenou barvu. Nakonec musφme op∞t
aplikovat zm∞ny. KoneΦn² efekt bude obarvenφ teΦek RadioButton∙ "radio1"
a "radio2" 3. P°φmΘ
T°etφ mo₧nost je p°φmΘ adresovßnφ vlastnosti danΘmu komponentu:
nßzevInstance.setStyleProperty("vlastnost", hodnota);
Myslφm, ₧e je to vφc ne₧ jasnΘ. Jen nezapome≥te uzav°φt nßzev vlastnosti do
uvozovek, aby nebyl chßpßn jako prom∞nnß.
Malß ukßzka:
seznam1.setStyleProperty("arrow", 0xFF0000);
Tento p°φkaz tedy obarvφ na Φerveno Üipku v instanci komponentu "seznam1
Seznam vlastnostφ:
| arrow |
Barva Üipky |
| background |
Barva pozadφ |
| backgroundDisabled |
Barva pozadφ u neaktivnφho komponentu |
| check |
Barva "fajfky" [√] u CheckBox |
| darkshadow |
Barva tmavΘho stφnu |
| embedFonts [true/false] |
Pou₧itφ p°ibalenΘho fontu (font musφ b²t ji₧ p°ibalen do
n∞kterΘho textovΘho pole, nebo musφ b²t umφst∞n v knihovn∞ a musφ b²t
definovßn font komponentu pomocφ textFont) |
| face |
Barva pozadφ tlaΦφtek a vnit°nφch ploch scrollbar∙ |
| fadeRate |
PostupnΘ rozsvφcenφ (ms) vybranΘ polo₧ky u Combo a ListBox |
| PopUpFade |
PostupnΘ objevenφ (ms) seznamu u ComboBox |
| foregroundDisabled |
Obarvenφ Üipek neaktivnφho komponentu |
| highlight |
Obarvenφ plochy "highlight" |
| highlight3D |
Obarvenφ plochy "highlight 3D" |
| radioDot |
Barva teΦky RadioButton komponentu |
| scrollTrack |
Barva drßhy posuvnφku |
| selection |
barva v²b∞ru u ComboBox a ListBox |
| selectionDisabled |
Barva vybranΘ polo₧ky u neaktivnφho komponentu ListBox |
| selectionUnfocused |
Barva vybranΘ polo₧ky ListBox, kter² nenφ prßv∞ editovßn |
| shadow |
Barva stφnu |
| textAlign |
Zarovnßnφ textu ("left" / "right") |
| textBold |
TuΦn² text (true/false) |
| textColor |
Barva textu |
| textDisabled |
Barva textu neaktivnφho komponentu |
| textFont |
Pou₧it² font ("Arial" / "Verdana" /...) |
| textIndent |
LevΘ odsazenφ textu (px) |
| textItalic |
Kurzφva (true/false) |
| textLeftMargin |
Lev² okraj textu (px) |
| textRightMargin |
Prav² okraj textu (px) |
| textSelected |
Text vybranΘ polo₧ky u ComboBox a ListBox |
| textSize |
Velikost textu (px) |
| textUnderline |
Podtr₧en² text (true/false) |
Obrßzek n∞kter²ch nejasn²ch ploch:
|
