Pawel Zakrzewski - Adobe Certified Expert | Adobe Community Expert

Dzięki użyciu programu Adobe Fireworks CS4 możemy całkiem łatwo przygotować (działający) prototyp aplikacji desktopowej AIR. Naturalnie, pełen kod programu przygotujemy za pomocą programów Flex lub Flash jednak wstępny projekt z powodzeniem możemy przygotować za pomocą Fireworks.

Jak się za to zabrać?

Fireworks CS4 zawiera pokaźną bibliotekę gotowych elementów graficznych, które z powodzeniem możemy wykorzystać do tworzenia projektów prostych aplikacji desktopowych AIR. W tym przykładzie przygotujemy niewielki prototyp aplikacji – wyszukiwarki grup użytkowników oprogramowania Adobe na świecie – Adobe User Group Finder. Oczywiście będzie to jedynie prototyp, jednak zadbamy o to, by choćby w minimalnym zakresie symulowal on działanie ukończonej aplikacji.

Do ukończenia tego przykładu wykorzystamy gotowe elementy z biblioteki, paletę Pages oraz dodatkowe polecenia przygotowane z myślą o prototypach aplikacji AIR. Zatem do dzieła.

Pracę rozpoczynamy od otwarcia programu Fireworks CS4, utworzenia nowego dokumentu oraz ustalenia jego podstawowych właściwości jak wielkość i kolor tła.

W tym przypadku, zdecydowałem się na przygotowanie wyszukiwarki o wielkości 300×450 pikseli. Takiej też wielkości dokument budujemy w programie Fireworks CS4.

Jedną z niezwykle przydanych rzeczy Fireworks dostępną także w poprzednich wersjach programu jest biblioteka Common Library dostępna w menu górnym Window>Common LIbrary lub szybciej skrótem F7.

W tym miejscu znajdziemy szereg przydatnych elementów graficznych, które z powodzeniem możemy wykorzystywać do budowy różnorodnych projektów. Wszystkie elementy pogrupowane są w kilka kategorii np.: 2D Objects, Flex Components, Web & Application itp. W naszej pracy wykorzystamy kilka elementów z różnych grup.

Budujemy podstawowy interfejs aplikacji

Pierwszym krokiem w naszej pracy będzie przygotowanie szkieletu całej aplikacji. Wykorzystamy w tym celu kilka gotowych elementów graficznych. Rozpoczynamy jednak od głównego okna aplikacji. Otwieramy paletę Common Library (F7) i od razu przechodzimy do kategorii Flex Components. Lokalizujemy element o nazwie Panel i przeciągamy go w okno naszego dokumentu.

Nie jest chyba szczególnym zaskoczeniem fakt, że gotowy Panel nie pasuje do wielkości naszej aplikacji. Dzięki użyciu palety Align szybko dostosujemy go do naszych potrzeb. Otwieramy okno Align (Window>Align) i włączamy przycisk Position.

W ten sposób, wszystkie wprowadzone zmiany będą wykonywane w relacji do wielkości okna naszego dokumentu. Zaznaczamy komponent Panel i za pomocą wciskania kolejnych przycisków Match Size: Match width and height, Align: Align horizontal center oraz Align: Align vertical center dostosowujemy rozmiar i położenie grafiki do wielkości dokumentu PNG.

Naturalnie panel, który prezentuje nagłówek w enigmatycznej postaci „title”, nie jest tu dobrym rozwiązaniem. Musimy przejść do edycji symbolu (grafiki) i zmienić go. W tym celu, dwukrotnie klikamy myszką w panel i trybie edycji symbolu i zarówno w oknie dokumentu jak i w oknie Properties wprowadzamy odpowiednią nazwę aplikacji.

W naszym przypadku będzie to – Adobe User Group Finder. Po zakończeniu edycji za pomocą przycisku Page 1, dostępnego w lewym górnym narożniku dokumentu Fireworks powracamy do budowy okna naszej aplikacji.

Aby nadać naszej pracy bardziej naturalny wygląd pokusiłem się o dodanie dwóch przycisków. Pierwszy oznaczony symbolem „X” posłuży do zamykania aplikacji, drugi oznaczony symbolem „-„ do jej minimalizowania. Tak, to może nieco zaskakujące, jednak za pomocą Fireworks CS4 możemy przygotować prototyp wyposażony także w takie funkcje.

W kategorii Web & Application panelu Common Library, lokalizuejmy dwa przyciski: Control Cancel oraz Control Remove i przeciągamy je do naszej pracy.

Oczywiście za pomocą narzędzia Free Transform (Q) dostosowujemy ich rozmiar do wielkości naszej pracy, a następnie umieszczamy we właściwym położeniu na stronie.

Kolejny krok to wprowadzenie kilku prostych elementów graficznych: logotypu, nazwy aplikacji, stopki informacyjnej oraz dodatkowej ramki. Nie są to oczywiście elementy konieczne do działania prototypu, mają jedynie nadać naszej pracy nieco bardziej atrakcyjny wgląd. Importujemy (Ctrl+R lub Cmd+R na Macu) więc logotyp, oraz za pomocą narzędzi graficznych programu Fireworks dodajemy niezbędne elementy oraz ewentualnie teksty.

Tak przygotowany szkielet okna aplikacji zapisujemy na dysku. Robocze dokumenty Fireworks zachowane są w formacie PNG, który pozwala na zachowanie wszystkich elementów projektu. Gwiazdka widoczna nieopodal nazwy bieżącego dokumentu sugeruje nam, że plik nie został zapisany po wprowadzeniu ostatnich modyfikacji. Zapisujemy go.

Budujemy stronę wzorcową – szablon aplikacji

Przygotowany projekt to zestaw elementów graficznych i tekstowych, które dostępne będą na wszystkich kolejnych ekranach naszej aplikacji. Aby nie powielać ich na kolejnych stronach projektu, przekształcimy istniejąca stroną – Page 1 w stronę wzorcową. W ten sposób posłuży ona za wzorzec do budowy kolejnych podstron projektu. Takie podejście w znaczący sposób przyspieszy dalsze projektowanie interfejsu.

Przechodzimy do palety Pages (F5) i klikamy w nazwę pierwszej strony prawym klawiszem myszki. Z rozwijanej listy wybieramy polecenie – Set as Master Page. W rezultacie, przygotowany wcześniej zestaw elementów graficznych naszej aplikacji, wykorzystany będzie w identycznej postaci na wszystkich stronach projektu.

Możemy łatwo się o tym przekonać dodając za pomocą polecenia New Page kilka dodatkowych stron w palecie Pages. Każda z nowo wprowadzonych stron zawiera wszystkie przygotowane wcześniej elementy graficzne. Co więcej, nie da się ich modyfikować na podstronach. Aby zmienić układ elementów trzeba zawsze przejść do strony głównej – Master Page i tu dokonać edycji.

Wprowadzone zmiany będą automatycznie widoczne na wszystkich podstronach aplikacji. To niezwykle wygodne działanie do złudzenia przypomina strony wzorcowe programu Adobe InDesign i szablony Dreamweavera.

Dodajemy ekran główny aplikacji

Za pomocą palety Pages, przechodzimy na drugą (01 Page 2) stronę projektu. Jeśli jej nie było, po prostu dodajemy nową stronę. (Warto zwrócić uwagę, że strona Page 1 (Master Page) nie ma numeru 01, jest to jedynie wzorzec) Tu wprowadzimy kolejne elementy naszej aplikacji. W moim przykładzie były to: dwa pola typu ComboBox, pole tekstowe – Text Field oraz przyciski – Button. Wszystkie elementy dodałem wykorzystując kategorię Mac w bibliotece Common Library. Aby wprowadzić odpowiedni tekst lub etykietę przycisku, dwukrotnie klikamy w dodany element i w trybie edycji symbolu wprowadzamy odpowiednie zmiany.

UWAGA!

Elementy pobrane z biblioteki Common Library to symbole! Oznacza to, że w chwili, gdy dokonamy edycji jednej listy rozwijanej – ComboBox, zmieni się także druga. Aby uniknąć tej sytuacji, konieczne jest zduplikowanie symbolu w bibliotece naszego projektu. W tym celu przechodzimy do palety Document Library (Window>Document Library) i za pomocą kliknięcia dodatkowe menu Palety powielamy go w bibliotece.

Jeśli w oknie naszego projektu, korzystamy z dwóch osobnych symboli, zmiana tekstu w jednym z nich nie wpływa na drugi. I to właśnie było naszym celem.

Oczywiście aby cały interfejs aplikacji uczynić nieco czytelniejszym, dodajemy także etykiety tekstowe ułatwiające odpowiednie działania.

Gotową stroną nazywamy w panelu Pages nazywamy „main” i dodajemy kolejną stronę aplikacji.

Dodajemy kolejną stronę – wyniki wyszukiwania

Na kolejnej podstronie aplikacji dodamy kilka elementów graficznych, które ukażą potencjalnemu klientowi sposób prezentacji wyszukanych grup użytkowników oprogramowania Adobe.

W tym celu, przechodzimy na kolejną stronę nazywamy ją „all” i dodajemy elementy interfejsu, jakie chcielibyśmy wykorzystać w działającej aplikacji. W naszym przykładzie, pokusiłem się o wykorzystanie kolejnych elementów z biblioteki Common Library (VSlider) , oraz prostych elementów graficznych (ikony programów, obramowanie i strzałki) i tekstowych. Całość ułożona została w formie przypominającej typową listę wyników wyszukiwania. Aby nadać ciekawszą formę możemy wprowadzić tu dodatkowe efekty typu cienie czy zmienioną kolorystkę.

Kolejna strona – szczegółowe informacje o wybranej grupie

Aby cały projekt ukazywał funkcjonalność naszej aplikacji, konieczne jest dodanie kolejnej strony z informacjami o konkretnej grupie. W tym celu dodajemy nową stronę w palecie Pages, nadajemy jej nazwę „info” i budujemy interfejs umożliwiający prezentację szczegółowych informacji o wybranej grupie. W tym miejscu warto zwrócić uwagę na fakt, że każda kolejna strona projektu zawiera już podstawowe elementy interfejsu zapisane na stronie Master Page.

Używając pola tekstowe, kolejne elementy graficzne i ramki tworzymy prosty ekran strony, która zawiera konkretne informacje o grupie. Aby umożliwić powrót do głównej strony aplikacji, nie zapomnijmy o przyciskach typu „wstecz” czy „powrót”.

Dodajemy elementy interaktywne – nawigacja

Aby przekształcić przygotowany projekt w mini prototyp aplikacji AIR, konieczne jest dodanie choćby najprostszych elementów interaktywnych. Potrzebujemy dodać możliwość przejścia do kolejnych stron aplikacji, powroty oraz podstawowe przyciski nawigacyjne typu: minimalizuj czy zamknij. Prace te rozpoczniemy od głównego ekranu aplikacji – strony Master Page. Zmiany wprowadzone na tej stronie będą widoczne na wszystkich podstronach projektu.

Przechodzimy na stronę Master Page i zaznaczamy element odpowiedzialny za zamknięcie aplikacji, a następnie przechodzimy do menu górnego Commands i dalej kategorii AIR Mouse Events.

Wybieramy z dostępnej listy polecenie Close.

Podobnie, zaznaczamy przycisk odpowiedzialny za minimalizowanie aplikacji i z tej samej lity tym razem wybieramy polecenie Minimize. W obu przypadkach ponad oryginalnym przyciskiem Adobe Fireworks utworzy automatycznie pole aktywne – Hot Spot.

Aby dodać więcej możliwości do naszej aplikacji, dodamy jeszcze dodatkowy obszar aktywny – Hot Spot, umożliwiający przesuwanie okna aplikacji na ekranie monitora. W tym celu wciskamy klawisz J na klawiaturze i za pomocą narzędzie Rectangle Hot Spot rysujemy niewielki obszar aktywny (Hot Spot) ponad tytułem aplikacji. Podobnie jak wcześniej dodajemy mu polecenie Commands>AIR Mouse Events>Drag.

Jako, że wszystkie zmiany dodaliśmy na głównym ekranie szablonu aplikacji, wprowadzone efekty będą działały automatycznie na wszystkich stronach naszej małej aplikacji. Możemy się łatwo o tym przekonać zmieniając po prostu kolejne strony w palecie Pages.

Dodajemy elementy interaktywne na podstronach serwisu

Oczywiście nasza niewielka aplikacja nie jest w pełni działającym projektem. To jedynie prototyp mający na celu przybliżenie klientom wyglądu oraz sposobu jej działania gotowego programu w finalnej postaci. Oznacza to, że w tym przypadku nie ma oczywiście możliwości by na rozwijanej liście wprowadzić inną lokalizację czy też nazwę grupy do wyszukiwania. Zawsze prezentowane są te same treści. Aby jednak nadać naszej pracy znamiona działania możemy pokusić się o dodanie trzech osobnych obszarów aktywnych – Hot Spot. Każdy z nich będzie łączem do tej samej strony z listą odnalezionych grup.

Za pomocą klawisza J, wybieramy narzędzie Rectangle Hot Spot i rysujemy niewielki obszar aktywny ponad pierwszym przyciskiem szukaj. Następnie zaznaczamy go i w polu Link w panelu Properties wybieramy nazwę strony „all”.

Gotowy Hot Spot kopiujemy dwukrotnie umieszczając kopie ponad kolejnymi przyciskami wyszukiwania.

Za pomocą palety Pages przechodzimy teraz na stronę „all” i tym razem dodajemy obszar aktywny Hot spot ponad przyciskami wyboru konkretnej grupy. Naturalnie jako adres URL w polu link wprowadzamy nazwę kolejnej strony – „info”. Oczywiście tak dodane łącze kopiujemy na kolejne przyciski (rysunek 29).
W podobny sposób dodajemy łączę do przycisku „wstecz” tym razem wskazując w polu link stronę „main”. Umożliwi to powrót do głównej strony wyszukiwania.

Ostatni krok to dodanie obszaru typu Hot Spot i łącza do przycisku „wstecz” na ostatniej stronie „info”. Oczywiście w tym przypadku dodajemy odnośnik do strony „all”.

W ten sposób uzyskamy dostęp do konkretnych informacji oraz możliwość powrotu do listy grup oraz strony głównej. Wcześniej dodane przyciski nawigacyjne pozwalają na poruszanie, minimalizowanie i zamknięcie naszej aplikacji.

Zanim przystąpimy do budowy mini aplikacji AIR, warto jest jeszcze przetestować działanie całości w oknie przeglądarki internetowej. Za pomoca polecenia File>Preview In Browser>Preview all Pages In… Safari (na Macu) lub szybciej Ctrl+F12 lub Cmd+Shif+F12 na Macu uruchamiamy podgląd naszej pracy w oknie przeglądarki internetowej. Co ważne, podstawowe łącza będą tu bez problemów działały i możemy szybko przechodzić po kolejnych stronach prototypu.

W rezultacie, na naszym dysku automatycznie powstaną pliku graficzne (GIF) oraz strony HTML z podglądami kolejnych ekranów naszej aplikacji. To ważne elementy one bowiem tworzą szkielet naszej aplikacji będą konieczne do dalszej pracy.

Innym sposobem na szybkie wyksportowanie wszystkich elementów kontrolnych naszego projektu jest wywołanie polecenia File>Export i zapisanie naszej aplikacji w formacie HTML wraz ze wszystkimi koniecznymi plikami graficznymi.

Warto pamiętać by w oknie eksportu wskazać opcję Put Images In Subfolder co pozwoli zapisać wszystkie składowe pliki graficzne w nowym, osobnym folderze. Należy też zwrócić uwagę, by wyeksportowac wszystkie strony naszej pracy jednocześnie.

Aby to zrobić wystarczy wyłączyć przycisk Current Page Only w oknie eksportu. Zdecydowanie polecam eksport naszej pracy do osobnego foldera! Ułatwi to dalsze działania.

Budujemy prototyp aplikacji AIR

Gotowy projekt zapiszemy teraz w postaci instalatora aplikacji AIR. W tym celu przechodzimy do menu górnego Commands i wybieramy polecenie Create AIR Package. Mimo że tworzenia aplikacji AIR to dość złożony problem, nie będziemy w tym miejscu poruszać żadnych poważnych problemów, postaramy się szybko przygotować gotowy prototyp.

W polu Application Name wprowadzamy nazwę naszej aplikacji np. AUG Finder, W sekcji środkowej zaznaczamy opcję Package Content: Curerent Document, która pozwoli szybko osadzić bieżący dokument PNG w naszej aplikacji.

W wyświetlonym oknie dialogowym wybieramy katalog Images, gdzie zapisane są wszystkie elementy naszego projektu. Kolejny krok wymaga nieco więcej działań.

W sekcji Digital Signature konieczne jest „podpisanie” naszej aplikacji. Oczywiście na potrzeby prototypu nikt z nas nie będzie kupował oryginalnego certyfikaty do aplikacji, spróbujemy przygotować zastępczy certyfikat samodzielnie. W tym celu za pomocą przycisku Set, przechodzimy do okna Digital Signature, a następnie za pomocą przycisku Create rozpoczynamy tworzenie własnego certyfikatu.

W polu Certificate File wprowadzamy nazwę certyfikaty np. Pawel Zakrzewski, oraz w kolejnych polach odpowiednie informacje. Konieczne jest także dodanie hasła do certyfikatu w polach Password oraz Confirm Password w dolnej części okna.

Za pomocą przycisku Create potwierdzamy utworzenie certyfikatu. Po powrocie do okna Digital Signature, ścieżka do pliku z certyfikatem została wypełniona automatycznie, my musimy jeszcze wprowadzić hasło.

Ostatni krok to wskazanie docelowej ścieżki do zapisu instalatora prototypu AIR. Za pomocą przycisku Browse w dolnej części okna wskazujemy właściwą lokalizację na dysku.

Instalacja i testowanie aplikacji

Jeśli wypełnione zostały wszystkie konieczne pola zapisujemy aplikację w wybranym miejscu na dysku. Aby możliwe było testowanie działającego prototypu, konieczna jest obecność dodatku AIR w naszym systemie oraz instalacja aplikacji.

W tym celu przechodzimy do wybranej wcześniej lokalizacji i za pomocą dwukrotnego kliknięcia w miniaturę programu z rozszerzeniem .air instalujemy prototyp na dysku. Po drodze wyświetlone zostaną typowe okna dialogowe dotyczące instalacji niepodpisanej aplikacji.

Oczywiście zgadzamy się na instalację i przechodzimy do testów naszego prototypu. Dzięki użyciu programu Adobe Fireworks CS4, wszystkie wprowadzone interakcje działają bez problemu.

Tak działający prototyp z pewnością ukaże klientom zarys przyszłej, w pełni działającej aplikacji. Prawdziwą aplikację zbudujemy jednak za pomocą Adobe Flash lub Adobe Flex i nie jest to wcale bardzo trudne zadanie.

Oczywiście, o ile to konieczne proces tworzenia aplikacji AIR możemy powtarzać wielokrotnie. Kolejne próby instalacji tej samej aplikacji wyświetlą wcześniej komunikat o możliwości deinstalacji wcześniej zainstalowanego prototypu. Możemy z tej opcji skorzystać.