Blog webdeveloperski Patryk yarpo Jar

Meet.js zawitał do Gdańska!

Autor wiadomości Marzec 11, 2013

Choć sama inicjatywa spotkań front-endowców w postaci meet.js nie jest w Polsce nowa, to w Trójmieście takie spotkanie odbyło się po raz pierwszy.

Powiedzieć, że zainteresowanie było duże, to skłamać. Początkowo planowane w pubie Polufka, kameralne spotkanie, przerodziło się w jeden z większych eventów około programistycznych, jakie w ostatnim czasie odbywały się w naszym grodzie. Ostatecznie zdecydowano o przeniesieniu prezentacji do Gdańskiego Inkubatora Przedsiębiorczości.

Miałem niekrytą przyjemność przedstawienia tematu "Modularny JavaScript". Był to mój debiut na tego typu spotkaniach i bardzo dziękuję za responsywność publiczności. Mam nadzieję, że to nie ostatnie słowo meet.js w tej części naszego kraju.

Tworzenie modułów Dojo (bez szablonów)

Autor wiadomości Luty 14, 2013

Ostatnich kilka wpisów poświęciłem tworzeniu modułów zgodnych z AMD. W tym wpisie pokażę, jak stworzyć widget Dojo wykorzystując podejście AMD (kiedyś opisywałem dawny sposób - nadal dostępny, choć już niedługo).

Na początek potrzebujesz

  • ogólnej wiedzy o JavaScript i Dojo
  • serwera WWW (przykłady do pobrania należy uruchamiać na serwerze)
  • 5 minut

Rozwijanie listy po kliknięciu na dijit.form.FilteringSelect / ComboBox

Autor wiadomości Sierpień 22, 2012

W Dojo Toolkit jest cały zestaw widgetów pozwalających budować bardzo nowoczesne aplikacje webowe. W ty wpisie zajmę się dwoma (spokrewnionymi) kontrolkami:

  • dijit.form.FilteringSelect
  • dijit.form.ComboBox

autouzupełnianie dijit.form.FilteringSelect

Co one robią?

Co z nimi nie tak, skoro mam zamiar im poświęcić cały wpis? Kolejno - są to komponenty zastępujące zwykły HTML-owy znacznik <select />. Są bardzo przyjazne dla oka, pozwalają nie tylko na wybór pozycji z listy dostępnych, ale także na wpisywanie własnych (mechanizm podpowiedzi), dodatkowo bardzo dobrze współdziałają z data store. Słowem - używać, nie umierać ;).

Jednak posiadają jedną dużą wadę funkcjonalną - aby rozwinąć listę trzeba kliknąć dokładnie,tylko i wyłącznie w strzałeczkę sugerującą rozwijanie.

demo online

dijit.Dialog.onMove()

Autor wiadomości Marzec 19, 2012

Dojo posiada pokaźny zbiór widgetów (dijit - Dojo widget). W tym wpisie zajmiemy się kontrolką `dijit.Dialog' oraz (nieistniejącym domyślnie) zdarzeniem `onMove'. Owe zdarzenie zostanie utworzone z wykorzystaniem istniejących mechanizmów dojo.

Proste okienko

Na początek pokażę kod prostego okienka `dijit.Dialog':

dojo.require("dijit.Dialog");
dojo.ready(function(){
    var dialog = new dijit.Dialog({
        title: "Okienko",
        style: "width: 200px; height: 200px;",
        content : "Witaj świecie"
    });
    dialog.startup();
    dialog.show();
});
dojo.require("dijit.Dialog");
dojo.ready(function(){
	var dialog = new dijit.Dialog({
		title: "Okienko",
		style: "width: 200px; height: 200px;",
		content : "Witaj świecie"
	});
	dialog.startup();
	dialog.show();
});

demo online

Do konstruktora przekazałem tylko kilka parametrów. Aby zapoznać się z pozostałymi zapraszam do dokumentacji*. W kodzie zamieszczonym powyżej oczywiście nie ma jeszcze obsługi zdarzenia `onMove'. Aby je dodać wykorzystam mechanizm `dojo.subscribe'.

Wykorzystanie `dojo.subscribe' do przechwycenia przesunięcia

Skoro mamy okno, przechwyćmy moment, w którym zostanie przesunięte. Kontrolka okienka publikuje informacje o swoim przemieszczeniu w kanale '/dnd/move/stop'. Wystarczy zatem zasubskrybować ten kanał:

dojo.require("dijit.Dialog");
dojo.ready(function()
{
    var dialog = new dijit.Dialog({
        title: "Okienko",
        style: "width: 200px; height: 200px;",
        content : "Witaj świecie"
    });
    dojo.subscribe('/dnd/move/stop', function(mover)
    {
        alert('Poruszyłeś mnie!');
    });
    dialog.startup();
    dialog.show();
});

demo online

OK, już mamy prymitywną obsługę "zdarzenia" `onMove'. Jakie są główne problemy:

  • na ten sam kanał publikują wszystkie wigety, a więc nie mamy obsługi konkretnie `onMove' tego okienka,
  • nie jest to zbyt piękne rozwiązanie, raczej proteza.

Dodanie metody `onMove'

Aby ulepszyć poprzednie rozwiązanie musimy po pierwsze rozpoznawać konkretne okno. Po drugie musimy po rozpoznaniu wywołać metodę `onMove'. Kod jest dużo prostszy niż by się to wydawało:

dojo.require("dijit.Dialog");
dojo.ready(function()
{
    function createDijitDialogWithOnMoveEvent(title, content)
    {
        var dialog = new dijit.Dialog({
            title: title,
            style: "width: 200px; height: 200px;",
            content : content,
            onMove : function() {}
        });
       dojo.subscribe('/dnd/move/stop', function(mover)
       {
           // rozpoznanie okna
           if (mover.node.id === dialog.id)
           {
               dialog.onMove();
           }
       });
       dialog.startup();
       dialog.show();

       return dialog;
    }
    var x = createDijitDialogWithOnMoveEvent("dijit.Dialog.onMove", "Witaj świecie!");
    dojo.connect(x, 'onMove', function()
    {
        alert('poruszyłeś mnie!');
    });
});

demo online

Każdy widget dojo posiada swój unikalny id. Pozwala to podczas odczytywania z kanału sprawdzić, czy mamy do czynienia z tym oknem, o które aktualnie nam chodzi.

Następnie przypisanie odpowiedniej funkcji obsługi zdarzenia jest już formalnością. Opis mechanizmy dojo.connect/disconnect można znaleźć w jednym z wcześniejszych wpisów:

*A niech będzie - tu się wyżyję. Dojo Toolkit do wersji 1.6 posiadał bardzo przyjemną i ułatwiającą życie dokumentację (linkowany przykład `dijit.Menu') w postaci opis-przykład-kod do skopiowania. W 1.7 stwierdzono chyba, że życie programisty nie może być takie piękne i zdecydowanie zepsuto IMVHO bardzo przydatne zasoby - dla kontrastu ten sam dijit, dokumentacja w wersji 1.7 - spróbuj uruchomić przykład lokalnie.

EDIT (2013-02-06): W wersji 1.8 naprawiono wyżej opisane błędy.

dojox.grid.DataGrid z polami checkbox tylko do odczytu

Autor wiadomości Luty 26, 2012

Widget dataGrid z biblioteki rozszerzeń dojox pozwala na bardzo proste umieszczenie w komórce listy wyboru lub checkboksa. Wymaga to jednak zaznaczenia opcji `editable="true"'. Czy nie da się zatem umieścić w datagridzie takich pól, bez pozwala na ich edycję? Da się. I właśnie o tym będzie ten wpis.

Parsowanie JSON

Autor wiadomości Grudzień 28, 2011

JSON (ang. JavaScript Object Notation) jest bardzo przyjemnym formatem wymiany danych. W tym wpisie postaram się pokazać kilka sposobów na parsowanie ciągu znaków zgodnego (lub zbliżonego) z JSON. Z zasadami tworzenia poprawnego JSON można zapoznać się na oficjalnej stronie.

Opisane sposoby:

  • funkcja `eval' (natywna funkcja JS - archaiczne rozwiązanie)
  • biblioteka json2 (obiekt `JSON') by Doug Crockford
  • biblioteka json_parse' (funkcja `json_parse')  by Doug Crockford
  • biblioteka json_sans_eval (funkcja jsonParse) by Mike Samuel
  • obiekt JSON = { stringify : function, parse : function } (natywny obiekt JS - nowsze przeglądarki)
  • parser JSON w jQuery
  • parser JSON w Dojo Toolkit

Książka: “Dojo. The Definitive Guide”

Autor wiadomości Grudzień 14, 2011

HTML5 i CSS3. Standardy przyszłościDojo. The Definitive Guide

Jeśli właśnie zadajesz sobie pytanie: "Czym u licha jest Dojo?" to wiedz, że sporo nie wiesz o nowoczesnych, bardzo przyjaznych użytkownikowi i programiście frameworkach (toolkitach) JavaScript.

Dojo Toolkit jest jednym z najlepszych frameworków Javascript dostarczanym razem z zestawem narzędzi, np. Shrinksafe (zmniejszanie rozmiaru kodu plików JS), buildscript (budowanie jednego pliku z kodem wielu modułów), checkstyle, itp.

Dojo Toolkit jest w pełni darmowy.

Dojo Toolkit wspiera wszystkie najpopularniejsze przeglądarki.

Dojo Toolkit jest nadal rozwijany i posiada dobre zaplecze społecznościowe.

Dojo Toolkit jest tematem książki, którą warto przeczytać.

Tworzenie klas w Dojo (stary mechanizm < 1.6)

Autor wiadomości Październik 11, 2011

Opisany tu sposób tworzenia "klas" Dojo jest już wycofywany. Aktualnie w Dojo Toolkit zaleca się (a w przyszłości będzie to jedyne dostępne rozwiązanie), by tworzyć moduły zgodne z AMD. Zobacz nowszy wpis o tym jak tworzyć moduły Dojo zgodne z AMD.

Dojo jest bardzo rozbudowanym i jednocześnie przyjaznym toolkitem JavaScript. W JavaScript, jak pewnie wiesz nie ma klas. Dojo wprowadza jednak zarówno takie pojęcie, jak i zestaw mechanizmów pozwalających bardzo przyjaźnie tworzyć "klasy JavaScript".

Odświeżanie gałęzi drzewa dijit.Tree

Autor wiadomości Wrzesień 9, 2011

W poprzednim wpisie pokazałem jak zbudować drzewo oparte o `dojox.data.JsonRestStore'. W tym wpisie pokażę, jak odświeżać wybraną gałąź tego drzewa.

Scenariusz

Załóżmy, że mamy drzewo, które może być edytowane przez kilka osób równolegle lub też może zmieniać się automatycznie. Jako, że korzystamy z data store'a pozwalającego na lazy loading (ang. późne ładowanie) może się okazać, że dane na serwerze będą inne od tych, jakie przechowujemy lokalnie. Wteyd warto byłoby odświeżyć wybraną gałąź drzewa.

O dziwo nie ma prostej metody `dijit.Tree.refresh(gałąź)' :/. Można jednak napisać krótki kawałek kodu pozwalający uzyskać oczekiwany efekt.

Dijit.Tree i lazy loading

Autor wiadomości Wrzesień 8, 2011

Lazy loading (z ang. późne ładowanie danych - w wolnym tłumaczeniu) pozwala na pobranie do aplikacji z serwera tylko tych danych, które są nam aktualnie niezbędne. Takie podejście oszczędza pamięć i łącze (rzadko kiedy potrzebujemy wczytać cały zbiór danych). Niestety jednocześnie sprawia, że mamy więcej połączeń do serwera - każde zwraca kolejną małą porcję danych.

Chciałbym zaprezentować możliwości lazy loadingu w Dojo Toolkit.

Na początek