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:
q Tworzenie prostego obiektu, który za każdym razem wstawia na stronie zawsze ten sam kod
q Tworzenie obiektu, który wstawia na stronie kod zmodyfikowany w oparciu o dane wprowadzone przez użytkownika w oknie dialogowym
q Tworzenie modyfikowalnego behawiora wielokrotnego zastosowania
q Tropienie usterek oraz uodpornianie obiektów i behawiorów przed przekazaniem ich innym użytkownikom
q Archiwizowanie behawiora lub obiektu do pliku instalacyjnego, który może być stosowany z poziomu menedżera rozszerzeń
q Przesyłanie zarchiwizowanych rozszerzeń do Macromedia Exchange
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:
q Podstawowa struktura języka, wymagania dotyczące składni oraz zasadnicze pojęcia języka JavaScript (wyrażenia, operatory, zmienne, itp.).
q Posługiwanie się funkcjami JavaScript.
q 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?
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.
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.
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:
q 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.
q 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.
q 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.
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:
q Nazwa pliku – nazwa ta jest stosowana jako pozycja menu Insert dla tego obiektu.
q Tytuł strony – stosowany jest jako etykieta narzędzia, identyfikująca obiekt na palecie obiektów.
q 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.
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.
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.
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:
q 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.
q 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ł.
q Pliki testowe (wygenerujesz parę takich plików w ćwiczeniach tego rozdziału).
q Pliki konieczne do archiwizacji rozszerzeń.
q 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.
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ń
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
Rys. 22.5.
Jeśli przed rozwinięciem tego menu wciśniesz klawisz Ctrl, pojawi się tu nowa pozycja – Reload Extensions
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.
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>
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.
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:jsmith@mojafirma.com”>John Smith</a></font></p>’;}</script></head><body></body></html>
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ł.
Wolf-1