Rozdział 22. Definiowanie własnych obiektów i behawiorów

W poprzednim rozdziale dowiedziałeś się jak wykorzystać rozszerzenia programu Dreamweaver stworzone przez innych. Teraz czas nauczyć się pisać własne! W tym rozdziale znajdziesz podstawowe informacje na temat tworzenia własnych obiektów i behawiorów, nauczysz się archiwizować je i dzielić z resztą społeczności użytkowników Dreamweavera. W szczególności omówimy następujące zagadnienia:

• Tworzenie prostego obiektu, który za każdym razem wstawia na stronie zawsze ten sam kod

• Tworzenie obiektu, który wstawia na stronie kod zmodyfikowany w oparciu o dane wprowadzone przez użytkownika w oknie dialogowym

• Tworzenie modyfikowalnego behawiora wielokrotnego zastosowania

• Tropienie usterek oraz uodpornianie obiektów i behawiorów przed przekazaniem ich innym użytkownikom

• Archiwizowanie behawiora lub obiektu do pliku instalacyjnego, który może być stosowany z poziomu menedżera rozszerzeń

• Przesyłanie zarchiwizowanych rozszerzeń do Macromedia Exchange

Zanim zaczniemy

Chociaż napisanie rozszerzenia programu Dreamweaver nie wymaga geniuszu, nie jest to także zadanie dla mięczaków. Aby radzić sobie z plikami obiektów i behawiorów, musisz dobrze znać język HTML, umieć go czytać i pisać kod źródłowy. Ważna jest także znajomość, choćby na poziomie podstawowym, języka JavaScript. W szczególności, zanim zagłębisz się w tematykę tego rozdziału, powinieneś poznać zagadnienia takie jak:

• Podstawowa struktura języka, wymagania dotyczące składni oraz zasadnicze pojęcia języka JavaScript (wyrażenia, operatory, zmienne, itp.).

• Posługiwanie się funkcjami JavaScript.

• Przetwarzanie danych zebranych w formularzach HTML, za pośrednictwem skryptów JavaScript.

Początek ramki

Podpowiedź

Jeśli jeszcze nie znasz języka JavaScript dostatecznie dobrze lub już zdążyłeś go zapomnieć, może Ci się przydać podręcznik, do którego będziesz mógł sięgnąć w trakcie pracy. Najwygodniej jest korzystać z palety Reference programu Dreamweaver. Jeśli chcesz uzyskać poszerzone informacje, możesz sięgnąć do książek na temat tego języka.

Koniec ramki

Niezależnie od standardowych zasad i definicji języka JavaScript, Dreamweaver udostępnia także własny interfejs API, składający się ze wstępnie zdefiniowanych obiektów, funkcji i procedur przetwarzania skryptów. W tym rozdziale poznasz podstawy interfejsu programistycznego Dreamweavera i zostaniesz wprowadzony w te elementy API, które będą Ci potrzebne, aby tworzyć podstawowe obiekty i behawiory. Jeśli chcesz iść dalej i na serio zająć się badaniem rozszerzeń Dreamweavera, najlepszym źródłem wiedzy jest podręcznik firmy Macromedia, „Extending Dreamweaver”. Jest on dostępny w formacie PDF i dostarczany wraz z programem Dreamweaver, na dysku CD. Można go także ściągnąć ze strony www.macromedia.com/support/dreamweaver. Gorąco polecam wydrukowanie go, oprawienie i trzymanie pod poduszką - ej, chciałem powiedzieć obok komputera - aby zawsze był dostępny, gdy pracujesz.

Tak więc, jesteś już gotowy, by zacząć tworzyć rozszerzenia?

Praca z obiektami

W poprzednim rozdziale przeczytałeś, że obiekty tworzone są z plików zgromadzonych w folderze Object, który jest folderem podrzędnym foldera Configuration. Teraz dowiesz się, jak wyglądają obiekty, w jaki sposób Dreamweaver używa plików obiektów i jak tworzyć własne obiekty od zera.

Czym są obiekty?

Obiekt, w terminologii API programu Dreamweaver, jest plikiem HTML, który zawiera lub wykorzystuje skrypty JavaScript w celu skonstruowania łańcucha kodu HTML, który zostanie wstawiony do dokumentu użytkownika. Łańcuch kodu, o którym mówiliśmy, może być całkowicie dowolny, na przykład taki:

copyright John Smith, 2000

taki:

<font face = ”Georgia Times, Times New Roman, serif” size = ”2”>copyright John Smith, 2000</font>

lub taki:

<table width = ”200” height = ”200” border = ”1”>

<tr>

<td align = ”center”> <font face = ”Georgia Times, Times New Roman, serif” size = ”2”>copyright John Smith, 2000</font></td>

</tr>

</table>

Innymi słowy, w kodzie tym może znaleźć się wszystko to, co w poprawnie sformułowanym dokumencie HTML. Kod taki jest wstawiany w miejscu punktu wstawiania, gdy użytkownik wybierze ten obiekt.

Jakie pliki i gdzie

Jeśli podglądniesz zawartość foldera Configuration/Objects, zauważysz, że zawiera on kilka folderów podrzędnych, których nazwy natychmiast skojarzysz z nazwami kategorii palety obiektów. Otwórz któryś z tych folderów (na przykład Common), a zobaczysz mnóstwo plików, odpowiadających konkretnym obiektom kategorii Common palety obiektów. Każdemu z obiektów można przyporządkować od dwóch do trzech plików, z których wszystkie mają takie same nazwy, lecz różne rozszerzenia. Typy plików przedstawione poniżej:

• Plik HTML (na przykład Table.html) - jest to plik przechowujący obiekt. Zawiera on wstawiany kod. Jest to jedyny plik, który jest niezbędny do ustanowienia obiektu.

• Plik JavaScript (ma przykład Table.js) - zawiera instrukcje JavaScript służące do skonstruowania wstawianego kodu (w postaci jednej lub kilku funkcji JavaScript) i jest wywoływany z poziomu pliku HTML. Plik ten jest opcjonalny: zamiast umieszczać funkcje JavaScript w osobnym pliku, można zawrzeć je w sekcji HEAD pliku HTML obiektu. Doświadczeni autorzy skryptów wiedzą, że łatwiej jest śledzić i aktualizować skrypty JavaScript, jeśli umieszczone są one w osobnych plikach. Nie jest to jednak absolutnie konieczne.

• Plik zawierający obraz (na przykład Table.gif) - plik zawiera ikonę o rozmiarach 16x16 pikseli, którą Dreamweaver wykorzystuje do reprezentowania obiektu na palecie obiektów. Ten plik jest także opcjonalny. Gdyby nie było pliku obrazu, Dreamweaver uzupełni brak ikoną ogólną i ją właśnie umieści w palecie obiektów.

Rysunek 22.1 prezentuje niektóre typowe zestawy plików obiektu.

Rys. 22.1. Folder Common, podrzędny względem foldera Objects, i zawarte w nim przykładowe obiekty: pliki obiektu Date (tylko dwa) i obiekt Table (trzy pliki)

Pliki obiektu muszą być zapisane w jednym z folderów podrzędnych foldera Configuration/Objects. Od tego ulokowania zależy, w jakiej kategorii palety obiektów obiekt się pojawi.

Struktura prostego pliku obiektu - bez okna dialogowego

Pewne obiekty korzystają z okien dialogowych, aby pobrać informacje od użytkownika. Łatwiej jednak (w czym nie ma nic zaskakującego) stworzyć obiekty, które takich okien nie potrzebują. Rysunek 22.2 prezentuje prosty obiekt nie używający okna dialogowego.

Rys. 22.2. Struktura prostego pliku obiektu i sposób jego translacji na obiekt programu Dreamweaver

Kluczowe elementy pliku obiektu to:

• Nazwa pliku - nazwa ta jest stosowana jako pozycja menu Insert dla tego obiektu.

• Tytuł strony - stosowany jest jako etykieta narzędzia, identyfikująca obiekt na palecie obiektów.

• funkcja objectTag() - jest to funkcja JavaScript, która stanowi najważniejszy element pliku obiektu. Funkcja zwraca zawarty w cudzysłowie kod, który ma być wstawiony w dokumencie. Funkcja jest częścią interfejsu API programu Dreamweaver i nie wymaga definiowania. Nie wymaga także wywoływania. Dreamweaver wywołuje ją automatycznie, gdy obiekt zostanie wybrany.

W przykładzie z rysunku 22.2 kod zwracany przez funkcję objectTag() to zwykły nagłówek poziomu 1. Zauważ, jak wszystko, co zawarte w cudzysłowie, staje się częścią dokumentu użytkownika.

Struktura nieco bardziej złożonego obiektu - z oknem dialogowym

Bardziej skomplikowane obiekty nie tylko wstawiają wcześniej przygotowany kod, lecz także pobierają informacje od użytkownika i dostosowują wstawiany kod na ich bazie. Rysunek 22.3 prezentuje strukturę pliku obiektu, który korzysta z okna dialogowego, aby pobrać od użytkownika dane, a następnie w oparciu o nie konstruuje wstawiany kod.

Dodatkowym elementem w tego typu obiekcie jest formularz HTML, który staje się oknem dialogowym pobierającym dane od użytkownika i dostosowującym wstawiany kod. Zauważ, że formularz w postaci źródłowej nie zawiera przycisku Submit. Dreamweaver automatycznie dostarcza przycisków OK i Cancel. W formularzu niezbędne są jedynie pola wprowadzania danych.

W przykładzie pokazanym na rysunku 22.3, kod zwracany przez funkcję objectTag() to nagłówek poziomu 1, lecz jego treść jest definiowana przez użytkownika. Zauważ, jak wykorzystano w funkcji objectTag() zmienną do pobierania danych od użytkownika i przekazywanie ich dalej, do wyrażenia return.

Tworzenie własnych obiektów

Czy informacje przedstawione w poprzednim punkcie nie wydają się okropnie teoretyczne? Teraz wesprzemy teorię praktyką i spróbujemy utworzyć własny obiekt. Zaczniesz od prostego obiektu, skończysz na obiektach złożonych, a po drodze nauczysz się wielu pożytecznych rzeczy na temat efektywnego posługiwania się obiektami.

Zanim zaczniesz...

Pisanie własnych obiektów wymaga ręcznego wpisywania kodu, a do tego będzie Ci potrzebny edytor tekstu. Jeśli jesteś doświadczony materii tworzenia skryptów, zapewne masz swój ulubiony edytor tekstu (NotePad, SimpleText, BBEdit, HomeSite, itp.). Aby wpisywać kod źródłowy swoich obiektów, możesz użyć dowolnego edytora. Możesz także korzystać z samego Dreamweavera - poręczne są tu oba widoki projektu i kodu. Choć mogłoby to wydawać się odrobinę niebezpieczne, Dreamweaver nie ma problemu z edycją własnych wyrażeń. Dzieje się tak dlatego, że program ma dostęp do plików rozszerzeń tylko w trakcie ich ładowania, co zdarza się jedynie przy uruchamianiu programu lub w przypadku wymuszenia powtórnego załadowania rozszerzeń.

Rys. 22.3. Struktura złożonego pliku obiektu i jego przełożenie na obiekt programu Dreamweaver

W trakcie pisania i testowania rozszerzeń może się zdarzyć, że pliki, którymi zarządzasz, wymkną się spod kontroli. Aby tego uniknąć, warto utworzyć specjalny folder roboczy, który znajdowałby się poza folderem aplikacji Dreamweaver. W tym folderze powinny znaleźć się następujące elementy:

• Kopia zapasowa foldera Configuration. Jeśli dodajesz nowe rozszerzenia, czy też modyfikujesz istniejące pliki, brak kopii zapasowej foldera Configuration to kuszenie nieszczęścia. Gdyby wszystko beznadziejnie się pomieszało, możesz zastąpić dostosowany folder Configuration folderem czystym, w którym zmiany nie były wprowadzane. Jest to szybsze i prostsze, niż powtórna instalacja całego programu.

• Skrót klawiaturowy (PC) lub alias (MAC) do foldera Configuration i tych jego folderów podrzędnych, z których będziesz często korzystał.

• Pliki testowe (wygenerujesz parę takich plików w ćwiczeniach tego rozdziału).

• Pliki konieczne do archiwizacji rozszerzeń.

• Rozszerzenia, które w trakcie pracy nad witryną będą nieaktywne.

Wykonując ćwiczenia z tego rozdziału nie zamykaj foldera roboczego lub umieść skrót do niego na pulpicie. W przeciwnym wypadku czeka Cię wiele wędrówek po dysku twardym.

Ćwiczenie 22.1. Przygotowanie zaplecza

W tym ćwiczeniu będziesz miał okazję nauczyć się podstaw pracy z rozszerzeniami w programie Dreamweaver. Utworzysz folder, w którym będą przechowywane obiekty utworzone w ćwiczeniach. Nabierzesz także praktyki w ładowaniu rozszerzeń

1. Upewnij się, że Dreamweaver nie jest uruchomiony. Jeśli jest, zamknij program. Jest to potrzebne, aby zobaczyć kiedy i jak Dreamweaver ładuje rozszerzenia.

2. Odszukaj na dysku twardym swojego komputera folder Configuration/Objects i otwórz go. Jak już wiesz, wszystkie obiekty muszą być zapisane w folderach podrzędnych tego foldera. Nazwy folderów podrzędnych odpowiadają nazwom kategorii palety obiektów. Do palety obiektów możesz dodać nowy zestaw obiektów - nową kategorię - dodając własny folder do struktury foldera Configuration/Objects.

3. Utwórz nowy folder jako podrzędny względem foldera Configuration/Objects. Nazwij go Custom. Tworząc nowe obiekty warto przyjąć strategię, w której tworzone obiekty umieszczane są w specjalnym folderze o nazwie Custom lub Development (a przynajmniej warto się jej trzymać, dopóki nie będziesz pewien, że obiekty działają bezbłędnie).

4. Uruchom program Dreamweaver. Przy każdym uruchomieniu, program sprawdza folder Configuration i ładuje wszystkie zawarte w nim rozszerzenia.

5. Klikając przycisk ze strzałką rozwiń menu palety obiektów i sprawdź jej zawartość - w menu powinna pojawić się nowa kategoria, Custom (patrz rysunek 22.4). Oczywiście, jeśli ją wybierzesz, okaże się ona pusta. Jest tak, bo co prawda utworzyliśmy folder, ale na razie nie umieściliśmy w nim żadnego obiektu.

Rys. 22.4. Nowy folder Custom, który jest folderem podrzędnym foldera Configuration/Object, oraz odpowiadająca mu kategoria Custum na palecie obiektów

6. Nie zamykając programu Dreamweaver, zmień nazwę foldera Custom na Development. Jeśli pracujesz na komputerze PC, zminimalizuj okno programu Dreamweaver do ikony; jeśli korzystasz z komputera Mac, ukryj je lub umieść w tle. Znajdź na dysku twardym folder Configuration/Objects, a w nim folder Custom. Nadaj mu nową nazwę.

7. Sprawdź na palecie obiektów Dreamweavera dostępne kategorie. Powtórz etap 5., aby zobaczyć jakie kategorie są teraz do wyboru. Nowa kategoria nadal będzie obecna pod starą nazwą Custom, pomimo zmiany nazwy na Development. Dzieje się tak dlatego, że Dreamweaver nie zarejestrował jeszcze zmiany nazwy.

8. Wymuś na programie ponowne załadowanie rozszerzeń, bez zamykania programu i ponownego uruchamiania. Wciśnij klawisz Ctrl (lub Opt w przypadków komputerów Mac) i kliknij przycisk ze strzałką na palecie obiektów. W menu palety obiektów powinna się teraz pojawić nowa pozycja - Reload Extensions (patrz rysunek 22.5). Wybierz ją. Chociaż pewne operacje związane z rozszerzeniami wymagają powtórnego uruchomienia programu, większość aktualizacji można przeprowadzać w ten sposób.

Rys. 22.5. Jeśli przed rozwinięciem tego menu wciśniesz klawisz Ctrl, pojawi się tu nowa pozycja - Reload Extensions

9. Sprawdź ponownie kategorie palety obiektów. Bez wciskania klawisza Ctrl rozwiń menu palety - teraz zobaczysz w nim kategorię Development, która zastąpiła kategorię Custom. Co to oznacza? Dreamweaver nie ma ciągłego dostępu do plików obiektów - program sięga do nich jedynie przy uruchamianiu. Ilekroć więc zmieniasz plik obiektu, musisz zmusić program, by zauważył zmianę, a możesz to zrobić na dwa sposoby: zamykając Dreamweavera i uruchamiając go ponownie lub wybierając, przy wciśniętym klawiszu Ctrl (lub Opt dla komputerów Mac), z menu palety obiektów pozycję Reload Extensions.

Ćwiczenie 22.2. Tworzenie prostego obiektu

Najprostsze obiekty to te, które nie korzystają z okna dialogowego umożliwiającego pobranie danych od użytkownika, a więc zawsze zwracają ten sam kod. Prosty obiekt, który utworzymy w tym ćwiczeniu, to połączenie pocztowe - a więc element, który zazwyczaj pojawia się gdzieś u dołu Twoich stron WWW.

Aby utworzyć taki obiekt, otwórz swój ulubiony edytor tekstowy. Pliki z tego ćwiczenia zapisuj w folderze Development przygotowanym w poprzednim ćwiczeniu.

1. Zastanów się nad zawartością kodu, który ma być wstawiany przez obiekt. W tym przypadku będzie to jeden wiersz tekstu, o dowolnym formatowaniu, w którym osadzimy adres e-mail. Całość wygląda mniej więcej tak, jak pokazuje rysunek 22.6. Jeśli nie chcesz kodu wpisywać ręcznie, pamiętaj, że masz do dyspozycji widok projektu, w którym możesz przygotować rezultat finalny. Gdy przejdziesz do widoku kodu lub otworzysz inspektora Code, kod źródłowy będzie już gotowy.

Rys. 22.6. Wstawiony kod utworzonego obiektu (zaprezentowany w widoku projektu i kodu)

2. Przygotuj podstawowy plik obiektu, zawierający wszystkie elementy strukturalne. Otwórz edytor tekstu - a jeśli wolisz pracować w Dreamweaverze, otwórz inspektora Code - i wpisz kod bazowy, tak jak opisano wcześniej. Na razie nie zawracaj sobie głowy szczegółami związanymi z samym obiektem. Szkielet HTML pliku powinien wyglądać tak (elementy, które będziesz uzupełniał później zostały napisane czcionką pogrubioną):
   <html>
   <head>
   <title>Tu pojawi się tytuł</title>
   <script language = ”javascript”>
   function objectTag() {
   return `Tu jest miejsce na wstawiany kod';
   }
   </script>
   </head>
   <body>
   </body>
   </html>

Początek ramki

Podpowiedź

Jeśli tworzysz wiele obiektów, nieustanne wpisywanie tego samego kodu bazowego może być męczące. Możesz zapisać swój kod bazowy w pliku tekstowym i umieścić plik w folderze roboczym lub innym łatwo dostępnym miejscu.

Koniec ramki

3. Wpisz w kodzie tytuł strony. Tytuł ten będzie na palecie obiektów etykietą obiektu. Większość etykiet narzędzi palety obiektów rozpoczyna się od wyrazu „Insert” (aczkolwiek jest to jedynie konwencja, a nie wymóg). Wydaje się więc logiczne, by w tym przypadku tytuł brzmiał: Insert John Smith Contact Info. Tak więc pierwsza część kodu ma teraz następującą postać:
   <html>
   <head>
   <title> Insert John Smith Contact Info</title>

4. Wstaw żądany wiersz kodu do wyrażenia return. Możesz go skopiować gdzie indziej i wkleić lub wpisać ręcznie. Pamiętaj, że zawartość wyrażenia return musi być umieszczona w cudzysłowach. Cudzysłów może być podwójny lub pojedynczy, ważne jednak by stosować go parami.
   Twój kod powinien wyglądać tak:
   <html>
   <head>
   <title> Insert John Smith Contact Info</title>
   <script language = ”javascript”>
   function objectTag() {
   return `<p><font face=”verdana, Arial” size=”2”>For more information contact <a href=”mailto:[e-mail]”>John Smith</a></font></p>';
   }
   </script>
   </head>
   <body>
   </body>
   </html>

Początek ramki

Uwaga

Tak jak w przypadku innych wyrażeń return języka JavaScript, także i tu nie wolno dzielić wyrażenia między wiele linii. Kod musi być zapisany w postaci jednego długiego wiersza, w przeciwnym razie nie będzie działał.

Koniec ramki

5. Zapisz plik w folderze Development. Nazwij go Contact John Smith.html. Pamiętaj, że pliki obiektów muszą być składowane we właściwym folderze, bowiem inaczej nie będą rozpoznawane jako obiekty. Upewnij się, że zapisujesz plik w folderze Development. Rozszerzenie może być zarówno .html, jak i .htm - Dreamweaver akceptuje oba. Nazwa pliku stanie się pozycją menu podrzędnego w menu Insert, a więc należy nadawać nazwy opisowe. W przeciwieństwie do przeglądarek i serwerów sieciowych, Dreamweaver dopuszcza w nazwach spacje i respektuje zmiany wielkości znaku. Nazwa Contact John Smith.html będzie funkcjonować poprawnie i dobrze wyglądać w menu Insert. Nazwa typu jsmith_contact_info_1.html także będzie działać, lecz nie będzie się ładnie prezentować w menu (lub nie będzie rozpoznawalna). Wielkości znaków są także uwzględniane w menu.

6. Przetestuj swój obiekt! Jeśli Dreamweaver jest już uruchomiony, wciśnij klawisz Ctrl (lub Opt) i kliknij na palecie obiektów przycisk rozwijania menu, aby wyświetlić w menu pozycję Reload Extensions. Jeśli program nie działa, uruchom go - rozszerzenia zostaną załadowane automatycznie.
   Utwórz nowy dokument, jeśli taki nie jest jeszcze otwarty. Wybierz z menu palety obiektów kategorię Development. Powinna ona zawierać jeden obiekt, reprezentowany przez ogólną ikonę obiektu. Jeśli umieścisz wskaźnik myszki nad tą ikoną, wyświetlona zostanie etykieta obiektu (patrz rysunek 22.7). Kliknij ikonę. Kod zostanie wstawiony do dokumentu. Gratulacje! Stworzyłeś swój pierwszy obiekt.

Rys. 22.7. Nowy obiekt jest reprezentowany przez ogólną ikonę obiektu. Gdy umieścisz nad nią kursor, wyświetlana jest etykieta obiektu

Początek ramki

Podpowiedź

W fazie przygotowywania obiektu, nie trać czasu na przygotowywanie plików graficznych zawierających ikony obiektów. Zaczekaj, aż wszystkie obiekty zostaną dopracowane i będą perfekcyjnie działać. Wówczas dopiero pomyśl o upiększeniu ich ikonami własnego pomysłu (z ćwiczenia 22.6 dowiesz się jak ją zrobić).

Koniec ramki

Początek ramki

Uwaga

Jeśli Twój obiekt nie pojawia się na palecie obiektów, to znaczy, że zapisałeś go w niewłaściwym miejscu, nie dodałeś do nazwy pliku rozszerzenia lub musisz ponownie załadować rozszerzenia. Nawet niepoprawne pliki obiektów są reprezentowane na palecie obiektów, jeśli tylko mają prawidłowe nazwy i są zapisane we właściwym folderze.

Jeśli Twój obiekt jest wyświetlany, lecz jego kod nie jest prawidłowy, to gdy Dreamweaver będzie usiłował wykonać funkcję objectTag() obiektu, prawdopodobnie pojawi się komunikat o błędzie. Komunikaty błędów jasno określają co się stało i co trzeba naprawić.

Koniec ramki

Ćwiczenie 22.3. Dodawanie okna dialogowego

Twój prosty obiekt jest całkiem, całkiem, ale jego elastyczność niewielka i użyteczność też ograniczona, bowiem zawsze, bez względu na wszystko, zwracany jest taki sam kod. Jeślibyś chciał na przykład umieszczać na stronie połączenie e-mail nie do starego, poczciwego Johna Smitha, lecz do kogoś innego? W pełni funkcjonalny obiekt wyświetliłby okno dialogowe, w którym użytkownik mógłby wprowadzić takie informacje do kodu. Tak więc teraz zbudujemy taki właśnie obiekt.

1. Otwórz plik Contact John Smith.html i zapisz go jako Contact Info.html. Dlaczego mamy ponownie wynajdywać koło? Oprzyjmy się na naszym poprzednim udanym dziele i dodajmy do niego okno dialogowe oraz zmieńmy wyrażenie return w funkcji objectTag(), aby używało danych pochodzących od użytkownika.

2. Zmień w nowym pliku obiektu tytuł strony na Insert Contact Info. Jak pamiętasz, ten tytuł pojawia się jako etykieta obiektu na palecie obiektów. Na razie tytuł strony jest taki sam jak w przypadku obiektu, nad którym pracowałeś wcześniej. Pozostawienie starego tytułu utrudni rozróżnienie obiektów na palecie, tym bardziej, że oba mają takie same ikony.

3. Zdecyduj, które fragmenty kodu zostaną zastąpione danymi wprowadzanymi przez użytkownika. Rzuć okiem na rysunek 22.6, aby przypomnieć sobie wygląd finalny. W przypadku tego obiektu najprawdopodobniej będziesz chciał zapytać użytkownika o nazwisko (które zastąpi naszego Johna Smitha) i adres e-mail (aby listy nie trafiały ciągle do biednego Johna Smitha).

4. Utwórz formularz HTML, który będzie pełnił rolę okna dialogowego zbierającego informacje. Aby był on funkcjonalny, musi mieć dwa pola tekstowe: jedno do pobierania nazwiska, a drugie do pobierania adresu e-mail. Tak więc, najprostszy formularz, jaki Ci się uda prawdopodobnie uzyskać, będzie wyglądał mniej więcej tak, jak ten z rysunku 22.8.

Rys. 22.8. Formularz służący jako okno dialogowe z pliku obiektu Contact Info. Rysunek prezentuje go w widoku projektu oraz w postaci finalnej

Otwórz plik Contact Info.html i zdefiniuj w jego sekcji BODY formularz. Jeśli lubisz, wpisz kod formularza ręcznie. Jeśli wolisz korzystać z edytora wizualnego, otwórz plik w Dreamweaverze i skorzystaj z edytora tego programu. Rysunek 22.8pokazuje jak projektowany formularz wyglądałby w widoku projektu programu Dreamweaver.

Początek ramki

Uwaga

Jeśli tworzysz formularz w widoku projektu programu Dreamweaver, do znacznika <FORM> automatycznie dodane zostaną właściwości method oraz action. Nie są one potrzebne, bowiem formularz nie będzie przetwarzany w standardowy sposób. Możesz obie właściwości spokojnie usunąć z kodu. Dreamweaver umieszcza także w znaczniku <BODY> właściwości bgcolor i text. Powinieneś je usunąć i pozwolić programowi określić odpowiedni schemat kolorystyczny dla okna dialogowego.

Koniec ramki

Twój kod formularza powinien mieć taką oto postać:

<form name=”theForm”>

<table>

<tr valign=”baseline”>

<td align=”right” nowrap>Contact name:</td>

<td align=”left”>

<input type=”text” name=”contact” size=”30”>

</td>

</tr>

<tr valign=”baseline”>

<td align=”right” nowrap>E-Mail Address:</td>

<td align=”left”>

<input type=”text” name=”email” size=”30”>

</td>

</tr>

</table>

</form>

5. Dodaj zmienne do pobierającej dane funkcji objectTag(). Otwórz plik Contact Info.html w edytorze tekstu. Proces przetwarzania danych pobieranych od użytkownika zaczniemy od zadeklarowania zmiennych przechowujących informacje z dwóch pól tekstowych formularza. Zmienne te będą zmiennymi lokalnymi funkcji objectTag() i z tego względu muszą być zadeklarowane w jej obrębie.
   Zadeklaruj w funkcji dwie zmienne lokalne. Każdej z niej przypisz jako wartość zawartość pola formularza. Kod funkcji objectTag() powinien teraz wyglądać tak:
   
   function objectTag() {
   var contact = document.theForm.contact.value;
   var email = document.theForm.email.value;
   return `<p><font face=”Verdana, Arial” size=”2”>For more information contact <a href=”mailto:[e-mail]”>John Smith</a></font></p>';
   }

6. Przepisz wyrażenie return, zastępując zmiennymi nazwisko i adres e-mail. Jeśli od dawna piszesz własne skrypty, będzie to bułka z masłem. Jeśli jesteś nowicjuszem, pamiętaj o cudzysłowach, a dokładniej o tym, by występowały parami, abyś nie uzyskał nie zakończonych łańcuchów znakowych. Twoja funkcja objectTag() powinna teraz wyglądać tak:
   
   var contact = document.theForm.contact.value;
   var email = document.theForm.email.value;
   return `<p><font face=”Verdana, Arial” size=”2”>For more information contact <a href=”mailto:' +email + '”>' + contact + `</a></font></p>';
   }

Początek ramki

Uwaga

Czy zamiast deklarować zmienne, nie można by umieścić w wyrażeniu return odwołań do pól formularza? Można by. Tylko, że wyrażenie return stałoby się wówczas długie i nieczytelne. Oto taka właśnie postać:

return `<p><font face=”Verdana, Arial” size=”2”>For more information contact <a href=”mailto:' + document.theForm.contact.value + '”>' + document.theForm.email.value + `</a></font></p>'

Koniec ramki

Rysunek 22.9 prezentuje pełny kod pliku obiektu.


Rys. 22.9. Pełny kod pliku obiektu Contact Info.html

7. Przetestuj swój obiekt. Załaduj w Dreamweaverze rozszerzenia i spróbuj wstawić nowy obiekt. Powinno pojawić się śliczne okno dialogowe, podobne do tego z rysunku 22.10.

Rys. 22.10. Okno dialogowe obiektu Contact Info

Gdy wypełnisz pola tekstowe i klikniesz OK, w dokumencie zostanie wstawiony kod utworzony w oparciu o wprowadzone dane.

Początek ramki

Uwaga

Tak jak w poprzednim ćwiczeniu, jeśli Twój kod okazałby się nieprawidłowy, Dreamweaver wyświetli komunikat o błędzie, szeroko wyjaśniający zaistniały problem. Przeczytaj treść komunikatu, postaraj się zgadnąć, o co w nim chodzi, a następnie wróć do kodu źródłowego i poszukaj przyczyny. Porównaj swój kod z poprzednim, aby sprawdzić, co mogło pójść źle.

Najczęściej przyczynami błędów są błędne nazwy zmiennej i elementów formularza, niepoprawne deklaracje zmiennych i niepoprawna inicjalizacja zmiennych oraz pomieszanie pojedynczych i podwójnych cudzysłowów w wyrażeniu return.

Koniec ramki

Ćwiczenie 22.4. Dopracowywanie obiektów

W tym ćwiczeniu przekonasz się, że choć jedyną niezbędną dla obiektu funkcją jest objectTag(), to można dodawać także i własne funkcje. W zasadzie możesz zdefiniować w sekcji HEAD pliku obiektu dowolną funkcję. Jeśli tylko wywołujesz ją w znaczniku <BODY>, korzystając z procedury obsługi zdarzenia onLoad, Dreamweaver wykona funkcję natychmiast po wybraniu obiektu przez użytkownika.

Lokalna funkcja, którą dodasz w tym ćwiczeniu, rozwiązuje pewien niewielki błąd pojawiający się, jak być może zauważyłeś, w oknie dialogowym wywoływanym przez obiekt. Gdy okno to jest wyświetlane, punkt wstawiania nie znajduje się w prawidłowej pozycji, aby można było natychmiast przystąpić do wpisywania danych. Od tego się nie umiera, lecz na pewno nie jest to eleganckie.

1. Otwórz plik Contact Info.html w swoim edytorze tekstu. Ponieważ operacja nie będzie bardzo ciężka, nie musisz tworzyć nowego obiektu, lecz możesz korzystać z tego, który utworzyłeś w ostatnim ćwiczeniu.

2. Dodaj w sekcji HEAD dokumentu funkcję inicjalizującą. Umieść podaną niżej definicję funkcji gdzieś w elemencie SCRIPT:
   
   function initializeUI()
   {
   document.theForm.contact.focus();
   document.theForm.contact.select();
   }
   
   Jak działa ta funkcja? Pierwszy wiersz powoduje wybranie elementu formularza o podanej nazwie - w tym przypadku jest to pole contact (pierwsze z pól tekstowych). Drugi wiersz powoduje zaznaczenie tekstu pola formularza (o ile taki w nim jest) o podanej nazwie - także jest to pole contact.

Początek ramki

Uwaga

Ta funkcja jest stosowana z wieloma domyślnymi obiektami Dreamweavera (firma Macromedia nie zabrania pożyczania sobie fragmentów kodu). Ponieważ nie jest częścią API, w jej nazwie nie ma nic magicznego. Możesz ją nazwać absolutnie dowolnie.

Koniec ramki

3. Wywołaj funkcję z poziomu znacznika <BODY>. Dodaj w tym znaczniku następujący
   kod:
   
   <body onLoad=”initializeUI()”>
   
   Ponieważ nie jest to standardowa funkcja programu Dreamweaver, jej wywołanie musi być umieszczane ręcznie.

4. Załaduj ponownie rozszerzenia i przetestuj obiekt. Zapisz i otwórz plik obiektu. Ponownie załaduj w Dreamweaverze rozszerzenia i wybierz z palety obiektów utworzony obiekt. Punkt wstawiania powinien znajdować się w miejscu odpowiednim do natychmiastowego wprowadzania danych w polu Contact.

Ćwiczenie 22.5. Przygotowywanie osobnych plików JavaScript

Choć nie ma to większego wpływu na funkcjonalność obiektu, możesz zdecydować się na oddzielenie skryptów JavaScript od kodu HTML i umieszczenie ich w odrębnym pliku.

W tym ćwiczeniu oddzielisz kod JavaScript i umieścisz go w pliku JS, a w pliku głównym obiektu (w pliku HTML) zdefiniujesz połączenie, które umożliwi korzystanie ze skryptów.

1. Przygotuj kopię pliku obiektu. Ponieważ zmiany będą głębokie, warto zabezpieczyć się, tworząc kopię pliku oryginalnego, na której przeprowadzane będą wszelkie operacje. Możesz w tym celu skorzystać z polecenia Save As z menu File edytora tekstu lub skopiować plik z poziomu Eksploratora Windows (a w systemie Macintosh z poziomu okna Finder). Jeśli i kopia, i oryginał będą rezydować w folderze Development, musisz każdemu z plików nadać inną nazwę. Jeśli Ci zależy na identycznych nazwach, pliki powinny znaleźć się w różnych folderach (w przypadku umieszczenia obu plików w tym samym folderze, Dreamweaver wyświetli na palecie obiektów identyczne ikony dla obu plików; w takim przypadku konieczna jest zmiana tytułów stron, aby zróżnicować etykiety i umożliwić identyfikację obiektów za pomocą etykiet).

2. Otwórz plik obiektu w edytorze tekstu lub w programie Dreamweaver i zaznacz kod JavaScript w sekcji HEAD. Jeśli jesteś doświadczonym programistą skryptów, pewnie już wiesz, iż kod JavaScript, który może zostać skopiowany do pliku zewnętrznego, to kod zazwyczaj pojawiający się w sekcji HEAD dokumentu. Zacznij więc od zaznaczenia kodu źródłowego zawartego między znacznikami <SCRIPT></SCRIPT>. Kod wymagający zaznaczenia tu oznaczony jest czcionką pogrubioną:
   
   <html>
   <head>
   <title>Contact Info</title>
   <script language=”JavaScript”>
   function objectTag() {
   var contact = document.theForm.contact.value;
   var email = document.theForm.email.value;
   return `<p><font face=”Verdana, Arial” size=”2”>For more information contact <a href=”mailto:' +email + '”>' + contact + `</a></font></p>';
   }
   </script>
   <head>

3. Wytnij zaznaczony kod i wklej go w nowym dokumencie tekstowym. Aby wyciąć kod, skorzystaj z polecenia Cut z menu Edit - kod trafi do Schowka. Jeśli pracujesz w edytorze tekstu, utwórz nowy dokument i wklej w nim zawartość Schowka wybierając pozycję Paste z menu Edit. Jeśli korzystasz z programu Dreamweaver, utwórz nowy dokument, otwórz inspektora Code dla tego dokumentu, zaznacz wyświetlany w nim bazowy kod źródłowy dokumentu HTML i usuń go. Następnie wklej nowy kod.

Początek ramki

Uwaga

We wszystkich nowo tworzonych dokumentach Dreamweaver automatycznie wstawia podstawowy szkielet HTML strony. Jeśli ten kod bazowy nie jest Ci potrzebny, możesz go spokojnie zaznaczyć i usunąć.

Koniec ramki

4. Zapisz nowy dokument jako Contact Info.js. Nowy dokument, który zawiera tylko kod JavaScript z sekcji HEAD oryginalnego pliku obiektu, musi zostać zapisany jako plik tekstowy z rozszerzeniem nazwy .js. Powinien być umieszczony w folderze Development, a jego nazwa powinna odpowiadać nazwie pliku obiektu.

Początek ramki

Uwaga

W rzeczywistości nazwa pliku ze skryptami nie musi być taka sama jak nazwa pliku obiektu i nie jest konieczne zapisanie tego pliku w tym samym folderze, w którym zapisano plik obiektu - jednak w takim przypadku w połączeniach łączących oba pliki muszą być użyte poprawne nazwy oraz względne adresy URL. Zaleca się jednak korzystanie z konwencji nazewniczej, w której nazwy są identyczne, bowiem ułatwia ona zarządzanie plikami.

Koniec ramki

5. W pliku obiektu przekształć znacznik <script> dodając w nim połączenie do pliku JS. Sekcja HEAD pliku HTML zawierającego kod źródłowy obiektu na razie wygląda tak:
   
   <head>
   <title>Contact Info</title>
   <script language=”JavaScript”>
   </script>
   </head>
   Po przekształceniach, powinna ona mieć następującą postać:
   <head>
   <title>Contact Info</title>
   <script language=”JavaScript” src=”Contact Info.js”>
   </script>
   </head>

6. Zapisz i zamknij oba pliki. Rysunki 22.11 i 22.12 prezentują kompletny kod źródłowy zawarty w plikach.

Rys. 22.11. Kod źródłowy z pliku Code Info.html, w którym skrypty JavaScript zastąpiono połączeniem do zewnętrznego pliku zawierającego je

7. Ponownie załaduj w Dreamweaverze rozszerzenia i wypróbuj obiekt. Jeśli prawidłowo przesunąłeś kod JavaSript do zewnętrznego pliku i prawidłowo zdefiniowałeś w pliku obiektu połączenie do niego, obiekt powinien działać tak samo jak poprzednio.

Początek ramki

Uwaga

Jeśli zdefiniowane w pliku obiektu połączenie do pliku JS nie będzie poprawne, mogą się zdarzyć dwie rzeczy: jeśli istnieje funkcja lokalna, taka jak initializeUI(), w momencie gdy znacznik <BODY> spróbuje wywołać tę funkcję, Dreamweaver zgłosi błąd JavaScript (patrz rysunek 22.13). Jeśli nie ma funkcji lokalnych, Dreamweaver nie zgłosi błędu, lecz obiekt wstawi w Twoim dokumencie dziwny kod. (W połączeniu prowadzącym z pliku HTML do pliku JS musi być stosowane adresowanie względne. Jeśli oba pliki są umieszczone w tym samym folderze, co jest bez wątpienia najbezpieczniejsze, adresem będzie po prostu nazwa pliku JS. Jeśli chcesz przechowywać pliki JS w osobnym folderze, musisz wprowadzić poprawny adres względny, uwzględniający wszystkie foldery podrzędne lub nadrzędne).

Koniec ramki

Rys. 22.12. Kod JavaScript z pliku Code Info.js

Rys. 22.13. Komunikat o błędzie, który Dreamweaver wyświetla, gdy połączenie między plikiem obiektu a zewnętrznym plikiem ze skryptami nie jest poprawne

Jeśli plik JS zawiera błędy w kodzie JavaScript, prawdopodobnie wygenerowany zostanie błąd składni języka JavaScript i Dreamweaver wyświetli odpowiedni komunikat.

Ćwiczenie 22.6. Tworzenie ikony obiektu w programie Fireworks

Profesjonalnie wyglądające obiekty mają swoje ikony. Po zakończeniu prac nad obiektem, ostatnim etapem jest przygotowanie pliku graficznego, zawierającego ikonę, która będzie reprezentować obiekt na palecie obiektów.

Wymagania dotyczące ikony są następujące:

• Plik musi być w formacie GIF, a zawarty w nim obraz nie powinien mieć rozmiarów większych niż 16x16 pikseli. Większe ikony zachowają funkcjonalność, lecz zostaną skompresowane do rozmiarów 16x16 pikseli - są to rozmiary obszaru przydzielonego ikonie na palecie obiektów.

• Plik musi mieć dokładnie taką samą nazwę jak odpowiadający mu plik obiektu. Dlatego w tym ćwiczeniu musimy nazwać ten plik Contact Info.gif.

• Plik musi być zapisany w tym samym folderze co odpowiadający mu plik obiektu. Dlatego w tym ćwiczeniu zapiszemy plik zawierający ikonę w folderze Development.

Ikony mogą używać dowolnej liczby kolorów, a ich wygląd zależy tylko od Twojej pomysłowości. Szybko jednak odkryjesz, że projektowanie czytelnych ikon, gdy masz do dyspozycji tylko 256 pikseli, jest prawdziwą sztuką.

Z tego ćwiczenia nie dowiesz się jak przygotować obraz, który będzie można zastosować jako ikonę obiektu. Nie wchodzi to w zakres tego rozdziału. Nauczysz się jednak stosować jako ikony istniejące pliki graficzne.

1. Utwórz, zaadaptuj lub pożycz plik GIF zawierający obraz o rozmiarach 16x16 pikseli. Jeśli masz dostęp do dobrych programów graficznych (takich jak Macromedia Fireworks) i chcesz przygotować własną ikonę, zrób to. Jeśli nie, skorzystaj z pliku Contact Info.gif, z pliku CD dołączonego do książki. Jeśli decydujesz się na przygotowanie własnej ikony, pamiętaj, by nazwać plik Contact Info.gif.

Początek ramki

Podpowiedź

Nie musisz tworzyć własnych ikon od zera. Jako punkt wyjścia możesz przyjąć istniejącą ikonę i przystosować ją do swoich potrzeb. Ikona z pliku Contact Info.gif na dysku CD powstała na bazie pliku E-Mail.gif z firmy Macromedia.

Koniec ramki

2. Umieść plik ikony w folderze Development. Pamiętaj, że plik ten musi się znaleźć w tym samym folderze co plik obiektu.

3. Załaduj ponownie rozszerzenia i sprawdź wygląd swojej ikony.

4. Wyświetl obiekty kategorii Development palety obiektów. Jeśli wszystko poszło zgodnie z planem, Twoja piękna ikona powinna być dostępna na palecie obiektów (patrz rysunek 22.14).

Rys. 22.14. Obiekt Contact Info na palecie obiektów i jego nowa ikona

Mądre posługiwanie się obiektami

Gratulacje! Masz już wiedzę potrzebną do tworzenia obiektów. W jaki sposób możesz wykorzystać obiekty, by mieć z nich pożytek?

Określ swoje potrzeby

Tak więc fragmenty kodu HTML, które regularnie stosujesz na swoich stronach WWW, są potencjalnymi kandydatami do bycia obiektami. Na obiekty najlepiej jednak nadają się fragmenty kodu, które najpierw wymagają dostosowania, a dopiero potem są wstawiane - chodzi tu o zmianę nazwiska i adresu e-mail, zdefiniowanie adresu URL połączenia, itp.

Jeśli w procesie tworzenia stron WWW zdarza Ci się powtarzać pewne operacje, zadaj sobie następujące pytania:

• Czy kod, który wstawiam, jest za każdym razem na tyle podobny, że mógłbym utworzyć z niego obiekt?

• Czy kod jest za każdym razem inny, czy też taki sam? (Jeśli kod jest zawsze taki sam i nie wymaga dostosowywania, bardziej efektywnym rozwiązaniem mogłoby być skorzystanie z zarejestrowanego polecenia lub utworzenie elementu bibliotecznego).

• Ile razy jeszcze będę musiał wstawiać ten kod? Czy perspektywa jest kilkudniowa, czy też nieograniczona w czasie? Przygotowanie obiektu jest czasochłonne i może być nieopłacalne, jeśli potrzeby są tymczasowe.

• Czy mogę akurat teraz poświęcić swój czas na tworzenie obiektu? (Nigdy nie zabieraj się za coś nowego, co wymaga zaangażowania, jeśli już jesteś spóźniony o 45 minut).

W zależności od odpowiedzi, będziesz wiedział, czy rozbudowywać program Dreamweaver o własny obiekt.

Poszerz swoje horyzonty

Jeśli świetnie sobie radzisz z przedstawionymi tu podstawami tworzenia obiektów, poszerz swoje horyzonty. Przeczytaj podręcznik „Extending Dreamweaver”, aby dowiedzieć się, co jest możliwe w przypadku interfejsu programistycznego Dreamweavera. Przyjrzyj się obiektom domyślnym programu, aby zobaczyć ich strukturę i zawarte w plikach uściślenia.

Praca z behawiorami

Ach, behawiory! To są prawdziwe cuda, te wszystkie małe, śliczne skrypciki JavaScript, które Dreamweaver pozwala Ci wstawiać na stronach WWW jednym kliknięciem. Wierz lub nie, przygotowanie prostych behawiorów jest tylko odrobinę trudniejsze od przygotowania własnych obiektów - chociaż, jak zawsze, im więcej wiesz o skryptach JavaScript, tym lepsze (i bardziej spektakularne) będą uzyskiwane przez Ciebie rezultaty.

Z tej części rozdziału dowiesz się jak wygląda plik poprawnie zdefiniowanego behawiora, w jaki sposób Dreamweaver przetwarza pliki behawiorów i jak tworzyć od zera własne behawiory.

Czym są behawiory?

Behawior, podobnie jak obiekt, to fragment kodu, który jest wstawiany do dokumentu programu Dreamweaver, gdy użytkownik wybiera dany behawior z listy. Wstawiany kod nie jest jednak kodem HTML, lecz JavaScript.

Behawiory są konstruowane w taki sam sposób jak obiekty: procedury i funkcje interfejsu programistycznego programu Dreamweaver umożliwiają Ci zwrócenie dowolnego łańcucha znakowego jako kodu wstawianego do dokumentu.

Z wielu jednak powodów behawiory pozostają zdecydowanie bardziej skomplikowane niż obiekty:

• Behawior wstawia dwa fragmenty kodu - funkcję (w sekcji HEAD dokumentu) i wywołanie funkcji (w sekcji BODY, w miejscu, w którym umieszczony był punkt wstawiania w momencie wstawiania behawiora).

• Edycję behawiora najlepiej przeprowadzać po jego wstawieniu, klikając dwukrotnie odpowiadającą mu pozycję w oknie palety Behaviors. (Aby wprowadzić zmiany we wstawionych już obiektach, korzystasz z inspektora Property. Chociaż można przygotować własne okno właściwości obiektu, jest to zajęcie dla wytrwałych).

• Behawior powinien określać procedury obsługi zdarzeń stosowane w wywołaniu funkcji; powinien być niedostępny na liście, jeśli nie jest obsługiwany przez wybrany typ przeglądarek.

Początek ramki

Uwaga

Behawiory programu Dreamweaver wstawiają kod JavaScript w dokumencie zawsze w postaci definicji funkcji w sekcji HEAD oraz wywołania funkcji w sekcji BODY.

Koniec ramki

Jakie pliki i gdzie

Tak jak obiekt, behawior tworzony jest przez plik HTML (plik behawiora), który zawiera kod JavaScript lub połączenie do zewnętrznego pliku JS. Behawiory są zapisane w folderze Configuration/Behaviors/Actions. Tak jak folder Objects, tak i folder Actions może zawierać foldery podrzędne, a każdy z nich odpowiada menu podrzędnemu w obrębie listy behawiorów. I także jak w przypadku foldera Objects, utworzenie w folderze Actions nowego foldera podrzędnego spowoduje pojawienie na liście palety Behaviors nowego menu podrzędnego (patrz rysunek 22.15).

Struktura pliku prostego behawiora

Podobnie jak pliki obiektów, pliki behawiorów mają własną, wymaganą strukturę, a Dreamweaver narzuca procedurę ich obsługi. Rysunek 22.16 prezentuje szkielet kodu prostego behawiora, w którym zawarte zostały tylko niezbędne elementy:

• Tytuł strony - tytuł ten jest stosowany jako nazwa behawiora na liście palety Behaviors.

• Definicja funkcji - jest to funkcja JavaScript, jaką behawior wstawi w sekcji HEAD dokumentu użytkownika. Zostanie ona wstawiona dokładnie w takiej postaci. Funkcja musi mieć jednoznacznie określoną nazwę - żadna inna funkcja w całym folderze Actions nie może mieć takiej samej nazwy.

Rys. 22.15. Folder Actions i jego foldery podrzędne oraz odpowiednie menu podrzędne na liście palety Behaviors

• Funkcja behaviorFunction() - jest to funkcja JavaScript, element Dreamweaver API. Musi ona zwracać nazwę funkcji zdefiniowanej poprzednio (bez nawiasów na końcu). Jest wywoływana automatycznie, gdy behawior jest wybierany, i dlatego nie musi być wywoływana w pliku behawiora.

• Funkcja applyBehavior() - ta funkcja jest także częścią Dreamweaver API. Musi zwracać dokładnie taki kod wywołania funkcji, jaki zostanie wstawiony w dokumencie użytkownika. W przypadku bardziej skomplikowanych behawiorów, które wymagają podania funkcji argumentów, argumenty te muszą być zawarte w zwracanym wyrażeniu. Funkcja jest wywoływana automatycznie, gdy behawior jest wybierany, i dlatego nie musi być wywoływana w pliku behawiora.

• Elementy zawarte w znaczniku <BODY> - kod umieszczony w sekcji BODY dokumentu pojawi się w oknie dialogowym, gdy behawior zostanie wybrany. Wszystkie behawiory automatycznie wywołują okna dialogowe. Jeśli behawior wymaga pobrania danych od użytkownika, utwórz formularz (tak jak w przypadku plików obiektów). Jeśli nie wymaga takich danych (tak jak w przykładzie tutaj), musisz coś umieścić w sekcji BODY, gdyż inaczej pojawi się całkowicie puste okno dialogowe.

Rys. 22.16. Szkielet kodu prostego behawiora

W przykładzie z rysunku 22.16 zwracany kod funkcji powoduje wyłącznie wyświetlenie okna informacyjnego. Zauważ, że funkcja i wywołanie funkcji pojawiają się w dokumencie użytkownika dokładnie w takiej postaci, w jakiej występują w kodzie.

Struktura bardziej skomplikowanego behawiora z oknem dialogowym i innymi dodatkami

Zaprezentowany powyżej behawior zawiera wszystkie niezbędne elementy i będzie działał prawidłowo. Jest jednak wyjątkowo prosty (nie wymaga od użytkownika wprowadzania danych i nie przekazuje funkcji żadnych argumentów) i brak mu kilku istotnych cech (takich jak możliwość kontroli nad stosowaną procedurą obsługi zdarzenia i opcjami, które umożliwią edycję behawiora w przyszłości). Rysunek 22.17 prezentuje kod nieco bardziej rozbudowanego behawiora, wraz ze wszystkimi tymi (opcjonalnymi) właściwościami.

Rys. 22.17. Szkielet kodu profesjonalnego behawiora

Oprócz już wymienionych elementów, profesjonalny behawior ma jeszcze następujące:

• Formularz HTML - tak jak w plikach obiektów, formularz staje się oknem dialogowym, służącym do pobierania danych od użytkownika. W plikach behawiorów formularze służą do pobierania argumentów przeznaczonych dla funkcji.

• Połączenie do pliku .js, zawierającego skrypty - połączenie to daje Ci dostęp do kilku funkcji narzędziowych obsługi łańcuchów. Jedna z tych funkcji, extractArgs(), jest wyjątkowo użyteczna przy tworzeniu opisanej dalej funkcji insepectBehavior(), która w innym przypadku byłaby bardzo trudna do utworzenia.

• Funkcja canAcceptBehavior() - ta funkcja, będąca częścią API, zwraca wartość true, false lub listę procedur obsługi zdarzeń (zawierającą jeden lub więcej elementów). W bardziej rozbudowanych plikach, niż ten opisywany tutaj, funkcja ta może także określić typ obiektu wybranego przez użytkownika w dokumencie oraz czy można do obiektu zastosować behawior. Jeśli funkcja zwraca wartość false, behawior zostanie wyświetlony na liście palety Behaviors szarą czcionką. Funkcja jest wywoływana automatycznie.

Początek ramki

Uwaga

Określenie, które behawiory powinny być wyświetlane na liście palety Behaviors szarą czcionką (jako nieaktywne), wymaga nieco bardziej pogłębionej wiedzy na temat Dreamweaver API i obiektowego modelu dokumentu (DOM, Document Object Model), niż wiedza dostarczana w tym rozdziale. Przeczytaj podręcznik „Extending Dreamweaver” i przeanalizuj inne behawiory, aby dowiedzieć się czegoś na ten temat.

Koniec ramki

• Funkcja inspectBehavior(wywołanieFunkcji) - funkcja ta, także stanowiąca element API, musi być stosowana do pobierania informacji od już zastosowanego behawiora oraz do wprowadzenia tych danych do okna dialogowego w celu ich zmiany. Funkcja umożliwia użytkownikowi otwarcie palety Behaviors, dwukrotne kliknięcie istniejącego behawiora i zaprezentowanie mu okna dialogowego, które zawiera aktualne ustawienia dla wybranego behawiora. Jest wywoływana automatycznie. Dreamweaver automatycznie przekazuje wywołanie funkcji behawiora, w postaci łańcucha, do funkcji.

• Funkcja initializeUI() - ta funkcja nie jest częścią API, a jej działanie jest takie samo, jak w przypadku plików obiektów: umieszcza ona punkt wstawiania w określonym polu okna dialogowego i zaznacza jego ewentualną zawartość, w celu ułatwienia wprowadzania danych. Funkcja musi być wywoływana za pośrednictwem procedury obsługi zdarzenia onLoad umieszczonej w sekcji BODY.

W przykładzie zaprezentowanym na rysunku 22.17 kod zwracany przez zdefiniowaną funkcję powoduje wyświetlenie okna komunikatu, którego treść jest określana przez użytkownika. Zauważ, że definicja funkcji się nie zmienia; dane wprowadzone do formularza przekazywane są jako argument.

Tworzenie własnego behawiora

W tym punkcie zdobędziesz trochę doświadczenia w przygotowywaniu własnych behawiorów. Nie muszę chyba powtarzać, że zanim zabierzesz się za przekształcanie kodu w behawior, musisz mieć pewną, podstawową wiedzę na temat pisania skryptów i musisz rozumieć kod określonej funkcji JavaScript oraz wywołania funkcji.

Ćwiczenie 22.7. Przygotowanie zaplecza

Rozpocznij od uporządkowania miejsca pracy. Tak jak poprzednio dla obiektów, tak i teraz przygotujesz specjalny folder, w którym zapisywane będą tworzone w tym ćwiczeniu behawiory. Poznasz też pewne subtelności związane z ponownym ładowaniem rozszerzeń przy pracy z behawiorami:

1. Upewnij się, że Dreamweaver jest uruchomiony. Jednym z celów tego ćwiczenia jest pokazanie, w jaki sposób można dokonać ponownego załadowania rozszerzeń.

2. Odszukaj i otwórz folder Configuration/Behaviors/Actions. Zminimalizuj lub ukryj okno programu Dreamweaver, aby uzyskać dostęp do pulpitu.

3. Utwórz folder, w którym przechowywane będą behawiory. Utwórz go jako folder podrzędny foldera Actions i nazwij Development. Na razie pozostanie on pusty.

4. Przeprowadź w programie Dreamweaver operację ponownego załadowania rozszerzeń. Rozwiń menu palety obiektów, trzymając wciśnięty klawisz Ctrl (lub Opt w przypadku komputerów Mac) i wybierz polecenie Reload Extensions. Procedura jest identyczna jak ta, którą stosowałeś w przypadku obiektów.

5. Rozwiń listę behawiorów palety Behaviors i poszukaj nowego menu podrzędnego. Kliknij znak plus, (+), aby rozwinąć listę - nowy folder powinien być widoczny na niej jako nowe menu podrzędne.
   Prawdopodobnie jednak nie zobaczysz nowego menu podrzędnego. Dlaczego? Ponowne załadowanie rozszerzeń nie wystarczy, aby Dreamweaver rozpoznał w folderze Actions nowe pliki lub pliki i foldery o nowych nazwach. Rozpoznawane są jedynie modyfikacje plików istniejących. Aby Dreamweaver zarejestrował obecność nowego menu podrzędnego, musisz skorzystać ze starego sposobu: zamknąć program i uruchomić ponownie.

6. Zamknij więc program i ponownie go uruchom. Następnie raz jeszcze poszukaj menu podrzędnego. Tym razem powinno się pojawić. Oczywiście będzie ono puste, ponieważ folder Development jest pusty. Lecz wkrótce pojawią się w nim Twoje nowe behawiory. Ilekroć dodasz nowy behawior, musisz zamknąć i uruchomić program. Jeśli tylko modyfikujesz behawior, wystarczy, że dokonasz ponownego załadowania rozszerzeń - w tym przypadku nie ma konieczności zamykania programu.

Ćwiczenie 22.8. Tworzenie prostego behawiora

Prosty behawior to taki behawior, który nie wymaga przekazywania argumentów funkcji. W związku z tym, nie wymaga on też formularza, pobierającego dane od użytkownika. Tworzony w tym ćwiczeniu prosty behawior to skrypt, który automatycznie nadaje oknu przeglądarki zadane rozmiary.

W tym ćwiczeniu możesz korzystać z ulubionego edytora tekstu lub, jeśli wolisz, z inspektora Code programu Dreamweaver. Zapisz plik behawiora w folderze Development, utworzonym w poprzednim ćwiczeniu. Pliki testowe zapisz w folderze roboczym.

1. Zdefiniuj (i przetestuj) funkcję JavaSript i jej wywołanie, które behawior ma wstawiać w kodzie. Aby efekt końcowy był udany, musisz zacząć od napisania i przetestowania stabilnego, funkcjonalnego skryptu behawiora, który będzie wstawiany w dokumencie użytkownika. Potrzebny Ci więc plik testowy. Zapisz go w folderze roboczym i nazwij resize400_test.html. Sekcja HEAD tego dokumentu powinna zawierać definicję funkcji zmieniającej rozmiary okna, natomiast w sekcji BODY musisz umieścić wywołanie tej funkcji. Kod powinien mieć taką postać:

<html>
<head>
<title>Testing Resize Script</title>
<script language=”JavaScript”>
function resizeTo400() {
window.resizeTo(400,400);
}
</script>
</head>
<body>
<a href=”#” onMouseUp=” resizeTo400()”> Click me!</a>
</body>
</html>

Początek ramki

Podpowiedź

Tworząc funkcje JavaScript, które będą stosowane jako behawiory, nie musisz martwić się o linie komentarza pozwalające ukryć skrypt przed starszymi typami przeglądarek. Dreamweaver sam dodaje komentarze, gdy behawior jest stosowany.

Koniec ramki

2. Przetestuj swój behawior w paru przeglądarkach. Otwórz plik testowy w przeglądarce i kliknij połączenie testowe. Rozmiary okna powinny się zmienić. Jeśli nie, powróć do kodu i poszukaj przyczyny. Skrypt musi działać, zanim przygotujesz behawior, który go wstawia. Im większa liczba przeglądarek użytych w testach, tym lepiej.

3. Przygotuj podstawowy szkielet kodu behawiora, zawierający wszystkie niezbędne elementy strukturalne. Utwórz nowy plik HTML. Będzie to plik behawiora, więc zapisz go w folderze Actions - jak pamiętasz, jest to folder podrzędny foldera Development. Nazwij go Resize400.html. Rozpocznij od wprowadzenia podstawowego kodu, pokazanego na rysunku 22.16. Następnie dodaj w odpowiednich miejscach swoją zaprojektowaną właśnie funkcję i jej wywołanie. Finalny rezultat powinien się prezentować mniej więcej tak (elementy, które wprowadzono do kodu podstawowego, zaznaczono czcionką pogrubioną):

<html>

<head>

<title>Resize Window to 400</title>

<script language=”JavaScript”>
function resizeTo400() {

window.resizeTo(400,400);
}

function behaviorFunction() {

return ”resizeto400”;

}

function applyBehavior() {

return ”resizeTo400()”;

}

</script>
</head>


<body>

<table width=”200”>

<tr>

<td>Ten behawior zmieni wysokość i szerokość okna przeglądarki użytkownika na równe 400 pikseli.</td>

</tr>

</table>
</body>
</html>

4. Uruchom ponownie program Dreamweaver. Jeśli program działa, zamknij go i uruchom, aby załadowany został nowy behawior.

5. Utwórz kolejny plik testowy. Nazwij go resize400_behavior_test.html i zapisz w folderze roboczym. Utwórz w nowym pliku proste połączenie tekstowe (definiując je za pomocą znaku #), tak jak w poprzednim pliku testowym. Nie umieszczaj w tym pliku żadnych skryptów. Kod powinien mieć taką postać:

<html>

<head>

<title>Testing Resize Behavior</title>

</head>

<body>

<a href=”#”>Click me!</a>

</body>

</html>

6. Otwórz nowy plik w Dreamweaverze i wypróbuj swój nowy behawior. Spróbuj zastosować go w taki sam sposób, w jaki użyłbyś każdego innego behawiora: zaznaczając tekst połączenia i klikając w oknie palety Behaviors przycisk ze znakiem plus. Nowy behawior powinien pojawić się na liście behawiorów, w menu podrzędnym Development, co pokazuje rysunek 22.18. Gdy wybierzesz behawior, powinieneś zobaczyć okno dialogowe.

Rys. 22.18. Elementy interfejsu behawiora Resize Window: lista behawiorów zawierająca menu podrzędne Development (a w nim pozycja odpowiadająca behawiorowi) oraz okno dialogowe

Jeśli w skryptach behawiora są jakieś błędy, Dreamweaver wyświetli komunikat błędu natychmiast, gdy klikniesz w palecie Behaviors przycisk ze znakiem plus. Przeanalizuj treść komunikatu i spróbuj poprawić błąd.

Jeśli składnia jest poprawna, będziesz mógł wybrać i zastosować behawior. Nie oznacza to jednak, że kod został wstawiony poprawnie.

1. Sprawdź w kodzie źródłowym pliku HTML, czy skrypt został prawidłowo wstawiony. Otwórz okno Code Inspector i przyjrzyj się kodowi. Powinien mieć taką samą postać jak kod, który sam wpisywałeś, w pierwszym kroku ćwiczenia 22.8. Jeśli się różni, musisz wytropić błędy. Znajdź różnice między kodem wstawianym a oryginalnym, wpisywanym ręcznie. Następnie przeanalizuj plik behawiora. W oparciu o wynik porównania wprowadź w pliku behawiora zmiany. Wypróbuj zmieniony plik.

2. Przetestuj wstawiony behawior w przeglądarce. Powtórz w przeglądarce test, który przeprowadziłeś dla oryginalnego kodu, w kroku 3. ćwiczenia 22.8. Skrypty JavaScript powinny działać tak samo dobrze jak kod wprowadzany ręcznie. Tak oto stworzyłeś behawior!

Ćwiczenie 22.9. Dodawanie argumentów w wywołaniu funkcji

W tym ćwiczeniu będziesz korzystał z behawiora, który właśnie stworzyłeś. Zamiast skryptu, który zmienia rozmiary okna na zawsze takie same, wstawisz skrypt, który poprosi użytkownika o podanie żądanych rozmiarów okna, a następnie dostosuje okno przeglądarki do jego wymagań. Musisz więc umieścić w sekcji BODY pliku behawiora element FORM i dodać trochę skryptów w definicji funkcji applyBehavior(). Tak jak w poprzednim ćwiczeniu, zaczniesz od pliku testowego i przygotowania wersji roboczej funkcji, która ma być wstawiana.

1. Otwórz plik resize400_test.html i zmień tak kod, aby argumenty były przekazywane funkcji. Jeśli chcesz zachować niezmienioną postać pliku testowego, przygotuj kopię, na której będziesz pracować w tym ćwiczeniu. Zapisz kopię jako resize_test.html. Kod źródłowy w Twoim pliku testowym powinien wyglądać teraz tak:

<html>

<head>

<title>Testing Resize Script</title>

<script language=”JavaScript”>

function resizeBrowserWindow(width,height) {

window.resizeTo(width,height);

}

</script>

</head>

<body>

<a href=”#” onMouseUp=”resizeBrowserWindow(400,400)”>Click me!</a>

</body>

</html>

2. Przetestuj zmieniony skrypt w przeglądarce. Tak jak poprzednio, zanim uznasz behawior za zdatny do użytku, sprawdź jego działanie w tylu przeglądarkach, w ilu możesz. Jeśli behawior nie działa, szukaj błędów i usuwaj je.

3. Zapisz plik behawiora Resize400.html pod nazwą Resize.html i otwórz ten plik w edytorze tekstu.

4. Zmień w pliku behawiora definicję funkcji. Oto jak powinien wyglądać element SCRIPT z sekcji HEAD:

<script language=”JavaScript”>

function resizeBrowserWindow(width,height) {

window.resizeTo(width,height);

}

function behaviorFunction() {

return ”resizeBrowserWindow”;

}

function applyBehavior() {

return ”resizeBrowserWindow()”;

}

</script>

5. Usuń zawartość sekcji BODY pliku behawiora, aby otworzyć drogę dla formularza, którym zaraz się zajmiemy.

6. Zaplanuj formularz i umieść jego kod w sekcji BODY. Formularz będzie pobierał od użytkownika niezbędne informacje. Konieczne są dwa pola - będą w nich definiowane rozmiary okna: szerokość i wysokość. Postać źródłowa sekcji BODY pliku behawiora mogłaby wyglądać tak:

<form name=”theForm”>

<table>

<tr valign=”baseline”>

<td align=”left” colspan=”2” nowrap>Resize the browser window to these dimensions:</td>

</tr>

<tr valign=”baseline”>

<td align=”right” nowrap>New width:</td>

<td align=”left”>

<input type=”text” name=”width” size=”8”>

</td>

</tr>

<tr valign=”baseline”>

<td align=”right” nowrap>New height:</td>

<td align=”left”>

<input type=”text” name=”height” size=”8”>

</td>

</tr>

</table>

</form>

Pamiętaj, że zawsze możesz zaprojektować swój formularz korzystając z edytora wizualnego programu Dreamweaver. Postać finalna formularza powinna wyglądać mniej więcej tak, jak pokazuje to rysunek 22.19.

Rys. 22.19. Formularz HTML, który będzie pełnił funkcję okna dialogowego dla behawiora Resize Window: w Dreamweaverze i w oknie przeglądarki

7. --> Zmień [Author:r] definicję funkcji applyBehavior() tak, aby funkcja zwracała wywołanie, w którym jako argumenty funkcji wykorzystane zostaną dane pobrane od użytkownika. Pamiętaj, że zwracana przez funkcję applyBehavior() postać wywołania musi być identyczna jak w dokumencie użytkownika. Zwracane przez funkcję wyrażenie musi być skonstruowane poprzez scalanie kilku elementów. Definicja funkcji applyBehavior() jest następująca:

function applyBehavior() {

var width=document.theForm.width.value;

var height=document.theForm.height.value;

return ”resizeBrowseWindow(“ + width + ”,” + height + ”)”;

}

8. Przeprowadź operację powtórnego załadowania rozszerzeń i wypróbuj swój nowy behawior. Utwórz w Dreamweaverze kolejny plik testowy zawierający połączenie tekstowe. Załaduj rozszerzenia i wypróbuj nowy behawior. Czy działa? Czy wstawia właściwy kod? Jeśli nie, poszukaj przyczyny.

9. Dopracuj postać okna dialogowego korzystając z funkcji initializeUI(). Ilekroć korzystasz z okna dialogowego, funkcja ta pozwoli Ci sprawować kontrolę nad umiejscowieniem punktu wstawiania w polu tekstowym. Dodaj tę funkcję w pliku behawiora, definiując pole tekstowe width jako wybrane (jest to pierwsze z pól okna dialogowego). Postać definicji funkcji initializeUI() jest taka:

function initializeUI() {

document.theForm.width.focus();

document.theForm.width.select();

}

Pamiętaj także o umieszczeniu w sekcji BODY wywołania funkcji. Oto odpowiedni kod:

<body onLoad=”initializeUI()”>

Ćwiczenie 22.10. Dodawanie funkcji canAcceptBehavior()

Nie będziemy się tu zajmować podstawowym zastosowaniem tej funkcji - umożliwia ona bowiem określenie, czy behawior pojawi się na liście jako nieaktywny (jego nazwa będzie wówczas pisana czcionką szarego koloru). Funkcję można także wykorzystać do wskazania domyślnej procedury obsługi zdarzenia.

1. Jeśli chcesz, przygotuj kopię pliku behawiora. Jeśli obawiasz się, że Twój śliczny, działający behawior może ucierpieć, zrób jego kopię. Pamiętaj jednak, że w takim razie będzie konieczna zmiana nazwy zdefiniowanej funkcji oraz tytułu strony. Jeśli nie wprowadzisz tych zmian, kopia nie będzie działać poprawnie. Jeśli nie czujesz obawy o los behawiora, pracuj na pliku z poprzedniego ćwiczenia.

2. Dodaj w sekcji HEAD dokumentu funkcję canAcceptBehavior(), określającą procedurę obsługi zdarzenia, z której ma korzystać behawior. Jej definicja jest bardzo prosta. Umieść ją gdzieś w obrębie elementu SCRIPT:

function canAcceptBehavior() {

return (”onMouseUp”);

}

3. Przetestuj zmodyfikowany behawior. Wiesz już jak się do tego zabrać: stwórz plik tekstowy, załaduj rozszerzenia i zastosuj behawior. Sprawdź kod wstawiany przez zmodyfikowany behawior. Wywołanie funkcji ma teraz postać:

<a href=”#” onMouseUp=”resizeBrowserWindow(300,300)”>Click me!</a>

Ćwiczenie 22.11. Przygotowanie odrębnego pliku JS

Zanim zajmiesz się dopieszczaniem swojego behawiora, musisz dokonać rozdziału jego kodu na część HTML i część JavaScript i zapisać obie części w plikach HTML i JS, podobnie jak w przypadku pliku Contact Info.html.

1. Zapisz kopię pliku Resize.html, tak na wszelki wypadek. Zapisz kopię zapasową poza folderem Configuration, w swoim folderze roboczym.

2. Przenieś funkcje JavaScript do pustego pliku tekstowego. Otwórz plik Resize.html w edytorze tekstu. W jego sekcji HEAD zaznacz wszystko, co znajduje się między znacznikami <script> i </script>. Wytnij tę zawartość do Schowka. Następnie utwórz nowy, pusty plik tekstowy i wklej do niego zawartość Schowka. Wklejony kod powinien mieć taką oto postać:

function resizeBrowserWindow(width,height) {

window.resizeTo(width,height);

}

function behaviorFunction() {

return ”resizeBrowserWindow”;

}

function applyBehavior() {

var width=document.theForm.width.value;

var height=document.theForm.height.value;

return ”resizeBrowseWindow(“ + width + ”,” + height + ”)”;

}

function canAcceptBehavior() {

return (”onMouseUp”);

}

function initializeUI() {

document.theForm.width.focus();

document.theForm.width.select();

}

3. Zapisz nowy plik w folderze Development pod nazwą Resize.js. Przypominam, że zalecaną praktyką jest stosowanie identycznych nazw dla plików HTML i JS oraz umieszczanie plików w tym samym folderze.

4. Dodaj w pliku Resize.html połączenie do pliku JS. Umieść je w znaczniku <script> (element SCRIPT jest teraz pusty, bowiem usunąłeś z niego funkcje). Oto nowa postać elementu SCRIPT:

<script src=”Resize.js”></script>

5. Załaduj ponownie rozszerzenia i wypróbuj behawior. Jeśli nie popełniłeś błędu przy kopiowaniu, wklejaniu i definiowaniu połączenia, behawior powinien funkcjonować tak samo, jak poprzednio (jeśli tak nie jest, sprawdź kod). Od tej chwili, jeśli konieczna będzie zmiana funkcji, zmiany będziesz wprowadzał w pliku JS. Plik HTML będzie wymagał ingerencji tylko w przypadku aktualizacji formularza, umieszczania w sekcji BODY innego wywołania funkcji lub dodawania kolejnego skryptu (tym się zajmiemy w następnym ćwiczeniu).

Ćwiczenie 22.12. Dodawanie funkcji inspectBehavior()

Jaka jest rola tej funkcji? Sprawdź: utwórz w Dreamweaverze plik testowy i zastosuj w nim swój behawior. W oknie palety Behaviors powinieneś zobaczyć behawior i przypisaną mu procedurę obsługi zdarzenia. Kliknij dwukrotnie behawior, aby przejrzeć i ewentualnie zmienić jego parametry.

Gdy pojawi się okno dialogowe, będzie ono puste, tak jak pokazuje to rysunek 22.20. Dreamweaver nie umieścił w nim wartości, które wprowadziłeś na wstępie, w oknie dialogowym. Aby zobaczyć jakie one są, musiałbyś sięgnąć do kodu źródłowego.

Rys. 22.20. Edycja behawiora, który nie korzysta z funkcji inspectBehavior()

Czyż nie jest poważna wada? Celem tego ćwiczenia jest jej usunięcie, poprzez pobranie danych od wywołania funkcji i umieszczenie ich w oknie dialogowym.

1. Jeśli chcesz, utwórz kopie plików behawiora. Obowiązuje tu ta sama rada: jeśli nie chcesz ingerować w istniejące pliki behawiorów, zapisz ich kopie zapasowe w swoim folderze roboczym.

2. Utwórz w pliku Resize.html połączenie do pliku string.js. Folder Configuration zawiera mnóstwo przydatnych funkcji JavaScript ogólnego zastosowania zapisanych w plikach JS i gotowych do zastosowania w Twoich rozszerzeniach. Możesz je wypróbować - wszystkie te pliki znajdziesz w folderze Configuration/Shared. Plik, do którego mamy zamiar utworzyć połączenie nazywa się string.js i jest zapisany w folderze Shared/MM/Scripts/CMN. Zawiera on kilka funkcji obsługujących łańcuchy. Dzięki niemu utworzenie funkcji inspectBehavior() będzie znacznie prostsze.
   Aby utworzyć w pliku behawiora połączenie do tego pliku JS, konieczne będzie umieszczenie w sekcji HEAD pliku HTML kolejnego elementu SCRIPT. W znaczniku otwierającym tego elementu powinien pojawić się adres względny pliku string.js. Teraz postać sekcji HEAD będzie następująca:

<head>

<title>Resize Window</title>

<script src=”Resize.js”></script>

<script src=”../../../Shared/MM/Scripts/CMN/string.js”></script>

</head>

Po co to robisz? Ponieważ funkcja, której definicję zaraz napiszesz (w swoim pliku JS) będzie wywoływać inne funkcje ze współdzielonego pliku JS, a te połączenia umożliwią plikom komunikowanie się między sobą.

3. W pliku Resize.js wpisz podstawową postać funkcji inspectBehavior(). Zacznij od dodania wyrażenia:
   
   function inspectBehavior(resizeFunctionCall) {
   }
   
   Argumentem tej funkcji jest wywołanie funkcji, które behawior wstawił w dokumencie użytkownika w celu zbadania. Dreamweaver automatycznie przekazuje wstawione wywołanie do funkcji inspectBehavior() w postaci argumentu. Musisz jedynie podać jakąś nazwę argumentu, na przykład resizeFunctionCall (lub inną dowolną nazwę).

4. Odbierz argumenty z wywołania funkcji wstawionego przez behawior. Deklarując funkcję pobrałeś wstawione wywołanie w postaci łańcucha. Teraz musisz wyekstrahować te części łańcucha, które odpowiadają poszczególnym argumentom. Wymaga to użycia finezyjnych skryptów operujących na wycinkach łańcuchów - dlatego właśnie utworzyłeś połączenie do pliku string.js. Plik ten zawiera funkcje extractArgs(), która, po przekazaniu jej wywołania funkcji resizeFunctionCall, ekstrahuje argumenty i zwraca je w postaci tablicy. Teraz wszystko, co musisz zrobić, to przekazać pobrane wywołanie funkcji extractArgs(), utworzyć pustą tablicę i dostarczyć do niej zwracane przez funkcję wyrażenie. Kod, który należy dodać, ma taką postać:
   
   function inspectBehavior(resizeFunctionCall) {
   var argArray = new Array;
   argArray = extractArgs(resizeFunctionCall);
   }

5. Wyekstrahowane argumenty należy umieścić w formularzu (w oknie dialogowym). Tablicę argArray tworzą elementy reprezentujące argumenty wywołania funkcji. Element argArray[0] zawiera samo wywołanie funkcji, a argumenty znajdują się w elementach począwszy od argArray[1]. Dla behawiora oznacza to, że argArray[1] zawiera nową szerokość okna, które tworzy behawior, a argArray[2] zawiera nową wysokość. Ponieważ we wstawianym wywołaniu funkcji są tylko dwa argumenty, tablica nie ma więcej elementów. Musisz więc dodać kod, który każdemu elementowi tablicy przyporządkowuje ponownie element formularza. Kod, który musisz dodać wygląda tak:

function inspectBehavior(resizeFunctionCall) {

var argArray = new Array;

argArray = extractArgs(resizeFunctionCall);

document.theForm.width.value = argArray[1];

document.theForm.height.value = argArray[2];

}

I to wszystko! Funkcja inspectBehavior() jest zdefiniowana. Postać źródłowa behawiora pokazana została na rysunkach 22.21 i 22.22.

Rys. 22.21. Postać źródłowa pliku Resize.html - wszystkie połączenia są już na swoich miejscach

6. Wypróbuj poprawiony behawior. Załaduj ponownie rozszerzenia i utwórz kolejny plik testowy. Ponieważ teraz będziemy modyfikować plik .js, możesz skorzystać ze starego pliku testowego. Zastosuj behawior, wprowadzając dowolne wartości szerokości i wysokości, następnie kliknij dwukrotnie nazwę behawiora w oknie palety Behaviors. Jeśli wszystko działa prawidłowo, powinno pojawić się okno dialogowe, w którego polach będą wyświetlane podane wcześniej wartości (patrz rysunek 22.23).
   Jeśli składnia jest nieprawidłowa, Dreamweaver wyświetli komunikat błędu. Jeśli błędnie zdefiniowałeś połączenie do pliku string.js, z komunikatu Dreamweavera dowiesz się, że nie zdefiniowano funkcji extractArgs(). Jeśli błąd dotyczy przyporządkowania elementów tablicy, w oknie dialogowym pojawią się nieprawidłowe wartości w niewłaściwych miejscach, pusta pola tekstowe lub pola, w których wyświetlany jest napis „Undefined”. W każdym z tych przypadków musisz odszukać błąd i usunąć go.

Rys. 22.22. Postać źródłowa pliku Resize.js - funkcja inspectBehavior() jest już na swoim miejscu

Rys. 22.23. Edycja behawiora, dla którego definicja funkcji inspectBehavior() ma poprawną postać

Początek ramki

Uwaga

Przekonałeś się, że rozszerzenia powinny działać tak samo, niezależnie od tego, czy kod JavaScript jest osadzony w pliku HTML, czy też umieszczony w odrębnym pliku JS. Istnieje jednak jeden wyjątek od tej reguły: w przypadku behawiorów korzystających z plików współdzielonych, takich jak string.js, może się zdarzyć, że na niektórych platformach behawior nie będzie działać poprawnie, jeśli nie umieścisz funkcji w osobnym pliku, tak jak tutaj.

Koniec ramki

Tworzenie własnych behawiorów

Jeśli wykonałeś wszystkie ćwiczenia z tego rozdziału, dysponujesz wystarczającymi umiejętnościami, by tworzyć własne behawiory. Na pewno zdajesz sobie sprawę, że jeszcze wielu rzeczy musisz się o behawiorach nauczyć, a jest to tym bardziej pożądane, że dzięki behawiorom możesz więcej. Aby poszerzyć swoją wiedzę, sięgnij po podręcznik „Extending Dreamweaver”, przeanalizuj istniejące pliki behawiorów, a także przyjrzyj się plikom współdzielonym plikom, takim jak string.js - są to bardzo wartościowe źródła.

Tak jak w przypadku obiektów, powinieneś najpierw zastanowić nad swoimi potrzebami. Choć perspektywa stworzenia super-behawiora jest kusząca - poprzez wstawienie skryptów, które sprawią, że okno przeglądarki zadrży, a multimedia będą wylewać się z komputera - to tylko dzięki prostym, acz ciężko pracującym skryptom JavaScript, zajdziesz najdalej. Do jakiego typu funkcjonalności JavaScript chciałbyś mieć szybki dostęp, a nie masz? Czy są w Dreamweaverze behawiory, których działanie chciałbyś zmienić? Zadaj sobie w trakcie pracy takie właśnie pytania, a będziesz wiedział, jakiego typu behawiory są Ci potrzebne.

Współdzielenie rozszerzeń

Jeśli obiekt lub behawior są użyteczne dla Ciebie, to być może będą też użyteczne dla innych. Oczywiście im więcej ludzi współdzieli Twoje rozszerzenie, tym głębsza jest potrzeba wyczyszczenia i upiększenia go oraz uczynienia go wiarygodnym i jasnym w odbiorze. Jeśli nie jesteś pewien, co to znaczy, przyjrzyj się rozszerzeniom domyślnym Dreamweavera. Mają dobrze przygotowaną dokumentację, ich kod jest przetestowany, interfejsy są zestandaryzowane i dobrze zaprojektowane, a ponadto rozszerzenia te są ślicznie zarchiwizowane. Nic z tego nie jest przypadkiem.

Czy chcesz się dzielić z innymi?

Najpierw musisz odpowiedzieć na pytanie, czy rzeczywiście chcesz się swoim rozszerzeniem dzielić z innymi. Jeśli obiekt lub behawior będą ułatwieniem tylko w Twojej pracy, w zastosowaniu do określonego klienta lub w bieżącym zastosowaniu; jeśli pominąłeś w kodzie wszystkie te subtelności, których inni oczekują; i jeśli nie masz czasu na przygotowanie wszystkiego tak, by można myśleć o udostępnianiu rozszerzenia innym, podaruj sobie czytanie dalszej części tekstu i zachowaj swoje rozszerzenia dla siebie.

Natomiast, jeśli pracujesz w zespole, którego inni członkowie mogliby skorzystać z Twoich rozszerzeń, lub jesteś osobą wrażliwą na dobro ogólne, która wierzy, że uszczęśliwi cały świat swoimi błyskotliwymi pomysłami i chce przekazać swoje rozszerzenie do Macromedia Exchange, to ten tekst jest dla Ciebie.

Uodparnianie kodu

Uodparnianie kodu (ang. bulletproofing) oznacza przygotowanie rozszerzenia do bezawaryjnego działania w najróżniejszych warunkach. W im bardziej zróżnicowanych warunkach rozszerzenie będzie stosowane, tym większa powinna być jego odporność.

W jaki sposób ją uzyskać? Przeczytaj.

Testuj wstawiany kod

Obiekt lub behawior nie są lepsze od kodu który wstawiają. Upewnij się, że Twój kod jest godzien wstawienia. Utwórz proste dokumenty stosując w nich kod, który został wstawiony za pomocą rozszerzenia. Czy kod działa na różnych platformach? Czy działa w różnych przeglądarkach? Macromedia zaleca sprawdzanie poprawności działania we wszystkich podstawowych typach przeglądarek w wersjach 4+ oraz eleganckiej degradacji w przeglądarkach wersji 3.

Testuj proces wstawiania

Jeśli nie ma okna dialogowego, które daje użytkownikowi możliwość wprowadzania danych, za każdym razem powinien być wstawiany taki sam kod. Jeśli jest okno dialogowe, rozważ następujące kwestie:

• Co się stanie, jeśli użytkownik pozostawi domyślne wartości i po prostu kliknie OK.? Czy nie spowoduje to załamania działania Dreamweavera? Czy w dokumencie użytkownika nie zostaną wstawione śmieci?

• Co się stanie, gdy użytkownik wprowadzi w oknie dialogowym dziwne lub po prostu złe dane?

• Jakiej reakcji oczekujesz w obu tych sytuacjach? Możesz przygotować rozszerzenie, które będzie wstawiało poprawny kod bez względu na wszystko, możesz spowodować, że wyświetlane będzie okno ostrzegawcze lub możesz przygotować rozszerzenie, które nie będzie wstawiało kodu, dopóki nie zostaną spełnione określone warunki. Wszystko zależy od Ciebie.

Początek ramki

Uwaga

Macromedia zaleca, aby umożliwić użytkownikom wprowadzanie dowolnych danych, jeśli tylko nie wpłyną one destrukcyjnie na samą stronę - innymi słowy, rezultat jest uważany za akceptowalny, jeśli przeglądarka po prostu zignoruje niepoprawny lub niestandardowy kod, zamiast generować błędy JavaScript, zawiesić się lub wykazać innego typu zauważalne problemy. To zalecenie wynika z faktu, iż standardy rozwijają się - a więc to, co dzisiaj wydaje się nonsensowne, jutro może być całkowicie poprawne. Uwzględnia ono także niechęć użytkowników do zbyt sztywnych wymagań odnośnie wprowadzanego kodu.

Koniec ramki

Przykładem znakomicie przetestowanego i zabezpieczonego przed wprowadzaniem złych danych obiektu jest obiekt Table firmy Macromedia. Aby zdobyć nowe doświadczenie w tej materii, otwórz program Dreamweaver i przetestuj wstawianie tego obiektu, wprowadzając w jego oknie dialogowym najdziwniejsze dane. Przekonasz się że:

• Gdy pozostawione zostaną wartości domyślne, wstawiana tabela tworzona jest w oparciu o dane zastosowane przy ostatnim użyciu obiektu.

• Pola opcjonalnych parametrów tabeli można pozostawić puste - konsekwencją jest jedynie brak tych parametrów w kodzie.

• Pola wierszy i kolumn, w których muszą być umieszczone jakieś wartości, aby kod tabeli funkcjonował, nie akceptują nieprawidłowych danych. Dane nienumeryczne oraz 0 zostaną zastąpione przez 1.

Testuj obiekt (lub behawior)

Jeśli już wiesz, że obiekt lub behawior działają na Twoim komputerze, z Twoją wersją Dreamweavera i w środowisku Twojego systemu operacyjnego, zadaj sobie następujące pytania:

• Czy działają także w starszych wersjach Dreamweavera?

• Czy działają przy innych konfiguracjach Dreamweavera?

• Czy działają na inaczej skonfigurowanych komputerach?

• Czy działają na innych platformach?

Czasami pewne z tych kwestii nie będą miały znaczenia. Jeśli rozszerzenie będzie stosowane tylko w Twojej firmie, gdzie wszystkie komputery są klasy PC, pracują pod kontrolą Windows 2000, a zainstalowaną wersją Dreamweavera jest wyłącznie wersja 4, to przejmowanie się wersją 2 na komputerze Macintosh lub w systemie Windows 95 nie ma sensu. Jednak nawet wówczas, gdy nie ma konieczności spełnienia określonych wymagań, warto mieć świadomość ograniczeń, aby inteligentnie podejść do kwestii współdzielenia.

Początek ramki

Podpowiedź

Macromedia życzy sobie, aby wszystkie przesyłane do witryny Exchange rozszerzenia zawierały w definicji funkcji informację o wersji Dreamweavera, dla której są przeznaczone. Ta informacja powinna pojawić się jako komentarz definiowanej funkcji, na przykład tak:

function resizeBrowserWindow(width,height) { //v3.0

Koniec ramki

Ćwiczenie 22.13. Testowanie behawiora

Skorzystamy teraz z określonych wcześniej kryteriów, aby poprawić utworzony w tym rozdziale behawior Resize Window (jeśli nie masz pełnej postaci źródłowej tego obiektu, znajdziesz ją na dołączonym do książki dysku CD).

1. Przetestuj wstawiany kod. Wstawianym kodem jest w tym przypadku funkcja JavaScript, która zmienia rozmiary aktualnie wyświetlanego okna przeglądarki. Na ile odporny jest ten kod?
   Zgodnie z O'Reilly JavaScript Reference (dostęp do tych informacji masz w oknie palety Reference), funkcja powinna działać w Netscape 4+ i Internet Explorerze (patrz rysunek 22.24). Jeśli chcesz być dokładny, sprawdź to, wypróbowując kod przy różnych konfiguracjach i kombinacjach przeglądarka-platforma. My zakładamy w tym ćwiczeniu, że informacje O'Reilly są prawdziwe.

Rys. 22.24. Okno palety Reference programu Dreamweaver prezentujące informacje na temat funkcji resizeTo()

2. Dostosuj odpowiednio behawior. Nic nie poradzisz na brak obsługi skryptu w przeglądarce Netscape 3, lecz możesz zastanowić się, czy jego degradacja jest wystarczająco elegancka. Jeśli przeprowadzisz test skryptu w Netscape 3, zobaczysz, że przeglądarka go po prostu ignoruje - bez szkód, bez problemów. Tak właśnie wygląda elegancka degradacja - nie ma więc potrzeby wprowadzania zmian.
   Zobacz, co się stanie, gdy behawior zostanie zastosowany z wartościami domyślnymi. W swojej obecnej postaci nie ma on zdefiniowanych wartości domyślnych szerokości i wysokości. A jeśli użytkownik zastosuje go właśnie w ten sposób? Wypróbuj sam, a zobaczysz, że wstawiany kod nie jest kompletny:
   
   <a href=”#” onMouseUp=”resizeBrowseWindow( , )”>Click me!</a>
   
   Najprostszym sposobem ominięcia tego problemu jest umieszczenie wartości domyślnych w oknie dialogowym. Zrób to, zmieniając kod formularza:

<table>

<tr valign=”baseline”>

<td align=”right” nowrap>New width:</td>

<td align=”left”>

<input type=”text” name=”width” size=”8” value=”300”>

</td>

</tr>

<tr valign=”baseline”>

<td align=”right” nowrap>New height:</td>

<td align=”left”>

<input type=”text” name=”height” size=”8” value=”300”>

</td>

</tr>

</table>

Wprowadź zmiany i wypróbuj poprawiony behawior. Teraz w oknie dialogowym powinny pojawiać się wartości domyślne.

3. --> Przetestuj [Author:r] behawior stosując nieprawidłowe dane. Zobacz co się stanie, jeśli wprowadzisz dane nienumeryczne, zera lub pozostawisz pola tekstowe puste, tak jak pokazuje rysunek 22.25. Co się stanie? Już wiesz, że pozostawienie pól tekstowych pustych to niebezpieczna propozycja. Równie niebezpieczne jest wpisanie zer. Wprowadzenia danych nienumerycznych spowoduje wygenerowanie w przeglądarce Internet Explorer błędu JavaScript i jest zdecydowanie złym pomysłem. Chyba musisz jakoś rozwiązać ten problem.

Rys. 22.25. Nienumeryczne dane lub zera wprowadzone w oknie dialogowym behawiora Resize Window spowodują przekazanie funkcji niepoprawnych argumentów

4. Wprowadź w behawiorze zmiany się uniemożliwiające wprowadzanie nieprawidłowych danych. Zmień definicję funkcji applyBehavior() tak, aby przed każdym wstawieniem wywołania funkcji, sprawdzana była poprawność wypełnienia pól formularza. W tym przypadku dopuszczalne są jedynie dodatnie liczby całkowite. Możesz się też zastanowić, czy dopuszczać jako poprawne bardzo duże liczby. Wprowadzenie niepoprawnych danych powinno być korygowane zastąpieniem ich wartościami domyślnymi. Procedury kontrolne możesz zaimplementować w kodzie źródłowym na wiele sposobów - wszystko zależy od przyjętego przez Ciebie stylu tworzenia skryptów. Twój finalny kod mógłby wyglądać na przykład tak:

function applyBehavior() {

var width=document.theForm.width.value;

var height=document.theForm.height.value;

if (width==”” || width<1 || width>2000 || parseInt(width) != width)

{

width=300;

}

if (height==”” || height<1 || height>2000 || parseInt(height) != height)

{

height=300;

}

return”resizeBrowserWindow(“ + width + “,” + height + “)”;

}

5. Wypróbuj poprawiony behawior. Co się teraz stanie, gdy wprowadzisz w oknie dialogowym dziwaczne dane (lub nic)? W polach tekstowych powinny zostać zachowane wartości domyślne (w przypadku naszego ćwiczenia są to wartości 300 i 300). Twój behawior jest teraz odporny - a przynajmniej bardziej odporny niż poprzednio.

Projekt: testowanie użyteczności

Chociaż sam możesz wyłapywać błędy techniczne, do wyszukiwania błędów projektowych i związanych z zastosowaniami najlepiej nadają się inni - a szczególnie osoby, które nie mają pojęcia o procesie tworzenia i same się tworzeniem oprogramowania nie zajmują. Osoby testujące wersję beta mogą znaleźć słabe strony Twojego rozszerzenia - a w takim przypadku czeka Cię powrót do procesu uodparniania.

Bardziej jednak prawdopodobne, że wskażą wady w samym projekcie. Czy nazwa obiektu lub behawiora jest jasna w takiej postaci, w jakiej pojawia się w menu oraz jako etykieta? Czy ikona obiektu jest sugestywna i intuicyjna? Czy interfejs pasuje do interfejsu Dreamweavera? Czy cel rozszerzenia jest oczywisty? Czy spełnia oczekiwania użytkowników? Czy funkcjonalność jest bez zastrzeżeń? Czy rozszerzenie jest użyteczne?

Jeśli odpowiedź na którekolwiek z tych pytań brzmi „Nie”, musisz poprawić projekt.

Początek ramki

Podpowiedź

Na swoich stronach internetowych Macromedia oferuje zestaw wytycznych, które mają pomóc Ci w stworzeniu intuicyjnego, funkcjonalnego interfejsu, dobrze pasującego do interfejsu programu Dreamweaver. Znajdziesz je pod adresem www.macromedia.com/exchange/dreamweaver (wybierz połączenie Extension Testing w sekcji tematycznej Site Help). W przytaczanym w tym rozdziale kodzie źródłowym staraliśmy się stosować do przedstawionych tam wytycznych.

Koniec ramki

Opracowanie dokumentacji

Czy myślisz, że będziesz w stanie zapamiętać funkcje danego rozszerzenia i przypomnisz je sobie po pół roku lub po roku? Prawdopodobnie nie. A jeśli Ty nie zapamiętasz, to tym bardziej inni. Zawsze, podkreślam - zawsze - dokumentuj to, co robisz. Rób to dla własnego dobra i dobra innych.

Komentarze

Zawsze zaopatruj kod w komentarze. Macromedia rekomenduje komentowanie kodu - sam wiesz, że tak należy. Komentarze pomogą znaleźć błędy i dokonać aktualizacji obiektu lub behawiora w przyszłości. Ułatwią innym korzystanie z Twoich doświadczeń (w przykładach pokazanych w tym rozdziale komentarze nie były stosowane, abyś mógł lepiej zanalizować kod. W rzeczywistym świecie pojawiłoby się w nich mnóstwo komentarzy).

Pomoc elektroniczna

Zgodnie z wytycznymi firmy Macromedia, każde rozszerzenie powinno być zaopatrzone w jakąś pomoc elektroniczną, dostępną z poziomu okna dialogowego rozszerzenia. Dreamweaver jest tak skonfigurowany, że ułatwia przygotowanie plików pomocy.

• Pomoc w oknie dialogowym - jeśli obiekt lub behawior są na tyle proste, że jedno lub dwa zdania całkowicie wystarczą jako wyjaśnienie, umieść to wyjaśnienie w oknie dialogowym. Macromedia zaleca dodanie komórki tabeli u dołu układu, o kolorze tła #D3D3D3 (rysunek 22.26 pokazuje przykład tego rozwiązania).

• Pomoc w pliku pomocy - jeśli rozszerzenie wymaga szerszych objaśnień, umieść je w pliku HTML. Plik HTML zapisz w nowym folderze, utworzonym w folderze Configuration/Shared (na rysunku 22.27 możesz zobaczyć przykład). Umieść w pliku rozszerzenia przycisk Help i przekształć go w połączenie do pliku pomocy.

Rys. 22.26. Obiekt Contact Info z krótkim opisem umieszczonym w oknie dialogowym; u góry widok układu tabeli, w której dodano dodatkową komórkę

Rys. 22.27. Okno dialogowe behawiora Resize Window z przyciskiem Help. Kliknięcie tego przycisku otworzy plik pomocy ResizeWindowHelp.html, umieszczony w folderze Development, podrzędnym względem foldera Configuration/Shared

Ćwiczenie 22.14. Dodawanie pomocy elektronicznej do behawiora

W tym ćwiczeniu poprawisz swój behawior Resize Window, dodając w jego oknie dialogowym przycisk pomocy i przekształcając ten przycisk w połączenie do pliku HTML umieszczonego w folderze Shared.

1. Utwórz w folderze Shared folder, w którym będzie przechowywana dokumentacja. Niech ten nowy folder nazywa się Development. Rysunek 22.28 prezentuje aktualną strukturę folderów.

Rys. 22.28. Struktura foldera Configuration/Shared, który zawiera nowy folder Development

2. Utwórz plik HTML. Strona pomocy powinna zawierać informacje na temat funkcji behawiora, pól i przyjmowanych przez nie danych oraz wszelkie inne informacje, które uznasz za przydatne dla użytkowników. Możesz utworzyć nowy plik lub skorzystać z pliku ResizeWindowHelp.html, zapisanego na płycie CD. Rysunek 22.29 prezentuje wygląd typowego pliku pomocy. Zapisz plik w folderze Configuration/Shared/Development, pod nazwą ResizeWindowHelp.html.

3. Dodaj do okna dialogowego behawiora przycisk wywoływania pomocy. Otwórz plik behawiora ResizeWindow.js w edytorze tekstu. Umieść w kodzie definicję funkcji:
   
   function diplayHelp() {
   }
   Funkcja ta jest częścią Dreamweaver API. Będzie więc wywoływana automatycznie. Gdy to zrobisz, załaduj ponownie rozszerzenia i wypróbuj działanie poprawionego behawiora. Gdy pojawi się okno dialogowe, powinien w nim być wyświetlany przycisk Help, tak jak na rysunku 22.27. Ponieważ nie została jeszcze wpisana treść funkcji, kliknięcie tego przycisku nigdzie nie prowadzi.

Rys. 22.29. Plik pomocy behawiora Resize Window w oknie przeglądarki

4. Przekształć przycisk pomocy w połączenie do pliku pomocy. Jest to standardowa procedura, a skorzystasz w niej z funkcji stanowiącej element Dreamweaver API - dw.browseDocument(). Jako swój argument, funkcja przyjmuje bezwzględny adres URL. Jeśli plik pomocy jest umieszczony w sieci - na przykład na serwerze witryny Twojej firmy, aby użytkownicy mieli zawsze dostęp do najświeższych i najwspanialszych plików pomocy - jako argument funkcji wpisz po prostu pełną ścieżkę dostępu do niego (bezwzględny adres URL). W tym przypadku funkcja będzie więc wyglądać tak:

function displayHelp() {

dw.browseDocument(http://www.mojafirma.com/dwHelpFiles/ResizeWindow.html);

}

Ponieważ plik pomocy będzie ściągany na dysk twardy użytkownika, kod musi zwracać bezwzględną ścieżkę dostępu do tego pliku. Całe szczęście, funkcja Dreamweaver API, dw.getConfigurationPath(), zwraca adres bezwzględny foldera Configuration. Pozostaje więc jedynie określić na podstawie tych informacji ścieżkę dostępu do pliku względem tego foldera nadrzędnego i połączyć te dwie rzeczy razem. Tak więc kod, który powinieneś wprowadzić, powinien wyglądać tak:

function displayHelp() {

var myURL = dw.getConfigurationPath();

myURL += ”/Shared/Development/ResizeWindowHelp.html”;

dw.browseDocument(myURL);

}

Wprowadź ten kod. Następnie załaduj ponownie rozszerzenia i wypróbuj behawior. Jeśli prawidłowa strona pomocy nie pojawi się, sprawdzaj i testuj kod, aż wszystko będzie w porządku. Sprawdź, czy prawidłowo podałeś ścieżkę dostępu z foldera Configuration do pliku pomocy - w zależności od stosowanych przez Ciebie nazw plików i folderów, w Twoim przypadku ścieżka dostępu może wyglądać inaczej, niż w tym ćwiczeniu.

Początek ramki

Uwaga

Obie zaprezentowane tu funkcje API są w rzeczywistości metodami obiektu Dreamweaver. Metody tego obiektu można zapisać jako dreamweaver.nazwaFunkcji() lub dw.nazwaFunkcji(). W drugim przypadku prawdopodobieństwo pomyłki literowej jest mniejsze.

Koniec ramki

Rozprowadzanie

W jaki sposób zamierzasz umieścić swój śliczny obiekt lub behawior we folderach Configuration użytkowników programu Dreamweaver? Przeczytaj instrukcje.

Przygotowanie pakietu przy pomocy menedżera rozszerzeń

Extension Manager staje się standardowym narzędziem bezbolesnej instalacji rozszerzeń. Z tego względu stanowi on najprostszą drogę współdzielenia rozszerzeń.

Całe szczęście, menedżer rozszerzeń nie tylko instaluje rozszerzenia, lecz także archiwizuje je do postaci specjalnych plików instalacyjnych. Proces ten jest w zasadzie bezbolesny. Oto jego etapy:

1. Umieść wszystkie niezbędne pliki (pliki pomocy, HTML i JS oraz ikony GIF) w jednym folderze, zlokalizowanym poza folderem Configuration.

2. Utwórz plik instalacyjny. Jest to dokument XML, o rozszerzeniu nazwy .mxi, który zawiera wszystkie instrukcje potrzebne przy instalacji. Są to informacje na temat miejsca składowania plików, wersji Dreamweavera i rodzaju platform wymaganych przesz rozszerzenie, autora, typu rozszerzenia oraz jego opis. Wymagania dotyczące formatowania są bardzo rygorystyczne. Początkujący powinni skorzystać z przykładów udostępnianych przez menedżera rozszerzeń. Znajdziesz wśród nich plik blank.mxi - jest to pusty dokument, który może być stosowany jako szablon, oraz plik sample.mxi, zawierający wymagany zestaw informacji dla prostego obiektu.

3. Uruchom menedżera rozszerzeń i wybierz polecenie Package Extension z menu File.

Na rysunku 22.30 zaprezentowany został przykładowy folder zawierający wszystkie pliki, niezbędne do utworzenia wersji zarchiwizowanej obiektu. Procedura tworzenia foldera jest opisana w ostatnim z ćwiczeń tego rozdziału.

Rys. 22.30. Wszystkie składowe obiektu Contact Info, gotowe do archiwizacji

Ćwiczenie 22.15. Archiwizacja rozszerzenia

W tym ćwiczeniu zarchiwizujesz obiekt Contact Info, aby umożliwić udostępnienie go innym.

1. Skopiuj wszystkie potrzebne pliki do jednego foldera. Utwórz na swoim dysku twardym nowy folder, lokalizując go poza folderem Configuration. Nadaj mu dowolną nazwę, którą zapamiętasz (na przykład Contact Info). Odszukaj wszystkie pliki składowe behawiora i skopiuj je do tego foldera. Ich lista podana jest poniżej:

• Contact Info.html

• Contact Info.js

• Contact Info.gif

2. Otwórz pusty plik blank.mxi, który posłuży do utworzenia pliku instalacyjnego. Zapisz jego kopię w utworzonym folderze pod nazwą ContactInfo.mxi. Odszukaj na dysku twardym folder aplikacji Extension Manager. Znajdź w nim folder Dreamweaver/Samples. Plik blank.mxi powinien znajdować się w tym właśnie folderze. (Rysunek 22.31 pokazuje, gdzie szukać poszczególnych pozycji.) Po utworzeniu kopii pliku, otwórz ContactInfo.mxi w edytorze tekstu.

Rys. 22.31. Struktura foldera aplikacji Extension Manager i pliki sample.mxi oraz blank.mxi

Początek ramki

Podpowiedź

Macromedia udostępnia dokładne instrukcje tworzenia plików instalacyjnych, dostępne w pliku PDF. Idź pod adres www.macromedia.com/exchange/dreamweaver i kliknij połączenie Extension Testing w sekcji Site Help.

Koniec ramki

3. Wypełnij dokument informacjami na temat obiektu. Postać dokumentu jest już odpowiednia, a sposób formatowania możesz podglądnąć w pliku sample.mxi. W przypadku Twojego rozszerzenia, wprowadź w pliku brakujące informacje tak, by efekt końcowy prezentował się mniej więcej tak, jak na rysunku 22.32. Oto kilka podpowiedzi:

• Author name - podaj tu swoje nazwisko (John Smith, Web Genius - tak jest w naszym przykładzie; nie ma przeciwwskazań, aby być odrobinę dowcipnym).

• File Name - wpisz tu pełną ścieżkę dostępu z foldera głównego aplikacji Dreamweaver, tak jak w przykładzie. Jeśli chcesz, by rozszerzenie tworzyło nowe foldery jako podrzędne względem istniejących, umieść je jako część ścieżki (w przykładzie jest to folder test, który zostanie utworzony jako podrzędny względem foldera Objects). Gdyby obiekt zawierał jakieś dodatkowe foldery, podrzędne względem foldera Shared, także zostałyby one dodane w ten sam sposób.

• Version - Twoje rozszerzenie, podobnie jak inne oprogramowanie, uzyskuje swój własny numer wersji. Zacznij więc od wersji 1.0, a dla poprawionego rozszerzenia zwiększ numer.

Rys. 22.32. Pełny kod pliku ContactInfo.mxi. Dane, które wprowadzono w pusty szablon (na bazie pliku blank.mxi) są pisane czcionką pogrubioną

4. --> Teraz [Author:MS] czas na zapakowanie wszystkiego razem przy pomocy menedżera rozszerzeń. Uruchom menedżera i wybierz polecenie Package Extension z menu File.
   Zdefiniuj nazwę rozszerzenia, starając się, by była ona opisowa i zgodna z ogólnie przyjętymi konwencjami (bez spacji, nie dłuższa niż 20 znaków i bez znaków specjalnych). Pamiętaj o pozostawieniu rozszerzenia .mxi. Jeśli wszystko zostało wykonane prawidłowo, menedżer rozszerzeń wygeneruje w tym samym folderze plik rozszerzenia w formacie .mxi. Jeśli wystąpią jakieś problemy, pojawi się raport błędów. Najczęściej problemy dotyczą pliku .mxi. W takim przypadku wróć do edytora tekstu, usuń zgłaszane błędy i spróbuj ponownie. Rysunek 22.33 prezentuje przebieg procesu w menedżerze rozszerzeń.

Rys. 22.33. Extension Manager - kolejne etapy procesu archiwizacji

5. Menedżer rozszerzeń posłuży nam także do instalacji nowego rozszerzenia. Zamknij program Dreamweaver, o ile działa. Wybierz z menu File menedżera rozszerzeń pozycję Install. W pojawiającym się oknie dialogowym nawiguj do pliku ContactInfo.mxp. Po wykonaniu operacji, zostanie wyświetlony komunikat informujący, że rozszerzenie zostało zainstalowane. Twoje rozszerzenie powinno pojawić się w oknie menedżera rozszerzeń, tak jak na rysunku 22.34.

6. Uruchom Dreamweavera i sprawdź, czy instalacja jest poprawna. Jeśli wszystko poszło tak gładko, jak to wynika z komunikatu, na palecie obiektów powinna pojawić się nowa kategoria, o nazwie takiej samej, jak nazwa utworzonego przez Ciebie foldera. Kategoria ta zawiera tylko jeden obiekt. Sprawdź jego etykietę i spróbuj go wstawić w dokumencie. A teraz poklep się po plecach - udało się!

Rys. 22.34. Okno menedżera rozszerzeń prezentujące zainstalowany obiekt Contact Info

Publikacja poprzez Macromedia Exchange

Ostatnim etapem udostępniania rozszerzenia jest przesłanie go do witryny Macromedia Exchange. Gdy plik .mxp jest już gotowy, sama procedura opublikowania go jest już prosta: idź do witryny Macromedia Exchange, kliknij przycisk Submit Extension, u góry strony, a następnie wykonuj kolejne instrukcje (patrz rysunek 22.35).

Rys. 22.35. Strona główna Macromedia Exchange i przycisk Submit Extension

Po przesłaniu rozszerzenia, inżynierowie firmy Macromedia poddadzą je testom. Możliwe są trzy scenariusze:

• Jeśli nie jest poprawne, zostanie Ci zwrócone, wraz z komentarzem.

• Jeśli przejdzie podstawowe testy, zostanie umieszczone w witrynie jako Basic lub nie zatwierdzone (kolumna Approval).

• Jeśli przejdzie także szersze testy, staje się rozszerzeniem zatwierdzonym przez Macromedia.

Aby lepiej poznać proces testowania oraz akceptacji i zatwierdzania rozszerzeń, odwiedź witrynę Macromedia Exchange i wybierz w sekcji Site Help połączenie Frequently Asked Questions. Znajdziesz tam wyczerpującą listę pytań i odpowiedzi, posegregowanych na określone tematy.

Podsumowanie

Jak już wiesz, Dreamweaver to niesamowite środowisko tworzenia stron WWW. Ten rozdział pokazał Ci, jak możesz dostosować je perfekcyjnie do Twoich potrzeb. Możliwości stwarzane przez rozszerzenia zostały tu jednak tylko zaznaczone - aby dowiedzieć się więcej, sięgnij po podręcznik „Extending Dreamweaver”, odwiedź witrynę Macromedia Exchange i przeczytaj dostępne tam materiały. Jeśli całkiem serio traktujesz tę sprawę, zapisz się do grupy dyskusyjnej Extesibility Newsgroup (www.macromedia.com/support/dreamweaver/extend/form/). Odkurz książki o JavaScript, a potem zacznij pisać historię na nowo.

2 Część I ♦ Podstawy obsługi systemu WhizBang (Nagłówek strony)

2 G:\DREAM_trans\rozdz22.doc

błąd numeracji listy w książce

błąd numeracji listy w książce

Błąd numeracji w książce

---