Dynamické načítání HTML

26.4.2007· Autor: Milan Macháček· Počet komentářů: 14

Flash umí formátovat text pomocí některých HTML tagů. V dnešním článku si ukážeme možnost, jak načítat kompletní HTML stránky do flashových aplikací.

Flash a CSS

Flash umí načítat html text a dovoluje i CSS formátování ale vše jen v omezené míře. Nepodporuje totiž všechny html tagy. CSS (Cascading Style Sheets) je technika, jak definovat styly, které se budou aplikovat na text a jiné prvky které se nacházejí uvnitř stránky HTML a pomáhá jí naformátovat. Dokument CSS obsahuje pravidla jak se má text naformátovat, jaký se má použít font velikost písma nebo třeba barva písma.

Flash bohužel podporuje pouze CSS1 (jsou různé verze CSS, CSS2 se pyšní dodatečnými vlastnostmi pro formátování, ale Flash CSS2 nepodporuje. Vlastnosti CSS1 najdete na www.w3.org/tr/rec-CSS1.

Stránky které budeme načítat nebudou obsahovat vše co obsahují normálně zobrazované stránky, ale stačí, aby měly jen obsah, který se vyskytuje mezi tagy <body></body> tedy napíšeme pouze text, který chceme načítat doplněný tagy které budou definované v externím souboru CSS.

Než začneme z tvorbou vytvoříme si soubor CSS se stylem formátování výsledného textu. Pro náš příklad bude stačit jednoduchý styl, uložíme ho třeba jako styl.CSS. Pokud budeme načítat i obrázky tak se setkáme s problémem, že Flash načte další obrázek jen o jednu řádku níž než první obrázek. To se ale dá obejít několika tagy pro nový řádek <br/> Musíme jich za obrázek umístit tolik, aby se nám obrázky umístili pěkně pod sebe.


CSS STYL

nadpis{
font-family:"Courier New", Courier, monospace;
font-size:24px;
color:#FF0000;
}
p{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#000000;
}


Dále si vytvoříme třeba v notepadu nebo v  jiném textovém editoru seznam načítaných položek do komponenty ListBox a uložíme ho pod názvem menuData.txt. Zde se musíme řídit pravidlem: název načítané htm stránky musí mít stejný název jako položka v list boxu, jen bez přípony htm. Do takto vytvořeného souboru napíšeme pro náš příklad:

&menuData=Pondělí,Úterý,Středa,Čtvrtek,Pátek


To je seznam načítaných položek, který se bude vypisovat v komponentě list box.

Vytvoření Flash aplikace

Ve Flashi vytvoříme nový soubor a tento soubor uložíme do stejné složky na disku  jako styl.CSS a menuData.txt, soubor pojmenujeme načítání html.

V hlavní časové ose vytvoříme dvě vrstvy, první přejmenujeme na SCRIPT a uzamkneme jí.  Do této vrstvy budeme ukládat, jak již její název napovídá, veškeré skripty a druhou vrstvu pojmenujeme třeba KOMPONENTY a budeme do ní ukládat komponenty.

Toto řazení nám zaručí, že bude náš soubor přehledný a budeme vědět, kde co najdeme. Změníme velikost jeviště na 590x270px barvu pozadí můžeme změnit třeba na žlutou, velikost a vlastnosti se mění v okně properties.

properties



Nyní začneme psát skript do vrstvy označené SCRIPT do prvního snímku časové osy. Skripty se píší do okna Action -frame které najdeme nad oknem properties.

System.useCodepage = true;
text_txt.html = true;

 

Pokud nemáme jistotu, že externí HTML soubory nejsou uložené jako UTF-8, první řádek skriptu zaručí, že by měly být všechny dobře čitelné. Ovšem budeme se snažit podobným případům vyhýbat a UTF-8 kodování vyžadovat. Pak System.useCodePage nemusíme používat. Druhý řádek skriptu nám  nastavuje html vlastnost komponenty TextArea na true,  jinak se bude načtený text ukazoval i s našimi HTML tagy.


Nyní přepneme do vrstvy KOMPONENTY a na jeviště přetáhneme komponentu ListBox pojmenujeme jí menu_lb, změníme její velikost na H:150 W:100 a umístíme jí na souřadnice X:10 Y:10. Dále vložíme na jeviště komponentu TextArea a pojmenujeme jí text_txt, změníme její velikost W:400 H:250 a umístíme jí na souřadnice X:10 Y:590.

Velikost a umístění komponent se mění v okně properties. Tím máme na jevišti vše připravené a můžeme vrstvu uzamknout tím zamezíme, že si s komponentami, co jsme u místili na jeviště, nějak pohneme nebo vymažeme.

Pokud se nám nelíbí zelené zvýraznění vybraného řádku (zelený halo efekt) lze ho změnit na globální úrovni, ale pozor, změní se u všech komponent:

_global.style.setStyle("themeColor", "haloBlue");

Nebo

_global.style.setStyle("themeColor", "haloOrange");


Pod první řádky skriptu napíšeme následující část:

// STYL CSS
var styl = new TextField.StyleSheet();
styl.load("styl.CSS");
styl.onLoad = function() {
 text_txt.styleSheet = styl;
};

Tento skript má jediný úkol, načíst soubor styl.CSS a tento styl nastavit jako formátování komponenty TextArea. A tím máme postaráno o formátování našeho textu. Styl lze nastavit přímo ve Flashi ale pokud budeme experimentovat s různými styly, je lepší se na ně odkazovat externě. Potom stačí změnit jeden textový soubor a nemusíme zasahovat do zdrojového souboru.

Budeme pokračovat dále částí skriptu:

//Načtení stránek
function zacatek(page:String) {
 var prvni = new XML();
 prvni.ignoreWhite = true;
 prvni.onLoad = function() {
 text_txt.htmlText = this;
 text_txt.text = prvni;
 };
 prvni.load(page);
}
zacatek("první.htm");


Tímto jsme vytvořili funkci „začátek" které budeme předávat jediný parametr a tím je stránka, která se má načíst do komponenty text area. Funkce vytvoří nový objekt XML který se řídí podobným formátováním jako htm soubory. Do vytvořeného XML objektu načteme stránku, převedeme jí na html a přiřadíme do komponenty text area kde se zobrazí a naformátuje podle stylu který vytvoříme později.

Také musíme nastavit vlastnost ignoreWhite na true což zajistí aby se ignorovali tzv. bílé místa načteného textu, jinak se budou vkládat nekorektně řádky. A hned jí zavoláme, přidáme jí název první stránky která se má zobrazit při prvním spuštění naší aplikace. Dále napíšeme pod naší funkci další část skriptu:

//načtení položek do menu 
var Data:LoadVars = new LoadVars();
Data.load("menuData.txt");
Data.onLoad = function() {
 var menu:Array = Data.menuData.split(",");
 for (m=0; m<menu.length; ++m) {
 menu_lb.addItem(menu[m]);
 }
};


Který bude načítat položky do list box komponenty. Funkce nejprve načte proměnné menuData,  rozdělí je podle čárek a zařadí do pole menu, ze kterého je cyklus for metodou addItem přiřadí do komponenty list box. A už zbývá jen vytvořit listener který se stará o načtení vybrané položky.

// výběr položek z menu
var menuListener:Object = new Object();
menuListener.change = function() {
 var vybrano:String = menu_lb.selectedItem.label+".htm";
 zacatek(vybrano);
 text_txt.vPosition = 0;
};
menu_lb.addEventListener("change", menuListener);


Tento listener reaguje na položku která byla vybraná převede jí na řetězec, tím že k jejímu konci přidá koncovku .htm, čímž vytvoří název stránky kterou budeme načítat. Zavolá funkci zacatek a předá jí název stránky kterou načítáme a nakonec nastaví vlastnost TextArea vPosition na 0, což nám zaručí že vždy nově načtený text se zobrazí vždy od prvního řádku.

Už nám zbývá jen vytvořit soubory které budeme načítat v našem příkladu (první.htm, Pondělí.htm, Úterý.htm, Středa.htm, Čtvrtek.htm, Pátek.htm, Sobota.htm, Pátek.htm) musí mít příponu htm a obsahovat jen tagy <nadpis> a <p>. Soubory umístíme do stejné složky jako styl.CSS a menuData.txt.

Pokud chceme načítané soubory umístit do jiné složky, třeba v naší složce si vytvoříme pod složku data, následovně musíme ve skriptu definovat její cestu a to v listeneru změníme proměnnou vybrano.

var vybrano:String = "data\"+menu_lb.selectedItem.label+".htm";


HTML značky, použitelné pro Flash
   
Anchor <a> Neboli kotva umožňuje do textových polí přidávat odkazy. Značka <a> také podporuje atribut target, který specifikuje snímek nebo okno kde se má odkaz otevřít. Používáme-li styly, můžeme také pro odkaz specifikovat barvy a atributy a:link, a:hover, a a:aktive. Pokud použijete CSS styl, všechny atributy nastavte vněm.
Bold <b> Zobrazí text tučně.
Font <font> Umožňuje změnit aktuální písmo, velikost písma a barvu písma. Tato značka je velmi užitečná, když nepoužíváte CSS a přesto chcete text nějak naformátovat.
Image <img> Umožňuje přidávat do textových polí obrázky. Tato značka odporuje místních nebo externích souborů obrázků, souborů SWF.
Italics <i> Zobrazí text kurzívou.
List item <li> Poněkud se odlišuje od HTML, <li> se neobjevuje mezi dvojicí značek <ol> nebo <ul> (uspořádaný a neuspořádaný seznam). Značka <li> umožňuje snadno vytvářet seznamy z odrážkami.
Paragraph <p> Přidá nový odstavec.
Span <span> Umožňuje přiřadit nějakému bloku kódy styly.
Underline <u> Podtrhne sekci textu.

 

Ukázka aplikace:


Pokud potřebujeme vynechat řádek, použijeme <br />. Tento tag musíme rovnou uzavřít.

Upozornění na závěr.  Flash nebude tolerovat chyby:  <p> </P> není stejné jako <p></p>, na to si musíme dávat pozor.

Zdrojové soubory aplikace: zdroje.zip

Milan Macháček Milan Macháček - chemik se zájmem a Flash a fotbal. Zatím mám jediný projekt a tím je web Fotbalové Školy Most hráčů narozených roku 98.

E-mail: fsmost(zavinac)karneval.cz | Web: http://www.home.karneval.cz/fsmost | ICQ: 334352918 |

Motto: A přece se točí

Komentáře k článku  
problém neznám | 2.5.2007 16:44
problém neznám | 2.5.2007 16:44
Re: problém neznám | 3.5.2007 12:54
dotaz verze ActionScript neznám | 15.5.2007 10:56
Re: dotaz verze ActionScript neznám | 17.5.2007 12:34
Export souboru neznám | 6.1.2008 1:12
emberd font a css neznám | 3.6.2008 19:09
okraje nacitanych objektov neznám | 14.11.2008 13:08
farebne oznacenie textu.. neznám | 25.9.2010 21:22
Odpověď neznám | 2.1.2011 14:51
nesprávne neznám | 2.1.2011 20:24
Flash neznám | 2.1.2011 20:49
Flash neznám | 3.1.2011 0:20
chyby, prosím o pomoc neznám | 5.7.2011 11:57

Přihlášení uživatele