Vaše první rozhraní ve Flashi

43 kapitola 

Vaše první rozhraní ve Flashi V kapitole 1, „Seznámení s Flashem“, jste se dozvěděli něco málo o Flashi, co pro vás, jakožto webového vývojáře, může znamenat. Také jste se něco dozvěděli o vývojovém prostředí. V kapitole 2 stavím na těchto základech a ukážu vám, jak se vybuduje prosté, ale funkční rozhraní Macromedia Flashe, které zobrazí informace získané při běhu z vašeho serveru. V průběhu prací se také něco dozvíte o ActionScriptu, animačních klipech, oborech proměnných a dalších pojmech Flashe a o terminologii. Naše první flashové rozhraní bude zobrazovat informace o hudebnících z ukázkové databáze Venue. Nejprve dáme dohromady jednoduchý kód na serveru, který „dodá“ informace o hudebnících do Flashe. Pak sestavíme prosté uživatelské rozhraní, které získané informace zobrazí v přehrávači Flashe. Skočíme tady do toho po hlavě a rovnou na hloubku. No dobrá, možná se neponoříme až tak hluboko (potápění ve skafandru přijde později). Půjde-li vám při čtení kapitoly trochu hlava kolem, nic si z toho nedělejte. Šlo mi jen o to, abyste se osmělili a ponořili tak rychle, jako je to jen možné – podrobnosti přijdou později. Abych to řekl jinak: pojďte, ve vodě je príma!

Příprava: dodávaní dat do Flashe V knize chápeme Flash většinou jako „klientskou“ část volně definované aplikace typu klient/ server. Máte informace nebo logiku, které sídlí na vašem serveru, a chcete je vystavit pomocí Flashe nějakým zajímavým nebo pohodlným způsobem vašim uživatelům. Proto vyžaduje většina projektů Flashe v této knize jistou porci kódu na serveru (napíšete ho v jakémkoli jazyce, který je vhodný pro váš oblíbený aplikační server), plus něco skriptů u klienta, které budou v interakci s kódem na serveru, aby získaly data, aktualizovaly je, nebo jinak manipulovaly s daty dostupnými v části na straně serveru. Jistě máte už v tomto místě spoustu otázek, jako „Jak přesně dodám data do Flashe?“ a „Jaký formát musí data mít, aby je Flash zvládl?“ a „Když má Flash nějaké informace, jak je zobrazím uživateli?“ No, to jsou opravdu skvělé otázky, takže vám na ně dám stručné odpovědi hned teď. (Dlouhé odpovědi tvoří vlastně většinu textu knihy.) Data můžete do Flashe dostat kteroukoli z těchto technik: • Jako čistý text. Váš server dodá text, který je složený z dvojic název/hodnota, a se stejnými symboly & a =, které používáte v části URL zvané „dotazovací řetězec“. Flash získá text a zpřístupní dvojice název/hodnota ActionScriptu jako prosté řetězcové proměnné.

44

FLASH MX Professional 2004 pro vývojáře webových aplikací

• Jako XML. Flash získá XML z vašeho serveru, udělá jeho rozklad a učiní různé prvky a atributy v XML dostupnými pro ActionScript jako objekty. Pokud vám to pomůže, dívejte se na funkcionalitu XML pojmově jako na jistou obdobu rozhraní ve stylu SAX nebo DOM, které poskytují jiné parsery XML. • Prostřednictvím Flash Remoting. Flash Remoting ještě více usnadňuje výměnu dat mezi vaším serverem a Flashem. Flash Remoting je zahrnutý do ColdFusion a JRun; pracujete-li s .NET nebo s jiným serverem J2EE, musíte si serverovou část zakoupit od společnosti Macromedia (je to finančně celkem výhodné vzhledem k tomu, co za své peníze dostanete). • Prostřednictvím nějaké webové služby. Jestliže jazyk, nebo programovací prostředí, které jste si zvolili, poskytuje snadný způsob vytváření webových služeb, můžete vytvořit službu, která vystaví taková data, jaká jsou třeba. Flash může volat metody služby právě tak, jako jakýkoli jiný konzument této služby. Každé z technik je věnovaná samostatná kapitola v části III, „Připojování k datům“ knihy. Prozatím se hodlám soustředit jen na první techniku, protože je nejjednodušší a uvidíte hned nějaké výsledky – bez ohledu na to, jaký aplikační server používáte. Ostatní techniky pochopíte snadněji, když už budete vědět, jak to celé funguje.

Kódování dat pro Flash ve formě prostých „proměnných“ Jak jste se právě dozvěděli, můžete do Flashe dodat data jako čistý text, jako XML, nebo prostřednictvím Remoting či webových služeb. V tomto oddílu se podíváme na první možnost, kdy server informace zpřístupňuje pomocí velmi prostého formátu „čistý text“. Jestliže nějaká stránka na vašem serveru ví, jak vrátit data v tomto formátu (což je protiklad k tomu, co vaše stránky obvykle vracejí, bývá to HTML nebo XHTML), Flash snadno text shrábne a učiní ho dostupným pro vaše uživatele. Buďme trochu konkrétnější. Speciální formát „čistý text“ (plain-text), o kterém mluvím, je prostě stejný formát, který už používáte, když dodáváte do svých dynamických webových stránek parametry URL, nebo proměnné. Jistě víte, jak to funguje: všemu, co se nachází v URL za symbolem ?, se říká dotazovací řetězec. Uvnitř dotazovacího řetězce se dá dodat libovolný počet dvojic název/hodnota, přičemž název a hodnota jsou oddělené znakem =, jednotlivé dvojice jsou oddělené znaky &. Uvnitř hodnoty jsou všechny „zvláštní“ znaky“ (jako jsou mezery, lomítka atd.) převedené pomocí kódů znaků a znaku %. Poznámka To asi také všechno znáte jako malou násobilku, takže se s tím nebudu zaobírat. Bylo to určeno už dávno, tehdy, když se vytvářely specifikace HTTP a CGI. Chcete-li se o těchto věcech dozvědět něco konkrétnějšího, připojte se a rychlým hledáním najděte standardní formát aplication/x-wwwurlformencoded.

Vaše první rozhraní ve Flashi

45

Protože se jedná o formát, kterým se dodávají hodnoty do nějaké webové stránky, má určitý smysl, že vám Macromedia povoluje použít stejný formát i pro předávání hodnot ze stránky. Uvažme prostý scénář: máte na svém serveru nějakou stránku, která přijímá identifikační číslo hudebníka jako parametr URL, a odpoví informacemi o zadaném hudebníkovi. URL, kterou použijete pro svůj požadavek na informace od serveru, by mohla vypadat takto: http://wwww.mojefirma.com/mojestranka.jsp?idArtist=5

Váš kód na serveru by pomocí dodaného identifikačního čísla získal informace o hudebníkovi z nějaké databáze. Pak by odpověděl třeba jménem a věkem hudebníka a jaký druh hudby provozuje, například: artistName=Natalie%20Weiss&artistAge=19&musicType=Pop

Jestliže bylo přehrávači Flashe řečeno, aby načetl ze serveru tento řádek textu, skončilo by to tím, že by se vytvořily tři proměnné: • artistName (obsahovala by hodnotu “Natalie Weiss“) • artistAge (obsahovala by hodnotu “19“) • musicType (obsahovala by hodnotu “Pop“) Zapamatujte si, že kód na serveru by odpovídal pouze tímto řádkem dvojic název/hodnota. Stránka by nevracela žádný HTML, ani nic jiného, co by vracela za normálních okolností, aby to mělo smysl zobrazit v prohlížeči. Abych to vyjádřil jinak, URL, které dodávají data do Flashe, nejsou určené k tomu, aby je viděli koneční uživatelé. Má je vidět pouze Flash. Poznámka Všechny proměnné vyměňované mechanizmem „čistý text“ získá ActionScript jako řetězcové proměnné (konkrétně jsou to instance třídy String. O tom se více dozvíte v kapitole 4, „Slabikář ActionScriptu”). Chcete-li, aby zbytek kódu interpretoval některou z proměnných jako číslo, booleovskou hodnotu, datum, nebo jako nějaký jiný datový typ, musíte provést potřebné konverze typu sami (nebojte se, je to snadné). Také o tom se více dozvíte v kapitole 4.

Jak se to udělá v ColdFusion Pojďme se teď podívat na jednoduchý kód, který budeme potřebovat, chceme-li dodat data ve formátu čistý text, o němž jsme právě hovořili. Začnu s ColdFusion (není za tím skrytý žádný úmysl, něčím začít musím). Dáváte-li přednost ASP.NET nebo Javě, klidně rovnou skočte k výpisům 2.2 a 2.3. Všechny výpisy jsou neobyčejně prosté a v zásadě jsou to jisté transkripce mezi jednotlivými jazyky. Podívejte se na výpis 2.1. Jak vidíte, moc toho v něm není. Připomínám, že se předpokládá, že už jste pomocí ColdFusion Administrator vytvořili datový zdroj s názvem VenueDB, který ukazuje na ukázkovou databázi knihy. (Pokud jste datový zdroj ještě nepřipravili, vraťte se na konec kapitoly 1, kde najdete potřebné pokyny.)

46


Výpis 2.1 artistVarSource.cfm – Dodání dvojic název/hodnota z ColdFusion SELECT sArtistName, sImageName, sDescription FROM Artists WHERE idArtist = #URL.idArtist# artistName= #URLEncodedFormat(ArtistQuery.sArtistName)# &imageName= #URLEncodedFormat(ArtistQuery.sImageName)# &description= #URLEncodedFormat(ArtistQuery.sDescription)#

Parametr deklaruje, že stránka vyžaduje v URL proměnnou s názvem idArtist. Zadaná hodnota se použije v , který získá informace z odpovídajícího záznamu hudebníka z naší ukázkové databáze. Na konci výpisu se výstup dvojic název/hodnota realizuje pomocí prostých bloků . Všimněte si, že je každá hodnota obalena funkcí ColdFusion s názvem URLEncodedFormat(), která se postará v hodnotách o převod všech speciálních znaků (jako jsou mezery nebo lomítka). Značky a jsou v tomto případě volitelné, ale bývá dobrým zvykem dávat je v této podobě do stránek, které poskytují dvojice název/hodnota pro Flash. Značka vypne ladicí výstup ColdFusion pro tuto stránku, pokud byl náhodou na úrovni serveru zapnut, protože stránka má vygenerovat pouze dvojice název/hodnota, žádný další HTML nebo text, jako jsou ladicí zprávy. Dále sděluje ColdFusion, aby na výstup zařadil pouze text umístěný ve značkách , čímž se zamezí různým potížím způsobených vygenerovanými prázdnými znaky. Značka nastaví typ obsahu odpovědi stránky na text/ plain místo výchozího typu obsahu text/html. Flashi by ve skutečnosti nevadilo, kdybyste ten-


47

to krok vynechali, je ale rozumné nastavit obsah typu na text/plain, protože výstup stránky neobsahuje žádné značky HTML. Pokračujte dál a navštivte stránku v prohlížeči. Zadejte do URL idArtist=1 a zkontrolujte výsledky (obrázek 2.1). Podle toho, jaký prohlížeč používáte, se možná obsah objeví ve vašem výchozím textovém editoru, nebo budete vyzváni, abyste obsah uložili do souboru (různé prohlížeče zacházejí s obsahem text/plain různě). Ale na ničem z toho v podstatě nezáleží. Cílem je, abyste dostali řádek textu s informacemi o hudebníkovi ve formě dvojic název/hodnota. Dostanete-li místo toho nějakou chybovou zprávu, pravděpodobně bude nutné opravit něco, co se týká datového zdroje pro naši ukázkovou databázi.

Obrázek 2.1. Kontrola dvojic název/hodnota v prohlížeči.

Jak se to udělá v ASP.NET Dáváte-li přednost práci v ASP.NET, je výpis 2.2 ekvivalentem výpisu 2.1. Předpokládá se, že jste už vytvořili zdroj dat ODBC s názvem VenueDB, který ukazuje na ukázkovou databázi knihy. Výpis byste měli být schopni otestovat tím, že do URL předáte jako parametr idArtist=1 (viz obrázek 2.1). Poznámka Příklad se opírá o jmenný prostor System.Data.ODBC, který je součástí verze 1.1 .NET Framework. Používáte-li jeho verzi 1.0, budete si muset stáhnout balíček System.Data.ODBC z webových stránek společnosti Microsoft, chcete-li, aby tento výstup fungoval tak, jak je napsaný.

48


Výpis 2.2 artistVarSource.aspx – Dodání dvojic název/hodnota z ASP.NET <%@ Page Language="vb" Debug="true" %> <%@ Import Namespace = "System.Data.ODBC" %> <script runat="server"> Sub Page_Load ' Definuje databázové připojení Dim ConnStr as String = "DSN=VenueDB" Dim conn as OdbcConnection = new OdbcConnection(ConnStr) ' Připraví Dim CmdStr + "WHERE Dim cmd as

dotaz as String = "SELECT * FROM Artists " _ idArtist = " + Request.Item("idArtist") OdbcCommand = new OdbcCommand(CmdStr, conn)

' Zřídí připojení a vykoná dotaz conn.Open() Dim reader As OdbcDataReader = cmd.ExecuteReader() ' Načte první (a jediný) řádek dat reader.Read() ' Nastaví typ obsahu MIME naší odpovědi na "text/plain" Response.ContentType = "text/plain" ' Výstup informací ' (kód je zde na více řádcích, ' ve skutečnosti je ale výstupem jediný řádek) Response.Write("artistName=" _ + Server.URLEncode(reader.Item("sArtistName"))) Response.Write("&imageName=" _ + Server.URLEncode(reader.Item("sImageName"))) Response.Write("&description=" _ + Server.URLEncode(reader.Item("sDescription"))) End Sub

Poznámka Samozřejmě je to jen jeden z mnoha možných způsobů, jak kód příkladu zapsat. Přirozeně by se mohl tentýž příklad transkribovat do JScript nebo C#, a mohli byste použít datové objekty a metody ze jmenných prostorů System.Data.OleDb nebo System.Data.SQLClient, ne jmenný prostor System.Data. ODBC. Příklad jsem zapsal takto proto, aby byly věci pokud možno jasné, relativně nezávislé na typu databáze a v souladu s ostatními typy serveru, s nimiž se v knize pracuje. Podle toho, na co se cítíte, klidně změňte skriptovací jazyk nebo specifika načítání dat.


49

Poznámka překladatele (1) Pro čtenáře, kteří už mají stahování plné zuby, chtějí pracovat stále s Framework 1.0 a s příkladem „prorazit“ co nejrychleji, připojuji variantu výpisu 2.2. Když se využije veřejných rozhraní jmenného prostoru System.Data, naznačuje výpis, jak se dá příklad zároveň připravit pro OleDb (třeba Access), i pro SqlClient (Microsoft SQL Server ). Obejdete se také bez vytváření zdroje dat ODBC. Všimněte si, že v této variantě nezáleží na názvech polí tabulky, ale na jejich pořadí. <%@ Page Language="vb" Debug="true" %> <%@ Import Namespace = "System.Data.OleDb" %> <script runat="server"> Sub Page_Load(ByVal sender As System.Object, _ ByVal e As System.EventArgs) Handles MyBase.Load Dim pripojeni As System.Data.IDbConnection Dim prikaz As System.Data.IDbCommand Dim ctenar As System.Data.IDataReader ' příprava pro OleDb Dim ConStr As String = "Provider=Microsoft.Jet.OLEDB.4.0; _ Data Source=D:\Inetpub\wwwroot\venue\database\venue.mdb" Dim conn As OleDbConnection = New OleDbConnection(ConStr) Dim CmdStr As String = "SELECT * FROM Artists " _ + "WHERE idArtist = " + Request.Item("idArtist") Dim cmd As OleDbCommand = New OleDbCommand(CmdStr, conn) Dim reader As OleDbDataReader ' ' ' ' '

tady se dá připravit připojovací řetězec, připojení, čtenář dat i příkaz pro SQLServer nastaví se pak v nějaké podmínkové konstrukci (která tu chybí) podle toho, zda se pracuje s OleDb nebo s SqlClient:

pripojeni = conn prikaz = cmd ctenar = reader pripojeni.Open() ctenar = prikaz.ExecuteReader With ctenar .Read Response.Write("artistName=" + Server.UrlEncode(.Item(1))) Response.Write("&imageName=" + Server.UrlEncode(.Item(2))) Response.Write("&description=" + Server.UrlEncode(.Item(3))) End With

50

FLASH MX Professional 2004 pro vývojáře webových aplikací ctenar.Close() pripojeni.Close() End Sub

(2) Autor sice v knize tu tam zmiňuje komunitu „Open Source“, neboli společenství, kde je téměř vše zadarmo, ale neutrousil ani jediný konkrétní příklad. Takže alespoň jeden, který jsem se snažil udělat ve stylu autora co nejkratší. Ukazuje, jak by úloha vypadala, kdybyste se obraceli na databázi MySQL (zkoušel jsem to na verzi 5.0 alfa) prostřednictvím PHP (verze 4.3). Kód na serveru se nezabývá připojovacími záležitostmi, je ale připraven pro načítání po řádcích (když neuvedete v URL žádný parametr, vrátí všechny záznamy).


51

Nezapomeňte ve volání load() v kódu ActionScriptu na snímku 1 v ArtistDisplayClip změnit příponu souboru na .php. Analogicky se dá snadno upravit výpis 2.7 i příklady v dalších kapitolách.

Jak se to udělá s Javou Jako poslední v pořadí, ale určitě ne významem, uvádím výpis 2.3 obsahující stránku JSP (Java Server Pages), který lze zaměnit za výpis 2.1 , resp. 2.2. Výpis byste měli být sto otestovat tím, že do URL předáte jako parametr idArtist=1 (opět viz obrázek 2.1). Výpis 2.3 artistVarSource.jsp – Dodání dvojic název/hodnota z JSP <%@ page import="java.sql.*,java.net.URLEncoder" contentType="text/plain" %> <% // Tohle je příkaz SQL, kterým získáme data String sql = "SELECT * FROM Artists " + "WHERE idArtist = " + request.getParameter("idArtist"); // Vykoná dotaz SQL nad ukázkovou databází Class.forName("sun.jdbc.odbc.JdbcOdbcDriver"); Connection con = DriverManager.getConnection("jdbc:odbc:VenueDB"); ResultSet rs = con.createStatement().executeQuery(sql); // Získají se indexové pozice sloupců, které chceme na výstupu int colArtistName = rs.findColumn("sArtistName"); int colImageName = rs.findColumn("sImageName"); int colDescription = rs.findColumn("sDescription"); // Odstraní se prázdné znaky, abychom zajistili, // že bude výstup na prvním řádku out.clear(); // Odešlou se dvojice název/hodnota do výstupního proudu while ( rs.next() ) { out.print("artistName="); out.print(URLEncoder.encode(rs.getString(colArtistName))); out.print("&imageName="); out.print(URLEncoder.encode(rs.getString(colImageName))); out.print("&description="); out.print(URLEncoder.encode(rs.getString(colDescription))); } %>

52


Budování Flashového rozhraní Když máme hotové stránky, které dodávají data jako čistý text, můžeme přejít k vytvoření prostého rozhraní Flashe, které informace zobrazí. Tato část kapitoly vám ukáže, jak snadno se dají načíst informace z webového serveru a zobrazit je uživatelům. Naučíte se také, jak v přehrávači Flashe zobrazovat za pochodu obrázky. V průběhu prací se také něco dozvíte o ActionScriptu.

Přidávání vizuálních prvků Nejprve musíte vytvořit nový dokument Flashe: 1. Ve Flashi zvolte z hlavní nabídky File > New. Objeví se dialogové okno New Document (viz obrázek 2.2).

Obrázek 2.2. Vytvoření dokumentu Flashe.

2. V seznamu Type vyberte Flash Document a klikněte na OK. (O využití některých jiných typů dokumentů se dozvíte v knize později.) 3. Pomocí File > Save dokument uložte, jako název souboru uveďte artistWidget.fla. Poznámka Opět předpokládám, že svou práci v této kapitole budete ukládat do složky venue/chapter02 v rámci kořenové složky dokumentů vašeho webového serveru. Za normálních okolností nebudete dokument Flashe (.fla) udržovat v nějaké složce, ke které má přístup váš webový server (protože to je váš „zdrojový kód“), pro potřeby výuky je to však rozumné.

4. Z nabídky View zvolte Preview Mode > Outlines. Bude se vám snadněji pracovat s prvky, které budete přidávat do rozhraní. Jako vývojář budete tento režim náhledu dost potře-


53

bovat, protože budete často pracovat s takovými prvky, které v době návrhu nic zajímavého neobsahují (naproti tomu při běhu budou zaplněné informacemi ze serveru). Teď přidáme do nového dokumentu vizuální prvky: 1. V panelu Components vyhledejte ve stromu komponent prvek Loader (viz obrázek 2.3). Nevidíte-li panel Components, zvolte Window > Development Panels > Components, čímž ho zviditelníte.

Obrázek 2.3. Panel komponent.

2. Přetáhněte myší komponentu Loader ze stromu do levého horního rohu plochy (bílá oblast ve vaší nové animaci). V komponentě Loader se bude zobrazovat fotografie hudebníka (nebo kapely). 3. Vyberte komponentu Loader a podívejte se do panelu Properties. (Nevidíte-li panel Properties, zvolte Window > Properties – nebo stiskněte Ctrl+F2.) Jen tak pro zábavu klikněte na záložku Parameters v pravém horním rohu panelu Properties. Uvidíte několik parametrů, které se vztahují k zobrazení vizuálního obsahu (autoLoad, contentPath a scaleContent). Jenom si je prohlédněte – žádný z parametrů teď měnit nemusíte (parametr contentPath však později změníte prostřednictvím skriptu). 4. V panelu Properties napište do pole Instance Name název ldrPhoto (viz obrázek 2.4).

Obrázek 2.4. Úpravy hodnot vlastností komponenty Loader.

54


Tímto názvem se budete na objekt Loader odkazovat v kódu ActionScriptu. V názvech instancí se rozlišuje velikost písmen, takže si dávejte pozor na zápis malých a velkých písmen. 5. V panelu Tools vyberte nástroj Text a klikněte jednou na ploše, těsně vpravo od objektu Loader, který jste právě vytvořili (viz obrázek 2.5). Vytvoříte tím nové textové pole. V něm se bude zobrazovat jméno hudebníka (nebo kapely).

Obrázek 2.5. Přidání textového pole do dokumentu.

6. Při stále vybraném novém textovém poli nastavte v panelu Properties, pokud je to nutné, typ textového pole na Dynamic Text (opakem je Static Text). Jako název instance napište txtArtistName. 7. Zopakujte kroky 5 a 6, abyste vytvořili další textové pole s názvem instance txtDescription. Opět pomocí panelu Properties vyberte v seznamu Line typu položku Multiline (víceřádkové textové pole, opakem je Single Line, jednořádkové textové pole). Nakonec dvojitě klikněte na poli a táhněte čtvereček v pravém dolním rohu, abyste změnili velikost pole tak, aby se do něho vešlo několik řádků textu. Pokud jste to ještě neudělali, dvojitě klikněte na textovém poli txtArtistName a táhněte jeho šířku tak, aby se shodovala s textovým polem txtDescription. 8. Když teď máte na ploše všechny potřebné prvky, zkuste je zaranžovat pomocí myši tak, aby vypadaly úhledně. Velikost objektu Loader změníte tak, že na něm kliknete pravým tlačítkem myši, zvolíte Free Transform a táhnete jeho pravý dolní okraj. Velikost můžete upravit také tak, že napíšete nové hodnoty do polí W (šířka) a H (výška) v panelu Properties. 9. Chcete-li, zvolte v panelu Properties pro první textové pole (jméno hudebníka či kapely) větší velikost písma a pro druhé textové pole (popis) menší velikost písma. Já jsem pro to první použil velikost 12, pro druhé velikost 9. Také jsem pro jméno hudebníka vybral tučné písmo (B), abych je trochu zvýraznil. Až skončíte, mělo by vaše rozhraní vypadat přibližně tak, jako to moje (na obrázku 2.6), ale příliš se s tím nepárejte. Zatím se snažíme o to, abychom vůbec něco zprovoznili. 10. Příkazem File > Save svou práci uložte.


55

Obrázek 2.6. Prázdné prvky pro zobrazení textů a obrázku.

Načtení a zobrazení dat pomocí ActionScriptu Doposud máme jen prosté uživatelské rozhraní se třemi prázdnými prvky: komponentu Loader, ve které se objeví fotografie, a dvě textová pole, v nichž se objeví jméno hudebníka a popis. Teď můžeme přidat kód ActionScriptu, který do těchto prázdných prvků dostane patřičné informace. Poznámka Současná verze Flashe poskytuje řadu dalších způsobů, jak vyřešit úkol, který jsme si předsevzali. Některé z nich vyžadují více řádků kódu, jiné zase téměř žádné. Já jsem zvolil v této kapitole jistý druh klasického řešení, protože je jednoduchý a snadno adaptovatelný v mnoha rozličných situacích. V průběhu knihy se dozvíte i o jiných způsobech, jak načíst a zobrazit data.

Převedení prvků rozhraní na objekt animačního klipu Dalším vaším krokem bude převedení tří prvků rozhraní na animační klip. Převod prvků na animační klipy se dělá ze dvou důvodů: zaprvé je možné animační klip chápat jako vizuální „objekt“, takže ho pak lze posouvat po ploše jako jediný prvek; zadruhé, animační klip slouží jako programovací „objekt“ obsahující kód specifický vzhledem k prvkům, které obsahuje. Stručně řečeno, klip se stane kontejnerem vizuálních prvků a kódu, který se k nim vztahuje, takže budete moci na prvky a kód myslet ve stylu objektově orientovaného programování. Animační klip vytvoříte takto: 1. Za předpokladu, že máte stále otevřený dokument z předchozího oddílu, vyberte všechny tři prázdné prvky: komponentu Loader a obě textová pole. (Dá se to udělat tak, že na prvcích klikáte při stisknuté klávese Shift, nebo zvolte Edit > Select All.) 2. Až budete mít všechny tři prvky vybrané, zvolte Modify > Convert to Symbol. Objeví se dialogové okno Convert to Symbol. 3. Do pole Name napište ArtistDisplayClip (viz obrázek 2.7).

56


Obrázek 2.7. Převedení obsahu na symbol animačního klipu.

4. Zkontrolujte, je-li ve skupině přepínačů Behavior vybraný přepínač Movie Clip. Pak klikněte na OK. Na první pohled to vypadá, že se nic nezměnilo. Když ale budete trochu experimentovat, zjistíte, že jsou tři prvky nyní přístupné jako skupina: Zaprvé, kliknete-li jednou na některém ze tří prázdných prvků, ve skutečnosti vyberete na ploše celý nový animační klip. Klip lze posouvat, měnit jeho velikost, a může se vyjímat a vkládat jako jediný objekt. Kliknete-li dvojitě na některém ze tří prázdných prvků, budete „přeneseni“ do speciálního módu, ve kterém můžete animační klip editovat. V tomto módu můžete posouvat jednotlivé prvky nebo měnit jejich velikost, nebo do klipu přidávat kód. Tomuto módu říkáme mód editace symbolu. Když jste v módu editace symbolu, dostanete se z něho ven tak, že dvojitě kliknete na jakékoli jiné oblasti plochy (prázdná bílá oblast). Poznámka Pro přechod mezi jednotlivými módy existují i jiné navigační možnosti. Můžete animační klip vybrat a zvolit Edit > Edit Selected, čímž se dostanete do módu editace symbolu. Do normálního módu se můžete vrátit pomocí Edit > Edit Document. Nebo můžete využít tlačítko Edit Symbols na pravé straně editovací lišty (je nad časovou osou a dá se přepínat pomocí Window > Toolbars > Edit Bar), jímž můžete přecházet mezi jednotlivými animačními klipy, které máte ve svém dokumentu; do hlavního dokumentu se dá také vrátit tlačítkem Scene 1 na téže liště.

Procvičte si trochu přecházení mezi módem editace symbolu a módem editace hlavní části dokumentu. Nebojte se věci posouvat sem a tam. Své změny můžete vždycky vrátit pomocí Edit > Undo, nebo když si načtete dokončenou verzi dokumentu ze složky ukázkových souborů kapitoly. Poznámka Můžete také pomocí Window > Library otevřít panel Library (knihovnu) a dvojitě kliknout na ikoně svého nového animačního klipu v knihovně, čímž se také dostanete do módu editace symbolu. Práce s knihovnou se vám bude hodit, až budou vaše dokumenty Flashe komplikované, jak je postupně zaplníte spoustou různých animačních klipů a jiných prvků.


57

Přidání kódu ActionScriptu Nuže dobrá. Vytvořili jste animační klip, je na čase přidat ActionScript, který zařídí, aby se choval tak, jak si přejete. Držte se prosím následujícího postupu: 1. Jestliže nejste v módu editace symbolu, dvojitě klikněte na animačním klipu. 2. Klikněte na prvním snímku v časové ose, jak je to vidět v horní části obrázku 2.8.

Obrázek 2.8. Přidání kódu ActionScriptu do symbolu animačního klipu.

3. Podívejte se na panel Actions (jestliže panel Actions nevidíte, zobrazte si ho pomocí Window > Development Panels > Actions). Záložka u spodní strany panelu Action by měla mít titulek Layer 1 : 1 a na stavovém řádku na spodu panelu by měl být nápis Line 1 of 1, Col 1. Jestliže to tam není, klikněte jednou na ploše. (Jestliže to tam stále není, jste někde jinde – zvolte Edit > Edit Document, abyste se vrátili do hlavního dokumentu a zkuste to znovu.) 4. Napište do panelu Actions kód uvedený ve výpisu 2.4.(je také vidět na obrázku 2.8). Kód vytváří dvě funkce, loadArtist() a onArtistVarsLoaded(). Probereme je v příštím oddílu. 5. Uložte svou práci pomocí File > Save.

58


Poznámka Nechcete-li se s kódem psát, můžete si ho zkopírovat ze souboru ArtistDisplayCode1.txt, který najdete ve složce ukázkových souborů kapitoly. Textový soubor je zde jen pro tento účel. Nemusíte ho mít ve složce webu, aby příklad fungoval.

Výpis 2.4 Kód ve snímku 1 animačního klipu ArtistDisplayClip function loadArtist(idArtist) { // Vytvoří nový objekt LoadVars, do něhož se načtou data ze serveru var artistVars = new LoadVars; // Sděluje objektu, co má udělat, až dostane svá data artistVars.onLoad = onArtistVarsLoaded; // Sděluje objektu, aby hned nyní načetl data. artistVars.load("http://localhost/venue/chapter02/artistVarSource.aspx? idArtist=" + idArtist); } function onArtistVarsLoaded() { // Naplní textová pole hodnotami získanými ze serveru txtArtistName.text = this.artistName; txtDescription.text = this.description; // Načte fotografii patřičného hudebníka do objektu Loader ldrPhoto.contentPath = "../images/artists/" + this.imageName; }

Samozřejmě, používáte-li ColdFusion, resp. Java musíte změnit „.aspx“ ve výpisu na „.cfm“, resp. „.jsp“. Poznámka Dobrá, abych uchoval vaše duševní zdraví, tedy stručně. Znáte-li syntax JavaScriptu – nebo dokonce syntax C nebo Javy – neměl by pro vás být kód ve výpisu 2.4 nic děsivého. Jestliže vám ale základní prvky kódu (pojem funkce, použití závorek, složených závorek, středníků atd.) připadá jako čistá hotentotština a vůbec tomu nerozumíte, asi byste si měli nejdříve odskočit do kapitoly 4, nebo si projít nějaký online kurz JavaScriptu.

Rychlé seznámení s objektem LoadVars Kód, který jste právě přidali do dokumentu, používá objekt LoadVars, což je speciální pomocný objekt, který vystavuje při běhu přehrávač Flashe. Jak název implikuje, poskytuje objekt LoadVars prostředky pro získání proměnných (tj. dvojic název/hodnota) z nějakého webového serveru. V zásadě to prostě znamená, že objekt ví, jak se připojit k nějaké URL prostřednictvím HTTP, provede rozklad získaného textu do dvojic název/hodnota a zpřístupní dvojice jako proměnné, které pak můžete využívat, jak je vám libo.


59

O veškeré této látce se víc dozvíte v kapitole 6, „Připojování k serverům pomocí čistých textových souborů“. Prozatím stačí, když budete vědět, že většinou se práce s objektem LoadVars skládá ze čtyř základních kroků: 1. Vytvoříte instanci objektu LoadVars pomocí klíčového slova new. 2. Nastavíte vlastnost onLoad instance na název nějaké funkce (tu musíte napsat), která se má zavolat, až se proměnné úspěšně získají z URL. Protože nemám lepší termín, říkám jí funkce odpovědi, responder function. 3. Zavoláte metodu load() instance, která sdělí Flashi, aby skutečně kontaktoval váš webový server. 4. Pomocí získaných hodnot se ve funkci odpovědi odkazujete na proměnné jejich názvem. V kódu, který jste právě přidali (výpis 2.4), se první tři kroky dějí ve funkci loadArtist(). Čtvrtý krok se uskuteční ve funkci odpovědi, což je v našem případě onArtistVarsLoaded(). Poznámka Na svůj animační klip můžete nyní nahlížet jako na objekt, který ví, jak načíst a zobrazit informace z nějakého serveru. Dá se chápat také tak, že vystavuje jednu veřejnou metodu: funkci loadArtist(). Funkce onArtistVarsLoaded() se naopak dá považovat za soukromou metodu. Nejsme sice zrovna na takovém místě, kde se formálně deklarují metody jako veřejné nebo soukromé; protože se ale funkce loadArtist() může hodit i pro jiný kód někde jinde, pomůže celou věc pochopit, když si uvědomíme, že se na ni můžeme dívat jako na veřejnou metodu.

Mimochodem, je důležité, abyste pochopili, že proměnné se metodou load() objektu LoadVars získávají asynchronně. To znamená, že přehrávač Flashe nečeká na to, až se z URL získají dvojice název/hodnota. Proto se v kódu nemůžete bezpečně odkazovat na získané proměnné do té doby, dokud se nezavolá funkce odpovědi. Má to samozřejmě svůj dobrý důvod, proč je to tak. Vaše animace může pracovat na jiných věcech (třeba zobrazuje nějaký animační efekt), zatímco se stahují informace. Také to animaci umožňuje, aby souběžně načetla proměnné z několika URL (pokud si to přejete). Poznámka Jestliže to někomu z vás zní jako jistý druh náročného (a spletitého) vícevláknového (multithreaded) programování, máte pravdu, je to něco takového. Flash vždy chce, abyste mohli dělat současně tolik věcí, kolik je možné, aby se to co nejvíce blížilo skutečnému světu, kde se věci dějí v reálném čase. To zase znamená, že mnohé typy operací – obzvláště interakce se servery – jsou svou povahou zákonitě vícevláknové. Je to přirozenost živé bytosti.

60


Umožníme uživateli, aby si vybral hudebníka Dobrá – vytvořili jste vizuální prvky, strčili je do animačního klipu a přidali potřebný skript, aby se informace načetly ze serveru a zobrazily. Určitě vám připadá, že se informace mají zobrazit v okamžiku, až se zavolá funkce loadArtist() (viz výpis 2.4). Bohužel, funkce se zatím vůbec nezavolá, takže se také nic nestane. Budeme muset udělat něco trochu vyspělejšího; prozatím jen přidáme jednoduchý ovládací prvek typu číselník, v němž si bude moci uživatel vybrat, kterého hudebníka chce zobrazit. Kdykoli uživatel změní hodnotu v číselníku, zobrazí se informace o odpovídajícím hudebníkovi. Číselník přidejte následujícím postupem: 1. Jestliže se právě nenacházíte v módu editace symbolu našeho animačního klipu, dvojitě klikněte na některém z jeho prázdných vizuálních prvků. 2. Přetáhněte z panelu Components na plochu komponentu NumericStepper (ovládacímu prvku číselník se ve Flashi říká „NumericStepper“). Protože jste v módu editace symbolu, přidáváte komponentu do animačního klipu, ne do hlavní části dokumentu. 3. Příkazem View > Preview Mode > Full vypněte mód náhledu osnovy (Outline Preview), který jste zapnuli dříve. Všimněte si, že nyní vidíte v komponentě NumericStepper dvě malé šipky ukazující nahoru, resp. dolů, zase je ale o něco těžší sledovat, kde se nachází komponenta Loader. Zvolte si ten režim náhledu, který vám vyhovuje nejlépe. 4. Přesvědčete se, že je nová instance komponenty NumericStepper vybraná, pak v panelu Properties nastavte vlastnost minimum na 1, vlastnost maximum na 5 a vlastnost value na 1. Jinak řečeno, chceme uživateli dovolit, aby si mohl vybrat číslo od 1 do 5, přičemž jako počáteční hodnotu nabídneme 1. 5. Při stále vybrané komponentě NumericStepper napište do panelu Actions tento kód: on (change) { _parent.loadArtist(this.value); }

V normální jazyce je význam kódu v podstatě tento: „když uživatel změní hodnotu v ovládacím prvku číselník, zavolej funkci loadArtist() a předej do ní prostřednictvím parametru idArtist hodnotu, kterou uživatel zvolil.“ O syntaxi on (change) se více dozvíte v kapitole 4. Prozatím stačí, když pochopíte to, co je celkem zřejmé: kód uvnitř složených závorek se vykoná vždy, když se změní hodnota v číselníku. Uvnitř bloku on (change) voláme funkci loadArtist(), kterou jsme vytvořili ve výpisu 2.4. Aktuální hodnota číselníku je dostupná z vlastnosti this.value, což znamená, že jestliže uživatel právě změnil hodnotu ovládacího prvku řekněme na 2, předá se do funkce loadArtist() jako požadované identifikační číslo hudebníka číslo 2.


61

Obrázek 2.9. Přidání kódu, který se odpálí, když se změní hodnota v číselníku.

Také si v bloku on(change) všimněte klíčového slova _parent. Uvnitř bloku zpracovávajícího nějakou událost nějaké komponenty se odkazy na funkce nebo proměnné chápou jako odkazy na metody a vlastnosti samotné komponenty, nikoli na prvky v dokumentu, který vytváříte. Chcete-li se odkázat na prvky uvnitř dokumentu, musíte použít _parent (zhruba se to dá přeložit jako „rodič animačního klipu, neboli dokument obsahující tuto komponentu“). V příští kapitole probereme tyto pojmy přesněji. Fajn. Všechno by mělo být připraveno. Otestujme to!

Publikování a testování rozhraní Nyní už stačí jen publikovat animaci, která obsahuje naše nové rozhraní. Publikování v podstatě znamená, že se dokument Flashe (soubor .fla, na kterém pracujete) převede na mnohem menší, úsporný soubor, kterému porozumí přehrávač Flashe. Nový soubor dostane příponu .swf. Těmto souborům se všeobecně říká SWFs (a anglicky se to vyslovuje „swiffs“). Svou animaci publikujete jednoduše tak, že zvolíte File > Publish, nebo stisknete Shift+F12. Na malou chvilku se objeví ukazatel průběhu, pod dobu, co IDE Flashe kompiluje a smrskává obsah animace. A je to! Teď můžete své rozhraní otestovat tak, že se na ně podíváte v nějaké webové stránce. Abyste to měli pohodlnější, vytvoří Flash při publikaci animace prostou stránku HTML pro testovací účely.

62


Můžete ji navštívit hned teď pomocí adresy: http://localhost/venue/chapter02/artistWidget.html

Poznámka Samozřejmě, není-li váš webový server (ten s nainstalovaným ColdFusion, ASP.NET nebo strojem .JSP) na vaší místní pracovní stanici, budete muset nahradit localhost v uvedené URL patřičným názvem serveru. Také budete muset změnit odkaz na URL ve výpisu 2.4.

Když tuto URL navštívíte v nějakém webovém prohlížeči, bude stránka skoro prázdná; bude na ní jen ovládací prvek číselník (viz obrázek 2.10). To se ovšem změní, jakmile něco v číselníku vyberete. Změníte-li hodnotu na 2, měli byste uvidět jméno, popis a fotografii hudebníka s identifikačním číslem 2; změníte-li hodnotu na 3, měli byste uvidět hudebníka s číslem 3, atd.

Obrázek 2.10. Test získávání dat z vašeho serveru.

Je jasné, že navigace pomocí číselníku a ještě stvořená takto, není nijak perfektní. Hlavně proto, že rozsah možných hodnot jsme do animace zakódovali „natvrdo“. Jestliže se počet dostupných hudebníků změní, bude se muset animace publikovat znovu. Také se předpokládá, že jsou hudebníci očíslovaní souvislou řadou identifikačních čísel počínaje číslem jedna a že si uživatel přeje prohlížet hudebníky v pořadí podle jejich identifikačních čísel. Jestliže bude nějaký hudebník odstraněn, nebo jestliže si uživatel přeje prohlížet hudebníky v nějakém intuitivnějším pořadí (řekněme podle abecedy), přestane tato primitivní technika správně fungovat. Přesto bych chtěl s ovládacím prvkem číselník provést ještě jeden experiment, než ho nahradíme vhodnějším navigačním mechanizmem.


63

Přístup k animačnímu klipu z hlavní časové osy Tak, jak jsme to vyrobili, je ovládací prvek číselník, který slouží uživateli k navigaci, součástí animačního klipu ArtistDisplayClip. Jestliže však chápeme animační klip jako jistý druh objektu – ve kterém má být zapouzdřeno zobrazování informace o nějakém jediném hudebníkovi – tak se zdá, že je ovládací prvek číselník na nepravém místě; jde spíše o přecházení mezi záznamy, ne o zobrazení údajů z aktuálního záznamu. Koncepčně by bylo konsistentnější, kdyby ovládací prvek číselník sídlil vně animačního klipu. V současné fázi našeho řešení to žádný závažný problém není, protože se ovládacího prvku číselník stejně chceme brzy zbavit. Ale čistě proto, abychom viděli, co to udělá, přemístěme ovládací prvek ven z animačního klipu a usaďme ho v hlavním dokumentu – také se říká na hlavní časové ose. Vizuálně se v animaci nic nezmění; až budeme animaci publikovat, bude rozhraní vypadat úplně stejně. Jediná drobná odlišnost bude v tom, jak budou v animaci uspořádané objekty a kód. Naznačenou změnu realizujte tímto postupem: 1. Jestliže se právě nenacházíte v módu editace symbolu animačního klipu, dvojitě klikněte na některém z jeho vizuálních prvků. 2. Vyberte ovládací prvek číselník tím, že na něm kliknete (jednou). Přesvědčete se, že je vybraný jen on, nic jiného. Možná budete muset nejprve jednou kliknout na prázdném místě plochy, pak na ovládacím prvku číselník. 3. Vyjměte číselník do schránky příkazem Edit > Cut z hlavní nabídky Flashe, nebo klikněte na ovládacím prvku pravým tlačítkem myši a z kontextové nabídky zvolte Cut. Také můžete použít všeobecně známou klávesovou zkratku Ctrl+X. 4. Opusťte mód editace symbolu tím, že dvojitě kliknete na prázdném místě plochy. 5. Vložte číselník zpět příkazem Edit > Paste in Place. Dobrá, číselník nám teď sedí na hlavní časové ose, není už uvnitř animačního klipu. Všechno vypadá úplně stejně, pokud byste ale animaci publikovali a otestovali právě teď, zjistili byste, že nefunguje správně. Proč? Inu, pokud si ještě vzpomenete, tak kód, který se vykoná, když se změní hodnota v číselníku, vypadá takto: _parent.loadArtist(this.value);

Řádek bude fungovat uspokojivě tehdy, budou-li ovládací prvek číselník a funkce loadArtist() na pojmově tomtéž místě: v animačním klipu (v ukázce reprezentovaném klíčovým slo-

vem _parent). My ale teď máme ovládací prvek číselník a funkci, kterou chceme zavolat, na různých místech, proto musíme kód mírně pozměnit, aby se správně „zacílil“ na funkci uvnitř klipu. Změnu proveďte tímto postupem:

Vaše první rozhraní ve Flashi

Recommend Documents