Ostatnio wpadła mi w ręce wymieniona w tytule książka wydawnictwa helion. Po jej przeczytaniu postanowiłem co nieco o niej napisać.

Seria "Rusz głową!"

Na wstępie muszę poruszyć kwestię samej serii "Head first" (wydawnictwo helion sprzedaje ją pod nazwą: "Rusz głową!"). Książki z tej serii różnią się znacznie od większości pozycji informatycznych, jakie można spotkać w księgarniach. Autorzy nie tylko kładą nacisk na ilość informacji w nich zawartych, ale również na łatwość ich przyswajania. Tak więc w książkach, z tej serii, znajdziemy liczne łamigłówki, testy sprawdzające, ilustracje, dialogi oraz komentarze, zmuszające do myślenia i niepozwalające się zbyt szybko nudzić.

Ocena książki

Co do samej książki "Wzorce projektowe. Rusz głową" to uważam, że jest bardzo dobra. W kolejnych rozdziałach omawiane są najpopularniejsze wzorce projektowe. Szczególnie zasługuje na pochwałę to, że gotowe rozwiązania nie są podawane od razu na tacy, tylko wraz z przeczytaniem kolejnych stron rozdziału, czytelnik może sam dojść do określonych wniosków i rozwiązań. Jest to możliwe, ponieważ najpierw jest pokazany określony problem, a dopiero potem proponowane są kolejne rozwiązania (z przedstawieniem ich wad i zalet) dochodząc na końcu do rozwiązania przedstawiającego klasyczny przykład wzorca projektowego.

Kolejną zaletą tej pozycji książkowej jest fakt, że oprócz diagramów i opisów wzorców zamieszczono też gotowy kod napisany w Javie, a więc w języku, który jest cały czas popularny i bardzo często używany.

Co do szybkości, z jaką można przyswoić wiedzę z tej książki to również jest dobrze. Dzięki testom na końcu rozdziałów można dowiedzieć się ile się zapamiętało i ewentualnie powrócić do części rozdziału. Co prawda autorzy zalecają, czytając książkę, od razu robić zamieszczone w nich przykłady, ale myślę, że nadaje się ona również do poczytania podczas podróży.

Ostatnie rozdziały pokazują jak łączyć poznane wzorce oraz gdzie szukać dodatkowych informacji na ich temat.

To, co zasługuje na szczególne uznanie to fakt, że autorzy nie próbują na siłę wmówić, że zawsze i wszędzie da się i trzeba stosować wzorce projektowe, proponują natomiast zachować umiar i zdrowy rozsądek, poprzez stosowanie wzorców projektowych tylko tam gdzie może to przynieść wymierne korzyści.

Ogólnie książkę polecam wszystkim tym, którzy chcą dowiedzieć się czegoś o wzorcach projektowych lub trochę sobie o nich przypomnieć.

Zalety książki:

• przedstawiono wszystkie najpopularniejsze wzorce projektowe,
• testy i zadania w każdym rozdziale (z rozwiązaniami na końcu),
• przykłady w Javie,
• nowatorski i ciekawy sposób przekazywania wiedzy (autorzy starają się podtrzymać uwagę czytelnika).

Wady:

• nie każdemu może odpowiadać forma zaprezentowana w tej książce.

Witam po dłuższej przerwie. Dzisiaj pokaże jak napisać prosty system oceniania w postaci gwiazdek. Przy okazji pokarzę jak można w prosty sposób rozszerzyć funkcjonalność biblioteki jQuery, ale po kolei.

Co będziemy robić

Napiszemy mechanizm, który zamieni standardowego input-a w system do oceniania w postaci gwazdek, które będą reprezentowały aktualną ocenę użytkownika. Takie gwiazdki są z powodzeniem wykorzystywane do oceniania przez użytkowników strony lub prezentowanej na niej treści.

Jak to będzie działać

A więc jak pisałem rozszerzę funkcjonalność jQuery, tak żeby system można było uruchomić prostym poleceniem:

$(selektor).stars();

Oprócz tego, gwiazdki te muszą reagować na pewne zdarzenia:

• mouseover – po najechaniu kursorem myszki na gwiazdkę, ilość aktywnych gwiazdek powinna się zmienić,
• mouseout – po opuszczeniu obszaru z gwiazdką liczba gwiazdkę powinna zostać przywrócona do poprzedniego stanu (można ją wczytać z ukrytego input-a),
• click – po kliknięciu w daną gwiazdę wartość w ukrytym inpucie powinna się zmienić.

Implementacja

Rozszerzanie funkcjonalności jQuery

W ten prosty sposób możemy rozszerzyć funkjonalność jQuery:

$.fn.stars = function(){return $(this);};

$(selektor).stars();

Wyświetlanie gwiazdek

Do wyświetlania gwiazdek użyję obrazka pochodzącego z galerii OpenClipart, jak widać obrazek ten zawiera [5x5] gwiazdek. Na stronie będzie widoczny zawsze tylko jeden rząd w zależności od aktualnej oceny (będzie można ją zmienić za pomocą dodania odpowiednich klas).

A więc podsumowując, kod html:

<div class="mx_stars mx_stars_val_VAL">
    <a class="mx_star mx_star1" title="1" href="#"></a>
    <a class="mx_star mx_star2" title="2" href="#"></a>
    <a class="mx_star mx_star3" title="3" href="#"></a>
    <a class="mx_star mx_star4" title="4" href="#"></a>
    <a class="mx_star mx_star5" title="5" href="#"></a>
</div>

A oto style:

.mx_stars {
    display: inline-block;
    width: 188px;
    height: 40px;
    background-image: url('5-stars.png');
}

.mx_stars_val_1{
    background-position: 0 -160px;
}

.mx_stars_val_2{
    background-position: 0 -120px;
}

.mx_stars_val_3{
    background-position: 0 -81px;
}

.mx_stars_val_4{
    background-position: 0 -40px;
}

.mx_stars_val_5{
    background-position: 0 1px;
}

.mx_star {
      float: left;
      width: 37px;
      height: 50px;
      border: 0;
} 

Podmiana inputa

Cała funkcja stars wygląda następująco:

$.fn.stars = function(){
    var val = $(this).val();
    $(this).hide();
    $(this).after('<div class="mx_stars mx_stars_val_'+val+'">\n\
                                <a class="mx_star mx_star1" title="1" href="#"></a>\n\
                                <a class="mx_star mx_star2" title="2" href="#"></a>\n\
                                <a class="mx_star mx_star3" title="3" href="#"></a>\n\
                                <a class="mx_star mx_star4" title="4" href="#"></a>\n\
                                <a class="mx_star mx_star5" title="5" href="#"></a>\n\
                            </div>');
    return $(this);
};

Obsługa zdarzeń

Dzięki temu że znamy zależność położenia między inputem a systemem gwiazdek, możemy uzyskać dostęp do obu tych elementów za pomocą nawigacji po drzewie DOM:

$(document).ready(function(){
    //kursor nad gwiazdką
    $('.mx_star').live('mouseover', function(){
        var val = $(this).attr('title');
        $(this).parent('div')
            .removeClass('mx_stars_val_1 mx_stars_val_2 mx_stars_val_3 mx_stars_val_4 mx_stars_val_5')
            .addClass('mx_stars_val_'+val);
    });
    
    //kursor poza gwiazdką
    $('.mx_star').live('mouseout', function(){
        var val = $(this).parent('div').prev('input').val();
        $(this).parent('div')
            .removeClass('mx_stars_val_1 mx_stars_val_2 mx_stars_val_3 mx_stars_val_4 mx_stars_val_5')
            .addClass('mx_stars_val_'+val);
    });
    
    //kliknięcie gwiazdki
    $('.mx_star').live('click', function(){
        var val = $(this).attr('title');
        $(this).parent('div').prev('input').val(val);
        return false;
    });
});

Podsumowanie

To by było na tyle, w przyszłości postaram się dodać kolejne użyteczne funkcje i być może zrobić z tego bibliotekę. Na razie końcowy efekt można zobaczyć klikając tutaj a cały kod źródłowy można ściągnąć stąd.

Lubię narzędzia które są genialne w swojej prostocie. Do takich narzędzi zaliczam m. in. środowisko programistyczne Geany, które udostępnia wszystkie najważniejsze opcje i jednocześnie nie jest przeładowane zbędnymi bajerami. Podobnie jest z webowym frameworkiem o nazwie CodeIgniter. Framework ten wyróżnia się lekkością, prostotą i niezwykle wyczerpującą dokumentacją. Postaram się opisać pokrótce, najciekawsze według mnie, aspekty tego frameworka. Oczywiście tego wpisu nie można traktować jako kompletnego kursu, opisuję tutaj tylko niektóre jego funkcje i możliwości.

Instalacja i konfiguracja

Instalacja frameworka jest banalnie prosta i sprowadza się do pobrania ze strony codeigniter.com/downloads/ paczki z najnowszą jego wersją i wypakowania jej zawartości do głównego katalogu strony. Dodatkowo w podkatalogu user_guide znajduje się szczegółowa dokumentacja tego frameworka wraz z przykładowym kodem. W katalogu application/config/ znajdują się pliki konfiguracyjne. W pliku config.php są zamieszczone podstawowe ustawienia frameworka. Możemy w nim zmienić np. domyślny język, adres bazowy strony, kodowanie i wiele innych ustawień. Żeby można było połączyć się z bazą danych, należy wypełnić odpowiednimi danymi plik konfiguracyjny database.php.

Wzorzec projektowy

CodeIgniter, jak zresztą większość webowych frameworków, wykorzystuje wzorzec MVC (model, view, controller). Dzięki temu możliwe jest odseparowanie podstawowych elementów aplikacji webowej oraz do pewnego stopnia uniezależnienie ich od siebie. W przeciwieństwie do innych frameworków webowych, CodeIgniter nie wymusza stosowania określonego nazewnictwa dla modeli, oraz widoków. Jest to dość wygodne, ponieważ nie musimy zmieniać swoich nawyków programistycznych. Jedynie nazwa klasy kontrolera oraz jej funkcje muszą być zgodne ze wzorcem i odpowiadać adresowi strony:

adres_strony/index.php/nazwa_kontrolera/nazwa_funkcji_kontrolera

Dla przykładu kod kontrolera odpowiedzialny za wyświetlenie strony strona.net/index.php/blog/all/ może wyglądać następująco:

<?php
//--- controllers/blog.php ---

class Blog extends CI_Controller 
{
	function __construct()
	{
		parent::__construct();
	}

	function all()
	{
		$this->load->model('post'); //wczytywanie modelu
		$data = array();
		//pobieranie danych z bazy
 		$data['posts'] = $this->post->getAll()->result();
 		
        	$this->load->view('post', $data); //wyświetlanie widoku
	}
}
?>

Obsługa baz danych

Komunikacja z bazą danych odbywa się według wzorca Active Record. Jest to rozwiązanie pośrednie między ORM a pisaniem zapytań w czystym SQL. Zastosowany w CodeIgniter zmodyfikowany wzorzec Active Record jest niezależny od konkretnej bazy danych, a przy tym jest szybki i dość prosty w stosowaniu, dla osób znających składnie języka zapytań SQL. Zapytania tworzy się poprzez wykonanie kolejnych funkcji, które służą do określenia, których tabel, wierszy i pól zapytanie dotyczy, a następnie określeniu co chcemy z nimi zrobić. Możemy w ten sposób pobrać, usunąć, zaktualizować lub dodać dane, do bazy danych. Poniżej zamieszczam przykład wykorzystania Active Record w klasie modelu:

<?php
// (...)
	function getPostsByCategory($category_ID)
	{
		$this->db->where('category_ID', $category_ID);
		$this->db->order_by('date', 'desc');
		return $this->db->get('post');
	}
// (...)
?>

Podsumowanie

Oczywiście to krótkie wprowadzenie, nie pokazuje wszystkich możliwość tego frameworka. Chciałem jedynie ukazać jego możliwości, oraz podstawowe idee jakie przyświecały jego twórcą, takie jak np. szybkość działania, oraz prostota. Do jego głównych zalet można zaliczyć między innymi:

• wsparcie dla wzorca MVC,
• niezależność od konkretnej bazy danych, dzięki zastosowaniu wzorca Active Record,
• bardzo szczegółowa dokumentacja, zawierająca opisy wszystkich klas i metod, oraz przykłady ich zastosowania w praktyce,
• prosta instalacja oraz konfiguracja,
• prostota oraz szybkość działania.

Po więcej informacji na temat tego frameworka odsyłam na oficjalną stronę – http://codeigniter.com, gdzie znaleść można video tutoriale, oraz dokumentację.

Często zdarza się że na naszą stronę potrzebujemy jedynie kilku prostych skryptów JS. Wtedy nie ma sensu, żeby zaprzęgać do pracy jakiegoś frameworka JavaScriptu, jak np. JQuery lub Prototype. O wiele prościej i wydajniej jest napisać te kilka funkcji samemu.

Co będziemy robić

Takim efektem, który możemy w prosty sposób uzyskać jest animowane przewijanie strony na sam początek (lub do dowolnego innego miejsca). Taka animacja dobrze wygląda i pozwala użytkownikowi jeszcze raz rzucić okiem na całość strony.

Przygotowania

Przed przystąpieniem do pracy, należy się zastanowić jakie funkcje i zmienne będą nam przy tym potrzebne, i jak możemy się do nich dostać. Bez wątpienia potrzebna nam będzie wartość wyrażająca liczbę pikseli, o jaką strona została przewinięta w pionie. Wartość ta reprezentuje zmienna:

window.scrollY

window.scrollBy(X,Y)

setTimeout(func,millisec[,lang])

• func – referencja do funkcji, która ma zostać wywołana,
• milisec – czas liczony w milisekundach, po którym ma zostać wywołana przekazana w pierwszy argumencie funkcja,
• lang – opcjonalny argument, oznaczający język skryptowy.

Implementacja

Implementacja jest banalnie prosta, sprowadza się do sprawdzenia czy strona przewinięta jest do samej góry, a jeżeli nie, to wywoływana jest funkcja która ją przewija, o zadaną liczbę pikseli. Kod funkcji wygląda następująco:

function on_top()
{
	if(window.scrollY!=0)
	{
		window.scrollBy(0,-50);
		setTimeout('on_top()',30);
	}
}

Link po kliknięciu którego strona zostanie przewinięta do góry, może wyglądać tak:

<a href="javascript:on_top()"> Przewiń do góry</a>

jak widać kod jest jest banalnie prosty, jego działanie można zobaczyć przechodząc pod ten link. Wadą tego rozwiązania jest to, że czas na wykonanie animacji jest zależny od długości strony. Można ten problem jednak rozwiązać, zmieniając nasz kod tak, żeby strona przewijała się o różną długość, zależną od tego jak bardzo jest przesunięta w pionie. Kod zmienionej funkcji wygląda następująco:

var on_top = {
	interval: 30,	//interwał czasowy z jakim będzie wywoływane przewijanie
	scroll: 0,	//długość o jaką ma zostać przewinięta strona w pionie (obliczana automatycznie)
	nscrolls: 10,	//liczba przesunięć jaka ma zostać wykonana
	go: function()
		{
			on_top.scroll = -(window.scrollY/on_top.nscrolls);
			on_top.loop();
		},
	loop: function()
		{
			if(window.scrollY!=0)
			{
				window.scrollBy(0,on_top.scroll);
				setTimeout('on_top.loop()',on_top.interval);
			}
		}
	};

Link na stronę również ulega zmianie:

<a href="javascript:on_top.go()"> Przewiń do góry</a>

Jak działa powyższy skrypt można zobaczyć na tej stronie. Cały kod zajmuje tylko 0,5 KiB, i jest ponad 160 razy lżejszy od frameworku JQuery (który zajmuje 83 KiB), tak więc oszczędność jest duża.

Witam na moim blogu. Postaram się zamieszczać na jego łamach ciekawe i przydatne wpisy. W głównej mierze będę pisał o programowaniu i o wszystkim co z nim związane. Część wpisów będzie traktowała także o Linuksie, jego konfiguracji, oraz o ogromnych możliwościach tego systemu. Postaram się także opisać przydatne, dla programistów aplikacje.

Co na początek?

Na początku, oprócz osobnych wpisów zawierających krótkie porady i przydatne skrypty, planuję opisać moje ulubione edytory programistyczne, czyli: Vim, Geany, NetBeans i Eclipse. Każdy z tych edytorów ma swoje mocne i słabe strony, które postaram się opisać. Ja sam zazwyczaj używam różnych edytorów do pisania w różnych językach i uważam że w kwestii edytora programistycznego nie ma jednego najlepszego i że należałoby zapoznać się z możliwościami i funkcjonalnością kilku z nich

Kolejny cykl artykułów, jaki planuje zamieścić na łamach bloga, to opisy kilku frameworków internetowych, używanych przeze mnie, są to: Zend Framework, Code Igniter oraz Django. Również w tym przypadku, uważam że nie ma jednego idealnego frameworka i warto by się było zapoznać, chociażby pobieżnie, z kilkoma najpopularniejszymi.

O blogu

Sam blog został napisany w pythonowskim frameworku – Django. Do kolorowania składni użyłem bardzo dobrej, pythonowskiej biblioteki, o nazwie Pygments, a teksty piszę z wykorzystaniem składni markdown, dzięki użyciu jej pythonowskiej implementacji: Python-Markdown.

Wszystkim życzę miłej lektury moich wpisów.
Pozdrawiam,
MarioX