2009.04_Własny CMS na podstawie biblioteki YUI_[Programowanie].pdf

Programowanie

Własny CMS na podstawie biblioteki YUI

podstawie biblioteki YUI

Grzegorz Madajczak

Co robić, jeśli nie mamy dostępu do serwera z bazą danych oraz z PHP, a koniecznie chcemy zbudować

efektowną stronę internetową? Z góry odpadają większość znanych CMS-ów, które do działania

wymagają obu powyższych składników. Jedynym rozwiązaniem jest napisać własny system zarządzania

treścią portalu internetowego, np. z wykorzystaniem biblioteki YUI .

ma w Internecie, to oznacza, że nie istnieje. Mo-

że powiedzenie to jest trochę zbyt dosadne, lecz

tkwi w nim ziarnko prawdy – obecnie każdy mo-

że stworzyć i opublikować stronę internetową. Szkopuł jed-

nak w tym, że jedni robią to lepiej, a inni gorzej. Ja osobiście

jestem zwolennikiem samodzielnego tworzenia strony przez

ręczne wklepywanie kodu. Nie dość, że ten sposób rozwi-

ja intelektualnie oraz zwiększa umiejętności informatyczne,

to dodatkowo pozwala mieć pełną kontrolę nad własną stro-

ną internetową. Zawsze bowiem lepiej jest wiedzieć, co kry-

je się w zakamarkach kodu.

gującego PHP oraz dostępu do bazy danych (np. MySQL).

Wydawałoby się, że w dzisiejszych czasach serwer WWW

spełniający powyższe wymogi jest standardem. Zdarzają się

jednak darmowe serwisy hostingowe, zwłaszcza te bezpłat-

ne nie oferujące swym użytkownikom nic poza ograniczoną

przestrzenią dyskową. Czy w tej sytuacji należy sobie odpu-

ścić? Nic podobnego! W sukurs przychodzi w tym momencie

język JavaScript z bogactwem gotowych do użycia bibliotek

– z taką na przykład biblioteką Yahoo! User Interface Library

(YUI) , którą to postaram się przybliżyć w tym artykule wraz

z innymi propozycjami JavaScript do tworzenia atrakcyjnych

stron internetowych.

Biblioteka YUI

Nie każdy jednak jest alfą i omegą oraz ma ochotę w nieskoń-

czoność grzebać się w kodzie, by na koniec stworzyć prostą

i jednocześnie ładną witrynę internetową. Można ułatwić so-

bie to zadanie wykorzystując czyjąś pracę i zastosować goto-

we programy typu CMS ( Content Menagment System ), któ-

re pozwalają na łatwe zarządzanie wyglądem i treścią strony,

z użyciem graicznych narzędzi. Wadą CMS-ów jest to, że w

większości wymagają one dostępu do serwera WWW obsłu-

Tabela 1. Szablony układu bloków w sekcji body i klasy je opisujące

Klasa

Opis ustawień

.yui-t1

Kolumna 160 px z lewej strony

.yui-t2

Kolumna 180 px z lewej strony

.yui-t3

Kolumna 300 px z lewej strony

.yui-t4

Kolumna 180 px z prawej strony

.yui-t5

Kolumna 240 px z prawej strony

.yui-t6

Kolumna 300 px z prawej strony

kwiecień 2009

Własny CMS na

P rawie każdy zna powiedzenie, że jeśli kogoś nie

Programowanie

Własny CMS na podstawie biblioteki YUI

Biblioteka YUI dostarcza twórcy stron in-

ternetowych zaawansowane narzędzia pozwa-

lające na tworzenie skomplikowanych, dyna-

micznych i, co najważniejsze, interaktywnych

interfejsów użytkownika. Niesamowitą zale-

tą YUI jest fakt, że stosując tylko tę bibliotekę

można tworzyć strony internetowe do złudze-

nia przypominające te zbudowane za pomocą

zaawansowanych technologicznie CMSów – z

tą różnicą, iż interfejsy napisane z użyciem YUI

nie wymagają do działania serwera baz danych,

czy nawet wsparcia PHP. Biblioteka YUI nie

wymaga również jakichkolwiek procedur in-

stalacji. Wystarczy pobrać bibliotekę ze stro-

ny http://yuilibrary.com/downloads/ lub z pły-

ty dołączonej do czasopisma, i rozpakować w

dowolnym miejscu drzewa folderów serwera

WWW. Należy jedynie pamiętać o podawaniu

prawidłowej ścieżki dostępu do folderu z bi-

blioteką. Na potrzeby tego artykułu zakładam,

że katalog ten znajduje się w głównym folderze

gromadzącym pliki strony internetowej.

Biblioteka YUI rozpowszechniana jest na

liberalnej licencji BSD , która pozwala na swo-

bodne korzystanie z kodu biblioteki w celach

niekomercyjnych, z poszanowaniem praw au-

torskich twórców biblioteki.

ży posłużyć się YUI . W kodzie przedstawio-

nym na Listingu 1 składowa biblioteki YUI

yahoo-dom-event , odpowiedzialna za obsłu-

gę zdarzeń, została przywołana w sekcji <he-

ad> prezentowanego dokumentu XHTML

(plik z tym i pozostałymi listingami znajdu-

je się na płycie dołączonej do czasopisma).

W sekcji <body> dokumentu XHTML utwo-

rzona została zmienna helloWorld , do któ-

rej przypisana została funkcja wywołująca

okno dialogowe. Jednocześnie w tym samym

skrypcie do kontenera container dodany zo-

stał nasłuch zdarzenia kliknięcia wywołują-

ce tę funkcję. Na podobnej zasadzie korzy-

sta się ze wszystkich innych bibliotek zgro-

madzonych w YUI .

Listing 1. Podstawowe zasady ładowania i stosowania biblioteki YUI

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://

www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >

< html xmlns= "http://www.w3.org/1999/xhtml" >

< head >

< meta http-equiv= "Content-Type" content= "text/html; charset=UTF-

8" / >

< link rel= "stylesheet" type= "text/css" href= "yui/build/fonts/fonts-

min.css" / >

< script type= "text/javascript" src= "yui/build/yahoo-dom-event/yahoo-

dom-event.js" >< /script >

< style type= "text/css" >

#container {background-color:#00CCFF; border:1px solid black;

padding:1em; cursor:pointer; width: 200px; left:50px; text-align:

center;}

< /style >

< /head >

< body >

< script type= "text/javascript" >

var helloWorld = function(e) {alert("Coś działa!");}

YAHOO.util.Event.addListener("container", "click", helloWorld);

< /script >

< div id= "container" >

< p > Kliknij mnie! < /p >

< /div >

< /body >

< /html >

Podstawowe

zastosowanie biblioteki YUI

Biblioteka YUI składa się z wielu zbiorów, z

których wybrane elementy przywołuje się w

miarę potrzeb. Zaleca się, aby biblioteka zo-

stała przywołana zaraz na samym początku

dokumentu html, w sekcji <head> . W tym sa-

mym miejscu poza samymi bibliotekami Java-

Script dostarczanymi przez YUI przywołuje się

wymagane przez YUI biblioteki CSS, bez któ-

rych wielokrotnie nie uzyska się oczekiwanego

efektu działania skryptów.

Biblioteki YUI mają strukturę hierar-

chiczną, co oznacza, że niektóre bibliote-

ki do poprawnego działania wymagają in-

nych bibliotek (zależności). Najważniejsze

z nich, przywoływane w praktycznie wszyst-

kich innych pozostałych bibliotekach, to YUI

Event Utility oraz YUI Dom tworzące YUI

Core . Na Listingu 1 zaprezentowano przy-

kładowe zastosowanie biblioteki YUI Event ,

które pozwoli zrozumieć, w jaki sposób nale-

Tabela 3. Wybrane parametry koniguracyjne panelu

Nazwa Typ

danych

Wartość domyślna Opis

close Boole-

null

Jeśli true , widoczna będzie ikona ukrycia panelu

dragga-

ble

Boole-

true*

Obsługa mechanizmu przeciągnij i upuść

underlay String „shadow”

Rodzaj tła za panelem. Wartość shadow oznacza cień,

inne możliwości to matte - biała ramka lub none - brak.

visible Boole-

true

Jeśli true , panel będzie widoczny

Tabela 2. Specjalne klasy deiniujące szablony siatki

Klasa siatki Proporcje kolumn siatki

.yui-gb

Int null

Pozycja x panelu

Int null

Pozycja y panelu

1/3 - 1/3 - 1/3

Array null

Pozycja x i y panelu

.yui-gc

2/3 - 1/3

ixedcen-

ter

Boole-

false

Jeśli true , panel zostanie automatycznie wyśrodkowany.

.yui-gd

1/3 - 2/3

width Int null Szerokość

height Int null Wysokość

* Może być false, jeśli niezaimplementowano mechanizmu przeciągnij i upuść

.yui-ge

3/4 - 1/4

.yui-gf

1/4 - 3/4

www.lpmagazine.org

Programowanie

Własny CMS na podstawie biblioteki YUI

Opisane powyżej zastosowanie bibliote-

ki yahoo-dom-event ma tą przewagę nad tra-

dycyjną obsługą zdarzeń dostarczaną przez

JavaScript, że istnieje możliwość przypisa-

nia nasłuchu zdarzeń do dowolnego elemen-

tu dokumentu XHTML, który tylko ma swo-

je odzwierciedlenie w strukturze DOM do-

kumentu.

Ponadto możliwa jest dynamiczna zmia-

na rodzaju nasłuchiwanych zdarzeń, a tak-

że nasłuchiwania zdarzeń, które normalnie

nie są obsługiwane w czystym JavaScript.

YUI wprowadza bowiem własne zdarzenia

i funkcje nasłuchu tych zdarzeń. Przedsta-

wione na Listingu 1 zastosowanie bibliote-

ki YAHOO.util.Event polega na dodaniu do

obiektu obsługi zdarzeń. Biblioteka ta dostar-

cza także metodę o odwrotnym skutku – usu-

wającą nasłuch zdarzeń:

YAHOO.util.Event.removeListener("elem

ent", "click", funkcja);

Metoda removeListener wymaga podania

kolejno: nazwy elementu, z którego zostanie

usunięty nasłuch zdarzeń, rodzaj usuwane-

go zdarzenia oraz na koniec funkcję urucha-

mianą po usunięciu nasłuchu. Podobne dzia-

łanie wykazuje metoda purgeElement , która

usuwa nasłuch wszystkich zdarzeń z podane-

go elementu.

Dodatkowo możemy zastrzec, czy nasłuch

zdarzeń ma być usuwany również z elementów

potomnych (argument true ).

Tabela 4. Wybrane parametry koniguracyjne skalowania

Nazwa Typ da-

nych

Wartość

domyślna

Opis

animate

Boolean false

Animacja skalowania. Działa tylko z włączoną opcją proxy.

proxy

Boolean false

Skalowany jest pośrednik odzwierciedlający właściwy

obiekt zamiast niego samego.

autoRatio Boolean none

Gdy „true” gdy w trakcie skalowania wciśnięty jest przycisk

Shift, skalowanie odbywa się ze stałym współczynnikiem

długości do wysokości.

handles

Array ['r',

'b',

'br']

Położenie uchwytów określone pierwszymi literami od an-

gielskich nazw kierunków, tak np. „br” – bottom right, czyli

dół po prawo. Inne możliwości to: 't', 'b', 'r', 'l', 'bl', 'br', 'tl', 'tr'.

YAHOO.util.Event.purgeElement(Element

, "true");

hiddenHan-

dles

Boolean false

Jeśli true, uchwyty skalowania zostaną ukryte. Widoczny

będzie tylko kursor skalowania

Jak wcześniej wspomniałem, możliwe jest

również zdeiniowanie nasłuchu zdarzeń, któ-

re nie są obsługiwane w JavaScript. Takim

zdarzeniem może być dostępność danego ele-

mentu w strukturze DOM, czy zakończenie

ładowania elementu (zdarzenie przydatne np.

przy ładowaniu obrazków o znacznym roz-

miarze). Biblioteka YAHOO.util.Event pozwa-

la również na samodzielne zdeiniowanie wła-

snych zdarzeń.

hover

Boolean false

Jeśli true, uchwyty będą widoczne jedynie, gdy kursor my-

szy będzie nad nim.

maxHeight Number none

Maksymalna wysokość skalowanego obiektu

maxWidth Number none

Maksymalna długość skalowanego obiektu

minHeight Number none

Minimalna wysokość skalowanego obiektu

minWidth Number none

Minimalna długość skalowanego obiektu

status

Boolean false

Jeśli true, pokazuje status skalowania

Tabela 5. Wybrane parametry koniguracyjne podpowiedzi

Nazwa Typ da-

nych

Wartość domyślna Opis

container

String document.body

Określa kontener elementu, wewnątrz którego kontener podpowiedzi powinien być rendrowany

context

String null

Określa element (lub elementy), do których podpowiedź ma być podczepiona

disabled

Boolean false

Określa, czy podpowiedź ma być widoczna, czy też nie

hidedelay

Number 250

Liczba milisekund, po których podpowiedź zostanie ukryta po zdjęciu kursora znad obiektu

showdelay

Number 200

Liczba milisekund, po których pojawi się podpowiedź

text

String null

Treść podpowiedzi

Listing 2. Kod dokumentu o długości 750 pikseli, reprezentowany przez styl o id doc

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" >

< html >

< head >

< meta http-equiv= "Content-Type" content= "text/html; charset=UTF-8" / >

< link rel= "stylesheet" href= "yui/build/reset-fonts-grids/reset-fonts-grids.css" type= "text/css" >

< style type= "text/css" > #doc {background-color: red; border: 1px solid black; height: 100px; margin:

auto;} < /style >

< /head >

< body >

< div id= "doc" > Dokument o długości 750 pikseli, reprezentowany przez styl o id "doc" < /div >

< /body >

< /html >

kwiecień 2009

Programowanie

Własny CMS na podstawie biblioteki YUI

Siatki CSS

Stosując tylko biblioteki CSS dostarczane w ra-

mach YUI możliwe jest proste zarządzanie wy-

glądem strony – pozycjonowaniem poszczegól-

nych jej elementów. Korzystając z bloków <div>

o odpowiednich klasach kaskadowych arkuszy

stylów, buduje się siatki nadające stronie pożą-

dany układ. Opisywana biblioteka daje użytkow-

nikowi do dyspozycji gotowe do użycia makiety,

które można wzajemnie ze sobą łączyć i w pew-

nym stopniu modyikować. Opisywane bibliote-

ki zawarte są w arkuszu reset-fonts-grids.css , a

jego przywołanie wygląda następująco:

width: 600px; . Tyle wystarczy dla określe-

nia wzorca custom-doc . Za resztę – wyśrod-

kowanie bloku, marginesy, zadbają bibliote-

ki YUI .

Listing 3. Siatka CSS układu strony

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/

html4/strict.dtd" >

< html >

< head >

< meta http-equiv= "Content-Type" content= "text/html; charset=UTF-8" / >

< link rel= "stylesheet" href= "yui/build/reset-fonts-grids/reset-fonts-

grids.css" type= "text/css" >

< style >

#hd, #ft, .yui-b{background-color:rgb(244,244,244); border:thin

solid black}

< /style >

< /head >

< body >

< div id= "doc" class= "yui-t1" >

< div id= "hd" >< h1 > Nagłówek < /h1 >< /div >

< div id= "bd" >

< div id= "yui-main" >

< div class= "yui-b" >

< div class= "yui-gc" >

< div class= "yui-u irst" >

Pierwsza kolumna głównego bloku Pierwsza kolumna

głównego bloku Pierwsza kolumna głównego bloku

< /div >

< div class= "yui-u" >

Druga kolumna głównego bloku Druga kolumna głównego

bloku Druga kolumna głównego bloku

< /div >

< div class= "yui-b" >

< div class= "yui-gc" >

< div class= "yui-u irst" >

Pierwsza kolumna głównego bloku Pierwsza kolumna

głównego bloku Pierwsza kolumna głównego bloku

< /div >

< div class= "yui-u" >

Druga kolumna głównego bloku Druga kolumna głównego

bloku Druga kolumna głównego bloku

< /div >

< div class= "yui-b" >

< ul >

< li > Panel nawigacyjny < /li >< li > Panel nawigacyjny < /

li >< li > Panel nawigacyjny < /li >

< /ul >

< /div >

< div id= "ft" > Stopka < /div >

< /div >

< /body >

< /html >

build/reset-fonts-grids/reset-fonts-

grids.css" type="text/css">

Podstawową właściwością układu strony, którą

możemy sterować z pomocą CSS pochodzących

z YUI jest jej długość (a właściwie szerokość).

W celu określenia długości strony w głównym

jej bloku (utworzonym za pomocą znaczników

<div> ) należy użyć jednego z identyikatorów:

• #doc – dla strony o długości 750 pikseli;

• #doc2 – dla strony o długości 950 pikseli;

• #doc3 – dla strony zajmującej 100% dłu-

gości okienka przeglądarki;

• #doc4 – dla strony o długości 974 pikseli.

Przykład budowy strony o długości 750 pikseli

prezentuje Listing 2.

W przypadku zastosowania wzorca dłu-

gości strony doc3 (100% długości) dewelope-

rzy YUI dodali po obu stronach 10-pikselowe

marginesy w celu uniknięcia zlewania się tre-

ści strony z ramką okienka przeglądarki. Jeśli

nie podoba się nam to rozwiązanie, należy usta-

wić automatyczne marginesy dla tego elemen-

tu, wpisując do deinicji stylu następujący kod:

#doc3 {margin:auto;}

Jeśli żaden z wzorców długości strony nam nie

odpowiada, zawsze można posłużyć się wzorcem

#custom-doc , dla którego w arkuszu stylu nale-

ży zdeiniować długość w jednostce em . Dla przy-

pomnienia dodam, iż jednostka ta jest niczym in-

nym, jak powieleniem wielkości ustawionej przez

font-size . Krótko mówiąc 1em to jedna długość

czcionki. Wracając jednak do tematu... Przykła-

dowy wpis w arkuszu stylów modyikujący cu-

stom doc będzie wyglądał następująco:

# custom-doc {width: 60em}

Ponadto, co jednak nie jest zalecane, można

określić minimalną długość strony, np. min-

www.lpmagazine.org

Programowanie

Własny CMS na podstawie biblioteki YUI

Większość stron internetowych ma budo-

wę mniej więcej przypominającą tą ze schema-

tu na Rysunku 1, czyli składa się z trzech podsta-

wowych sekcji – nagłówka, body i stopki. Każ-

da z nich ma swoje odzwierciedlenie w CSS do-

starczanych przez YUI . Odpowiednio są to: #hd ,

#bd , #ft . Dodatkowe właściwości tych blo-

ków mogą być oczywiście deiniowane w ar-

kuszu stylów.

Główny blok strony internetowej – repre-

zentujący sekcję body , może być podzielony

na dodatkowe bloki. Również i w tym przypad-

ku biblioteki YUI dostarczają gotowe do użycia

szablony, które w różny sposób deiniują poło-

żenie kolumny po lewej lub po prawej stronie

głównego bloku. Zastosowanie wybranej for-

my układu bloków polega na przywołaniu wła-

ściwej klasy CSS w głównym bloku dokumentu

HTML (obok identyikatora #doc , #doc1 , itd.).

Charakterystykę dostępnych wzorców przedsta-

wia Tabela 1. Dalsze działania polegają na budo-

waniu prawidłowej struktury bloków sekcji bo-

dy . Główny blok oznaczony jest identyikatorem

#yui-main . Dodatkowy blok, jak i inne bloki,

również te będące składnikami bloku głównego

przypisane są do klasy CSS . yui-b (literka b po-

chodzi od słowa block ).

To jednak nie koniec możliwości ofero-

wanych przez biblioteki CSS dostarczanych

w ramach YUI . Każdy z bloków można dodat-

kowo podzielić na kolumny, które przypomi-

nają szpalty w gazecie. Blok, dzielony na ko-

lummny, musi być elementem potomnym blo-

ku klasy .yui-b oraz samemu należeć do kla-

sy .yui-g (literka g pochodzi od słowa grid ).

Blok ten zawiera elementy potomne – blo-

ki o klasie .yui-u (literka u pochodzi od sło-

wa unit ). Poprzez zastosowanie pseudo-selek-

tora klasy irst możliwe jest wskazanie, któ-

ry z bloków siatki (o klasie .yui-u ) występuje

jako pierwszy. W przedstawionym schemacie,

siatka z klasy .yui-g , zawsze dzielona jest na

dwie części. Jeśli będziemy dodawali kolejne

bloki potomne klasy .yui-u , to powstanie for-

ma tabeli (siatki) o dwóch kolumnach i liczbie

wierszy wynikającej z liczby elementów po-

tomnych bloku klasy .yui-g . Jeśli chcemy

naszą siatkę podzielić w inny sposób, na przy-

kład na trzy kolumny, lub dwie kolumny o in-

nych proporcjach – należy zastosować spe-

cjalne szablony, które opisane zostały w Tabe-

li 2. Tak na przykład klasa .yui-gc dzieli blok

na dwie kolumny o proporcjach 2/3 i 1/3. Roz-

wiązanie takie, wraz z panelem po lewej stro-

nie, ilustruje przykład na Listingu 3.

Możliwe jest łączenie wielu bloków zwie-

rających siatki tworząc kombinacje trzech,

czterech lub więcej kolumn. Aby osiągnąć ta-

ki efekt, należy w blokach klasy .yui-u za-

gnieździć bloki siatki klasy .yui-g (lub innej

specjalnej klasy, np. .yui-gc ). Tworzenie ko-

lejnych wierszy jest równie proste – polega na

stosowaniu dodatkowych bloków klasy .yui-b

będących dziećmi bloku np. .yui-main .

Na sam koniec rozdziału poświęconego

metodom pozycjonowania i siatkom w YUI po-

wiem, że na stronie internetowej projektu, pod

adresem http://developer.yahoo.com/yui/grids/

builder/, znajduje się doskonały interfejs gra-

iczny pozwalający na łatwe budowanie sche-

matu stron. Z jego pomocą, za pomocą paru

kliknięć, będzie można stworzyć najbardziej

skomplikowany układ. Później zaś, wykorzy-

stując wiedzę zawartą w powyższym rozdzia-

le – będzie można ręcznie zmodyikować stwo-

rzony wzorzec.

Tabela 6. Wybrane parametry koniguracyjne zakładki

Name Type Default Description

active Boolean

false

Jeśli true – zakładka będzie aktywna

content String

null

Zawartość zakładki

contentEl HTMLElement null

Element zawierający treść zakładki

disabled Boolean

false

Jeśli true – zakładka nie może być wyświetlona

label

String

null

Etykieta zakładki

Tworzenie modułów

Wielką siłą bibliotek YUI jest szeroki zakres kon-

tenerów, które można w łatwy sposób umiesz-

czać na stronie internetowej. Kontenery są to mo-

duły (bloki) zawierające jakąś treść. Za konte-

ner można uznać znane wszystkim okienko typu

alert , czy też panele na stronach internetowych.

Biblioteki YUI dostarczają narzędzia do budowy

różnorakich tego typu modułów, paneli.

Najprostszą wersją kontenera jest moduł,

czyli wydzielony blok na stronie internetowej,

który w swej strukturze zawierać może sekcje

charakterystyczne dla dokumentu HTML, czyli

nagłówek, body oraz stopkę. Każda z tych czę-

ści ma odzwierciedlenie w reprezentującym ją

bloku <div> o odpowiednich klasach, kolejno:

.hd , .bd oraz .ft .

Zanim zabierzemy się do tworzenia modułu,

należy pamiętać o uprzednim załadowaniu odpo-

wiednich bibliotek JavaScript i CSS pochodzą-

cych z YUI . W przypadku modułu, a także więk-

szości innych kontenerów są to biblioteki fonts-

min.css , container.css oraz container-min.js . Jeśli

nasz kontener ma dodatkowo obsługiwać zdarze-

nia, należy również załadować bibliotekę yahoo-

dom-event.js . Podstawową sprawą przy posługi-

waniu się większością bibliotek stylów YUI jest

przypisanie sekcji body dokumentu nadrzęd-

labelEl HTMLElement null

Element zawierający etykietę zakładki

��

Rysunek 1. Zasada stosowania klas przy budowaniu układu strony z zastosowaniem bibliotek YUI

kwiecień 2009

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika: