Kurs: biblioteka script.aculo.us w pigułce. Cz. 1.

javascript-html5-tutorial.pl

8 września, 2013

Dominik-W

Biblioteka script.aculo.us

Zagłębiając się we Frameworki JavaScript, chcielibyśmy przedstawić esencję biblioteki script.aculo.us.

Jak już wspomnieliśmy pisząc wstęp do Frameworków JS, biblioteki Prototype JS i script.aculo.us są często widziane razem.

Biblioteka, o której dziś mowa, jest jakby rozszerzeniem Prototype JS o efekty graficzne, animacje, Drag and Drop, tworzenie widget’ów, narzędzia pracy z DOM, czy też kontrolki Ajax. Funkcje tej biblioteki są łatwe w użyciu, i oczywiście są cross-browser.

Praca biblioteką script.aculo.us

Na początek dołączamy biblioteki Prototype JS i script.aculo.us do dokumentu.

Zacznijmy od kilku słów na temat tego, jak tworzyć dynamicznie elementy.

Komponentem wspomagającym tworzenie elementów struktury DOM jest obiekt Builder, spełniający funkcję wzorca.

Przykład – użycie komponentu Builder:

var tabela = Builder.node("tabela",
    { border: 0, width: 200 },
    [ Builder.node( "tr", [
        Builder.node("td", {width: 100}, "kolumna 1" ),
        Builder.node("td", {width: 100}, "kolumna 2" ),
        Builder.node("td", {width: 100}, "kolumna 3" ) 
    ])
]);

$('divek').appendChild(table);

Przykład 2:

var element = Builder.node('div', { id: 'ghosttrain' }, [
    Builder.node('div',
        { className: 'controls', style: 'font-size:11px;' }, 
        [
        Builder.node('h1', 'Ghost Train'),
        'testtext', 2, 3, 4,
        Builder.node('ul', [
            Builder.node('li', { className: 'active', 
                onclick: 'test()' }, 'Record')
        ]),
    ]),
]);

Obsługa Drag&drop

Script.aculo.us pozwala szybko implementować Drag and Drop, i dodawać efektowne animacje.

Biblioteka udostępnia do tego celu klasy:

– Draggable – definiuje obiekt, który będziemy przeciągać

– Droppables – umożliwia zaprojektowanie odpowiedniej reakcji na upuszczenie elementu

Klasa Draggable

Czyli elementy, które będą mogły być przeciągane (drag).

Przykład – użycie klasy Draggeble:

var test = Builder.build("<span>Przesuwanie</span>");

document.getElementsByTagName("body")[0].appendChild(test);
new Draggable(test);
new Draggable('id_of_element', [options]);

Więcej szczegółów tutaj.

Przykład 2 – ustawienia Draggable:

new Draggable('divek', { constraint: 'horizontal', 
    handle: 'handle' });

var mydrag = new Draggable('dv1', { revert: true });
mydrag.destroy();

// cofnij przypisanie
// new Draggable('dd1', { revert: true });
new Draggable('dd1', { revert: true, snap: [40, 40] });

new Draggable('dd2', { scroll: window });

Klasa Droppables

Czyli elementy, które będą mogły być upuszczane (drop).

Przykład – użycie Droppables:

Droppables.add('id_of_element',[options]);

Droppables.add('shopping_cart', {
    accept: 'products',
    onDrop: function(element) {
        $('shopping_cart_text').
            update('Dropped the ' + element.alt + ' on me.');
    }
});

Droppables.remove(element); // usuwanie

Przykład – wszystkie elementy listy jako Draggable:

$$('container li').each( function(li) {
    new Draggable(li);
});

I już możemy przeciągać elementy danej listy.

Przykład – implementacja drag&drop:

Struktura HTML

<ul id="container">
  <li id="item_1"><span>@</span> Lorem</li>
  <li id="item_2"><span>@</span> Ipsum</li>
  <li id="item_3"><span>@</span> Dolor</li>
</ul>

Style CSS

#container .handle {
    background-color: #090;
    color: #fff;
    font-weight: bold;
    padding: 3px;
    cursor: move;
}

Kod JavaScript:

$('container').select('li').each( function(li) {
    new Draggable(li, { handle: 'handle' });
});

Kolejny przykład to użycie Droppables (elementów „upuszczanych”).

Przykład – Droppables

HTML:

<ul id="drop_zone"></ul>

CSS:

#container, #drop_zone {
    width: 200px;
    height: 300px;
    list-style-type: none;
    margin-left: 0;
    margin-right: 20px;
    float: left;
    padding: 0;
    border: 2px dashed #999;
}

JavaScript:

document.observe("dom:loaded", function() {
    $('container').select('li').each( function(li) {
        new Draggable(li);
    });
    Droppables.add('drop_zone');
});

Zanim przejdziemy dalej, do omawiania komponentów, małe wspomnienie o efektach i kontroli elementów.

Przykład – kontrola elementów:

<div onclick="$(this).switchOff()">Kliknij, by schować</div>

<!-- lub z efektem: -->
<div onclick="$(this).blindUp({ duration: 1 })">Kliknij</div>

Metody takie jak blindUp() wykonują zadanie w sposób, któremu towarzyszą efekty (animacje). Zajmiemy się tym w części 2. kursu.

Komponent Autocompleter (Ajax)

Implementacja rozwiązania typu Ajax suggest, czyli automatycznego uzupełniania pola tekstowego sugestiami.

Wywołanie wygląda następująco:
new Ajax.Autocompleter(id_of_text_field, id_of_div_to_populate,
url, options);

Przykład – użycie Ajax.Autocompleter:

W strukturze HTML tworzymy pole tekstowe o ID = „autocomplete”, oraz element (np. DIV) o ID = „autocomplete_choices”.

Następnie dodajemy kod JS:

new Ajax.Autocompleter("autocomplete", "autocomplete_choices", 
    "/url/on/serv/bar.php", {

    paramName: "value",
    minChars: 2,
    indicator: 'indicator1'
});

Plik bar.php po stronie serwera zwraca wyniki w postaci listy – najprostszy przykład poniżej:

echo "<ul><li>Data1</li><li>Data2</li></ul>";

Alternatywą jest kolejny z elementów biblioteki script.aculo.us.

Autocompleter.Local – przechowujący dane lokalnie, np. w tablicy, bez potrzeby odwołań server-side.

Użycie Autocompleter.Local wygląda następująco:

new Autocompleter.Local('id_text_field', 'id_div_to_populate', 
    'array_of_strings', options);

Przykładowo:

var array_of_strings = [
'AB',
'CD',
'EF',
// ... itd
];

// podajemy input_id - ID pola tekstowego, 
// uwaga: ustawiamy autocomplete="off" dla tego pola
new Autocompleter.Local('input_id', 'divek', bandsList, { });

Na koniec omówię InPlace Editor – mój ulubiony element tej biblioteki, swego czasu („boom Web 2.0”) używany niemal na okrągło w projektach, nad którymi ówcześnie pracowałem.

InPlace Editor

Pozwala na implementację edycji elementu w miejscu, zmiany wartości bez przeładowania strony. To przydatna funkcjonalność w wielu aplikacjach WWW bazujących na Ajax.

Konstruktor:

new Ajax.InPlaceEditor(element, url, { options });

Przykład – użycie InPlaceEditor:

<p id="editme">Kliknij mnie!</p>

new Ajax.InPlaceEditor('editme', '/demoajax.php');

Uzyskujemy jakoby edytowalny paragraf ‚Kliknij mnie!’, po kliknięciu przechodzi w tryb edycji. Dane mogą być wysłane do skryptu PHP, a tam wykonane dowolne operacje. Po zakończeniu edycji zostanie także zmieniona od razu wartość, którą wyświetla paragraf.

Jest tu sporo detali, które w pełni opisane są w dokumentacjach InPlace Editor oraz InPlaceCollection Editor.