>> APPLICATION LINK HERE <<

- Application built in Adobe Flex

- 2317 characters

- Application opens RSS Feed from digg.com page
- Every 15 minutes (up to user) it attempts to reed the feed and refresh the list
- It builds the list with topics and authors' avatars
- Every title links to the news, mouse over a description displays tip with a full description
- Separate Rendered builds a display for a list of topics (2244 characters)
- RSS source available in preview panel
Main components and functions: Timer, addEventListener, mx:HTTPService, mx:List, itemRenderer, URLRequest, navigateToURL

If you are interested in the source or need any help regarding this project please send me email on home(at)pawelkowalczyk.com with text 'Code_digg' as a subject.

If you cannot understand the description above, below is a version especially for you:
- Aplikacja zbudowana w Adobe Flex
- 2317 znakow kodu ;-)
- Aplikacja otwiera RSS Feed ze strony digg.com.
- Co 15 minut () probuje czytac kanal rss i uaktualnia liste.
- Najnowsze wpisy wyswietlane sa w postaci listy z awatarami autorow.
- Tylul jest linkiem, myszka nad opisem wyswietla pelny opis wpisu.
- Wpisy wyswietlane sa za pomaca zewnetrzenego Renderera (2244 znaki)
- Mozliwosc podejrzenia zrodla rss w pliku tekstowym.

Jesli jestes zainteresowany plikami zrodlowymi, lub potrzebujesz wyjasnien do zrodel
przeslij prosze maila z tekstem 'Code_digg' w tytule na adres: home(at)pawelkowalczyk.com

my minicity here ;-)

http://www.pawelkowalczyk.com/1/Flex_at_home.html

i wymaga dopracowania kilku szczegolow:

• ladny loader (tak mi sie widzi, ze to proste)
• nawigacja nastepne/poprzednie zdjecie (z wyjatkami dla krancowych elementow)
• otwieranie kontekstow w osobnym tabie przegladarki (nie moja wina, wyslalem zapytanie o buga)
• formatka do wysylania maila (ze skryptem PHP w tle)
• na koniec, jak juz wszystko bedzie dzialac - podzial na mniejsze galerie i dostep do galerii z wprowadzaniem hasla.

Nad ''tym" projektem siedze 3 wieczor po 1-2 godziny. W weekend odpuszczam. Trzeba sie wyluzowac i odpoczac przed urlopem za granica... (Wlasnie Deszczowa stuknela szuflada i mi sie laptop zawiesil). W przyszlym tygodniu przepisuje baze zdjec i koncze wszystkie powyzsze drobne historie w kodzie.

No... i zapraszam do mojego miasteczka!

W kodzie wszystko bylo OK, poza 3 literkami. Ich zmiana odblokowala mi caly projekt. Czyli projekt sie skompilowal i wyswietlil to co chcialem. Do rzeczy:

Mamy nastepujacy XML, gdzie kolejne wpisy <news> wygladaja nastepujaco:

<news>

 <date>18.12.2007 11:41</date>

 <title>Contact Centre Report</title>

 <lead>Week 45 - summary</lead>

 <content>http://127.0.0.1/site/home/news/view/item382669/</content>

</news>

Aby program czytal plik dynamicznie nalezy wykonac 2 zestawy polecen:

1. Czytanie i konwersja pliku do listy:

    <mx:HTTPService resultFormat="e4x" url="news.xml" id="inputXML" result="onResult(event)"/>

    <mx:XMLListCollection id="newsXML" source="{inputXML.lastResult.news}"/>

Te magiczne 3 literki to sposob odczytu pliku XML. Zamiast wartosci 'xml' nalezy uzyc 'e4x'. I dalej wszystko staje sie proste.

2. W naglowku mx:Application trzeba wymusic odswiezenie serwisu HTTPService przy pomocy funkcji send(); Za kazdym razem przy odswiezeniu aplikacji, trafia do niej najnowsze dane z pliku XML.

creationComplete="inputXML.send()"

W dalszym ciagu aplikacji odwoluje sie bezposrednio do listy newsXML, podobnie jak w poprzednich przykladach.

W czesci skryptowej nalezaloby zabezpieczyc sie przed bledem w czytaniu zewnetrzego pliku.
Wygladaloby to nastepujaco:

<mx:HTTPService resultFormat="e4x" url="news.xml" id="inputXML" result="onResult(event)" fault="serv_fault(event);" />

oraz kod wywolujacy okienko Alert:

<mx:Script>

        <![CDATA[

            import mx.rpc.events.FaultEvent;

            import mx.rpc.events.ResultEvent;
            private function serv_fault(evt:FaultEvent):void 

	    {

            mx.controls.Alert.show("Unable to load XML:n", "ERROR");

            }

        ]]>

</mx:Script>

Koniec.

Zapraszam oczywiscie do mojego miasteczka!

Flex zachowuje sie dosyc ciekawie. Jesli zbudowac taka konstrukcje:

<mx:XML id="inputXML" source="news.xml"/>
<mx:XMLListCollection id="newsXML" source="{inputXML.news}"/>

to (jak sie okazuje w praktyce) bez wzgledu na zmiane pliku XML wszystkie dane beda zebrane podczas kompilacji i osadzone na stale w pliku swf. Nie ucieszylo mnie to szczegolnie. Jednym slowem trzeba to obejsc. I juz wiem jak. Ale dzisiaj o czyms innym.

Komponent mx:Repeater pobiera z pliku XML kolejne wpisy tak jak w przykladzie:

<news>
 <date>18.12.2007 11:41</date>
 <title>Contact Centre Report</title>
 <lead>Week 45 - summary</lead>
 <content>http://127.0.0.1/site/home/news/view/item382669/</content>
</news>

Oczywiscie, pojedynczy wpis mozna wydobyc na kilka sposobow - mozna parametrem przekazac index wpisu na liscie

(XMLListCollection), lub przekazac caly wpis i analizowac go osobno po kliknieciu w jakis przycisk (Oczywiscie wlaczony do konstrukcji

komponentu mx:Repeater).
Wywolanie funkcji wyglada nastepujaco:

click="expand_news(String(event.currentTarget.getRepeaterItem()))"

Poniewaz zrodlem do budowy komponentu (dataProvider) jest lista XML, wiec funkcja String wydobedzie pojedynczy wpis XML dotyczacy biezacego (wybranego) elementu.

Efektem klikniecia jest przekazanie wpisu jako ciagu znakow (tak jak oryginal z pliku XML) do wykorzystania 'na zewnatrz'.

Sama funkcja sklada sie z 2 czesci: czytam wpis XML oraz go konwertuje:
private function expand_news(e:String):void

{
	var newsTo:XMLDocument = new XMLDocument(e); /* odbieram String jako XMLDocument */
	var decoder:SimpleXMLDecoder = new SimpleXMLDecoder(true); /* buduje dekoder XML */  	 	

	var resultX:Object = decoder.decodeXML(newsTo); /* buduje obiekt w oparciu o zdekodowany XML */

	my_editor.title=resultX.news.title + '         (posted on: ' + resultX.news.date + ')';

 	my_editor.htmlText=resultX.news.content; /* dostep do pol XML */
}

Oczywiscie na poczatku skryptu trzeba zaimportowac klase dekodera do kompilacji:

import mx.rpc.xml.SimpleXMLDecoder;

Kod mxml mozna znalezc >>> tu <<<; zawiera on rowniez obsluge dynamicznego rozwijania komponentu (resize).
I zapraszam ja zwykle do mojego malego miasta!!!

PS. Jak mnie wkurza, jak ten edytor w Wordpressie rozwala pieknie sformatowany kod... Grrrrrr.

W pracy nuda, wiec sie chlopcy skupili na wymyslaniu rzeczy dziwnych i nikomu niepotrzebnych. Dostalo mi sie wiec zadanie, ktore nie pozwolilo skonczyc galerii. Zmierzylem sie z cotygodniowym sprawozdaniem, na ktore czasem przychodzi SZEF. Szef lubi wodotryski, dlatego raz na pol roku zmieniamy nasze prezentacje...

Do rzeczy:
- system dostarcza 3 pliki XML z danymi, ktos do nich zaglada i dodaje komentarze do liczb.
- potrzeba nam 3 pie-chart'y z procentowym rozkladem danych. zielone - gotowe, zolte - cos do zrobienia, czerwone - zle...
- ma byc kolorowo i efektownie

Zabawa z kodem:
- na poczatek zadany styl, ktory zmienia kolor tla pod okienkiem Alert. Alert zas ma pokazywac cyferki i opis pobrany z XMLa po kliknieciu na serie z wykresu
- W skrypcie pierwsze 3 importy odpowiedzialne sa za efektowne zachowanie wykresu. Czwarty to obsluga Alertu - 'fiku-miku' okienka pod ktorym znika rozmyta aplikacja. Cool. Wykres sie wysuwa, albo nie, jak sie odkliknie checkbox w lewym gornym rogu
- funkcja ...itemClick - nie jestem tu jej autorem - obsuguje zachowanie wykresu. Po kliknieciu zadana seria wysuwa sie poza chart i wykres obraca sie do poziomej linii po prawej stronie
- funkcja - itemOver - podswietla serie (w moim Flex2 cos sie wali, ale w pracy wszystko gra)
- funkcja - itemOut - wygasza serie

Nie dalem rady z dynamicznym ladowaniem danych, wiec pliki XML laduje na sztywno.

Ciasteczko (PieChart) dostaje kolory zgodne z kolejnymi z listy 'mx:fills', oraz legende, ktora zmiescilem na wykresie.

Za zmiane danych odpowiada zestaw RadioButtons, ktore podmieniaja serie danych (dataProvider) 'na chama'. Zadnej finezji.

Nie zapomnijcie zajrzec do mojego miasteczka >>>TU<<<

Startujac od zera: kazda aplikacja zaczyna sie i konczy naglowkiem, ale FlexBuilder tworzy go automatycznie. W zakladce 'design' mozna w zasadzie zdefiniowac wszystkie parametry startowe aplikacji, a w 'source' - zobaczymy czysty kod.

W naglowku aplikacji najwazniejszym parametrem (na poczatek) jest to, jak beda sie zachowywac nowe elementy dodawane do projektu. Parametrem glownego komponentu mx:Application jest 'layout' ktory moze przyjmowac 3 wartosci:

- absolute - kolejne elementy dodawane do aplikacji beda umieszczane tam gdzie je ustawimy w 'designie' w odniesieniu do osi XY
- horizontal - poziomo
- vertical - pionowo

Dobrze to zdefiniowac na poczatku.

Aby w poziomym/pionowym ukladzie dodac elementy w innym ukladzie, trzeba je zgrupowac na jednym z komponentow grupujacych, ale o tym pozniej. Profil 'absolute' uwazam za bezpieczniejszy, jesli elementy aplikacji nie maja okreslonego porzadku lub trzeba precyzyjnie umiescic komponenty w roznych miejscach projektu.

Kazdemu z komponentow mozna (nalezy) nadac 'id', by byl do niego bezposredni dostep z dowolnego miejsca aplikacji. Dla statycznych pol tekstowych - szkoda na to czasu.

Wracajac do kodu: W pierwszej kolejnosci aplikacja czyta plik - mx:XML, gdzie znajduja sie opisy i sciezki do zdjec i przypisuje strukture pliku do listy. Struktura pliku XML jest nastepujaca:

mx:XMLListCollection tworzy liste opierajac sie na tagu 'photo'. Tak wiec kazdy element listy bedzie miec 5 pol. Korzystam przy okazji z pola 'ind' gdzie zapisany mam biezacy index kazdego ze zdjec (od 0 z gore). Jest to moze i nieeleganckie, ale korzystam z tych samych plikow gdzie indziej. Oczywiscie pol (moze, a raczej to pewne) bedzie wiecej ale na razie potrzebne beda tylko te.W kolejnym kroku definiuje tablice z efektami (filters), ktore bede wykorzystywal pod ladowanymi zdjeciami. Stosuje to tylko 1 efekt - czarny cien w strone prawego dolnego rogu. Wszystkie efekty opisane sa tu jako klasy biblioteki 'flash.filters' . Biblioteka ta jest ladowana w naglowku aplikacji.

Zwykle biblioteki laduje sie tak:

<mx:Script>
<![CDATA[
import mx.controls.Alert; <-- tu ladowana klasa Alert z biblioteki mx.controls
import mx.controls.TextInput;
import mx.utils.StringUtil;
import mx.validators.Validator;
]]>
</mx:Script>

W tym przypadku proba ladowania biblioteki w bloku skryptu za pomoca komendy 'import' zawsze wywoluje blad... :-(. A powinno dzialac.

Po definicji kilku pol tekstowych pojawia sie komponent grupujacy mx:ApplicationControlBar, a na nim w kolejnosci: - pole na powiekszone zdjecie z galerii (mx:Image) - pole grupujace HBox, ktore pozwala na wyswietlanie wielu elementow w poziomie z paskiem przewijania (pasek przewijania pionowego z powodow estetycznych zostal wylaczony) - w polu HBox za wyswietlanie podgladow obrazkow odpowiedzialny jest komponent mx:Repeater; o nim wiecej:

Komponent mx:Repeater przeglada liste/tablice od pierwszego do ostatniego elementu - w petli; do dowolnego komponentu przypisuje elementy tabeli/listy. Za kolejnosc jest odpowiedzialny parametr 'dataProvider', ktory {wskazuje} na zrodlo danych. W przypadku tej galerii Repeater wyswietla liste miniaturek (ale moga to byc rownie dobrze przyciski, pola tekstowe, lub zestaw elementow - np. graficzny przycisk a na nim napis, itp.). Miniaturki do galerii sa przechowywane w katalogu 'thumbs', wieksze obrazki w 'images'.
- Tag 'src' zawiera sama nazwe pliku, wiec trzeba do tej nazwy dodac sciezke.
- Z biezacego pola (currentItem) pobierane sa niektore dane do wyswietlenia miniaturek: w polu 'source' obrazka laczona jest sciezka do miniaturek i watrosc z pola 'src'.
- Pole 'toolTip' wyswietla dodatkowo biezacy index i opis pobrany z pola 'description'. rep.currentIndex mozna zamienic na rep.currentItem.ind, bo powielam tam index.
- Chwilowo puste pole 'click' czeka na funkcje, ktora po kliknieciu w miniaturke wyswietli wiekszy obrazek.

W nastepnych krokach postaram sie (chyba tak moge to ujac):
- po kliknieciu w miniaturke wyswietlic pelny obrazek, pokazac gdzies tytul zdjecia
- oprogramowac dwa przyciski do przechodzenia do kolennego/poprzedniego obrazka i wyjatki dla pierwszego i ostatniego zdjecia
- Przy przechodzeniu do innego obrazka zrobic cos na ksztalt 'fade out' starego i 'fade in' nowego
- taki gadget, ale powinien cieszyc oko - po najechaniu lub kliknieciu na 'cos' pokazac efektownie pole z opisem zdjecia (jakis gustowny efekcik)
- wygenerowac link do tego samego zdjecia na www.alamy.com (tam mozna je kupic)
- przygotowac podstrony zalezne od klikniecia w menu (na razie jest puste) i oczywiscie samego menu
- zbudowac formatke do wysylania maili i zapytan w polaczeniu z kodem PHP
- to na razie tyle... chyba mi wystarczy czasu do Sylwestra :-)
- a w Sylwestra wycieczka z deszczawadziewczynka.wordpress.com, aparatem, statywem i butelka szampana na dach i...

Nie zapomnijcie zajrzec do mojego miasteczka >>>TU<<<

Moja przygoda z Adobe Flex zaczela sie dokladnie 3 tygodnie temu. Po 10-letniej przerwie w programowaniu przestawienie sie na projektowanie aplikacji wydawalo sie niewykonalne. Po 3 tygodniach zdaje mi sie, ze nowe umiejetnosci przydadza sie w ewentualnym nowym miejscu pracy :-). Wiele materialow, ktore mam zamiar opublikowac (szczegolnie przyklady) pozostawie w jezyku angielskim, lecz jesli zajdzie potrzeba bede je tlumaczyl w wolnych chwilach. Niestety, jezyk polski powoli pozostaje mi jedynie na pogaduszki z zona...

Do rzeczy: Nie bede pisal do czego sluzy Flex, raczej skupie sie na tym, jak budowac aplikacje z gotowych elementow, gdzie szukac pomocy - w koncu sam przez to wlasnie przechodze.

Narzedzia:

Adobe FlexBuilder 3.0 Beta 2 (wersja darmowa - ma jakies ograniczenie czasowe, ale po czyszczeniu rejestrow mozna instalowac po kilka razy, chyba nie jestem up-to-date, juz jest Beta 3 ;-)
Firefox 2.0.11 - choc Flex posiada wlasny player do wygenerowanych aplikacji swf (Flash Player)

Linki:

Strony zrodlowe i biblioteki styli i przykladow (bede je laczyl w osobny artykul) - tutaj dla wygody:
http://labs.adobe.com/technologies/flex/ - HQ na adobe.com
http://www.adobe.com/devnet/air/flex/ - Adobe AIR Developer Center for Flex
http://livedocs.adobe.com/labs/flex3/langref/ - Baza referencyjna ??? - (Language Reference dla poprawnosci) - czyli wszystko o klasach, funkcjach, deklaracjach, itp.
http://livedocs.adobe.com/flex/2/langref/ - Language Reference dla wersji komercyjnej 2.0
http://flex.org/ - tu jest prawie wszystko
http://del.icio.us/ - a tu cala reszta (wlasciwie tu: http://del.icio.us/search/?fr=del_icio_us&p=flex+tutorials&type=all)

Galerie komponentow, styli i przykladow:
Flex2 samples explorer
Flex2 style explorer
Flex2 component explorer
Flex3 component explorer

Dlaczego Flex?

Spotkalem sie z opinia, ze Adobe Flex jest 'evil'. Ze jest to powrot do budowania z klockow 'czegos' watpliwej jakosci.
Ale w jakim jezyku programowania, bez wczesniejszej znajomosci narzedzia (nigdy nie tworzylem aplikacji we Flashu) mozna nauczyc sie w 3 tygodnie oprogramowac galerie z czytaniem tagow z XML-a...?
Lista bedzie sie pewnie rozszerzac:
1. Budowanie formalnego wygladu aplikacji z gotowych komponentow
2. Mozliwosc laczenia kodu ActionScript (w praktyce jeszcze tego nie robilem, hehehe) jako modulow zewnetrznych
3. Naturalna 'wspolpraca' z plikami XML
4. Zintegrowane graficzne srodowisko programistyczne z debuggerem
5. Wersja Beta jest za darmo (MS Visual Studio Express JEST za darmo, ale - mozna sie z tym zgodzic lub nie - brakuje mu elastycznosci Flexa)
6. Budowanie (hohoho, latwiejsze) aplikacji biurkowych dla AIR Runtime (taki nowy gadget od Adobe)
7. W miare latwy dostep do 'open source' komponentow i dodatkow
8. Niby JavaScript jest bardziej 'posh', ale nie trawie dlugiego czekania na wgranie runtime'a i niezrozumialych konstrukcji przypominajacych starozytne jezyki programowania procesorow...

Brzmi to pewnie jak parszywa reklamowka, ale tak dla formalnosci - z Adobe nikt mi za to nie placi.

A na koniec: to mnie zauroczylo. Niby banalne, ale pokazuje co Flex potrafi i nie jest wodotryskiem samym w sobie...

A tak na koniec prosze o zagladanie do mojego miasta! >>> tu <<<