Tworzenie prototypów aplikacji Flex i Adobe AIR

Dzięki połączeniu panelu Strony z innymi zaawansowanymi funkcjami programu Fireworks można szybko tworzyć interaktywne prototypy dla witryn internetowych i oprogramowania. Aby przekształcić ukończony prototyp w funkcjonalną witrynę internetową, wystarczy po prostu wyeksportować go do programu Adobe Flash^®, Adobe Flex^®, Adobe AIR™ lub Adobe Dreamweaver^®.

Zobacz następujące artykuły w Centrum programistów Fireworks, przedstawiające porady na temat przebiegu pracy z prototypami:

• Artykuł Nicka Myersa na temat projektowania interaktywnych produktów przy użyciu programu Fireworks: http://www.adobe.com/go/learn_fw_interactiveproducts_pl

• Artykuł Dave’a Cronina na temat trendów w branży, dotyczących prototypów: http://www.adobe.com/go/learn_fw_prototypingtrends_pl

• Artykuł Matta Stowa na temat wykorzystywania wstępnie utworzonych szablonów CSS w programie Fireworks: Wstępnie utworzone szablony CSS w programie Fireworks CS4.

• Fragmenty artykuł Jima Babbage’a Korzystanie z programu Fireworks CS4: Importowanie, eksportowanie, symbole, prototypy, skalowanie.

• Samouczek wideo Dave'a Hogue'a poświęcony użyciu programu Fireworks do projektowania elementów interaktywnych i szybkich prototypów:

  • Korzystanie z programu Fireworks w celu projektowania interakcji i informacji: http://www.adobe.com/go/learn_fw_infointeract_pl

  • Tworzenie interaktywnych prototypów za pomocą programu Fireworks: http://www.adobe.com/go/learn_fw_creatinginteractivepro_pl

  • Szybkie tworzenie prototypów za pomocą programu Fireworks: http://www.adobe.com/go/learn_fw_rapidpro_pl

  • Program Fireworks jako część kompleksowego procesu projektowania: http://www.adobe.com/go/learn_fw_completedesignpro_pl

• Artykuł na temat projektowania aplikacji internetowej za pomocą programu Fireworks: http://www.adobe.com/go/learn_fw_designwebsiteapp_pl

• Artykuł Kumara Vivek’a na temat projektowania dla urządzeń mobilnych za pomocą programu Fireworks: http://www.adobe.com/go/learn_fw_designmobiledevices_pl

Samouczek wideo poświęcony tworzeniu prototypów interfejsów aplikacji można obejrzeć na stronie internetowej www.adobe.com/go/lrvid4034_fw_pl.

Tworzenie stron

Utwórz odpowiednią liczbę stron lub ekranów dla początkowego projektu w panelu Strony. W miarę rozwoju projektu można dodawać lub odejmować strony.

Ułożenie typowych elementów projektu

Na obszarze roboczym umieść elementy projektu, które będą wspólne dla wielu stron, takie jak paski nawigacji czy obrazy tła. Do ich ustawienia można użyć funkcji Inteligentnych linii pomocniczych. Zastosowanie struktury układu opartej na CSS zapewnia maksymalną elastyczność (Zobacz Inteligentne linie pomocnicze i Tworzenie układów opartych na CSS).

Stosowanie wspólnych elementów na wielu stronach

Zastosowanie wspólnych typowych elementów projektu sprawia, że pojedyncza zmiana powoduje aktualizację wszystkich zawierających je stron. Użyj stron wzorcowej, aby współużytkować wszystkie zawarte w niej elementy, lub udostępnij warstwy w celu kopiowania podzbiorów elementów (zobacz Użycie strony wzorcowej i Udostępnianie warstw)

Dodawanie niepowtarzalnych elementów do pojedynczych stron

Na każdej ze stron można umieścić niepowtarzalne elementy dekoracyjne i nawigacyjne oraz formularze. Panel Biblioteka wspólna zawiera szereg przycisków, pól tekstowych i wysuwanych menu, które przyspieszają proces projektowania. Symbole komponentów w folderach Flex Components, HTML, Mac, Win, Web & Application i Menu Bars zawierają właściwości, które można dostosować do poszczególnych instancji symboli. (zobacz Tworzenie i używanie symboli inteligentnych).

Symulowanie nawigacji użytkownika przy użyciu łączy

Obiekty internetowe, takie jak pasterki, punkty aktywne oraz przyciski nawigacji mogą łączyć ze sobą różne strony prototypu (zobacz Łącza do stron w dokumencie Fireworks).

Wyeksportuj zakończony, interaktywny prototyp

Program Fireworks oferuje kilka formatów wyjściowych dla prototypów, które zachowują łącza hipertekstowe i umożliwiają poruszanie się po stronach. Artykuły:

• Aby udostępnić klientom interaktywny prototyp bazujący na CSS lub poddać go dalszej edycji w programie Adobe Dreamweaver, zobacz Eksport układu CSS.

• Aby utworzyć bardziej konwencjonalny prototyp oparty na tabelach, zobacz Eksportuj plik Fireworks HTML.

• Aby rozpowszechniać wersję prototypu w formacie PDF w celu uzyskania opinii lub do wydrukowania, zobacz Eksport plików Adobe PDF.

• Aby utworzyć prototyp aplikacji Flex, zobacz Prototypy aplikacji Flex. Aby utworzyć aplikację Adobe AIR, zobacz Utwórz aplikację Adobe AIR.

Tworzenie układów opartych na CSS

Można projektować układy oparte na CSS w pliku Fireworks, a następnie przekształcać je w strony HTML z regułami CSS, które replikują układy użytkownika. Układy oparte na CSS stanowią metodę zgodną ze standardami i zawierają kod kompatybilny z różnymi typami przeglądarek.

Samouczek wideo poświęcony tworzeniu układów stron HTML w oparciu o CSS można obejrzeć na stronie internetowej www.adobe.com/go/lrvid4035_fw_pl. Zobacz także następujące zasoby:

• Samouczek poświęcony eksportowaniu plików CSS i obrazów za pomocą programu Fireworks pod adresem http://www.adobe.com/go/learn_fw_exportcssimages_pl.

• Samouczek poświęcony tworzeniu projektów witryn zgodnych ze standardami za pomocą programu Fireworks pod adresem http://www.adobe.com/go/learn_fw_standardscompliantdesign_pl.

Informacje o układzie strony CSS

Program Fireworks umożliwia tworzenie stron i natychmiastowe eksportowanie kodu HTML i CSS dzięki mechanizmowi eksportu, który analizuje rozmieszczenie obiektów. Dodatkowo możliwa jest konfiguracja wyrównania strony oraz wskazanie powtarzalnego obrazu tła.

Do dyspozycji użytkownika pozostają elementy HTML, które znaleźć można w folderze HTML w Bibliotece wspólnej. Folder HTML zawiera elementy HTML, takie jak przyciski, rozwijane listy oraz pola tekstowe. Można edytować właściwości wspomnianych elementów za pomocą panelu Właściwości symbolu. Podczas przeciągania dowolnego formularza na stronę mechanizm eksportu wstawia znaczniki <form>, eksportując jednocześnie układ oparty na CSS.

Dowolny tekst, na jakim użytkownik umieścił plasterek, wyświetlany jest jako obrazek w wyeksportowanym kodzie HTML. Jeśli tekst ten ma być wyświetlany jako tekst, należy skorzystać ze składników HTML znajdujących się we Wspólnej bibliotece. Składniki HTML to między innymi nagłówki 1-6 oraz elementy łączące.

Zasady dotyczące układów opartych na CSS

Aby uzyskać zamierzone wyniki, podczas tworzenia układów opartych na CSS należy przestrzegać kilku zasad.

Mechanizm eksportu eksportuje tekst umieszczony w prostokątach. Z uwagi na fakt, że eksportowane są wyłącznie obrazy zakryte plasterkami prostokątnymi, należy zakrywać obrazy takimi właśnie plasterkami. Plasterki te „informują” mechanizm eksportu o położeniu obrazów.

Mechanizm eksportu traktuje tekst, obrazy i prostokąty jako prostokątne bloki. Sprawdza on rozmiary i położenie tych obiektów, w celu określenia, w których logicznych wierszach i kolumnach układu je umieścić. Obiekty należy umieszczać ostrożnie, dbając o to, aby ich krawędzie na siebie nie nachodziły.

Mechanizm eksportu wyszukuje przegród logicznych, w których umieścić można wyraźną linię podziału między obiektami lub grupami obiektów. Układy kolumn należy zamknąć w prostokącie, aby zapobiec wstawieniu przez mechanizm eksportu wiersza logicznego, który mógłby rozbić układ kolumn.

Podczas tworzenia strony należy używać prostokątów do zamykania obiektów, które mają być traktowane jako potomne prostokąta. Mechanizm eksportu wykrywa związki typu element macierzysty – potomek. Mechanizm eksportu przeszukuje elementy potomne pod kątem wierszy i kolumn logicznych, podobnie jak w Zasadzie 3.

Poza powyższymi zasadami obowiązują także następujące zalecenia:

• Mechanizm eksportu eksportuje jedynie prostokąty pierwotne. Aby wyeksportować zaokrąglone narożniki prostokątów, należy umieścić nad nimi plasterki prostokątne.

• Aby wyeksportować obrysy prostokątów, należy umieścić plasterki prostokątne nad prostokątami, które je zawierają.

• Aby wyeksportować symbole, należy umieścić nad nimi plasterki prostokątne.

• Aby wyeksportować filtry zastosowane dla tekstu lub prostokątów, należy umieścić nad nimi plasterki prostokątne.

Eksport układu CSS

Program Fireworks pozwala wyeksportować utworzone układy jako pliki oparte na CSS. Następnie można otworzyć te pliki oparte na CSS w programie Dreamweaver lub innym edytorze zgodnym z CSS i dokonać ich edycji.

Tworzenie demonstracji dokumentu

Możesz utworzyć demonstrację dokumentu programu Fireworks, nad którym pracujesz. Demonstracja jest otwierana w przeglądarce w celu przedstawienia funkcji i umożliwia przechodzenie między stronami.

1. Wybierz polecenie Polecenia > Demo bieżący dokument.

2. Wybierz strony, dla których chcesz utworzyć demonstrację, a następnie kliknij opcję Utwórz demo.

3. Wybierz folder i kliknij przycisk Otwórz.

Tworzenie prototypów aplikacji Flex

Proces tworzenia prototypów aplikacji Flex przypomina przebieg pracy dla witryn internetowych i interfejsów oprogramowania. (Zobacz Przebieg pracy z prototypami). W programie Fireworks można przeciągać komponenty Flex na obszar roboczy, określać ich właściwości i eksportować wynikowy interfejs użytkownika do formatu MXML. Następnie można dostosować taki interfejs użytkownika w programie Flex Builder.

Tworzenie interfejsu użytkownika Flex

Używając panelu Strony, utwórz odpowiednią liczbę ekranów interfejsu dla początkowego projektu.

Wstawianie komponentów projektu Flex do układu

W obszarze roboczym wstaw komponenty Flex z folderu Flex w panelu Biblioteka ogólna. Te symbole komponentów współdziałają z funkcją eksportu do formatu MXML, aby zapewnić uzyskanie oczekiwanych wyników. Podczas eksportowania dokumentu do formatu MXML każdy z tych symboli jest przekształcany w odpowiednie znaczniki MXML. Obiekty, które nie zostały rozpoznane jako komponenty Flex, są eksportowane jako bitmapy połączone z kodem MXML poprzez znacznik <mx:Image>. Patrz Tworzenie i używanie symboli komponentów.

Symbole Kursor, PasekPrzewijania, Karta i Podpowiedź są ignorowane podczas wyjścia MXML, ponieważ te komponenty nie są tłumaczone bezpośrednio z programu Fireworks do MXML. Na przykład symbol PasekPrzewijania pojawia się automatycznie w instancjach kontenera Flex, jeśli ich zawartość może być przewijana. W programie Fireworks te symbole służą po prostu do wskazania sposobu działania części projektu interfejsu.

Stosowanie wspólnych komponentów Flex na wielu stronach

Zastosowanie wspólnego komponentu Flex na wielu stronach sprawia, że pojedyncza zmiana powoduje aktualizację wszystkich stron (lub ekranów) zawierających ten element. Możesz użyć strony wzorcowej, aby współużytkować wszystkie zawarte na niej komponenty Flex, lub współużytkować warstwy w celu kopiowania podzbiorów komponentów. (zobacz Użycie strony wzorcowej i Udostępnianie warstw)

Określanie właściwości komponentów Flex

W panelu Właściwości symbolu (Okno > Właściwości symbolu) określ właściwości i zdarzenia dla każdego komponentu Flex, który został wstawiony na obszar roboczy.

Eksport układu Flex do MXML

Wyeksportuj układ interfejsu użytkownika Flex i otwórz wynikowy plik MXML w programie Flex. Program Fireworks eksportuje wymagany kod MXML, zachowując wszystkie style i pozycjonowanie bezwzględne. Programiści korzystający z programu Flex mogą używać tego interfejsu bez konieczności ponownego tworzenia układu w programie Flex.

Edycja właściwości komponentów Flex

Możesz edytować właściwości i zdarzenia komponentów Flex w panelu Właściwości symbolu.

Eksport dokumentu Fireworks do MXML

Program Fireworks pomaga w projektowaniu układów rozbudowanych aplikacji internetowych, umożliwiając eksportowanie zasobów z ogólnej biblioteki jako znanych komponentów w celu użycia w programie Adobe Flex Builder. Program Fireworks eksportuje wymagany kod Flex (MXML), zachowując style i pozycjonowanie bezwzględne.

Po sfinalizowaniu prototypu aplikacji Flex należy go wyeksportować do MXML w celu dalszej edycji w programie Flex Builder. Prototyp w widoku Projekt ma identyczny wygląd, jak jego odpowiednik w programie Fireworks, z wyjątkiem pewnych komponentów, takich jak kursory i paski przewijania, które nie są eksportowane.

Tworzenie i eksport karnacji Flex

Możesz zmienić wygląd komponentów Flex w programie Fireworks, a następnie wyeksportować je w celu użycia podczas tworzenia witryn internetowych Flex i interfejsów aplikacji.

Komponenty Flex karnacji

Możesz utworzyć karnacje dla różnego rodzaju komponentów Flex w oparciu o szablony karnacji Flex i edytować je w programie Fireworks.

1. Wybierz polecenie Polecenia > Tworzenie skórek Flex > Nowa skórka Flex.

2. Wykonaj jedną z poniższych czynności:

   • Aby utworzyć karnacje Flex dla wszystkich dostępnych komponentów, wybierz polecenie Wiele komponentów.

     Program Fireworks tworzy pojedynczy dokument zawierający wszystkie dostępne komponenty Flex.

   • Aby wybrać komponenty, dla których chcesz utworzyć karnacje, wybierz polecenie Określone komponenty.

     Wybierz tylko te komponenty, do których dołączono określony styl, lub wszystkie instancje danego komponentu.

3. Kliknij OK.

Eksport karnacji Flex

Ograniczenia eksportu MXML

Przed użyciem funkcji eksportu Flex MXML należy poznać jej możliwości i ograniczenia:

Eksportowanie do MXML nie powoduje utworzenia skórek dla komponentów w programie Flex, nawet jeśli zmodyfikowano je w programie Fireworks. Eksport MXML powoduje po prostu wygenerowanie dokumentów MXML w celu użycia w programie Flex. Takie dokumenty mogą także zawierać połączone obrazy dla obiektów programu Fireworks, których nie można przekonwertować na znaczniki MXML. Obrazy te są dodawane do dokumentu MXML przy użyciu znaczników <mx:Image>.

Ponieważ funkcja eksportu MXML została zaprojektowana w celu generowania dokumentów opartych na znacznikach, które są przeznaczone do użycia z programem Flex, plasterki nie są uwzględniane podczas tworzenia obrazów lub komórek tabeli. Kiedy funkcja eksportu MXML tworzy obrazy, używa ustawień optymalizacji dokumentu w celu określenia formatu obrazu i metody kompresji.

Funkcja eksportu MXML opiera właściwości znacznika MXML na komponencie Flex w programie Fireworks. Program Fireworks zapewnia podzbiór komponentów Flex z ograniczoną liczbą właściwości.

Właściwości rozpoznane jako style są oddzielane od tworzonych znaczników MXML, ale zostają zachowane w tym samym dokumencie MXML wewnątrz znacznika <mx:Style>. Program Fireworks nie może zdefiniować stylów w zewnętrznym pliku CSS.

Podczas tworzenia projektów i układów dla wyjścia MXML nie należy używać ramek. Aby uzyskać różne projekty w pojedynczym dokumencie, należy użyć stron.

Prototypy aplikacji Adobe AIR

Program Adobe^® AIR™ for Fireworks umożliwia przekształcenie prototypu z programu Fireworks w aplikację pulpitu. Na przykład niektóre strony prototypu wchodzą w interakcję ze sobą, aby wyświetlić dane. Możesz użyć programu Adobe AIR w celu spakowania tego zbioru stron w małą aplikację, którą można zainstalować na komputerze użytkownika. Gdy użytkownik uruchomi aplikację na swoim pulpicie, po jej załadowaniu, we własnym oknie aplikacji, które będzie niezależne od przeglądarki, wyświetlony zostanie prototyp. Użytkownicy mogą następnie przeglądać prototyp lokalnie na swoich komputerach bez połączenia internetowego.

Artykuł Ethana Eismanna na temat Adobe AIR oraz informacje o marce: http://www.adobe.com/go/learn_fw_airexperiencebrand_pl.

Dodawanie zdarzeń myszy Adobe AIR

Można dodawać predefiniowane zdarzenia myszy Adobe AIR do obiektów w dokumencie. W programie Fireworks dostępne są cztery predefiniowane zdarzenia myszy: zamknij okno, przeciągnij okno, maksymalizuj okno oraz minimalizuj okno.

1. Zaznacz na obszarze roboczym obiekty, którym chcesz przypisać zachowania zdarzeń myszy.

2. Wybierz Polecenia > Zdarzenia myszy AIR i wybierz zdarzenie.

Podgląd aplikacji Adobe AIR

Można obejrzeć podgląd aplikacji Adobe AIR bez konieczności ustawiania jakichkolwiek jej parametrów.

Tworzenie aplikacji Adobe AIR

Podpisywanie aplikacji Adobe AIR przy użyciu certyfikatu cyfrowego

Podpis cyfrowy stanowi gwarancję, że kod aplikacji nie został zmodyfikowany lub uszkodzony od momentu utworzenia go przez autora oprogramowania. Wszystkie aplikacje Adobe AIR wymagają podpisu cyfrowego, a ich instalacja nie jest możliwa bez takiego podpisu.