Flex: Tworzymy prostą stronę www
Od kilku dni pracuje nad dodatkami do bloga, tworzonymi w adobe air oraz flex, z tego też powodu stwierdziłem że warto będzie przy okazji dać na bloga jakiś tutorial. Dziś przedstawię jak zrobić prostą stronę www opartą o adobe flex (jest to część pierwsza, w kolejnych będziemy rozbudowywać stronę o nowe dodatki jak i połączymy ją z php by zrobić treść bardziej dynamiczną)
Wstęp
Na początek poleciłbym pobrać i zainstalować Adobe Flex Builder, ułatwi wam on pracę oraz pomoże zapoznać się z flex.
Tworzymy projekt
Na początek uruchomimy adobe flex builder
Następnie stwórzmy nowy projekt
Podajemy nazwę projektu i klikamy finish
Kod
Przejdziemy teraz do kodu aplikacji
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" borderColor="#000000" width="800" height="500" backgroundGradientColors="[#AEAEAE, #AEAEAE]">
W Application ustawiamy kolor wielkość naszej aplikacji (width/height) oraz jej wygląd (w przykładzie zastosuje jednolite tło choć jak widać można wykorzystać gradniety - backgroudGradnietColors)
<mx:Move id="hideEffect" xTo="-700" />
<mx:Move id="showEffect" xFrom="700" />
Wykorzystamy mx:Move do animacji przejść między treściami na naszej stronie
<mx:Image y="10" source="cooltext422167860.png" horizontalCenter="0"/>
Dodajemy logo wykorzystując mx:Image, w source podajemy gdzie znajduje się nasz obrazek, ja umieściłem go wewnątrz projektu w katalog src dlatego też jako ścieżkę podajemy bezpośrednio nazwę pliku. y=10 określa położenie naszego loga względem osi y natomiast horizontalCenter=0 określa że logo ma być wyśrodkowane.
<mx:LinkButton x="10" y="160" click="viewstack1.selectedIndex=0;" icon="@Embed(source='btn351717597.png')" width="100" height="35"/>
<mx:LinkButton x="10" y="203" click="viewstack1.selectedIndex=1;" icon="@Embed(source='btn351717597.png')" width="100" height="35"/>
<mx:LinkButton x="10" y="246" click="viewstack1.selectedIndex=2;" icon="@Embed(source='btn351717597.png')" width="100" height="35"/>
<mx:LinkButton x="10" y="289" click="viewstack1.selectedIndex=3" icon="@Embed(source='btn351717597.png')" width="100" height="35"/>
Wykorzystamy mx:LinkButton do nawigacji na stronie, w clicks odpowiada za to co ma się stać po kliknięciu na przycisk, w naszym wypadku nastąpi wczytanie odpowiedniej strony, viewstack1 określa główne id mx:ViewStack w którym będziemy trzymać nasze strony. Dzielić je będziemy przy użyciu mx:Canvas a odwoływać się do nich będziemy po przez selectedIndex=numer. W polu icon określamy link do obrazka jaki będzie na LinkButtonie
<mx:ViewStack x="135" y="160" id="viewstack1" width="655" height="310">
Zajmiemy się teraz polem ViewStack, jako id podajemy viewstack1, którego będziemy używać przy nawigacji, width/height określają wymiary natomiast x/y położenie
<mx:Canvas width="100%" height="100%" backgroundColor="#FFFFFF" hideEffect="{hideEffect}" showEffect="{showEffect}">
<mx:Text x="10" y="10">
<mx:htmlText>
<![CDATA[
tresc 1
]]>
</mx:htmlText>
</mx:Text>
</mx:Canvas>
<mx:Canvas width="100%" height="100%" backgroundColor="#FFFFFF" hideEffect="{hideEffect}" showEffect="{showEffect}">
<mx:Text x="10" y="10">
<mx:htmlText>
<![CDATA[
tresc 2
]]>
</mx:htmlText>
</mx:Text>
</mx:Canvas>
<mx:Canvas width="100%" height="100%" backgroundColor="#FFFFFF" hideEffect="{hideEffect}" showEffect="{showEffect}">
<mx:Text x="10" y="10">
<mx:htmlText>
<![CDATA[
tresc 3
]]>
</mx:htmlText>
</mx:Text>
</mx:Canvas>
<mx:Canvas width="100%" height="100%" backgroundColor="#FFFFFF" hideEffect="{hideEffect}" showEffect="{showEffect}">
<mx:Text x="10" y="10">
<mx:htmlText>
<![CDATA[
tresc 4
]]>
</mx:htmlText>
</mx:Text>
</mx:Canvas>
Czas na główny kod, wykorzystujamy mx:Canvas do tworzenia "podstron", treść natomiast umieścimy wykorzystując mx:Text. W przykładzie zamiast samego mx:Text, wykorzystałem mx:htmlText, który pozwala na umieszczanie znaczników html (b,u,li,ul, itd). Każde pole Canvas zawiera backgroundColor, określające kolor tła oraz hideEffect i showEffect. Na początku kodu określiliśmy mx:Move właśnie dla efektów na stronie, podaliśmy tam odpowiednio ich id hideEffect i showEffect, w Canvas odnosimy się do nich wykorzystując {hideEffect}, {showEffect}
</mx:ViewStack>
<mx:Label text="Copyright: Nazwa Strony" width="172" y="478" horizontalCenter="0"/>
<mx:MenuBar x="0" y="478" width="800"></mx:MenuBar>
</mx:Application>
Zamykamy pole ViewStack i przechodzimy do stopki naszej strony. Umieszczamy pole mx:Label podajemy w text treść oraz ustawiamy po przez parametr horizontalCenter="0" by pole było wyśrodkowane. Ponieważ sam tekst wygląda trochę kiepsko dodajemy do niego pole MenuBar, na końcu zamykamy naszą aplikację.
Teraz możemy odpalić nasz testowy projekt wybierając z menu Run -> Run site lub wykorzystując kombinacje klawiszy ctrl + F11.
Publikacja
Wybieramy z menu File -> Export -> Release Build
Wybieramy Finish, nasza gotowa aplikacja znajduje się w katalogu domowy -> My Documents (nawet gdy mamy wersje polska systemu, nasze aplikacje będą lądować w katalogu My Documents) -> Flex Builder 3 ->
Demo
Przykład strony dostępny jest tutaj
Również dostępny jest kod źródłowy do pobrania
Załącznik: files/site.zip
