Dzisiaj pokażę jak w prosty i szybki sposób można debugować aplikacje napisane w Adobe AIR. W tym celu posłużę się debugerem wbudowanym w Aptanę oraz specjalnie przygotowaną do tego celu bliblioteką – AIR Introspector.

Naukę debugowania zaczniemy od utworzenia nowego projektu. Ponieważ nie będziemy dzisiaj poznawać żadnych wywołań API poza debugerem, pozostawiamy wszystkie ustawienia domyślne za wyjątkiem kroku, w którym wybieramy elementy frameworka AIR. Na tym etapie musimy dodatkowo zaznaczyć AIR Introspector. Do nauki wystarczy nam domyślnie wygenerowany projekt, w związku z czym nie musimy go kasować.

Debugowanie aplikacji Adobe AIR w Aptanie

Debugowanie aplikacji w Aptanie jest niemal identyczne z debugowaniem aplikacji pisanych w PHP w Eclipsie. Po zmianie perspektywy edytora na Debug, wyświetlone zostanie kilka okien, w których można na bieżąco śledzić stan aplikacji, ustawiać punkty przerwań, przeglądać źródło HTML oraz sprawdzać wiadomości diagnostyczne wysyłane do konsoli. By uruchomić debuger, wystarczy z menu Run wybrać opcję Debug lub użyć skrótu klawiaturowego F11. Od tego momentu będziemy w stanie zaobserwować większość z tego, co dzieje się w naszej aplikacji.

Pora zobaczyć debugowanie w akcji. W tym celu należy zmienić perspektywę na Debug, a następnie ustawić punkt przerwania (breakpoint) w wierszu 14. Breakpoint można ustawić na kilka sposobów – dwukrotnie klikając na numer wiersza lewym przyciskiem myszy lub klikając na numer wiersza prawym przyciskiem myszy i wybranie opcji Toggle Breakpoint. Punkt przerwania zostanie oznaczony jako niebieska kropka obok numeru wiersza. W momencie, gdy aplikacja dojdzie to tego punktu, zostanie zatrzymana, a w oknie Variables pojawią się informacje o wszystkich zmiennych. Uruchomcie teraz aplikację (F11), a następnie kliknijcie w przycisk Read a local file using AIR APIs. Aplikacja zostanie zatrzymana na ustawionym wcześniej punkcie przerwania, a Aptana wskaże wiersz, na którym nastąpiło zatrzymanie aplikacji oraz uzupełni informacje o zmiennych. Aby aplikacja ruszyła dalej, należy kliknąć w oknie Debug przycisk Resume (F8) – jest to zielona strzałka z jasno żółtym prostokątem po lewej stronie. Jeśli dodaliście więcej niż jeden breakpoint, to aplikacja zatrzyma się na każdym po kolei.

Kolejnym ciekawym rozwiązaniem jest funkcja trace, która przyjmuje jako argument łańcuch znaków i wyświetla go w konsoli. By zobaczyć jak działa funkcja trace, musimy nieco zmodyfikować domyślny kod. Do każdej funkcji należy dodać

air.trace("wywołano readLocalFile");

Oczywiście w każdej funkcji należy zastąpić readLocalFile nazwą funkcji, by było można było odróżnić wiadomości. Uruchamiamy debugera (F11) i klikamy po kolei we wszystkie przyciski oraz linki. W Aptanie w oknie Console, będziemy widzieli wszystkie komunikaty, jakie aplikacja wyśle.

Korzystanie z AIR Introspector

AIR Introspector jest biblioteką, która działa na podobnej zasadzie jak znany i lubiany Firebug. Po uruchomieniu aplikacji, należy wcisnąć klawisz F12. Spowoduje to wyświetlenie nowego okna, które oferuje:

  • przegląd drzewa DOM i modyfikacji poszczególnych wezłów
  • podgląd źródła
  • listę dołączonych do aplikacji plików oraz linków
  • analizę wywołań XmlHttpRequest

Nie można zapomnieć o dodaniu tej biblioteki do naszej aplikacji

<script type="text/javascript" src="lib/air/AIRIntrospector.js"></script>

Co dalej?

W ten oto sposób dotarliśmy do końca serii “Adobe AIR dla programistów javascript”. Kolejne wpisy poświęcone tej technologii będą zawierały opis konkretnych rozwiązań i będą opierać się na działającej aplikacji. Zgodnie z obietnicą na pierwszy ogień pójdzie Drag and Drop upload – aplikacja, na podstawie której wyjaśnię w jaki sposób można dobrać się do systemu plików oraz w jaki sposób wysłać pliki na zdalny serwer. Pokażę również w jaki sposób stworzyć niestandardowy wygląd okna aplikacji.