podstawy tworzenia modułów

Transkrypt

Serwery i aplikacje WWW
 Wprowadzenie do CMS Made Simple
 Podstawy tworzenia modułów – tworzenie plików akcji
 Proste operacje na obrazach w Javascript
 Przegląd frameworków Javascript
Paweł Ochota
WPROWADZENIE DO CMS MADE SIMPLE
Wygląd po instalacji:
CMS Made Simple (CMSMS) jest otwartym (licencja GPL) systemem
zarządzania treścią, umożliwiającym tworzenie profesjonalnych witryn WWW
zgodnych z najnowszymi standardami sieciowymi oraz ułatwia dodawanie
nowych treści i zarządzanie nimi.
Został zaprojektowany z użyciem PHP, frameworka do baz danych ADODB
a także szablonów Smarty, które umożliwiają proste tworzenie
modułów wielojęzycznych i oddzielenie warstwy kodu od wyglądu witryny.
Dodatkowo wykorzystuje on Ajax i frameworki takie jak jQuery.
Panel administracyjny:
CMSMS jest coraz częściej wybierany przez małe firmy i deweloperów
ze względu na prostotę użytkowania panelu administracyjnego, łatwe
tworzenie nowych modułów i szablonów, możliwość włączenia tzw.
„przyjaznych linków” a także dużą bazę gotowych rozszerzeń, która ciągle się
rozrasta.
Ostatnia stabilna wersja, demo systemu, dokumentacja, forum
i pliki do pobrania są dostępne pod adresem:
http://www.cmsmadesimple.org/
Paweł Ochota
Panel administracyjny
dostępny z poziomu adresu witryny, np. www.example.com/admin
Zakładki w panelu:
- CMS
- Treść
- Wygląd
- Użytkownicy i grupy
- Rozszerzenia
- Administracja serwisu
- Moje preferencje
Dynamiczne powiadomienia
Dodatkowo:
- Pomoc
- Powiadomienia
- Podgląd witryny
- Wyloguj
Zakładka CMS:
- Home (start)
- Podgląd witryny
- Wyloguj
Pomoc dla
CMS MS
Paweł Ochota
Zakładki do
zarządzania
systemem
Dodawanie treści
Dodawanie nowych pozycji w menu naszej witryny jest w CMSMS bardzo proste. Wystarczy
wybrać w panelu zakładkę „Treść” a w niej pozycję „Strony”. Przykładowy widok menu:
- Strona
- Szablon
- Typ
- Właściciel
- Aktywny
- Domyślny
- Przesuń
- nazwa elementu w menu
- wybór szablonu, każdy podelement w menu może mieć inny szablon
- wyróżniamy m.in.: Treść, Nagłówek sekcji, Separator, Zewnętrzny link
- pokazuje kto jest twórcą elementu
- umożliwia wyłączenie/włączenie elementu w menu
- element, który pojawi się przy pierwszym wyświetleniu strony, strona główna
- zmiana kolejności elementów w menu
Dodatkowo: Zobacz, Kopiuj, Edytuj, Usuń, Zaznaczenie
Paweł Ochota
Dodawanie treści
Tworząc nowy element mamy możliwość używania edytora WYSIWYG zamiast kodu HTML,
co ułatwia dynamiczne tworzenie układów tekstów wraz z obrazkami, odnośnikami, tabelami
itp. Dodawanie i edycja treści są zatem bardzo podobne do edycji dokumentów w pakietach
biurowych i równie proste.
Wybór języka
dla treści
Czy element menu ma
być częścią listy
rozwijanej
Zamiast edytora
WYSIWYG można
używać kodu HTML
Paweł Ochota
Wybór szablonu witryny
CMSMS daje nam opcje dynamicznej zmiany szablonu witryny a także modyfikacji obecnego
wyglądu za pomocą kodu HTML i arkuszy styli CSS. Umożliwia nam to zakładka „Wygląd”.
Do jednego szablonu możemy podpiąć wiele styli, zmieniając np. wygląd menu z poziomego
na pionowy. Mamy również możliwość włączenia do szablonu specjalnych elementów ujętych
w nawiasy klamrowe { i } takich jak {content} - dodający treść z menu, {menu} – wstawia menu
w określoną część witryny czy też {footer} – dodający stopkę znajdującą się w „Globalnych
blokach HTML”.
Paweł Ochota
Użytkownicy i grupy
Niewątpliwą zaletą CMS Made Simple jest możliwość podziału obowiązków w systemie.
Tworząc nowych użytkowników możemy przydzielić ich do jednej z trzech grup:
- ma prawa do dodawania/usuwania użytkowników, zmieniania treści, edytowania
szablonów i przede wszystkim ma dostęp do globalnych ustawień strony, wyboru
języka, zmian znaczników meta itp..
- Editor
- może jedynie dodawać i edytować treść na stronie
- Designer - ma możliwość edycji szablonów, dodawania styli CSS itp..
- Admin
Każdą grupę można edytować dodając lub odejmując jej poszczególne prawa jakie mogą
wykonywać. Istnieje również możliwość dodania własnej grupy i przypisania jej dowolnych
praw. Można w ten sposób utworzyć grupę, która będzie np. „pomostem” między Editorem a
Designerem.
Paweł Ochota
Moduły
CMSMS jest oparty o rozszerzenia zwane modułami. Sam system bazowy byłby bardzo
ograniczony bez nich, ponieważ modułami są np. menu czy wyszukiwarka a nawet cały
system szablonów. W zakładce „Rozszerzenia” możemy sprawdzić zainstalowane w systemie
moduły przechodząc do elementu „Moduły”:
Mamy tutaj możliwość odinstalowania/instalowania modułów, zmiany uprawnień każdego z
nich, eksport do pliku XML a także możliwość instalacji modułu z takiego pliku.
Paweł Ochota
Menadżer modułów
Każdy moduł możemy zainstalować ściągając go uprzednio ze strony projektu (lub tworząc
własny) i wrzucając go za pomocą klienta FTP do katalogu „modules” na serwerze. Warto
jednak sprawdzić czy poszukiwanego modułu nie znajdziemy w menadżerze modułów. To
wygodny sposób na rozszerzanie możliwości CMSMS. „Menadżer modułów” znajdziemy w
zakładce „Rozszerzenia”, całość przypomina typowe repozytorium z pakietami:
Paweł Ochota
Ustawienia globalne
W zakładce „Administracja serwisu” mamy możliwość ustawienia wyglądu i języka panelu
administracyjnego. To również wygodne miejsce na zadeklarowanie znaczników <meta>
witryny czy włączenia dodatkowych bibliotek Javascript. Mamy tutaj również możliwość
sprawdzenia opcji serwera, weryfikacji zainstalowanego systemu oraz dziennik administratora,
który zapisuje każdą akcję wykonaną w panelu administracyjnym.
Paweł Ochota
PODSTAWY TWORZENIA MODUŁÓW
 Klasyfikacja modułów
 Prosty moduł typu plug-in: „Hello World!”
 Tworzenie plików akcji
Paweł Ochota
Możliwości
• Wielojęzyczność udostępnianych treści
• Rozszerzanie funkcjonalności systemu bazowego
• Rozszerzanie funkcjonalności innych modułów
• Reagowanie na zdarzenia w systemie
• Wprowadzanie infrastruktury dla przyszłych modułów
Klasyfikacja
Wyróżniamy moduły typu:
• Plug-ins
• Content
• Infrastructure
• Administrative
• Event Handlers
• Filters
- dodatki dla FrontEndu np. Search, News
- wpływające na treść główną strony, np. Cataloger
- mające wpływ na inne moduły np. nuSOAP
- moduły administracyjne dla panelu np. ThemeManager
- reagujące na zdarzenia
- rozszerzające inne moduły
Paweł Ochota
Prosty moduł typu plug-in
1. Utwórz katalog na serwerze: $CMSROOT/modules/HelloWorld
Aby utworzyć własny moduł musimy utworzyć na serwerze w miejscu gdzie zainstalowaliśmy
CMSMS w katalogu „modules” folder, o nazwie będącej nazwą naszego modułu. Zwyczajowo
rozpoczyna się go dużą literą, dla naszego przykładu nazwiemy go HelloWorld.
2. W katalogu HelloWorld utwórz plik: HelloWorld.module.php
Tworzymy plik główny dla modułu. Pierwszy człon nazwy musi być identyczny jak nazwa
katalogu w którym się on znajduje. Następnie kończymy go słowem „module” z rozszerzeniem
.php, pliki modułów są skryptami PHP wzbogaconymi o dodatkowe klasy systemu, szablony
Smarty i funkcje biblioteki ADODB.
WAŻNE!
Plik musi mieć kodowanie zgodne z kodowaniem całej witryny (można to sprawdzić w
Ustawieniach globalnych CMSa), domyślnie jest to UTF-8.
Paweł Ochota
3. Wpisz do pliku HelloWorld.module.php następujący kod:
<?php
class HelloWorld extends CMSModule {
function GetName() {
return „HelloWorld”;
}
function IsPluginModule() {
return true;
}
function DoAction($action, $id, $params, $returnid = -1) {
echo ‘Hello World!’;
}
}
?>
Tworzymy więc klasę o nazwie identycznej jak nazwa modułu, dziedziczy ona po głównej
klasie CMSMS o nazwie CMSModule, dzięki czemu mamy możliwość wykorzystania gotowych
już metod ułatwiających sterowanie modułem. Niezbędne rzeczy do zadeklarowania przez nas
to metoda GetName(), która zwróci nazwę modułu w menadżerze w panelu, IsPluginModule w
której zaznaczamy czy dany moduł ma być typu Plug-in czy nie, oraz najważniejsza
DoAction(), zawierająca to co de facto chcemy żeby plugin robił. W naszym wypadku, żeby
wyświetlił ciąg: „Hello World!”
Paweł Ochota
4. W panelu administracyjnym przejdź do zakładki „Rozszerzenia” i zaznacz „Moduły”.
Zainstaluj moduł „HelloWorld”.
5. Moduł należy wpleść w szablon lub w treść elementu w menu. Wykorzystamy drugi
sposób. Przechodzimy do zakładki „Treść” w niej w „Strony” i dodajemy nowy element
menu. W treści wpisujemy: {cms_module module='HelloWorld'}.
Paweł Ochota
6. Zapisujemy nową treść i testujemy nasz moduł klikając na podgląd strony w panelu.
W domyślnym szablonie będzie to wyglądało następująco:
Nasz plug-in jest już gotowy. Możemy w nim używać nie tylko kodu PHP, za pomocą instrukcji
echo można wysyłać dowolny inny kod, czy to HTML czy Javascript. Zostanie to pokazane
przy tworzeniu plików akcji.
Paweł Ochota
Plug-iny są najprostszymi modułami jakie możemy utworzyć w CMS Made Simple, można je
rozbudowywać do woli, jednak już na pierwszy rzut oka można stwierdzić, że duże moduły nie
sprawdzą się w postaci pluginów. Pojawiają się następujące problemy:
- Brak wsparcia dla innych języków
- Duży kod ciężko pielęgnować, potrzeba separacji kodu na akcje i metody
- Brak wyraźnego oddzielenia między warstwą kodu a wyglądem
- Brak możliwości aktualizacji modułu
- Brak jakiegokolwiek powiązania z bazą danych
W dalszej części skupimy się na tworzeniu plików akcji, które pozwolą nam rozdzielić zadania,
które będzie wykonywał moduł. Odpowiedzi na pozostałe zagadnienia można znaleźć na
głównej stronie CMS Made Simple: http://www.cmsmadesimple.org/
Paweł Ochota
Struktura modułu
Pliki modułu.
Rozpoznawane są człony:
- method
- action
Główny katalog
instalacyjny
Katalog na
serwerze
Pliki szablonów
Smarty
Katalog
modułu
Pliki językowe
Paweł Ochota
Tworzenie plików akcji
CMSMS umożliwia rozdzielenie zadań w module poprzez zastosowanie plików akcji. Plik akcji
nazywamy wg poniższego schematu:
action.nazwa_akcji.php
Plik akcji jest skryptem PHP, który zawsze na początku musi zawierać instrukcję warunkową:
if( !isset($gCms) ) exit;
Sprawdza ona czy istnieje obiekt $gCms, który tworzony jest zazwyczaj w pliku
method.install.php modułu. Jeżeli go nie ma to skrypt się nie wykona.
Poniżej pokazano prosty plik akcji wraz z kodem HTML (tak samo można z Javascript):
<?php
if( !isset($gCms) ) exit;
echo ‘
<strong>Hello World!</strong>
<br />
<em>Hello \‘World\’ po raz drugi</em>’;
?>
Kod HTML i Javascript umieszczamy instrukcją echo w apostrofach (pamiętajmy o znaku „\”
gdy chcemy wyświetlić apostrof!).
Paweł Ochota
PROSTE OPERACJE NA OBRAZACH
W JAVASCRIPT
 Wczytywanie obrazu – obiekty typu Image
 Znacznik <canvas>
 Przykład: Skala szarości
 Przykład: Negatyw
Paweł Ochota
PROSTE OPERACJE NA OBRAZACH W JAVASCRIPT
Klasa Image
Pozwala nam tworzyć obiekty typu Image w następujący sposób:
var image = new Image([szerokość],[wysokość]);
Gdzie szerokość i wysokość to parametry opcjonalne. Właściwości dla obiektów typu Image:
- src
- źródło, ścieżka do pliku z obrazem
- border
- ustawia obramowanie (wartość w pikselach)
- width
- szerokość obrazu
- height
- wysokość obrazu
- name
- nazwa obrazu zdefiniowana przez atrybut „name”
- vspace
- odstępy pionowe dookoła elementu
- hspace
- odstępy poziome dookoła elementu
- lowsrc
- ścieżka do pliku z miniaturką obrazu
- complete - wartość boolean, czy obraz został poprawnie załadowany
Pobierając elementy będące znacznikami <img> nie musimy tworzyć nowego obiektu typu
Image. Javascript jest językiem dynamicznie typowanym, poniższa zmienna będzie typu
Image:
var image = document.getElementsByTagName('img');
Paweł Ochota
Klasa Image - przykład
Kod Javascript:
<script type="text/javascript">
function wczytaj() {
var image = document.getElementById('obraz');
image.src = "zima.jpg";
image.width = 100;
image.height = 70;
image.border = 2;
}
</script>
Kod HTML:
<body onload="wczytaj();">
<div style="width: 300px; height: 200px;">
<img id="obraz" src="" alt="" />
</div>
</body>
Jest to bardzo prosty przykład pokazujący w jaki sposób Javascript może operować na
obrazach.
Paweł Ochota
Klasa Image - problem
Pojawił się poważny problem. Klasa Image nie posiada właściwości lub metod mogących
manipulować pikselami obrazu. Nie można zatem wykonywać operacji pobrania wartości
piksela czy też zmiany tej wartości. Sam Javascript nie poradzi sobie z tym problemem.
Z pomocą przychodzi HTML5
<canvas> jest znacznikiem należącym do nowej wersji języka HTML oznaczonej numerem 5.
Tworzy on wirtualne płótno na którym można szybko wprowadzać wektorową grafikę 2D. Za
pomocą Javascriptu można dynamicznie rysować na tym płótnie. Nadaje się on również do
tworzenia przyjaznych dla oka ankiet.
Uwaga!
Element <canvas> nie jest intepretowany przez przeglądarkę Internet Explorer w wersjach
wcześniejszych od 9. No cóż…
Paweł Ochota
Canvas – prosty przykład
<html>
<head>
<script type="application/x-javascript">
function draw() {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 50, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 50, 50);
}
</script>
</head>
<body onload="draw()">
<canvas id="canvas" width="300" height="300"></canvas>
</body>
</html>
Rezultat:
Paweł Ochota
Canvas
Element <canvas> umieszczamy pomiędzy znacznikami <body></body> witryny. Dla
przeglądarek nie obsługujących tego znacznika warto zostawić stosowną informację:
<canvas id="myCanvas">
Twoja przeglądarka nie obsługuje canvas.
</canvas>
Należy także podać wielkość kanwy za pomocą width i height (można to zrobić w Javascript).
Aby operować na <canvas> musimy wykorzystać Javascript. W sekcji <script> pobieramy
element:
var canvas = document.getElementById('myCanvas');
Potrzebny jest jeszcze dostęp do kontekstu bitmapy, uzyskamy go wykorzystując metodę
getContext():
var ctx = canvas.getContext('2d');
Narysujmy teraz prostokąt. Potrzebne będzie zdefiniowanie jego koloru za pomocą fillStyle() i
późniejsze wyrysowanie go za pomocą metody fillRect():
ctx.fillStyle = 'rgb(255,0,0)';
ctx.fillRect(0,0,200,100);
Podajemy w postaci trójki kolorów RGB. Można
skorzystać z funkcji rgba() wtedy należy podać
jeszcze 4 parametr dla kanału alpha.
wysokość
X
Y
szerokość
Paweł Ochota
Canvas
Możemy utworzyć prostokąt za pomocą samego obramowania, metody strokeStyle() i
strokeRect() posiadają identyczne parametry jak poprzednie:
ctx.strokeStyle = 'rgb(255,0,0)';
ctx.strokeRect(0,0,200,100);
Aby wyczyścić prostokąt z naszej kanwy korzystamy z metody clearRect():
ctx.clearRect(0,0,200,100);
Inne metody pomocne przy rysowaniu obiektów:
beginPath()
- rozpoczyna nową ścieżkę
closePath()
- zamyka ścieżkę
moveTo(x,y)
- przejście do punktu o podanych współrzędnych
fill()
- wypełnienie ścieżki kolorem zdefiniowanym w fillStyle()
stroke()
- obrys ścieżki kolorem zdefiniowanym w strokeStyle()
lineTo(x,y)
- rysuje prostą do punktu x,y z aktualnego miejsca
arc(x,y,radius,startAngle,endAngle,anticlockwise)
bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)
- rysuje łuk
- krzywa beziera
Paweł Ochota
Canvas – manipulowanie pikselami
Canvas umożliwia rysowanie obrazów klasy Image() tworzonych dynamicznie bądź też
pobieranych ze znacznika <img>. Jest to potrzebne gdy chcemy manipulować pikselami. Aby
narysować obraz korzystamy z metody drawImage():
ctx.drawImage(image,0,0);
obraz
Y
X
lub innej formy:
ctx.drawImage(image,0,0,width,height);
szerokość
wysokość
Mając już narysowany obraz na kanwie możemy pobrać tablicę pikseli metodą getImageData():
var imgd = ctx.getImageData(0,0,width,height);
X
Y
szerokość
wysokość
Wartości pikseli są umieszczone we właściwości data:
var pix = imgd.data;
Gdy wykonamy jakieś operacje na pikselach to wstawiamy je ponownie metodą putImageData():
ctx.putImageData(imgd, 0, 0);
X
Y
Paweł Ochota
Przykład: Skala szarości
Najprostszy sposób na uzyskanie zdjęcia w odcieniach szarości jest zsumowanie składowych
RGB piksela i podzieleniu ich przez 3:
Grayscale = (R + G + B)/3
Wiemy już, że metoda getImageData() zwraca nam tablicę pikseli a właściwość data daje
nam dostęp do ich wartości. Możemy wykorzystać pętle for do poruszania się po tej tablicy:
for (var i = 0, n
pix[i] =
pix[i+1]
pix[i+2]
pix[i+3]
}
= pix.length;
wartosc;
= wartosc;
= wartosc;
= wartosc;
i <
//
//
//
//
n; i += 4) {
R
G
B
Alpha
W pętli poruszamy się co 4 indeksy, ponieważ wydzielono to w ten sposób, że każdy indeks
jest inną częścią piksela. Mamy już wystarczająco dużo wiedzy by uzyskać taki efekt:
Paweł Ochota
Javascript:
function grayscale(image) {
image.width = "200";
image.height = "200";
canvas.width = image.width;
canvas.height = image.height;
ctx.drawImage(image,0,0,image.width,image.height);
var imgd = ctx.getImageData(0, 0, image.width, image.height);
for (var i = 0, n = pix.length; i < n; i += 4) {
var avg = (pix[i] + pix[i + 1] + pix[i + 2]) / 3;
pix[i] = avg;
pix[i+1] = avg;
pix[i+2] = avg;
}
}
</script>
Paweł Ochota
HTML:
<body>
<img id="lena" src="lena.jpg" onload="grayscale(this);" />
Twoja przeglądarka nie obsługuje elementu canvas.
</canvas>
</body>
Wynik:
Paweł Ochota
Przykład: Negatyw
Javascript:
function negative(image) {
image.width = "200";
image.height = "200";
canvas.width = image.width;
canvas.height = image.height;
ctx.drawImage(image,0,0,image.width,image.height);
var imgd = ctx.getImageData(0, 0, image.width, image.height);
for (var i = 0, n = pix.length; i < n; i += 4) {
pix[i] = 255 - pix[i];
pix[i+1] = 255 - pix[i+1];
pix[i+2] = 255 - pix[i+2];
}
}
</script>
Paweł Ochota
Przykład: Negatyw
HTML:
<body>
<img id="lena" src="lena.jpg" onload="negative(this);" />
Twoja przeglądarka nie obsługuje elementu canvas.
</canvas>
</body>
Wynik:
Paweł Ochota
PRZEGLĄD FRAMEWORKÓW
JAVASCRIPT
 jQuery
 Prototype
 MooTools
 Dojo
 EXT JS
 Inne
„Framework - (rama projektowa, szkielet) to w programowaniu struktura wspomagająca
tworzenie, rozwój i testowanie powstającej aplikacji. Z reguły na framework składają się
programy wspomagające, biblioteki kodu źródłowego i inne podobne narzędzia.”
źródło: wikipedia.pl
Paweł Ochota
PRZEGLĄD FRAMEWORKÓW JAVASCRIPT
jQuery
„lekka biblioteka programistyczna dla języka JavaScript, ułatwiająca korzystanie
z JavaScript (w tym manipulację drzewem DOM). Kosztem niewielkiego spadku wydajności w
stosunku do profesjonalnie napisanego kodu w niewspomaganym JavaScripcie pozwala
osiągnąć interesujące efekty animacji, dodać dynamiczne zmiany strony, wykonać
zapytania AJAX. Większość pluginów i skryptów opartych o jQuery działa na stronach nie
wymagając zmian w kodzie HTML (np. zamienia klasyczne galerie złożone z miniatur
linkujących do obrazków w dynamiczną galerię). Wszystkie efekty osiągnięte z pomocą jQuery
można osiągnąć również bez jej użycia. Jednak kod okazuje się nieporównywalnie dłuższy i
bardziej skomplikowany.
jQuery pozwala w wygodny i zrozumiały sposób korzystać z następujących funkcjonalności:
• Selektory - umożliwiają wybranie dowolnego podzbioru węzłów modelu DOM
• Atrybuty - jQuery pozwala przetwarzać atrybuty węzłów dokumentu
• Manipulowanie modelem DOM
• Zmiana i przypisywanie stylu do elementów
• Rozbudowana obsługa zdarzeń, możliwość definiowania własnych
• Efekty - animacje
• AJAX - prosty interfejs realizujący asynchroniczne zapytania”
Paweł Ochota
jQuery - przykład
Javascript:
window.onload = function() {
var btn = document.getElementsByTagName('button')[0];
btn.onclick = klik;
function klik() {
alert('Witaj, świecie!');
}
}
jQuery:
$(document).ready(function() {
$('button').click(function(){
alert('Witaj, świecie!');});
});
HTML:
<body>
<button>Klik!</button>
</body>
Paweł Ochota
Prototype
„Prototype JavaScript Framework – biblioteka programistyczna napisana w języku JavaScript
przez Sama Stephensona. Jest zaimplementowana w jednym pliku najczęściej nazywanym
prototype.js. Prototype jest dystrybuowany samodzielnie, jak i z takimi projektami jak Ruby on
Rails czy script.aculo.us
$()
Funkcja dolara jest używana jako skrót do metody getElementById. By odwołać się do obiektu
DOM w stronie HTML, zwykle używa się konstrukcji:
document.getElementById("id_elementu").style.color = "#ffffff";
Funkcja $() zmniejsza kod do niniejszej postaci:
$("id_elementu").setStyle({color: '#ffffff'});
$F()
Zwraca wartość pola formularza. Na przykład dla elementu text zwróci wartość pola.
$F("id_elementu_formularza")
$$()
Funkcja podwójnego dolara jest silnikiem selektorów CSS. Można używać takich samych
selektorów jakich się używa w arkuszu stylów. Na przykład, jeśli chcemy się odwołać do
znacznika <a> o klasie pulsate, można użyć polecenia:
$$("a.pulsate")
Funkcja zwróci kolekcję elementów.”
Paweł Ochota
Prototype - przykład
var win = new Window({className: "dialog", width:200, height:100,
zIndex: 100, resizable: true, title: "Sample window",
showEffect:Effect.BlindDown, hideEffect: Effect.SwitchOff,
draggable:true, wiredDrag: true})
win.getContent().innerHTML= "<div style='padding:10px'> Lorem ipsum
dolor sit amet...</div>"
win.setStatusBar("Status bar info");
win.showCenter();
Paweł Ochota
MooTools
„MooTools – biblioteka JavaScript składająca się z modułów. Głównym plikiem, który stanowi
jądro frameworka MooTools, jest plik core.js. Pozostałe biblioteki są opcjonalne.
MooTools składa się z wielu modułów. Modułowa budowa pozwala użytkownikom pobrać tylko
części biblioteki, które zamierzają wykorzystać. Moduły te można podzielić następująco:
Core – zbiór funkcji użytkowych, niezbędnych dla pozostałych modułów,
Class – podstawowa biblioteka do tworzenia klas,
Natives – klasy natywne,
Element – obsługa elementów struktury DOM,
Effects – zaawansowane efekty API do animowania elementów,
Remote – narzędzia do obsługi XMLHttpRequest, ciasteczek i JSON,
Window – funkcje obsługi okna.
Paweł Ochota
MooTools - przykład
Javascript:
window.onload = klik;
function klik() {
alert('Witaj, świecie!');
}
MooTools:
window.addEvent('domready', init);<br>
function init() {<br>
alert(„Witaj, świecie!");<br>
}
Paweł Ochota
Dojo
„Jedną z bibliotek programistycznych pozwalających na wydajniejsze wykorzystanie języka
JavaScript w tworzeniu aplikacji sieciowych jest Dojo Toolkit. Wyróżnia się ona dużym
naciskiem położonym na funkcje pozwalające na budowę atrakcyjnych interfejsów
użytkownika. Nie oznacza to bynajmniej, że Dojo nie posiada żadnych innych zastosowań.
Biblioteka oferuje też bogaty zestaw narzędzi służących do uzyskiwania dostępu do danych,
ich wizualizacji, a także do obsługi zdarzeń.
Architektura Dojo
Biblioteka Dojo Toolkit składa się z kilku osobnych komponentów. Obok zestawu
podstawowych funkcji, stanowiących trzon Dojo, są nimi również Dijit, DojoX, a także
dodatkowe narzędzia.
Dijit to pakiet widgetów ułatwiających tworzenie interfejsów graficznych. Dzięki niemu
interaktywną stronę internetową można zbudować z gotowych modułów, w razie potrzeby
tworząc własne lub rozwijając istniejące. Z kolei DojoX to kolekcja niewielkich,
wyspecjalizowanych projektów rozwijanych w ramach Dojo.”
źródło: webhosting.pl
Paweł Ochota
Dojo - przykład
//The RadioButton widget is contained in the CheckBox file
dojo.require("dijit.form.CheckBox");
dojo.require("dojo.parser");
</script>
<p>
<span>Radio group #1:</span>
<input dojoType="dijit.form.RadioButton" type="radio" name="g1"
id="g1rb1" value="news">
<label for="g1rb1">news</label>
id="g1rb2" value="talk" checked="checked"/>
<label for="g1rb2">talk</label>
id="g1rb3" value="weather" disabled="disabled"/>
<label for="g1rb3">weather</label>
</p>
Paweł Ochota
EXT JS
„Został przygotowany jako narzędzie do tworzenia interfejsów dla wszelakich systemów
internetowych. W mniejszym stopniu przyda się on podczas tworzenia klasycznych stron
internetowych. Jego domeną są właśnie systemy - rozmaite panele administracyjne, CMS-y
oraz aplikacje internetowe. Wykorzystanie w nich Ext JS może okazać się strzałem w
dziesiątkę. Użytkownicy pokochają wygląd dostarczany przez framework, nawiązujący
sposobem obsługi do standardowych aplikacji desktopowych.
Dla webmasterów tworzących programy w modelu MVC jest to też dobry sposób na
oddzielenie warstwy prezentacji od warstwy logiki biznesowej. Ext JS zajmuje się wyłącznie
wizualizacją danych, podczas gdy właściwe działania realizowane są w tle, po stronie serwera.
Ext JS potrafi na bieżąco komunikować się z serwerem, bez przeładowywania całej strony,
wykorzystując do tego celu wbudowaną implementację XML oraz AJAX-a. Jest też niezależny
od platformy systemowej dostępnej na serwerze i od wykorzystywanego języka
programowania.”
źródło: internetmaker.pl
Paweł Ochota
EXT JS - przykład
Możliwości tego frameworka są ogromne, kod tego WebOSa nie zmieścił się na slajdzie ;)
Paweł Ochota
Inne
„Biblioteka script.aculo.us – jest udostępniana na Licencji X11, a bazą dla tej biblioteki jest
Prototype JavaScript Framework, więc często są one spotykane razem. Aculo.us rozszerza
Prototype JS o animacje oraz różne efekty wizualne, czy też o elementy interfejsu użytkownika
na bazie obiektowego modelu dokumentu DOM.
jQuery UI - jest rozszerzeniem biblioteki jQuery o bogaty zestaw komponentów graficznych i
widgetów (np.: pobieranie daty i kolorów, drag&drop, zakładki, paski postępu, masa efektów
graficznych i wiele innych znakomitych elementów), które w prosty sposób możemy
zaimplementować w naszym serwisie
Adobe Spry – framework JS / Ajax od firmy Adobe. Bardzo bogaty, posiadający wiele
elementów, m.in: efekty(animacje, przenikanie, potrząsanie, itd), wsparcie do przetwarzania
XML, JSON, HTML, XML, masa widgetów. Biblioteka polecana szczególnie dla designerów i
programistów XHTML/CSS, gdyż pozwala na szybkie uzyskanie efektu przy minimalnym
kontakcie z JavaScript.
mintAjax – polskie dzieło, ale na światowym poziomie. MintAjax jest rozbudowaną, łatwą w
użyciu i całkowicie darmową biblioteką JavaScript o małych rozmiarach przeznaczoną do
prostego, szybkiego i wygodnego tworzenia dynamicznych stron internetowych. Biblioteka to
m.in: rozbudowana obsługa zapytań AJAX, efekty graficzne, zaokrąglanie narożników,
mechanizm Drag&’Drop, kontrolki do obsługi zakładek, drzewek, dynamicznie sortowanych
tabel oraz wiele więcej. „
źródło: www.javascript-tutorial .pl
Paweł Ochota
KONIEC
Paweł Ochota

podstawy tworzenia modułów

Transkrypt

Podobne dokumenty