Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej Rozumiem

Twój pierwszy widget - mapa strony

Dzisiejszy tutorial będzie wstępem do tworzenia widgetów dla naszego systemu WinduCMS. Stworzenie tego widgetu nie wymaga dużych umiejętności z zakresu projektowania stron, tudzież programowania. Spróbujemy stworzyć widget generujący mapę strony w formie estetycznego drzewka. Zaczynamy !

1. Pracę rozpocznijmy od stworzenia "czystego" widgetu wchodząc w zakładkę "grafika", następnie "widgety". Po prawej stronie znajduje się pole "Dodaj czysty widżet", wpisujemy nazwę "sitemap" i klikamy prześlij. 
2. w nim helper.ini (odpowiedzialny za "wstawiacz widgetów") , smallhelp.txt (w nim znajdować się może jakaś krótka pomoc dla widgetu), readme.txt (plik do przeczytania przed użytkowniem np.: prawa autorskie itd.), "img" (pliki graficzne potrzebne naszemu widgetowi) , "css" (pliki stylów css dla naszego widgetu), "js" (pliki javascript), "lang" (pliki językowe) oraz plikami "sitemapController.class.php" (nasz widget od strony PHP) , "sitemapView.tpl" (w tym pliku określamy jak ma wyświetlać się nasz widżet) . 

3. Zacznijmy od wejścia do pliku "sitemapController.class.php", ukaże nam się kod 
 
 < ?php 
Class sitemapController extends widgetMainController
{        
    public function run() {
        $data = "Example Content";    
        return array("content" = $data);
   }
}
​?>


Teraz pokolei spróbuję omówić o co właściwie tutaj chodzi:
  • "Class sitemapController extends widgetMainController" -> tworzy nam klasę sitemapController, która jest rozwinięciem całe klasy widgetów (widgetMainController), dzięki temu poszerzamy tą główną klasę o opcję tej przez nas tworzonej.
  • public function run() -> określamy funkcję run(), która jest wywoływana podczas rozpoczynania działania widgetu. "public" oznacza, że możemy z niej korzystać w zakresie całej klasy.
  • $data = "Example Content"; -> tworzymy stringa z "Exemple Content"
  • return array("content" => $data); -> na koniec zwracamy naszego stringa, w postaci tablicy, gdzie wstawiamy go jako "content".
Ostatnie dwa omówione punkty nie będą nam wogóle potrzebne do naszej mapy strony. Usuwamy je, pozostaje nam jedynie pusta funkcja run(). 

Zamiast nich dodajemy:
$pagesDB = new pagesDB();
return array("pagesDB" => $pagesDB);
  • pagesDB = new pagesDB(); -> tworzymy nowy obiekt $pagesDB, poprzez niego będziemy mogli pobierać z bazy danych informacje dotyczące poszczególnych podstron.
  • >return array("pagesDB" => $pagesDB); -> zwracamy wszystko do naszego pliku sitemapView.tpl w postaci tablicy, którą później odczytamy.
4. Teraz nadeszła pora na plik sitemapView.tpl. Czyścimy wszystko, co się w nim znajduje.

Zaczynamy pisać właściwą część widgetu (widoczną dla naszego oka :P kod jest omówiony po każdej linijce (treści po "//" nie są wymagane do działania).
funcitionsitemap
5. Przedostatnim krokiem jest ustawienie pliku helper.ini (w katalogu "doc" naszego widgetu). Potrzebujemy jednego pola: parent (wpisane id języka wygeneruje nam do niego mapę strony). Taki kod powinniśmy tam wprowadzić:
parent.name = "parent"
parent.rule = ""
parent.inputType = "input-text"
parent.dateType = "numeric"
parent.date = ""
Tworzenie pól do wstawiacza widgetów zostało opisane w poprzednim poradniku - Kliknij tutaj.

6. Na sam koniec wystarczy przejść do pliku main.css znajdującego się w katalogu "css" naszego widgetu. roponowany kod css jest taki:
#sitemap{
margin: 0px 0px 0px 0px ;
padding: 0px;
list-style: none;
border-left: black dotted 1px;
}
#sitemap li{
padding-left: 10px;
padding-top: -5px;
}
#sitemap ul{
list-style: none;
margin: 10px 10px 10px 10px;
padding: 5px 0px;
border-left: black dotted 1px;
}
#sitemap a{
display: block;
color: #000;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
#sitemap a:hover{
padding-left: 15px;
text-decoration: none;
opacity: .8;
}


Teraz możemy sprawdzić działanie naszego widetu. Wystraczy wejść w dowolny szablon czy podstronę kliknąć przycisk "Widget" wyszukać naszego "sitemap", wprowadzić ID języka w polu "parent" i wstawić kod na stronę. Gotową paczkę z działającym widgetem można pobrać poniżej.

 Wkrótce filmik instruktarzowy  Pobierz paczkę *.zip z widgetem