Szablony Flex

Jak pisałem Flex zawiera interesiujący mechanizm obsługi dokumentów XML oparty na E4X.To pozwala na budowanie szablonów z których pliki SWF potrafią wyświetlić dane. Ted Patrick pokazał przykład jak obsługiwać takie szablony. Jego idea polega na tym żeby z zawartości strony WWW ( w kodzie XHTML pobierać interesującą zawartość, a następnie to wyświetlić przez plik SWF).

Jak to działa?

Kod strony WWW można podzielić na dwie częsci. Pierwsza z nich to osadzony kod dokumentu XML zacznający się

<script type="text/xml">
 <!--FXTMODEL-->

i zawierajacy dane do wyświetlenia przez plik SWF

<CATALOG>
 <CD>
  <TITLE>Empire Burlesque</TITLE>
  <ARTIST>Bob Dylan</ARTIST>
  <COUNTRY>USA</COUNTRY>
  <COMPANY>Columbia</COMPANY>
  <PRICE>10.90</PRICE>
  <YEAR>1985</YEAR>
 </CD>
 ...........
</CATALOG>

Takie dane mozna nazwać danymi Modelu

Druga część kodu to sktypty JS których zadaniem jest sprawdzić wersję Flash Playera, pobrać dane ze strony WWW przesłać je jako zmienną Flash do pliku SWF.

Oto kod JS ze strony, który tak robi.

"flashvars","historyUrl=history.htm%3F&lconid='
 + lc_id + '&model='+ escape( document.body.innerHTML ) +'"

Kod JS to nazwać Kontrolerem

Natomiast plik SWF jest Widokiem. Pobiera dane ze strony i wyświetla je.
Oto kod MXML realizujacy powyższą rzecz (potem staje się plikiem view.swf)

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
creationComplete="templateInit()"
backgroundGradientColors="[#c0c0c0, #c0c0c0]"
height="100%"
width="100%">

<mx:Script>
    <![CDATA[

        import flash.external.ExternalInterface;

        [Bindable]       
        public var model:XML;
   
        public function templateInit():void
        {
            var strModel:String = unescape( Application.application.parameters.model ) ;
            var start:uint = strModel.indexOf( "<!--FXTMODEL-->" ) + 15;
            var end:uint = strModel.lastIndexOf( "<!--FXTMODEL-->" ) ;
            taout.text = strModel.substring( start , end ) ;
        }
   
    ]]>
</mx:Script>

<mx:TextArea id="taout" top="10" bottom="10" right="10" left="10"/>

</mx:Application>

Wyjaśnienie kodu.
Do pliku SWF ze strony WWW dane trafiają jako ciąg znaków. Ten ciag znaków jjest jako para zmienna=watrość. Zmienną poprzedza znak amperstanda. W kodzie AS trzeba zdefiniować jakiego typu jest ta zmenna. Zmienna "model" zawiera informację w postaci kodu XML. Tak więc ta zmienna jest typu XML. Atrybut Bindable informuje że ta zmienna będzie zawierała dane z zewnatrz, w momencie inicjalizacji nie jest znana jej zawartość. Po załadowaniu i zainicjalizowaniu kompomentów wykonywane jest zdarzenie creationComplete które wywołuje metodę templateInit(): Ta metoda parsuje zawartość zmiennej "model" i wynik przekazuje do pola tekstowego.

Wynika z tego mechanizm bardzo interesujacy.

• Pozwala tworzyć zawartość stron internetowych z jedna treścia ale z 2 widokami głównym jako XHTML i opcjonalnym jako SWF. Za pomocą skryptów JS można przełaczać pomiędzy tymi widokami.
  
• Widok w pliku SWF pobiera dane ze strony na której się znajduje.
  
• Roboty wyszukiwarek i tak wyindeksuja zawartość strony XHTML
• Plik czy pliki SWF sa pobierane tylko raz, następne pobierane są tylko strony WWW w których wizualizacją zajmuje się tylko ten sam plik.
• W tym przypadku Konrolerem jest skrypt JS, istnieje też możliwość przeniesienia tej funkcjonalności Kontrolera na plik SWF (to dzięki zastosowaniu Flex States).
• Występuje obsługa przycisku Cofnij i Dalej z poziomu przeglądarki.