Wspólny interfejs

Wszystkie kontrolki (oprócz dynamicznej tabeli) są rozszerzeniami obiektu LiveWidget, dzięki czemu posiadają wspólny podstawowy interfejs. Obiekt LiveWidget zawiera szereg metod, atrybutów oraz funkcji zdarzeniowych kontrolujących grupy logicznie połączonych ze sobą elementów pobierających dane z serwera po ich wybraniu. Do metod publicznych, dostępnych w każdej kontrolce zbudowanej na bazie obiektu LiveWidget, należą AddItem, RemoveItem oraz GetItem. Pierwsza z nich dodaje element do kontrolki (przyjmuje różne parametry w zależności od rodzaju kontrolki) i zwraca obiekt typu LiveItem, druga funkcja usuwa podany element natomiast ostatnia z funkcji zwraca element o podanej nazwie znajdujący się w kontrolce. Lista wszystkich atrybutów oraz funkcji zdarzeniowych znajduje się w dokumentacji poszczególnych kontrolek.

Każdy obiekt w kontrolce zawiera pięć podstawowych atrybutów, są to: element powiązany z obiektem LiveItem, nazwa obiektu wysyłana do serwera jako parametr określony w atrybucie itemParam w kontrolce, typ pobieranej zawartości ("text", "xml" lub "json"), adres wywoływany po stronie serwera po wybraniu obiektu (domyślnie wywoływana jest strona określona jako atrybut link w kontrolce) oraz pamięć podręczna.

Obiekt LiveWidget umożliwia płynną zamianę zawartości tj. po odebraniu odpowiedzi z serwera stara treść płynnie znika, po czym pojawia się nowa. Domyślnie ta opcja jest wyłączona, w celu jej włączenia wystarczy ustawić parametr fading na true. Czas trwania animacji określa atrybut fadeDuration, natomiast ilość kroków fadeSteps.

Ustawienia zapytań wysyłanych do serwera przez kontrolki znajdują się w atrybucie reqConfig (obiekt zawierający pary "atrybut: wartość")

Zakładki

Kontrolka do obsługi zakładek składa się z elementów służących jako zakładki oraz powierzchni do wyświetlania ich zawartości. Do utworzenia kontrolki TabWidget służy funkcja mint.gui.CreateTabWidget, wywoływana z jednym parametrem wymaganym (identyfikatorem lub elementem, gdzie wstawiana jest zawartość zakładek) oraz dwoma opcjonalnymi (nazwa kontrolki wysyłana do serwera jako parametr określony atrybutem widgetParam oraz wspólny dla wszystkich zakładek adres wywoływany po stronie serwera po kliknięciu na zakładkę). W celu dodania zakładki do kontrolki, wywołujemy funkcję AddItem przyjmującą cztery parametry: identyfikator lub element służący jako zakładka, nazwa zakładki wysyłana do serwera jako parametr określony atrybutem itemParam, typ zawartości oraz adres wywoływany po wybraniu zakładki (domyślnie używany jest wspólny adres ustawiony jako atrybut link w obiekcie kontrolki).

W poniższym przykładzie tworzymy kontrolkę TabWidget z trzema zakładkami:

Przykład

function OnLoad() {
    var tabs = mint.gui.CreateTabWidget("tabsContent");

    tabs.fading = true;
    tabs.activeClass = "active";
    tabs.hoverClass = "hover";

    tabs.AddItem("tab1", "tab1", "text", "tab1.html");
    tabs.AddItem("tab2", "tab2", "text", "tab2.html");
    tabs.AddItem("tab3", "tab3", "text", "tab3.html");

    mint.fx.Round("tabsContentOuter", "all", "small", true);
}

Drzewko

Do utworzenia kontrolki drzewka służy funkcja mint.gui.CreateTreeWidget przyjmująca dwa parametry wymagane (pole, gdzie dodawane będą kolejne elementy i powierzchnia gdzie wstawiana będzie zawartość pobrana z serwera) oraz dwa parametry opcjonalne (nazwa drzewka wysyłana do serwera jako parametr określony w atrybucie widgetParam w obiekcie kontrolki i domyślny adres wywoływany po stronie serwera) - funkcja zwraca obiekt TreeWidget. Funkcja AddItem, dodająca nowe elementy, przyjmuje dwa parametry wymagane (element nadrzędny i nazwa elementu) oraz trzy opcjonalne (typ zawartości, adres wywoływany po wybraniu elementu oraz wyświetlany tekst, domyślnie wyświetlana jest nazwa elementu).

W obiekcie drzewka możemy określić ikony oraz klasy zmieniające się w zależności od aktualnego stanu elementu, spis wszystkich stanów wraz z odpowiadającymi im atrybutami znajduje się w dokumentacji obiektu TreeWidget.

Kontrolka drzewka posiada możliwość płynnego rozwijania oraz zwijania elementów, domyślnie opcja ta jest włączona - aby ją wyłączyć należy ustawić atrybut foldAnimation na false. Czas trwania zwijania/rozwijania określa atrybut foldDuration, natomiast ilość kroków foldSteps.

Domyślnie elementy są zwijane/rozwijane od razu po kliknięciu, jeśli chcemy aby zwijanie/rozwijanie następowało dopiero po wybraniu elementu, należy ustawić atrybut selectBeforeOpen na true. Ponadto nowo dodane elementy są domyślnie rozwinięte, jeśli chcemy zmienić to zachowanie wystarczy ustawić atrybut newItemUnfold na false.

Elementy drzewka możemy usuwać, wywołując funkcję RemoveItem podając jako jedyny parametr nazwę lub obiekt TreeItem elementu do usunięcia, oraz przesuwać wywołując funkcję MoveBefore lub MoveAfter - pierwsza z nich przesuwa element przekazany jako pierwszy parametr przed element przekazany jako drugi parametrem, natomiast druga funkcja przesuwa element za podanym elementem.

function OnLoad() {
   var tree = mint.gui.CreateTreeWidget("tree", "target");

    tree.areaClass = "area";
    tree.imageClass = "img";
    tree.itemClass = "item";

    tree.itemImage = "img/item.gif";
    tree.itemSelectImage = "img/item_select.gif";
    tree.foldImage = "img/fold.gif";
    tree.unfoldImage = "img/unfold.gif";

    tree.AddItem(null, "node1", null, null, "Node #1");
    tree.AddItem("node1", "node2", "text", "tree/node2.html", "Node #2");
    tree.AddItem("node1", "node3", "text", "tree/node3.html", "Node #3");
    tree.AddItem("node1", "node4", null, null, "Node #4");
    tree.AddItem("node4", "node5", "text", "tree/node5.html", "Node #5");
    tree.AddItem("node4", "node6", "text", "tree/node6.html", "Node #6");
    tree.AddItem(null, "node7", "text", "tree/node7.html", "Node #7");
    tree.AddItem(null, "node8", "text", "tree/node8.html", "Node #8");
}

Ponadto kontrolka drzewka umożliwia dynamiczne ładowanie elementów z serwera przekazanych w formacie JSON poprzez wywołanie funkcji Load z jednym parametrem określającym adres skąd pobrane mają zostać elementy (dokładniejszy opis formatu znajduje się w dokumentacji elementu TreeWidget).

W poniższym przykładzie ładujemy dynamicznie kilka elementów z pliku grid.txt:

[
        {
            name: "node1",
            title: "Node #1",
            child:
            [
                {
                    name: "node2",
                    title: "Node #2",
                    type: "text",
                    link: "node2.txt"
                },
                {
                    name: "node3",
                    title: "Node #3",
                    type: "text",
                    link: "node3.txt"
                }
            ]
        },
        {
            name: "node4",
            title: "Node #4",
            type: "text",
            link: "node4.txt"
        }
]

Akordeon

Obiekty w kontrolce akordeonu składają się z elementu nagłówka oraz elementu z zawartością. Po kliknięciu na element nagłówka pobierana jest zawartość z serwera, która zostaje wstawiona do odpowiedniego elementu, po czym element ten jest płynnie rozwijany. Do tworzenia kontrolki akordeonu służy funkcja mint.gui.CreateAccordeonWidget przyjmująca dwa parametry opcjonalne: nazwę akordeonu, wysyłaną przy pobieraniu zawartości jako parametr ustawiony w atrybucie widgetParam, oraz domyślny adres strony, skąd pobierana będzie zawartość paneli. Funkcja AddItem w obiekcie AccordionWidget, dodająca nowe panele, przyjmuje dwa parametry wymagane (element nagłówka oraz element na zawartości) oraz trzy opcjonalne (nazwa obiektu, typ zawartości oraz adres strony, skąd pobierana będzie zawartość dodawanego panelu).

Domyślnie zwijanie/rozwijanie paneli następuje po kliknięciu na nagłówek, możliwe jest jednak włączenie otwierania paneli po najechaniu kursorem na nagłówek, aby skorzystać z tej możliwości wystarczy ustawić atrybut overOpen na true, natomiast aby określić czas jaki musi upłynąć od najechania kursorem na nagłówek do otwarcia panelu należy ustawić ten czas jako wartość atrybutu overWait (w milisekundach).

Elementy rozwijane są domyślnie na wysokość wystarczającą do pomieszczenia zawartości, jesli chcemy aby przyjmowały one jedną ustaloną wysokość, wystarczy ustawić tą wysokość jako atrybut staticHeight w obiekcie kontrolki.

function OnLoad() {
    var accordion = mint.gui.CreateAccordionWidget();

    accordion.openClass = "open";
    accordion.hoverClass = "hover";

    accordion.AddItem("header1", "target1", "panel1", "text", "panel1.html");
    accordion.AddItem("header2", "target2", "panel1", "text", "panel2.html");
    accordion.AddItem("header3", "target3", "panel1", "text", "panel3.html");
}

<div id="header1" class="header">Header #1</div>
<div id="target1" class="target"></div>

<div id="header2" class="header">Header #2</div>
<div id="target2" class="target"></div>

<div id="header3" class="header">Header #3</div>
<div id="target3" class="target"></div>

Dynamiczna tabela

Kontrolka dynamicznej tabeli umożliwia sortowanie wierszy w zwykłej tabeli bez przeładowywania strony, dynamiczne ładowanie danych z serwera oraz operacje na wierszach, w tym ich zaznaczanie po kliknięciu. Do tworzenia kontrolek GridWidget służy funkcja mint.gui.CreateGridWidget i przyjmuje ona jeden parametr jakim jest identyfikator tabeli lub tabela.

Kolumny sortowalne ustawia się poprzez wywołanie funkcji AddSortCells, przyjmującej dowolną ilość parametrów oznaczających indeksy kolumn, po kliknięciu których wiersze tabeli zostaną posortowanie zgodnie z danymi znajdującymi się w danej tabeli. Funkcję można również wywołać bez podawania żadnych parametrów, w takim przypadku wszystkie kolumny tabeli zostaną ustawione jako sortowalne. Sortowanie odbywa się według łańcuchów znaków (od wersji 1.2 również z polskimi znakami), liczb oraz dat (w formacie DD-MM-YYYY lub YYYY-MM-DD, gdzie DD oznacza dzień, MM miesiąc, a YYYY rok). Z sortowaniem powiązanych jest kilka atrybutów, których opis znajdziesz w dokumentacji obiektu GridWidget.

Dynamiczna tabela pozwala również na ładowanie danych z serwera, służą do tego dwie funkcje: LoadTextData oraz LoadJSONData - obie funkcje przyjmują jeden parametr, jakim jest adres skąd pobierane będą dane. Pierwsza z funkcji ładuje dane w postaci tekstowej, gdzie wiersze oddzielone są znakiem określonym w atrybucie remoteRowSeparator (domyślnie ";"), a dane w każdym z wierszy znakiem określonym w atrybucie remoteDataSeparator (domyślnie ","). Ustawienia zapytań wysyłanych do serwera znajdują się w atrybucie reqConfig (obiekt zawierający pary "atrybut: wartość").

Kolejną możliwością dynamicznych tabel jest zaznaczanie wierszy po kliknięciu na nie, jeśli chcemy skorzystać z tej możliwości wystarczy wywołać funkcję SetSelective - po wstawieniu nowych wierszy, czy to ręcznie czy z serwera, zostaną one automatycznie ustawione jako możliwe do zaznaczenia. Domyślnie możliwe jest zaznaczanie wielu wierszy, aby umożliwić jednoczesne zaznaczenie tylko jednego wiersza należy ustawić atrybut multiSelect na false. Z zaznaczaniem wierszy powiązanych jest kilka innych atrybutów oraz funkcji - ich opis znajdziesz w dokumentacji obiektu GridWidget.

function OnLoad() {
   var grid = mint.gui.CreateGridWidget("grid");

    grid.selectClass = "select";

    grid.AddSortCells();
    grid.SetSelective();

    grid.InsertRow("40", "Consectetuer", "18-05-2005");
    grid.InsertRow("18", "Adipiscing", "24-06-2007");

    grid.LoadTextData("remote.txt");
}

<table id="grid">
    <thead>
        <tr>
            <td>Liczba</td>
            <td>Tekst</td>
            <td>Data</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>15</td>
            <td>Lorem</td>
            <td>05-02-2006</td>
        </tr>
        <tr>
            <td>5.8</td>
            <td>Ipsum</td>
            <td>02-05-2007</td>
        </tr>
        <tr>
            <td>26</td>
            <td>Dolor</td>
            <td>12-08-2005</td>
        </tr>
        <tr>
            <td>5.2</td>
            <td>Sit Amet</td>
            <td>25-10-2007</td>
        </tr>
    </tbody>
</table>

56,Remote Lorem,20-04-2006
14,Remote Ipsum,24-12-2005
38.2,Remote Dolor,20-02-2007
5.9,Remote Sit Amet,10-04-2007

« poprzedni artykuł		następny artykuł »