1. Dodanie nowego widżetu
Aby utworzyć nowy widżet należy otworzyć zakładkę "Grafika" -> "Widżety", a następnie kliknąć na przycisk "Dodaj", po czym wpisać w pole tekstowe nazwę naszego widżetu pamiętając o zachowaniu struktury nazwy.Prawidłowo wyglądająca nazwa powinna w pierwszym członie zawierać typ widżetu (slider, menu, user itd.) a następnie jego właściwą nazwę pisaną "camelCasem"
menuHorizontalNav
Po poprawnym stworzeniu nowego widżetu pojawi się on na liście posortowanej alfabetycznie. Podczas tworzenia zostanie wygenerowana struktura folderów oraz plików która nie powinna być zmieniana.
Po kliknięciu w nasz nowo dodany element zobaczymy następujący widok:
2. Przygotowanie kodu Controllera PHP
Podczas wywoływania kodu uruchamiany jest zawsze kontroler w którym to mamy możliwość wykonania operacji na kodzie PHP, czyli na przykład pobrać dane z bazy danych lub wysłać email. Dodatkowo nasz kontroler ma możliwość zwrócenia danych dla Template'a wyświetlającego wynik działania naszego skryptu. Reasumując, wywołujemy kontroler który wysyła dane do pliku *.tpl, gdzie są wyświetlane w odpowiedni sposób przy użyciu systemu smarty.Aby edytować wcześniej stworzony kod należy kliknąć na przycisk edycji przy pliku z końcówką w nazwie *Controller.class.php
Przykładowa struktura naszego kontrolera.
Class menuHorizontalNavController extends widgetMainController
{
public function run() {
$pagesDB = new pagesDB();
return array("pagesDB" => $pagesDB);
}
}
Jak widzimy na sam koniec kontroler zwraca tablice w której pod kluczem "pagesDB" jest przypisana zmienna $pagesDB będąca wcześniej stworzonym obiektem naszej bazy danych.
Do tej zmiennej będziemy mogli odwołać się w naszym template wpisując odpowiednio "$data.pagesDB" o odwoływaniu się do zmiennych więcej w punkcie 3.
3. Przygotowanie templata (widoku)
Aby stworzyć część prezentacyjną naszego widżetu musimy przejść do edycji elementu z końcówką *View.tpl, całość oparta jest o system smarty.net który jako znacznik smarty używa standardowo pojedynczego nawiasu klamrowego inaczej niż w przypadku grafiki strony gdzie ten znacznik to podwójny nawias klamrowyWewnątrz templata mamy mozliwość korzystania z 2 typów zmiennych pochodzących z zewnątrz.
- Zmienne pochodzące z kontrolera PHP - zawsze są w formie $data.NazwaZmiennej, która jest kluczem w tablicy zwracanej przez kontroler PHP
- Zmienne pochodzące z wywołania widżetu - zawsze są w formie params.NazwaZmiennej,
która jest wpisana w tagu Widget NOT exists
Jak widzimy w linijkach 1 i 2 sprawdzamy wartość parametrów przekazywanych w wywołaniu kodu widżetu, jeżeli wartości nie zostaną ustawione przez użytkownika wywołującego widżet, skrypt usatwia domyślne.
Następnie tworzymy funkcje, podobnie jak w PHP, wszystko zgodnie z dokumentacją smarty. Funkcja po jej wywołaniu w linijce 18 iteruje po elementach w tym wypadku $pages i wyświetla do nich link.
W ten sposób otrzymujemy proste menu, które pobiera w parametrach id grupy nadrzędnej i wyświetla wszystkie elementy przypisane do grupy w postaci listy linków.
4. Dodanie resourców (plików css, js, img)
Mamy już prosty skrypt pokazujący menu, aby jednak wszystko działało jak należy potrzebujemy jeszcze trochę kodu CSS oraz JS, w tym celu wgrywamy pliki z kodem do odpowiednich katalogów dla naszego widżetu.Klikamy na zielony plusik na liście i wybieramy odpowiedni plik, pamiętając że jeżeli chcemy zachować określoną kolejność powinniśmy ułożyć pliki alfabetycznie lub numerycznie wpisując na ich początku cyferki. System wstawi nasze pliki w kolejności alfabetycznej takiej jaka jest wyświetlana po otwarciu katalogu.
Przy tworzeniu prostszych widżetów nie ma konieczności dodawania osobnych plików, domyślnie istnieją już main.css oraz main.js, wystarczy tam wpisać nasz kod.
Po tak przeprowadzonych operacjach nasz widżet powinien już działać. Możemy go przetestować wpisując odpowiedni kod na przykład na stronę główną.
5. Przygotowanie pliku dla pomocnika (wystawiacza widżetów)
Na koniec należy po pierwsze przygotować dokumentacje opisującą zasadę działania naszego widżetu oraz co najistotniejsze przygotować kod dla pliku helper.ini stanowiącego instrukcję dla "wystawiacza widżetów"W celu edycji pliku należy kliknąć w katalog "doc" i wybrać edycje pliku "helper.ini"
Plik helper.ini ma nastepującą skłądnie.
Każda zmienna skąłda się z 5 elementów tak, że pierwszy człon nazwy oznacza nazwę zmiennej w tagu a po kropce jest określony parametr który musimy zdefiniować.
Parametry do zdefiniowania to:
- NazwaZmiennej.name - nazwa linku, czyli {{W name="nazwa widgetu" NazwaZmiennej="wartośc podana przez usera"}}
- NazwaZmiennej.rule - typ validatora, jeżeli nie chcemy aby użytkownik podał słowo zamaist cyfry, główne zastosowanie ma tutaj validator "numeric"
- NazwaZmiennej.inputType- typ elementu input, do wyboru mamy: select, input-text, textarea
- NazwaZmiennej.dataType = Typ danych zwracanych przez obiekt w wypadku gdy dajemy użytkownikowi wybór (elementy select) do wyboru mamy: commaArray - podajemy zmienne po przecinku w parametrze NazwaZmiennej.data które następnie są wyświetlane jako lista wyboru, php- zmienne pochodzą z wyniku kodu php
- NazwaZmiennej.date = Tutaj przypisujemy zmienne, czyli albo nasz kod PHP wywołujący helper albo zmienne oddzielone przecinkami, jeżeli chcemy wstawić zwykły input nie musimy definiować tego pola jak i powyższego
