Zabawne....

74% GeekMingle² - Free Online Dating

Pytania były raczej proste, sporo trafiło mi się pytań dotyczących kultury popularnej. A myślałem podczas rozwiązywania, że jestem w 90% geekiem. Zresztą nie powinienem rozwiązywać tego typu quizów czy testów bo dość szybko załapuję się w tym, jak zrobić żeby jak najlepiej wypaść, albo jaka jest intencja pytań. Powoduje to, że przy tego typu testach nie jestem obiektywny.

Tweener - Animacje i efekty ActionScript 3

Od pojawienia sie książki Roberta Pennera "Flash MX. Programowanie" sporo uwagi zaczęto zwracać na dynamikę animacji i dokonywania rożnego rodzaju przejść. Rozdział poświęcony tej tematyce można pobrać ze strony autora w pliku pdf . We Flash MX 2004 wprowadzono do programowania animacji w ActionScript 2 klasę mx.transitions.Tween. W dokumentacji Adobe poświęcono temu zagadnieniu rozdział About the Tween and TransitionManager classes Na stronach Adobe dla programistów znajduje się artykuł Using the Tween and Transition Classes in Flash MX 2004 Jen deHan wprowadzający w możliwości do programowania animizacji ujęć pośrednich W internecie pojawiło sie sie sporo artykułów na ten temat m.in. Using the Tween Class.

Gdy pojawił ActionScript 3 z frameworkiem Flex 2 to okazało się, że programiści mają do wykorzystania pakiety mx.effects, mx.effects.easing. W celu zapoznania sie z postawami używania efektów warto spojrzeć lekcję kursu Flex Quick Start o tym. W dokumentacji Flex napisano o stosowaniu własnych funkcji przyśpieszających czy zwalniających Using easing function a także o pisaniu własnych animacji (przykład z obracaniem) czy własnych efektów (przykład z dzwiękiem)

Takie bogactwo opcji animacji w frameworku Flex 2 sprawiło że programiści napisali aplikacje bazujące na formularzach MXML pełniące rolę narzędzi do konfiguracji (przeglądarek możliwości związanych z animacjami). Raul Diaz napisał narzędzie konfiguracji Custom Easing Function Explorer (kod źródłowy) który umożliwia podgląd własnych funkcji przyspieszających czy spowalniających Podobne narzędzie konfiguracji Fun with Easing Function (kod źródłowy) napisał James Ward. Natomiast Joe Johnston stworzył narzędzie do konfiguracji filtrów graficznych Flex 2 Filter Explorer (kod źródłowy). David Keutgens napisał narzędzie do konfiguracji efektów przejść Flex Effect Explorer (kod źródłowy). Tworzenie narżedzi do konfiguracji przy użyciu formularzy MXML wskazuje na bardzo duży potencjał aplikacji Rich Internet Application i to jest prawdopodobnie największa przewaga technologi Adobe Flex wobec aplikacji AJAX.

Wyszło pewne zamieszanie, gdy wprowadzono Flash CS3, bo programiści używający tego oprogramowania chyba nie mogą korzystać z powyższych pakietów do Flex 2, bo zastąpiono je pakietami fl.motion i fl.transitions. oraz wprowadzono Motion XML. Kevin Hoyt napisał artykuł w którym pokazał, że programiści Flex mogą skorzystać z możliwości jakie daje Motion XML.

Takie zamieszanie z pakietami i możliwościami jakie dają animacje sprawiło, że programiści zaczęli szukać nowych rozwiązań bardziej uniwersalnych. Niektórzy programiści woleli nie czekać i sami przygotowali własne rozwiązania. Jack Doyle napisał biblioteki do animacji i do efektów dla Flash CS3 Tween Lite (kod źródłowy) oraz TweenFilterLite (kod źródłowy). Ryan Taylor napisała silnik animacyjny AS3 Animation System v2.0 (kod źródłowy) a także zamieściła wprowadzenie do tego. Ostatnio największą popularność zaczyna zyskiwać biblioteka Tweener. Jest ona tworzona przez Brazylijczyka Zeh Fernando i przez Nate Chatelliera. Są trzy wersje zoptymalizowane pod kątem możliwości Flash Playera 7, Flash Playera 8 i Flash Playera 9. Warto pobrać przykłady i dema. Można pobrać plik pdf przedstawiający modele animacji ruchu. Programistów Flex pewnie najbardziej zainteresuje kod źródłowy narzędzia do prezentacji możliwości biblioteki Tweener w formularzach MXML. Szybkość i łatwość programowania animacji za pomocą tej biblioteki sprawiało, że coraz więcej programistów zaczęło wykorzystywać tą bibliotekę niż te komponenty dostarczane z Flex 2 czy Flash CS3. Ernesto Quezada napisał, że woli korzystać z ujednoliconego i popularnego silnika animacyjnego niż zmagać się z rożnymi API do animacji.

Japończycy prowadzą prym w korzystaniu i opisywaniu możliwości biblioteki Tweener. Flashrod napisał o tym jak skompilować ją do komponentu SWC i jak napisać prosty przykład typu "Witaj świecie" w pliku HelloWorld.as

package {
 import flash.display.Sprite;
 import flash.text.TextField;
 import flash.events.MouseEvent;
 import caurina.transitions.Tweener;
 public class HelloTweener extends Sprite {
     public function HelloTweener() {
         var tf:TextField = new TextField();
         tf.text = "Hello Tweener";
         addChild(tf);
         stage.addEventListener(MouseEvent.CLICK, function(e:MouseEvent):void {
             Tweener.addTween(tf, {x:mouseX, y:mouseY, time:1, transition:"linear"});
         });
     }
 }
} 

Można też zobaczyć przykład pokazujący wszystkie animacje zawarte w bibliotece Twenner. Inny przykład (kod) to gwiazdki chodzące za kursorem. Programista Aquioux na swoim blogu napisał serię artykułów o wykorzystaniu biblioteki Tweener w ActionScript 3. Pierwszy przykład pokazuje proste efekty animacji ruchów i dotyczy budowania własnego rozszerzenia (kod) do biblioteki Tweener o nazwie AqTwenn. Drugi przykład (kod) dotyczy efektów rozmycia czy obracania. Trzeci przykład (kod) jest prezentacja możliwości jakie daje przyśpieszanie i spowalnianie w animacji. Kluczową cechą w animacji jest wykorzystanie obliczeń na wartościach pod wpływem czasu wiec istotna jest wydajność tych obliczeń co jest pokazane na tym prostym przykładzie (kod). Ten sam blogger pokazuje nam jak dokonywać animacji z tekstem przy użyciu tej biblioteki Tweener, czy przekształcać tekst w zbiór pikseli. W tym celu omawia klasy Main.as, TypoLetter.as, StringSplitter.as, MotionEngine.as, StateDefine.as które zostaną użyte do tworzenia efektów na tekście, a także zamieszcza ich kod żródłowy. Następnie omawia problemy z przekształcaniem tekstów i pokazuje rozwiązanie tego problemu i zamieszcza kod źródłowy. Kolejne przykłady (kod) dotyczą wykorzystywania zdarzeń w współpracy z biblioteka Tweener. na przykładzie symulacji z chaosem literek (kod). Następnym przykładem jest efekt zsypu (kod) uporządkowany sposób animacji tekstu (kod) kierujący się pod wpływem kliknięcia myszki. Ciekawszy efekt może być osiągnięty przez modyfikację skryptu silnika MotionEngine.as pokazując przykład (kod) oparty na animacji krzywych Beziera (kod). Często wykorzystywana jest animacja przenikania na pewnym obszarze określonym siatka (kod) W tym wpisie omawia działanie poszczególnych klas Main.as, Grid.as, Cell.as, MotionEngine.as w tym kodzie. Kolejny wpis opisuje jej wykorzystanie w animacji ruchu (kod) Też zwraca uwagę na zmiany jakie zachodzą przy przejściu na nowszą wersję biblioteki Twenner 1.25.53 podając kod do nowszej wersji poprzedniego przykładu, a także omawia zmiany jakie wprowadził do silnika obsługi ruchu (kod) losowość (kod).

Największa popularność biblioteka Twenner uzyskała dzięki wykorzystaniu jej w wielu animacjach stosujących bibliotekę renderingu trójwymiarowego Papervision3D. Twórca biblioteki Tweener w swoim blogu stwierdził, że zaletą jego biblioteki jest prostota co sprawia, że nadaje się do programowania w takich skomplikowanych bibliotekach AS3 jak PV3D. Oto są przykłady wykorzystania biblioteki Twenner w Papervision3D jako silnika animacyjnego zawarte na Google Code. Agencja interaktywna Blitz zrobiła demo interfejsu użytkownika na bazie iTunes jako aplikacji, która może stać się interfejsem interaktywnych stron internetowych. Japończyk Aquioux na swoim blogu pokazał najprostszy sposób integracji tych bibliotek z kodem źródłowym. Japończycy słyną z tego, że szybko przyswajają nowe technologie czego przykładem są artykuły wprowadzające w programowanie Papervision3D. Pierwszy artykuł dotyczy wprowadzenia w programowania w Papervision3D. Drugi artykuł już jest wprowadzaniem w animowanie płaszczyzn w Papervision3D. Trzeci artykuł dotyczy animacji brył geometrycznych w PV3D. Ale w dobie open source te możliwości zdolnym ludziom już przestały zadowalać. Już pewien japoński programista postanowił wykorzystać klon biblioteki PV3D o nazwie Away3D i wykorzystując bibliotekę Tweener stworzył aplikację - narzędzie do konfiguracji animacji tekstu trójwymiarowego (kod źródłowy).

Podsumuwujac możliwosci programowania w ActionScript 3 i MXML dzięki animacjom i efektom dają niesamowite narzędzia dla programistów grafiki interaktywnej. I jest szansa, ze zaczniemy niedługo zastanawiać się nad użytecznością interfejsu użytkownika aplikacji internetowych w trzecim wymiarze korzystając z doświadczenia programistów gier trójwymiarowych.

Yahoo Maps API

Myślę, że swój blog mógłbym poświęcić o programowaniu map geograficznych. To wszystko przez to że wyszukiwarka Google traktuje mój artykuł o mashupach z mapami geograficznymi za bardzo interesujący i sporo ludzi trafia na ten artykuł.

Jak do tej pory nikt jeszcze nie pokusił się o napisanie komponentu do ActionScript 3 / Flex 2 / Flash cs3. Mimo że są w internecie komponenty do ActionScript 2 (Yahoo Maps i GMap)

W tej sytuacji warto zwrócić uwagę na to jak wygląda współpraca aplikacji napisanych w Flex 2 stosujących biblioteki ActionScript 2 na przykładzie .

Otóż cała komunikacja pomiędzy aplikacją a biblioteką przechodzi przez LiveConnection. Wymusza to na programiście ActionScript 3 klas mapujących które miałyby wywoływać metody z komponentu ActionScript 2 . Programista komponentu ActionScript 2 musi też zadbać o to żeby możliwa była komunikacja pomiędzy jego komponentem a kodem aplikacji Flex 2 poprzez LiveConnection.

W dokumentacji Adobe można przeczytać o tym.

Jak użyć mapki Yahoo w aplikacji Flex 2?

To proste trzeba pobrać Yahoo! AS3 API Libraries (do pobrania stąd), a następnie zarejestrować się w celu uzyskania Yahoo API Key. Po pobraniu i rozpakowaniu warto przejrzeć się kodom aplikacji yahoo\examples\maps są tam 3 przykłady. Najważniejszy za punktu widzenia jest przykład yahoo\examples\maps\all-functionality\howtoMapsASExAllFuntionality.mxml

Więcej informacji o konfiguracji Adobe Flex Buildera 2 do współpracy z tymi bibliotekami można zobaczyć w tym artykule. Jest też artykuł wprowadzający w tworzenie aplikacji Flex 2 przy wykorzystaniu Yahoo! Maps AS3 Communication Kit

Poniżej zamieszczam kod prostej aplikacji wskazującej na siedzibę firmy Enzo z markerem

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:yahoo="com.yahoo.webapis.maps.*" layout="absolute"
creationComplete="init();">
<mx:Script>
<![CDATA[
import flash.utils.getTimer;
import mx.controls.Alert;
mport com.yahoo.webapis.maps.methodgroups.*;
private const SWFDOMID:String = "Enzo";
private const UNIQUEID:int = getTimer();
private const YAHOOAPIKEY:String = "TwójKluczAPI";
private const MAPSWF:String = "as2map.swf";

private function init():void {
myAS2Map.addEventListener('onMapLoad', onMapLoaded);
myAS2Map.addEventListener('onMapError', onMapError);
}

private function onMapLoaded(ev:Object):void {
var panTools:PanTool = new PanTool(myAS2Map);
panTools.setPanTool(true);
var widgets:Widgets = new Widgets(myAS2Map);
widgets.showNavigatorWidget();
widgets.showSatelliteControlWidget();
var myMarker:Object;
var mapController:MapController = new MapController(myAS2Map);
var latLonController:LatLonController = new
LatLonController(myAS2Map);
latLonController.setCenterByLatLonAndZoom(
Number(51.2294091060463),
Number(22.5725913047791),
4,
0);
myMarker = {index:'Enzo',
title:'Enzo sp. z o.o.',
description:'ul. Kunickiego 46/4 \n 20-417 Lublin \n tel. (081) 531 86 73',
markerColor:0x990099,
strokeColor:0xFFFF00};
latLonController.addMarkerByLatLon("CustomPOIMarker",
Number(51.2294091060463),
Number(22.5725913047791),
myMarker);
}

private function onMapError(errorCode:String,
httpStatus:String):void {
Alert.show(errorCode + '\n' + httpStatus, 'Load Error');
}
]]>
</mx:Script>
<mx:VBox
horizontalAlign="center" horizontalCenter="0"
verticalCenter="0">

<yahoo:YahooMapService id="myAS2Map"
UUID="{UNIQUEID}"
swfDomId="{SWFDOMID}"
apiId="{YAHOOAPIKEY}"
mapURL="{MAPSWF}"/>
</mx:VBox>
</mx:Application>

Poprawki dla Flex 2.0.1

19 lipca 2007 Adobe wypuściło Hotfix 3. Poprawka Hotfix 3 przyda się programistom używającym LiveCycle Data Service ES 2.5.1 Więcej informacji o tej poprawce można przeczytać na tej stronie. Instalacja jest możliwa po uprzednim zainstalowaniu Hotfix 2. Hotfix 2 został wydany 30 kwietnia Zastanawiam się jak odróżniać te poprawki. Po prostu za pomocą polecenia z linni poleceń:

mxmlc.exe -version

Wychodzi na to, że wersja oficjalna z Hofixem 1 ma: Version 2.0.1 build 155542. Wersja AdobeLabs z Hotfix 2 ma: Version 2.0.1 build 166910. Natomiast ostatni nightbuild ma: Version 2.0.1 build 177276. Wreszcie Flex 3 beta 1 ma: Version 3.0 build 172357

21 marca 2007 Adobe postanowiło zrobić rebrandnig wprowadzajac następcę Flex Data Services w wersji beta LiveCycle Data Services 2.5 Natomiast Adobe LiveCycle Data Services ES zostało wprowadzone na rynek 4 czerwca 2007 roku jako część pakietu LiveCycle ES

Chyba będę musiał poszukać tych instalek bo ostatnio otrzymuję wersję Adobe LiveCycle Data Services ES 2.5.1 - czuję się zagubiony z tymi wersjami.

Czy ktoś w Polsce zajmuje się programowaniem z Adobe LiveCycle? Ciekawe te numerki wykręca Adobe ??

Modalność formularzy MXML

Od pewnego czasu zastanawiałem się nad potrzebą stosowania kontrolki Alert, która często jest używana do przekazywania jakiegoś komunikatu informacyjnego w sposób modalny. Jak wiadomo wygląd takiego okienka można zarządzać stylami CSS o czym pisał pewien hinduski blog (zawiera też kod źródłowy). Bruce Philips napisał w swoim blogu o tym jak można obsługiwać kontrolkę Alert (kod źródłowy).

Ten mechanizm jest wykorzystywany do tworzenia własnych modalnych formularzy. Jest taka formatka TitleWindow która pozwala na tworzenie modalnego formularza. Przykład zawarty w dokumentacji tej formatki pokazuje mechanizm jak można zrobić formularz z informacja zwrotną
Inny przykład pokazuje, że to może służyć jako element potwierdzenia jakiejś operacji

Można zauważyć że kontrolką Alert i formatką TitleWindow steruje klasa PopUpManager. W dokumentacji Adobe zamieszczono szereg informacji o tym jak programować TitleWindow przy pomocy klasy PopUpManager i jak o przekazywaniu wzajemne danych

Programiści postanowili rozszerzyć możliwości formatki TitleWindow o możliwość dynamicznej zmiany rozmiarów. Chiński programista pokazał to na swoim blogu i zawarł kod źródłowy. Podobną próbę przedstawił hinduski programista na swoim blogu tworząc odopowiedni komponent.

Bardzo interesująco wyglądają możliwości wykorzystania PopUpManager do wyświetlania różnych innych komponentów Chiński programista pokazał przykłady jak można zastosować do tego komponent List (kod źródłowy) i jak tworzyć własne takie jak AlertTip (kod źródłowy).


Jak wiadomo przy wywołaniu modalnego formularza towarzyszy efekt blur tła. Można znaleźć wskazówkę jak zmieniać kolor tła i efektu. Ciekawą propozycję przedstawił jeden z programistów Adobe Alistair McLeod, żeby zastąpić efektem szarości. Rosyjski programista wyciągnął interesujące spostrzeżenia z tego efektu

Osadzanie polskich czcionek

Często słyszę uwagi, że nie da się pisać polskimi znakami w formularzach MXML. Te uwagi są wypowiadane przez tych, którzy wcześniej próbowali robić formularze w Macromedia Flash.

Otóż można w plikach SWF osadzać czcionki. Takie rozwiązanie daje już przewagę nad serwisami internetowymi AJAX bo pozwala na wybór czcionek w których ma być wyświetlana zawartość tekstowa. To sprawiło że grupa programistów z Mike Davidson postanowiła napisać bibliotekę JavaScript sIFR dzięki której pozwala na zastępowanie zawartości tekstowej strony internetowej plikami SWF które zawierają osadzone w sobie czcionki.

Natomiast tworząc Rich Internet Application z Adobe Flex trzeba większą uwagę poświęcać typografii. Dlaczego? Bo do sukcesu Web 2.0 sporo przyczyniła się typografia. Ludzie zauważyli że strony można czytać z przyjemnością. Ale z czcionkami trzeba być z umiarem. Bo pliki czcionek są dużymi plikami.

Opis osadzanej czcionki podaje się w arkuszach styli CSS, a następnie są kompilowane do pliku SWF. Oto kod

@font-face
{
font-family: Coolvetica;
flashType:true;
src: url(”./assets/COOLVETI.ttf”);
unicode-range:
U+0020-U+0040, /* Punctuation, Numbers */
U+0041-U+005A, /* Upper-Case A-Z */
U+005B-U+0060, /* Punctuation and Symbols */
U+0061-U+007A, /* Lower-Case a-z */
U+0104-U+0107, /* Ą ą Ć ć */
U+0118-U+0119, /* Ę ę */
U+0141-U+0144, /* Ł ł Ń ń */
U+015A-U+015B, /* Ś ś */
U+0179-U+017C, /* Ź ź Ż ż */
U+00D3, /* Ó */
U+00F3, /* ó */
U+007B-U+007E; /* Punctuation and Symbols */
}

.credits{
color: #ffffff;
font-family: Coolvetica;
font-size: 12pt;
cornerRadius: 12;
backgroundCOlor: #000000;
alpha:1.0;
}

W dokumentacji Adobe można poczytać o osadzaniu czcionek. Rico Zuniga napisał na swoim blogu o tym jak w formularzach MXML można osadzać czcionki.

Testy łącza - szacowanie transferu

Mam pewien projekt graficzny i zastanawiam się jak zrobić w przypadku gdyby projekt graficzny osadzić we pliku SWF.

Pierwsze rozwiązanie - ma wyglądać jak idealna kopia projektu graficznego. Ale to jest dobre dla tych którzy mają szybkie łącza z internetem i dla prezentacji na CD. A co z resztą "świata"? Niektórzy używają internetu na przykład do prowadzenie telekonferencji i w tym samym czasie ściąganie dużego pliku SWF na witrynie internetowej nie ma sensu. Pozostaje przygotowanie tak aplikacji RIA, aby na początku sprawdzać jaki transfer ma użytkownik. Jak ma wystarczające łącze to automatyczne zaproponować mu pełną wersję, a jak okaże się, że ma dość wolne łącze w danej chwili to poinformować użytkownika jaki ma obecnie transfer i ile czasu będzie trwało ściąganie.

Drugie rozwiązanie to podzielenie projektu graficznego na wiele plików, które są modulami RSL. Takie rozwiązanie oparte na modularyzacji wprowadzono w Flex 2.0.1 i rozwinięto w Flex 3 umożliwiając cachowanie komponentów.

Trzecie rozwiązanie jest podobne do drugiego z tą różnicą że tworzy się moduły CSS (szablony)., które ładują się wtedy gdy użytkownik wybierze odpowiedni szablon.

Ponieważ w Polsce coraz popularniejszy staje sie internet szerokopasmowy, w tej sytuacji można wybrać pierwsze rozwiązanie. Drugie i trzecie rozwiązanie miałoby sens gdyby było przygotowanych kilka projektów graficznych dla jednego klienta.

Testy transferu łącza też są użyteczne pozwalając użytkownikowi na dokonywanie wyboru pomiędzy wersją RIA a wersją w HTML. serwisu internetowego.

Sztuka z mierzeniem transferu łącza użytkownika polega na tym że użytkownik pobiera najpierw jakiś plik z serwera w celu zmierzeni czasu w jakim dany plik zostanie pobrany i na postawie tego oszacować średni transfer danych.

Ray Camdem napisał przykład pokazujący ideę w praktyce wraz z kodem źródłowym.

Czy przyjmie sie równoległe tworzenie serwisów internetowych w wersji HTML i wersji RIA dla posiadaczy dużego transferu danych?

Przekazywanie parametrów do formularzy MXML

Tworząc aplikacje Rich Internet Application czasami stoimy przed potrzebą przekazywania pewnych danych z poziomu dynamicznie wygenerowanych stron internetowych w celu żeby aplikacja RIA współpracowała z zawartością takiej strony.

Jest kilka takich sposobów. Jednym z najbardziej znanym sposobem jest przekazywanie informacji do właściwości flashVars w znaczniku OBJECT Przekazywanie wartości na przykład przez pliki JavaScript wygenerowanych przez Flex Builder 2 nie jest prostą rzeczą. Dlatego warto go zastąpić bardziej popularnym plikiem skryptu SWFObject.js Ale ten skrypt ma pewną słabość i gdy trzeba wykorzystać obsługę nawigacji i historię przeglądarki. W tej sytuacji francuscy programiści napisali wrappera dla kodu generowanego przez Flex Buildera 2 wykorzystując SWFObject (do pobrania). W dokumentacji Adobe dość dobrze opisano przekazywanie parametrów do formularzy MXML. Przykładowo aby aplikacja z formularzami MXML mogła obsługiwać dane z flashwars trzeba napisać taki kod wykorzystujący właściwości Application.application.parameters

Kolejną ważną rzeczą może być przekazywanie informacji o adresie URL na której stronie się znajduje i w zależności od tego wyświetlić oczekiwaną zawartość. Abdul Qabiz na swoim blogu zamieścił prosty skrypt ActionScript 3 do Flex 2 pokazującego jak pobierać taką informację poprzez wykorzystanie ExternalInterface

Pobierz Adobe Flash Player 9.0.47

Z powodu znalezionej "dziury" w Flash Playerach, firma Adobe proponuje masową aktualizację Flash Playerów. Ale ci którzy korzystają z wersji wtyczki dla Firefoxa czy Opery oraz wykorzystujący Windows Vista oraz Linuksa muszą dokonać aktualizacji ręcznie.

Tak więc Adobe ma dwie strony które informują o rozwoju Flash Playera Dla testerów informacje znajdują się na Adobe Lab. Natomiast informacje o oficjalnych wersjach znajdują się na stronach wsparcia technicznego Adobe. Natomiast w celu poznawania informacji rozwoju o wtyczki Flash Player warto przeglądać blogi Emmy Huang (Product Manager for Adobe Flash Player) Justin Everett-Church, (Sr. Product Manager for Flash Player) Tinic Uro (inżyniera odpowiedzialnego za tworzenie wersji Flash Playera) Mike Melanson (inżyniera odpowiedzialnego za linuksową wersję Flash Playera).

I tak z tym jest trochę kłopotów. Programiści Adobe Flex 2 powinni pobrać najnowsze wersje Flash Playerów w wersji debug z tej strony. Najlepiej najpierw zamknąć wszystkie przeglądarki i programy korzystające z internetu. Odinstalować wtyczkę Flash Player tym programikiem, a dopiero wtedy zainstalować Adobe Flash Player w wersji debug.

Warto wiedzieć że Adobe już wypuszczała poprawki do Adobe Flex 2.0.1. HotFix 1 jest już instalowany od 16 marca 2007 roku. Warto tez zainstalować patch z kwietnia 2007 roku pozwalający programistom Adobe Flex wykorzystywać komponenty tworzone w Flash CS3. Natomiast HotFix 2 od 29 maja 2007 roku Od tej pory można zauważyć ciągłe zmiany które spowodowane tym, że wprowadza się wersje Flex 3 beta a także wprowadzaniem LiveCycle Data Services.

Drag and Drop w formularzach MXML

Cechą aplikacji AJAX jest też możliwość przemieszczania formatek przez użytkownika. Wystarczy zobaczyć jak działa iGoogle czy Netvibes. Głowna ich cechą jest to, że pozwalają użytkownikowi decydować o układzie i wyglądzie serwisu czyli dokonywać personalizacji. Przesuń i upuść formatkę jest jednym z najciekawszych mechanizmów do zarządzania wyglądem serwisu. Sprawia wrażenie, że strona serwisu internetowego wygląda jak pulpit.

Czy można zaimplementować coś takiego w aplikacjach wykorzystujących formularze MXML ? Otóż w w Adobe Flex 2 zaimplementowano możliwość wykorzystywania mechanizmu Drag and Drop na formatkach bazujących na listach (Tree, List, DataGrid) Warto przeczytać wprowadzenie do tego mechanizmu z dokumentacji Adobe Flex (w pliku PDF i związane z tym kody źródłowe). Można zobaczyć też ciekawy przykład wykorzystania tego mechanizmu w tworzeniu własnych komponentów. Na bazie tego Wietse Veenstra zrobił komponent Flex SuperPanel

To tej pory układ stron internetowych przypominający pulpit czy ekran tabletu nie był zbyt popularny. Do jego zalet można zaliczyć łatwość nawigacji. To użytkownik może zadecydować co chce w danej chwili przeczytać i w jaki sposób. Oddanie użytkownikowi władzy nad tym jak ma wyglądać strona jakiegoś serwisu internetowego można powiedzieć że jest częścią tego co nazywamy modą na Web 2.0 Dzięki formularzom MXML graficy, designerzy, developerzy oraz programiści mają ułatwione zadanie.

ToolTip w formularzach MXML

Ważną rzeczą jest zapewnienie użytkownikowi pomocy podczas wypełniania formularza. Taką rolę pełni ToolTip, Jest to dymek z komunikatem dla użytkownika. Zwykle dymki się pojawiają jak dana formatka MXML otrzyma focus albo użytkownik najedzie na nią myszką. Często też są wykorzystywane do wyświetlania komunikatów o błędach.

Zazwyczaj ToolTip wymaga podania treści, która ma być wyświetlona z związku z daną formatką. Pojawiła się potrzeba rozszerzenia funkcjonalności klasy ToolTip o możliwość wstawiania zawartości pola tekstowego o zawartość wzbogaconą znacznikami HTML dla FlashPlayera. W dokumentacji Adobe możemy poczytać o tym jak używać ToolTip Manager, klasy odpowiedzialnej za sterowanie wyświetlanie ToolTip a także o tym jak napisać własnego ToolTip

Są 2 podejścia - pierwsze z nich zaproponowane przez Maikel Sibbald w kompomencie "Sticky ToolTip" polega na dodanie tej funkcjonalności poprzez obsługę styli CSS klas rozszerzających możliwości styli. Drugie podejście bardziej tradycyjne zaproponowane przez Rich Tretola w komponencie ImageToolTip polega na implementacji interfejsu IToolTip i wykorzystania zdarzeń powiązanych z mx.events.ToolTipEvent

Shoutcast w Flex 2

Piotr Majewski twórca serwisu Czas na e-Biznes napisał prośbę o napisanie odtwarzacza Shoutcast na stronę internetową. Pomyślałem że warto spróbować.

Wziąłem kod aplikacji Audio Visualisation Bena Stucki`ego. Lokalnie uruchomiłem serwer Apache i dodałem plik stream.php z następującym kodem

$streamname = "91.121.68.159";
$port = "8435";
$path = "/";

header("Content-type: audio/mpeg");
$sock = fsockopen($streamname,$port);

fputs($sock, "GET $path HTTP/1.0\r\n");
fputs($sock, "Host: $streamname\r\n");
fputs($sock, "User-Agent: WinampMPEG/2.8\r\n");
fputs($sock, "Accept: */*\r\n");
fputs($sock, "Icy-MetaData:1\r\n");
fputs($sock, "Connection: close\r\n\r\n");
fpassthru($sock);
fclose($sock);


Zauważyłem że kod działa, ale co jakiś czas przerywało i cisza trwała przez 2 sek.

Kod AS3 jaki dodałem to:

var request:URLRequest = new URLRequest("http://83.11.127.222/stream/stream.php");
var buffer:SoundLoaderContext = new SoundLoaderContext(50*1000, true);
var mySound:Sound = new Sound(request, buffer);
mySound.play(0,0);

Wychodzi na to, że chyba trzeba jakoś to buforować co jakiś czas np: co 2 sek i pilnować czasu odtwarzania, ale czy to ma sens w przypadku technologii Shoutcast?

Myślałem o wykorzystaniu klasy URLStream, ale chyba to nie nadaje się obsługi klasy Sound. Czy są jakieś uwagi?

Preloader dla formularzy MXML

Mam mały kawałek kodu który pewnie zadowoli klientów. Otóż podczas ładowania się formularzy MXML pojawia się preloader z napisami po angielsku. Jak zrobić żeby było po polsku?

 package
 {
    import mx.preloaders.DownloadProgressBar;

    public class DownloadProgressBarBR
             extends mx.preloaders.DownloadProgressBar
    {
       public function DownloadProgressBarBR()
       {
          super();
          downloadingLabel = "Ładowanie...";
          initializingLabel = "Inicjalizacja...";
       }
    }
 }

Oto kod który należy wprowadzić w pliku MXML formularza.

<mx:application mx="http://www.adobe.com/2006/mxml"
 preloader="DownloadProgressBarBR">
</mx:application>

Pomysł na wykorzystanie tego mam z brazylijskiego bloga

Formularze MXML i arkusze styli CSS

W Adobe Flex 2.0.1 jest możliwość tworzenia dynamicznych CSS dla formularzy MXML. Może to jest jeszcze do zrealizowania w formularzach typu AJAX więc dynamiczne zmienianie wyglądu strony czy rozmiaru czcionek (czy nawet typografii za pomocą sFIR). To co daje przewagę formularzom MXML nad formularzami AJAX jest możliwość tworzenia dynamicznych szablonów zawartych w jednym pliku .swf. Taki plik może zawierać wszystko - od plików grafiki, plików czcionek czy opisu jak mają wyglądać komponenty MXML. Właśnie wpływanie na wygląd komponentu jest tym co może wyróżniać wizualnie od klasycznych formularzy HTML np: pole tekstowe z zaokrąglonymi narożnikami, modyfikację wyglądu przycisków.

Firma Adobe przygotowała wizualne narzędzie Flex Style Explorer które pozwala na przygotowanie plików CSS do szablonów Flexa. Juan Sanchez stworzył serwis scalemine poświęcony tworzeniu szablonów dla aplikacji RIA tworzonych w Adobe Flex 2. Napisał też aplikację ThemeSwaper (kod źródłowy) dzięki której możemy zauważyć jak zmienia się wygląd aplikacji w przypadku zastosowania szablonów. Style do szablonów możemy tworzyć poprzez dodanie odpowiedniego pliku CSS zawierającego opis i plików graficznych albo poprzez użycie komponentu szablonu, bądź zaprogramowanie w ActionScripcie. W dokumentacji Adobe można przeczytać o stosowaniu styli do komponentów MXML, o wykorzystaniu zewnętrznych plików arkuszy styli CSS, a także o stosowaniu grafiki do zmiany wyglądu. Pliki szablonów tak naprawdę są plikami komponentów SWC (o tworzeniu takich komponentów można przeczytać w tym miejscu). Największe możliwości daje tworzenie szablonów programując je w ActionSctipcie 3. O tym można przeczytać w dokumentacji.

Warto przeczytać artykuł Teda Patricka o wykorzystaniu "runtime CSS", czy artykuł Tariq Ahmeda o modyfikacjach wyglądu interfejsu aplikacji - szablony, style i skórki, oraz artykuł Kevina Hoyta o programowaniu skórek do zmiany wyglądu aplikacji.

Czy naprawdę potrzeba aż takiego rozgraniczenia pomiędzy pracą grafika a CSS developerem?
To co jest zastosowane w arkuszach styli dla formularzy MXML wykracza już daleko poza to co ma do zaoferowania klasyczny CSS. Można powiedzieć, że w przypadku formularzy MXML CSS developer w większym stopniu staje się się programistą (devignerem) niż projektantem layoutu (designerem) .

Vista - Adobe Flash Player

Zauważyłem, że sporo ludzi ma problemy z zainstalowaniem Adobe Flash Playera pod Vistą, co przejawia się w sporej ilości zapytań, które są kierowane pod mój blog.

Sporo informacji o tym zawiera notatka Microsoftu Druga sprawa to po zainstalowaniu wtyczki ActiveX Flash Player 9 pod Internet Explorera 7 trzeba najlepiej zrestartować komputer, bo różne inne programy mogą używać w tym samym wtyczki np: GG czy Firefox. Po zrestartowaniu lepiej nie łączyć się z internetem tylko od razu przejść pod folder C:\Windows\System32\Macromed\Flash\ (natomiast w Vista 64-bit C:\Windows\SysWOW64\Macromed\Flash\) to jest następnie klikamy prawym klikiem w plik o nazwie FlashUtil9?.exe (gdzie pod znakiem ? może być różna literka od a do h) menu podręcznego wybieramy Uruchom jako Administrator. Kiedy pojawi sie monit UAC to wybieramy Kontynuuj i wtedy pojawi się instalator Flash Playera. Może sie zdarzyć że instalator zażąda połączenia z internetem aby zainstalować uaktualnienia. Wtedy można połączyć się w tym celu z internetem.

Nie posiadam jeszcze Windows Visty, więc proszę o poprawki jak i co można w tym opisie wyjaśnić ludziom.

PS: Najpierw trzeba ściągnąć kontrolkę ActiveX i plugin FlashPlayera oraz deinstalator FlashPlayera. Najpierw trzeba użyć deinstalatora FlashPlayera (najlepeiej z konta administratora) z pliku wsadowego z poleceniem uninstall_flash_player.exe /clean
A następnie instalować tą kontrolkę i jak wtyczkę.

PS: Wychodząc naprzeciw problemom z instalacją Flash Playera Adobe opublikowało przewodnik po instalacji Flash Playerów dla administratorów.

PS: Adobe wydało 2 notatki na ten temat. W pierwszej notatce opisuje, że problemy z instalacją Flash Playera wynikają z niemożnością dokonania wpisów w rejestrze Windows. W drugiej notatce w którym pisze jak obejść problemy związane z restrykcyjnymi ustawieniami zapisu rejestru pod Windowsami dzięki SubInACL.

PS. Przypuszczam, że w systemie Windows Vista 64 bitowym i Windows XP 64-bit, aby Flash Player działał poprawnie trzeba zainstalować pod wersją Internet Explorera 32-bit (czy jakąkolwiek inna przeglądarką 32-bitową) i przy wyłączonej kontroli konta użytkownika.

Formularze MXML - głębokie linkowanie

Projektując złożone formularze internetowe dla aplikacji internetowych często tworzymy coś na wzór kreatorów. W większości ludzie nie stykają się ze złożonymi formularzami do wypełnienia takimi jak formularze do zeznań podatkowych. Ale ci którzy wypełniają formularze i wnioski o pomoc finansową muszą wprowadzać setki danych.

Podczas wprowadzania takich danych łatwo popełnić jakieś błędy formalne i merytoryczne. A jak można ułatwić sobie życie? Trzeba wziąć pod uwagę skłonność użytkowników do korzystania z nawigacji typu "cofnij" i "w przód", a także do korzystania z zakładek i zapisywania adresów URL, żeby móc wrócić do miejsca gdzie przerwało sie wpisywanie danych.

Praktycznie formularze AJAX dobrze nadają się do tworzenia różnego rodzaju kreatorów. tworząc taki formularze trzeba za każdym razem zapisywać dane na serwerze i powoduje to wysyłanie setek zapytań do serwera. Wymaga to sporej pracy przy implementacji strony serwerowej. Często zdarza się tak że użytkownik w danej chwili nie jest w stanie wypełnić całego formularza. Może zdarzyć się że formularz wymaga częstych powrotów bądź wypełniania dodatkowych danych równocześnie. To nie jest zbyt wygodna sytuacja jeśli użytkownicy są przyzwyczajeni z pracą aplikacjami składającymi się z wielu formularzy.

W swojej obserwacji nad serwisami internetowymi zauważam opartymi na AJAX brakuje mi takich rzeczy: szybkiego zapisania "stanu" aplikacji lokalnie to znaczy tymczasowo w celu przerwania pracy i pójścia na kolację, a następnie otwarcia strony pod danym adresem w którym przerwałem pracę.

Aplikacje w których wykorzystuje się formularze MXML programiści mogą zaimplementować głębokie linkowanie. Co to oznacza? Głębokie linkowanie może przydać się w przypadku gdy chcemy pokazać pod danym adresem URL jakąś funkcjonalność aplikacji RIA. W praktyce taki adres formularza MXML do rejestracji w galerii może wyglądać tak: http://www.adres.com/app.html#/Galery/Register. Zapisanie danych może mieć adres http://www.adres.com/app.html#/Galery/Save. W frameworku Adobe Flex 3 będzie domyślnie wprowadzona obsługa głębokiego linkowania dla formularzy MXML.

W związku z obsługą głębokiego linkowania czyli generowania adresów URL, istotna jest obsługa przycisków 'wstecz' i 'powrót'. Otóż FlashPlayer jest w stanie współpracować z przeglądarką w obsłudze historii tym względzie o ile programiści zaimplementują w aplikacji RIA formularze MXML korzystające z klasy HistoryManager (do tego należą komponenty ViewStack, TabNavigator i Accordion).

Kolejną istotną cechą pracy z głębokimi linkami jest możliwość pracy w trybie offline. Użytkownik może pobrać aplikację RIA ze strony internetowej i pracować z poziomu offline to znaczy że użytkownik nagle został odcięty od internetu, może dalej pracować z aplikacją o ile aplikacja zostanie w cache przeglądarki. Wtedy aplikacja pozwala na zapisanie danych lokalnie i próżniejszą synchronizację z danymi po ponownym nawiązaniu z internetem. Flash Player pozwala na zapisanie danych lokalnie przy użyciu SharedObject. Natomiast Adobe Integrated Runtime ma większe możliwości w zakresie pracy w trybie offline i jak ma w sobie wbudowaną bazę danych co pozwala lepsze wykorzystanie trybu offline w formularzach MXML

Nowa książka o AIR

Adobe Integrated Runtime zawiera w sobie silnik przeglądarki internetowej, co pozwoli w przyszłości na tworzenie "własnych" przeglądarek internetowych. Taką przeglądarka internetową może być "Scout" od Adobe. (kod źródłowy). Pozwoli to na przykład na tworzenie aplikacji internetowych opartych na e-commerce. Użytkownik wchodzący na stronę internetową i chce korzystać z płatnej części serwisu internetowego. Wtedy może być poproszony o załadowanie i zainstalowanie pliku .air. Otóż w tym pliku .air może być aplikacja internetowa dającą dostęp do płatnej części serwisu. Dlaczego taki model prowadzenia e-commerce może być atrakcyjny? Łatwiej zaprezentować spójny wygląd aplikacji, pozwala na pracę w trybie offline, dla programistów AJAX daje możliwość wykorzystania nowych funkcjonalności - takich jak programowanie z SQL, tworzenie wyszukiwarek lokalnych danych, współpraca z plikami SWF.
Aby zrozumieć jak zacząć programować w JavaScript dla AIR należy zapoznać sie z nową książka pod tytułem Adobe Integrated Runtime for JavaScript Developers Pocketguide (link do ściągnięcia). A także ściągnąć przykładowe kody źródłowe do wykorzystania od Kevina Hoyta - pokazujące jak duże możliwości programistyczne ma AIR dla programistów JavaScriptu. Aptana edytor aplikacji JavaScriptu obecnie zawiera wsparcie dla AIR, więc powyższe kody źródłowe można przetestować w Aptanie wykorzystując AIR SDK.