[C#|Visual Studio] ASP .NET SignalR: JavaScript Hubs Client API

Najczęściej komunikować z hubami będziemy się chcieli z poziomu kodu wykonywanego w środowisku przeglądarki. Klient oparty na bibliotece jQuery nie jest jednak jedynym dostępnym klientem signalR. Do dyspozycji mamy także klienta .NET oraz między innymi WP8, WinRT czy C++. Konsumentami mogą być także inne huby.

Klient JS może komunikować się z serwerem w dwóch trybach:

• bazującym na późnym wiązaniu i opartym na wołaniu metod i zdarzeń poprzez podawanie ich nazw jako stringów
• bardziej zaawansowanym, opartym na dynamicznie wygenerowanych proxy 

Kluczem do dynamicznego proxy jest endpoint /signalr/hubs/, który generuje kod kliencki na podstawie kodu w .NET. Kod taki można także wygenerować statycznie za pomocą narzędzie signalr.exe (NuGet Microsoft.AspNet.SignalR.Utils).

Przykładowe wywołania klienckie w oparciu o dynamic proxy.

<script>
    $(function () {
        var hub = $.connection.modernChat;

        hub.client.newMessage = function(msg){
         console.log(msg);
        }

        $.connection.hub
            .start()
            .done(function () {
          hub.server.sendMessage('Hello');    
            });
    });
</script>

Huby stają się propercjami na $.connection. Wszystkie metody pogrupowane są w hub.server.* (metody zdefiniowane po stronie serwera) oraz hub.client.* (metody klienckie wołane przez serwer). Wywołanie metody start rozpoczyna asynchroniczne negocjowanie protokołu i zwraca obiekt promise. Jako parametr można przekazać obiekt, w którym wybierzemy, z jakich sposobów transportu chcemy korzystać (SignalR wybierze ten najlepszy).

var started = hub.start({
    transport: [
        'webSockets',
        'longPolling',
        'serverSentEvents',
        'foreverFrame'
    ]
});

started.done(function () {
    console.log('connected, transport: ' +
       hub.transport.name);
});

Do celów diagnostycznych warto uruchomić po stronie klienckiej tryb konsolowego logowania za pomocą poniższego polecenia.

$.connection.hub.logging = true;

Przy użyciu late binding możemy uzyskać identyczny jak powyżej efekt w poniższy sposób.

var connection = $.hubConnection();
var proxy = connection.createHubProxy('modernChat');
proxy.on('newMessage', function(msg){
 console.log(msg);
});
connection.start();
proxy.invoke('sendMessage', 'Hello');

[HTML|JS|CSS] jQuery: Pluginy i rozszerzanie

Na githubie aż roi się od przeróżnych pluginów do jQuery pisanych przez mniej lub bardziej sprawnych programistów. Jak napisać własny plugin ? Przykład poniżej.

(function($){

 $.fn.print = function(props) {
  var functions = $.fn.print.functions;
  if ($.isArray(props)) {
   functions = $.merge(functions, props);
  }
  return this.each(function() {
   var element = $(this);
   functions.forEach(function(fn){
    console.log(fn, ': ', $(element)[fn]());
   });
  });
 };

 $.fn.print.functions= ['height', 'width'];

})(jQuery);

Trick z immediate function to zabezpieczenie na wypadek, gdyby aplikacja używała $ (który jest aliasem dla obiektu jQuery) do innych celów. Pisząc plugin rozszerza się obiekt fn, który jest referencją na prototype obiektu jQuery. Korzystając z faktu, że każda funkcja jest obiektem, możemy załączyć do niej obiekt, który może zostać wykorzystany, jako domyślne ustawienia pluginu.

Plugin wywołujemy na dowolnym selektorze, na przykład:

$(function(){
 $('div').print();
 $('a').print(['size']);
 $('button').print(['html']);
});

Drugi sposób na uzyskanie podobnego efektu, to funkcja extend z jQuery, którą wykorzysujemy do łączenia dwóch obiektów JavaScript w jeden. Wywołanie tej funkcji na $.fn spowoduje rozszerzenie jQuery o naszą funkcję.

(function($){

 $.fn.extend({
  count: function(){
   console.log(this.length);
  }
 });

})(jQuery);

$(function(){
 $('div').count();
});

[HTML|JS|CSS] jQuery: Lightbox

Lightbox to popularna na stronach internetowych technika wyświetlania obrazów z wyszarzonym tłem, znana na przykład z allegro. W tym poście przedstawione zostanie, jak zaimplementować taką funkcjonalność z użyciem jQuery.

Odnośniki do obrazków będą zwykłymi tagami typu <a>. Po kliknięciu w odnośnik zostaną dodane dwie warstwy: zewnętrzna (overlay) i ta, na której wyświetlany jest obrazek (lightbox).

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>Lightbox</title> 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
    <script src="scripts/myscript.js"></script>
</head>
<body>
 <h2>Nice cars list</h2>
 <ul>
  <li>
   <a href='/images/bmw_seria6.jpg' class='lightbox'>BMW Seria 6</a>
   <a href='/images/hyundai_genesis.jpg' class='lightbox'>Hyundai Genesis</a>
   <a href='/images/lexus_ct200h.jpg' class='lightbox'>Lexus Ct200h</a>
   <a href='/images/mercedes_slk.jpg' class='lightbox'>Mercedes SLK</a>
   <a href='/images/nissan_350z.jpg' class='lightbox'>Nissan 350z</a>
  </li>
 </ul>
</body>
 <style>
  #lightbox_overlay {
   position:absolute;
   top:0;
   left:0;
   height:100%;
   width:100%;
   background:black url(spinner.gif) no-repeat scroll center center;
  }
  #lightbox {
   position:absolute;
  }
 </style>
</html>

Overlay pozycjonowany jest absolutnie z wymiarami na 100%. Pozycję lightboxa wylicza się tak, aby trafił na środek ekranu. Animacja opacity daje efekt półprzezroczystej warstwy.

$(document).ready(function(){
 $('a.lightbox').click(function(e) {
  $('body').css('overflow-y', 'hidden');
  $('<div id="lightbox_overlay"></div>').css('top', $(document).scrollTop())
  .css('opacity', '0')
  .animate({'opacity': '0.5'}, 'slow')
  .appendTo('body');
 $('<div id="lightbox"></div>')
  .hide()
  .appendTo('body');
 $('<img />')
  .attr('src', $(this).attr('href'))
  .load(function() {
   positionLightboxImage();
  })
  .click(function() {
   removeLightbox();
  })
  .appendTo('#lightbox');
  return false;
 });
 });

function positionLightboxImage() {
 var top = ($(window).height() - $('#lightbox').height()) / 2;
 var left = ($(window).width() - $('#lightbox').width()) / 2;
 $('#lightbox')
  .css({
   'top': top + $(document).scrollTop(),
   'left': left
  })
 .fadeIn();
}

function removeLightbox() {
 console.log('asd');
 $('#lightbox_overlay, #lightbox')
  .fadeOut('slow', function() {
   $(this).remove();
   $('body').css('overflow-y', 'auto');
  });
}

[HTML|JS|CSS] jQuery : Efekty

Kolejnym powodem, dla którego warto skorzystać z biblioteki jQuery jest proste API dla tworzenia efektów na stronie internetowej. Dzięki animacjom każdy programista może poprawić interaktywność swojej strony internetowej, dopasowując ją do najnowszych standardów wyglądu.

Pierwszą rzeczą, którą można łatwo wykonać przy użyciu jQuery jest pokazywanie / ukrywanie elementu. Służą do tego odpowiednio metody .show() oraz .hide(). Ponadto mamy do dyspozycji metodę .toggle(), która dokonuje przełączeń pomiędzy wspomnianymi stanami. Wszystkie trzy metody dokonują modyfikacji na właściwości display.

$(document).ready(function(){
 $('#showhide').click(function(){  
  if($('.image').first().css('display')=='block')
  {
   $('.image').hide();
  }
  else
  {
   $('.image').show();
  }  
 });
 $('#toggle').click(function(){
  $('.image').toggle();
 });
 });

Analogiczne operacje możemy wykonać wprowadzając nieco animacji. Efekty z grupy slide imitują efekt zwijania / rozwijania elementu, animując jego wysokość. Dla każdej z funkcji możemy podać długość animacji (w ms) oraz callback, który zostanie wywołany w momencie zakończenia animacji.

$(document).ready(function(){
 $('#slideup').click(function(){
  $('.image').slideUp(800, function() {
      console.log('animation completed');
    });
 });

 $('#slidedown').click(function(){
  $('.image').slideDown(800, function() {
      console.log('animation completed');
    });
 });

 $('#slidetoggle').click(function(){
  $('.image').slideToggle('fast', function() {
      console.log('animation completed');
    });
 });
 });

Kolejne bardzo popularne efekty to znikanie i pojawianie się, czyli manipulacja na opacity. Korzystając z jQuery możemy to załatwić w jednej linijce. Proste funkcje fadeIn oraz fadeOut z opcjonalnym callbackiem ofertują taką funkcjonalność. Dodatkowo mamy funkcje fadeToggle(przełączanie przez zanikanie / pojawianie się) oraz fadeTo, która animuje nam opacity obrazka przez zadaną ilość milisekund do zadanej wartości

$(document).ready(function(){ 

 $('#fadein').click(function(){
  $('.image').fadeIn('slow');
 })

 $('#fadeout').click(function(){
  $('.image').fadeOut(1000,function(){
   console.log('animation completed');
  });
 })

 $('#fadeto').click(function(){
  $('.image').fadeTo('slow',0.3);
 })

 });

W przypadku bardziej zaawansowanych potrzeb dostajemy do dyspozycji funkcję animate, gdzie możemy podać, które właściwości chcemy animować, do jakiej wartości docelowej, oraz standardowo czas trwania i callback. Animacja wielu właściwości zostanie wykonana jednocześnie.

$(document).ready(function(){

 $('#animate').click(function(){
  $('.image').animate({
      opacity: 0.25,
      width: '+=50',
      height: '30px'
    }, 5000, function() {
      console.log('animation completed')
    });
 });

 });

Jeżeli zachodzi potrzeba, aby animacje wykonywały się sekwencyjnie można wywoływać je jedna po drugiej w jednej linijce. Api jQuery zapewnia taką wygodę dla programisty, co znacznie redukuje ilość kodu. Pomiędzy kolejnymi animacjami można wprowadzać opóźnienia, przy użyciu funkcji .delay()

$(document).ready(function(){

 $('#delay').click(function(){
  $('.image').slideUp('slow').delay(1500).slideDown('slow');
 });
 });

[HTML|JS|CSS] jQuery : Manipulowanie modelem DOM

Biblioteka jQuery udostępnia sporo wygodnych metod na potrzeby manipulowania modelem DOM. Poniższe przykłady prezentują możliwości jQuery w tej dziedzinie.

• Ustawianie kodu html wewnątrz danego elementu i jednocześnie odczyt zawartości elementu

$(document).ready(function(){
   $('.container').html('<button>Click</button>');
   alert($('.container').html());
 });

• Dodawanie elementów na początku i na końcu wewnątrz elementu wybranego selektorem

$(document).ready(function(){ 
   $('.container').append('<button>Last</button>');
   $('.container').prepend('<button>First</button>');
 });

• Dodawanie elementów na przed i po elemencie wybranym za pomocą selektora

$(document).ready(function(){
   $('.container').after('<div class="after_container"></div>');
   $('.container').before('<div class="before_container"></div>');
 });

• Usuwanie elementów z modelu DOM wybranych selektorem

$(document).ready(function(){
   $('.container button').first().remove();
 });

• Klonowanie elementów i wklejanie w dowolne miejsce

$('.container button').first().clone().appendTo('.vessel');

[HTML|JS|CSS] jQuery : Zdarzenia

Korzystając z biblioteki jQuery, programista ma do dyspozycji zdarzenia JavaScript, ale nie musi się do nich dowiązywać w kodzie HTML. Cała obsługa zdarzeń realizowana jest w pliku .js. Dzięki selektorom programista może dowiązać się do wielu zdarzeń za pomocą jednego selektora.

Zdarzenia można pogrupować w 4 kategorie.

• Zdarzenia dokumentu (okna)

//po zaladowaniu dokumentu HTML
$(document).ready(function(){
   console.log('event ready');
 });
//po zaladowaniu wszystkich zasobow
$(window).load(function(){
   console.log('event load');
 });
//po zamknieciu okna przegladarki 
//lub przejsciu do nowej strony 
//za posrednictwem paska adresu lub odnosnika
$(window).bind('unload', function(){
   console.log('event unload');
 });
//zmiana rozmiaru okna
$(window).bind('resize', function(){
   console.log('event resize');
 });
//po scrollowaniu
$(document).scroll(function(){
   console.log('event scroll');
 });

• Zdarzenia myszy

$(document).ready(function(){
   console.log('event ready');

   //MOUSE EVENTS

   $('.events').click(function(){
 console.log('event click');
 });

   $('.events').bind('dblclick', function(){
    console.log('event dblclick');
 });

   $('.events').bind('mousedown', function(){
    console.log('event mousedown');
 });

   $('.events').bind('mouseup', function(){
    console.log('event mouseup');
 });

   $('.events').bind('mouseenter', function(){
    console.log('event mouseenter');
 });

   $('.events').bind('mouseleave', function(){
    console.log('event mouseleave');
 });

   $('.events').bind('mousemove', function(){
    console.log('event mousemove');
 });
   //usuniecie kursora myszy z okreslonego elementu
   //i jego elementu nadrzednego
   $('.events').bind('mouseout', function(){
    console.log('event mouseout');
 });
   //umieszczenie kursora myszy w obrebie 
   //okreslonego elementu i jego elementu nadrzednego
   $('.events').bind('mouseover', function(){
    console.log('event mouseover');
 });

 });

• Zdarzenia formularzy

$(document).ready(function(){
   console.log('event ready');

   //FORM EVENTS

   //edytowanie zawartosci
   $('.myform').bind('change', function(){
    console.log('event change');
 });
   //aktywowanie za pomoca Tab lub zaznaczenia
   $('.myform').bind('focus', function(){
    console.log('event focus');
 });
   //dezaktywowanie na rzecz innego elementu
   $('.myform').bind('blur', function(){
    console.log('event blur');
 });
   //zaznaczenie tekstu wewnatrz formularza
   $('.myform').bind('select', function(){
    console.log('event select');
 });
   //po zatwierdzeniu formularza elementem input
   //o typie submit 
   $('.myform').bind('submit', function(){
    console.log('event submit');
 });
   //po zatwierdzeniu formularza elementem input
   //o typie reset 
   $('.myform').bind('reset', function(){
    console.log('event reset');
 });

 });

• Zdarzenia klawiatury

$(document).ready(function(){   

   //KEYBOARD EVENTS

   //nacisniecie klawisza
   $('.myform').bind('keydown', function(){
    console.log('event keydown');
 });

   //jednokrotne lub wielokrotne nacisniecie
   $('.myform').bind('keypress', function(){
    console.log('event keypress');
 });

   //zwolnienie klawisza
   $('.myform').bind('keyup', function(){
    console.log('event keyup');
 });
 });

[HTML|JS|CSS] jQuery : Selektory i Filtry

Najważniejszą przewagą jQuery w stosunku do czystego kodu JavaScript są selektory, czyli konstrukcje pozwalające w łatwy sposób przeszukiwać drzewo DOM. Skrócony zapis (przeważnie do jednej linijki) znacznie poprawia czytelność kodu. Poniżej przedstawione zostaną najważniejsze selektory. Należy pamiętać, że selektor zwracam kolekcję elementów, na której możemy operować.

• wyszukiwanie po id, klasie, typie elementu, z uwzględnieniem kilku kryteriów

    //id
    $('#main_container').css("border","3px solid red");    
    //class
    $('.btn-white').css("border","3px solid red");
    //element
    $('textarea').css("border","3px solid red");
    //multiple elements
    $('textarea, .btn-white').css("border","3px solid red");

• wyszukiwanie po relacjach parent - child, lub ancestor - descendant (potomek może być wiele poziomów niżej w hierarchii, dziecko tylko jeden poziom)..

    // parent > child
    $('.component > div').css("border","3px solid red");
    //ancestor descendant
    $('.component  div').css("border","3px solid red");
    //prev + next
    $('.span3 + .span2').css("border","3px solid red");

Przeszukane kolekcje możemy filtrować zestawem gotowych filtrów, dopisywanych po dwukropku. 

•  na podstawie indeksu

$('.btn-white:first').css("border","3px solid red");
$('.btn-white:last').css("border","3px solid blue");
//tylko nieparzyste
$('.btn-white:odd').css("border","3px solid black");
var n = 1;
//o indeksach mniejszych niz
$('.btn-white:lt('+n+')').css("border","3px solid red");
//o indeksie rownym
$('.btn-white:eq('+n+')').css("border","3px solid red");
//o indeksie rozne od parzystych
$('.btn-white:not(:even)').css("border","3px solid blue")
//o indeksach wiekszych niz
$('.btn-white:gt('+n+')').css("border","3px solid black");

• na podstawie relacji

$('.row-fluid:first-child').css("border","3px solid red");
$('.row-fluid:last-child').css("border","3px solid blue");   
//kazdy element (w tym przypadku div), 
//ktory jest jedynym dzieckiem dla swojego rodzica
$('div:only-child').css("border","3px solid red");
$('.row-fluid:nth-child(2)').css("border","3px solid blue"); 

• na podstawie zawartości

$('button:contains('+text+')').css("border","3px solid red");
$('div:not(:empty)').css("border","3px solid red");
$('div:empty').css("border","3px solid blue");
$('div:has(h4)').css("border","3px solid red");
$('#main_container:parent').css("border","3px solid red");

[HTML|JS|CSS] jQuery : Wprowadzenie

Biblioteka jQuery powstała by ułatwić życie programistom JavaScript i jest jedną z najpopularniejszych bibliotek dla tego języka. Jej największą zaletą jest znaczne ułatwienie przeszukiwania drzewa DOM w porównaniu do czystego JavaScriptu. Ponadto programista ma do dyspozycji łatwe w obsłudze zdarzenia, czy możliwość manipulacji kodem HTML oraz stylami. Proste efekty animacji pozwalają na szybkie tworzenie bardzo interaktywnych stron.

Aby móc korzystać z jQuery należy załączyć link do skryptu:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="scripts/myscript.js"></script>

Należy pamiętać, że aby móc korzystać w naszym skrypcie z jQuery musi on się znajdować pod załączeniem pliku .js biblioteki jQuery.

Większość instrukcji jQuery rozpoczyna się od znaku $, który można stosować zamiennie z aliastem "jQuery". Przykładowo, gdy chcemy zapiąć się na zdarzenie załadowania okna, piszemy:

jQuery(document).ready(function(){
 alert('hello jQuery');
 });