Loading...

Tworzenie widgetu

W dziale tym postaram się opisać tworzenie przykładowego widżetu krok po kroku, od A do Z.
 

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:
 
WinduCMS   Admin
 

 

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 klamrowy

Wewną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
Przykładowy kod templata wygląda następująco
 
WinduCMS   Admin2


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
 

6. Uruchomienie widżetu

Na koniec (ale polecamy też w trakcie) należy przetestować nasz widżet, najlepiej dodając go przez "wstawiacz widżetów".

Nieustannie pracujemy nad rozwojem Windu CMS!

Zaglądając na stronę windu dowiesz się o nowościach i planach związanych z CMS’em

2022-12-05 Windu 4.1 - aktualizacja

Właśnie zaktualizowaliśmy Windu do wersji 4.1: Wsparcie dla PHP 8.0 i 8.1 Poprawienie edytora kodu Poprawienie mechanizmy generowania pól dodatkowych Dodanie...

2021-01-27 Windu 4.0 - nowa aktualizacja

Po 6 latach przerwy postanowiliśmy przygotować i dodać nową wersje naszego systemu CMS. Windu 4.0 dostępne do pobierania oraz aktualizowania, wprowadziliśmy w nim między...

2014-05-28 Windu 3.1 - lista zmian

Windu 3.1 dostępne do pobierania oraz aktualizowania, wprwadziliśmy w nim między innymi:   Aktualizacja modułu forum, dokończenie i poprawienie obecnego w wersji 3.1...

Kup licencję PRO!

Już teraz aktywuj mnóstwo dodatków w twoim Windu!

Kup licencję PRO