jQuery growfield plugin

Kolejnym bardzo interesującym pluginem jQuery, który chciałbym zaprezentować, jest "growfield", czyli funkcjonalność dynamicznego rozszerzania się textBoxa znana z przeglądarki Mozilla Firefox. Na czym ta funkcjonalność polega? Na tym, że mając textbox i wpisując/usuwając z niego tekst, textbox automatycznie się rozszerza/minimalizuje.
Użytkownicy przeglądarki Mozilla Firefox mają tą funkcję w standardzie, aby jednak uzyskać podobną funkcjonalność w innych przeglądarkach, należy skorzystać z darmowego pluginu jQuery o nazwie "growfield".

Growfield, stanowi część projektu jQuery, i podobnie jak on, udostępniony jest na licencji MIT/X11.
Samo włączenie funkcji autorozszerzania jest banalnie proste i polega na

• podpięciu odpowiednich bibliotek do projektu (zarówno standardowego jQuery.js w wersji minium 1.8, oraz growfield.js w wersji minimum 1.3),
• dodaniu referencji do tych plików na stronie asp.net
• wywołania prostego skryptu jQuery która aktywuje feature na odpowiednim obiekcie

Przykład skryptu aktywującego:

<script type="text/javascript">
    $(function () {
        $('.cssAreaNote').growfield();
    });
</script>

Samo podpięcie 'growfield' nie jest niczym innym, niż wywołanie dodatkowej funkcji na selektorze.W tym konkretnym przykładzie, jako element wyszukujący selektora  użyłem klasy CSS.

Uwaga: w trakcie pracy i testowania tej funkcjonalności spotkałem się z błędem w bibliotece, objawiającym się tym, że czasami do textboxa dopisywane były dodatkowe wartości (dokładnie '111'). Problem był już poruszony na forum StackOveflow. Tak jak ktoś dobrze zauważył, problem polegał na tym, że drugi "textBox" (rozwiązanie opiera się na pomyśle 2x textBoxów, z czego w jednym czasie tylko jeden z nich jest widoczny) miał taką samą nazwę jak pierwszy :/
Rozwiązanie tego problemu jest bardzo proste:

• bierzemy plik z biblioteką 'growfield.js'
• odnajdujemy funkcję o nazwie 'createDummy'
• zmieniamy fragment odpowiadający za tworzenie "kopii zapasowej'' (czyli textBoxa nr.2) na:   

var dummy = o.clone().addClass('growfieldDummy').attr('name', '').attr('id', o.attr('id') + '-dummy')
                               .css({position: 'absolute', left: -9999, top: 0, height: '20px', resize: 'none'})
                               .insertBefore(o).show();

Możliwe, że w momencie, w którym Ty, mój drogi czytelniku pobierzesz najnowszą wersję tej biblioteki, problem będzie już rozwiązany. Możliwe jednak, że... pojawi się również u Ciebie, a wtedy będziesz wiedział co zrobić, aby temu zaradzić ;)

jQuery tooltip plugin

Często podczas pracy, zdarza się potrzeba skorzystania z funkcjonalności, której nie posiadają standardowe biblioteki dostarczone przez platformę .NET. Rozwiązania tego problemu są dwa:

• napisać rozwiązanie samodzielnie
• skorzystać z gotowego rozwiązania

 Ponieważ jestem przeciwnikiem ponownego odkrywania koła, a po doświadczeniach związanych z pracą (i efektami tej pracy) na kontrolkach firmy DevExpress jestem wielkim fanem korzystania z gotowych rozwiązań wielokrotnie zanim samemu zacznę cokolwiek zacznę kodować, sprawdzam, czy taki problem nie został już przez kogoś innego rozwiązany.
Z uwagi na fakt, iż w mojej obecnej firmie, aktualnie nie posiadamy zakupionych komercyjnych kontrolek firm trzecich, to wykorzystujemy wszelkiego rodzaju rozwiązania dostępne za darmo. Przykładem takich kontrolek, są darmowe pluginy do jQuery. Jednym z takich pluginów jest 'jQuery tooltip plugin' udostępniony za darmo na stronie http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/.
Z pluginem tym, spotkałem się w momencie, gdy w jednej z aplikacji, pojawiła się potrzeba dłuższego czasu wyświetlania tooltipa. Opisy pól w tooltipie były na tyle duże, że normalny człowiek w kilka sek. nie był w stanie ich przeczytać.
Rozwiązaniem okazała się darmowa kontrolka, jQuery tooltip plugin, którą tutaj przedstawiam. Główne zalety kontrolki:
- nielimitowany czas wyświetlania tooltipa
- możliwość schowania tooltipa w momencie wystąpienia zdarzenia jQuery (podpięcie 'schowania' pod event)
- tooltip oraz jego zawartość określana za pomocą edytowalnej klasy CSS
- możliwość umieszczania obrazków, 'image map' oraz linków w tooltipie.
- bardzo łatwa obsługa podpinania komponentu do istniejących rozwiązań (plugin przechwytuje istniejącego tooltipa i się pod niego podszywa).
- licencja MIT pozwalająca na darmowe, komercyjne zastosowanie kontrolek


Samo podpięcie nowego, lepszego tooltipa, do istniejącego rozwiązania z tooltipami jest banalnie proste. Potrzebujemy:

• dodać do naszego projektu pliki *.js z biblioteką jQuery oraz "jQuery tooltip plugin"
• umieścić referencje do tych plików, na stronach, na których będziemy się do nich odwoływać (zazwyczaj takie rzeczy umieszcza się w master page)
• utworzyć nową "pustą" klasę CSS, która będzie nam służyła jako "wskaźnik", dla każdego typu tooltipa (osobny css dla "obrazków", osobny dla "zwykłego tekstu" itp.)
• dodać referencje do pliku *.css w którym znajduje się nasz znacznik, na stronie, na której będziemy korzystać z tego pluginu (zazwyczaj takie rzeczy umieszcza się w master page)
•  do każdego obiektu, w którym ma być użyty extra tooltip, dołożyć klasę css odpowiedniego typu
• upewnić się, że pliki posiadają wypełnioną właściwość "tooltip" (kontrolki asp.net) lub 'title' (kontrolki html).
• przy uruchamianiu strony, wywołać skrypt aktywujący jQuery plugin tooltip

Na pierwszy rzut oka wydaje się tego sporo, ale w praktyce 90% z tych rzeczy powinno być już "zrobione" wcześniej (tooltipy w kontrolkach, pliki js osobno, pliki css osobno, do tego jakiś master page, z referencjami do tych plików).

Przykładowa kontrolka, z tooltipem wygląda tak:

<asp:TextBox ID="txtHelper" runat="server" ToolTip="tooltipHelper" CssClass="cssHelper"></asp:TextBox>

 Natomiast skrypt, aktywujący tooltipy dla każdego obiektu, który posiada klasę CSS o nazwie "cssHelper" wygląda tak:

    $("document").ready(function () {
        var objs = $(".cssHelper");

        jQuery.each(objs, function () {
            $("#" + this.id).tooltip();
        });
    });

P.S. Zachęcam do zapoznania się z projektem. Więcej przykładów znajduje się na stronie projektu w zakładce demo.

Edit:
Aby zrobić "multiline", czy też "page break" to należy:

                $('#selector').tooltip({
                    content: function () {
                        return $(this).attr('title');
                    }
                });

I dzięki temu, w tooltipie można skorzystać z  <br>

O jQuery słów kilka

jQuery jest to biblioteka napisana w języku 'javascript' przeznaczona jako darmowe rozszerzenie/uproszenie tego języka udostępniona na mocy licencji X11. W praktyce jQuery, oferuje to samo co standardowy 'javascript' jednak w o wiele bardziej przyjemnej, przyjaznej i uproszczonej formie. Kodu jest zdecydowanie mniej, jest on bardziej przejrzysty i o wiele bardziej niezawodny niż w przypadku własnoręcznie pisanego javascriptu.
Podstawą jQuery są tzw. selektory, czyli funkcje/klasy (w języku 'javascript'  funkcja jest klasą), które przeszukują drzewo DOM dokumentu w poszukiwaniu obiektów spełniających podane kryteria.
Standardowy selektor:

var txtHelper = $("#txtHelper");

Jest  równoznaczny wyrażeniu:

var txtHelper = document.getElementById("txtHelper");

Oba wyrażenia zwrócą bowiem obiekt (kod TextBoxa widziany z poziomu Visual Studio):

 <asp:TextBox ID="txtHelper" runat="server" ToolTip="tooltipHelper" CssClass="cssHelper"></asp:TextBox>

 Jeżeli ktoś jeszcze nigdy nie korzystał z jQuery i zastanawia się, czym jest znaczek $, to wyjaśniam, iż jest on nazwą funkcji/klasy reprezentowanej przez bibliotekę jQuery (w języku 'javascript' funkcja jest klasą, a klasa jest funkcją, więc odwołując się do funkcji odwołujemy się równocześnie do instancji jej klasy). W praktyce, pisząc $('alaMaKota') wywołujemy funkcję(klasę) o nazwie $ z parametrem 'alaMaKota'.
Gdyby ktoś potrzebował więcej wyjaśnień w sprawie, skąd się wziął dolar, to odsyłam do odpowiedniego wpisu: Greg Sidelnikov wyjaśnia "JavaScript DollarSign ($)"

Wracając do samego selektora, w celu wyszukania odpowiednich elementów (kontrolek) w dokumencie preferuję posługiwanie się klasami CSS, zamiast "ID" elementu.
Powodów jest kilka:
- inne kontrolki (np. ListView) czasami mają wpływ na nazwę naszego elementu widzianego w kontekście DOM, więc wykorzystywanie takiego 'id' jaki mamy w VS czasami nie zwraca oczekiwanego przez nas elementu
- czasami potrzebujemy wyszukać elementy nie posiadające swojego serwerowego 'id'
- czasami potrzebujemy wyszukać grupę identycznych elementów, a dzięki wykorzystaniu jQuery i CSS dostajemy grupę elementów spełniających nasze wymagania, po których możemy później iterować pętlą "each".

Nie bez znaczenia jak też tutaj fakt, że jeden obiekt może posiadać nieskończenie wiele klas CSS.
Przykład wykorzystania selektora z CSS, pętli "each" oraz dodatkowej funkcjonalności jQuery (dostarczonej w osobnych bibliotekach).

    $("document").ready(function () {
        var objs = $(".cssHelper");

        jQuery.each(objs, function () {
            $("#" + this.id).tooltip();
        });
    });

 W tym konkretnym przykładzie,  utworzony został skrypt, który automatycznie uruchamia się po zakończeniu ładowania się strony do przeglądarki. Skryp ten, wyszukuje wszystkie obiekty, które mają klasę CSS o nazwie "bar", a następnie, za pomocą pętli "each" aktywuje u nich funkcję "tooltip()".

Sama funkcja "tooltip()" dostępna jest jako darmowy plugin jQuery i znacznie rozszerza opcję standardowego "tooltipa" jednak o tym rozszerzeniu napiszę nieco więcej w innym wpisie.

Wracając jednak do selektora, jedną z jego wspaniałych zalet, jest np. możliwość bezproblemowego odwoływania się do obiektów, do których odwoływanie się za pomocą standardowego javascriptu stanowi poważnym problem. Przykładem jest tutaj "HiddenField", do którego odwołujemy się w sposób nieco "pokrętny", jednak przedstawiona poniżej wersja, jest obecnie najbardziej poprawna.
Sam 'HiddenField' dostaje swojego "opakowującego" div-a:

            <div class="hfFoo-wrap">
                <asp:HiddenField runat="server" ID="hfFoo" />
            </div>

 Natomiast funkcja która, która go poprawnie wyszukuje (i ustawia/sprawdza wartość) wygląda tak:

function FooBarFunction() {
    var hfFoo = $('.hfFoo-wrap input[type=hidden]');
    hfFoo.val('Bar');
    var isBar = hfFoo.val();
}

Dzięki czemu widzimy, że funkcje wyszukiwania selektora jQuery są o wiele potężniejsze niż standardowe wyszukiwanie obiektów, za pomocą "czystego" javascriptu. Ponieważ przedstawione tutaj przykłady stanowią jedynie wierzchołek góry lodowej oraz możliwości jQuery, zachęcam więc, do samodzielnego zapoznania się z tą wspaniałą, dostępną za darmo biblioteką.
 Oficjalna strona projektu.

Find Control Iteractive

Skoro pierwszy wpis powitalny mam już za sobą, najwyższa pora, opublikować jakiś wpis merytoryczny. Pierwszy wpis merytoryczny, jest poświęcony metodzie roboczo nazwanej FindControlIterative, która wykorzystana na stronach ASP.NET służy do znalezienia konkretnej kontrolki na stronie za pomocą kodu języka C# (tzw. "code behind").

        public Control FindControlIterative(Control root, string id)
        {
            Control ctl = root;
            LinkedList<Control> ctls = new LinkedList<Control>();

            while (ctl != null)
            {
                if (ctl.ID == id)
                    return ctl;
                foreach (Control child in ctl.Controls)
                {
                    if (child.ID == id)
                        return child;
                    if (child.HasControls())
                        ctls.AddLast(child);
                }
                ctl = ctls.First.Value;
                ctls.Remove(ctl);
            }
            return null;
        }

 Metoda ta, w sposób iteracyjny sprawdza wszystkie "kontrolki w kontrolce", aż do momentu znalezienia szukanej przez nas kontrolki, po czym przeszukiwanie ustaje i dostajemy szukaną przez nas kontrolkę. W przypadku nie odnalezienia danej kontrolki, dostajemy "null". Najlepszym, znanym mi sposobem, na wykorzystanie tej metodzie, to uruchomienie jej na aktualnym "Master Page" (o ile strona na której operujemy posiada jakiś master page).

                    Label lblFoo = FindControlIterative(this.

Page.Master, "lblFoo") as Label;
                    lblFoo.Text = "Bar";

Dzięki tej metodzie, mamy szybki i bezproblemowy dostęp do wszystkich kontrolek dostępnych na stronie, z poziomu "code behind" każdej kontrolki wykorzystanej na danej stronie (taki odpowiednik jQuery, tyle, że po stronie kodu C#).

Pierwszy wpis

Witam na moim techblogu.

Celem tego blogu, jest propagowanie wiedzy oraz pomoc innym developerom podczas ich codziennej pracy nad kodem (i nie tylko). Jest to moje aktywne podziękowanie dla innych blogów tego typu oraz ich autorów z których wielokrotnie korzystałem, a zarazem moja drobna cegiełka w ulepszanie świata.

Ponieważ jako zawodowemu programiście wielokrotnie zdarzało mi się wykorzystywać znalezione materiały jako element własnego oprogramowania, jestem wielkim zwolennikiem licencji X11 (zwanej licencją MIT) i jeżeli nie jest napisane inaczej, to wszelkie zamieszczone tutaj materiały są mojego autorstwa (bądź też znalezione tak dawno, że nie pamiętam gdzie powstały) i udostępnione są tutaj na licencji X11.