Ostatnio miałem nieprzyjemność integrowania płatnego komponentu ExtJs. Chodzi konkretnie o komponent kalendarza, który wyglądem oraz funkcjonalnością naśladował Google Calendar. Niestety kod był napisany fatalnie, powiązania pomiędzy poszczególnymi elementami kalendarza były bardzo zawiłe co strasznie utrudniało integracje z istniejącym systemem. Śledzenie wywołań poszczególnych metod i ich parametrów przysparzało sporo problemów. Dodatkowo dodawanie linijki console.log(arguments) wewnątrz cudzych funkcji nie jest eleganckie (choć i tak często to robię…)
Chcąc ułatwić swoją pracę i jednocześnie rezygnując z niepotrzebnego ingerowania w obcy kod stworzyłem bardzo prostą w działaniu funkcję do monitorowania wywołań metod wskazanych klass i obiektów (W przypadku biblioteki ExtJs sprawuje się ona znakomicie).
/**
* Klasa monitoruje wywołania metod klas i obiektów
*
* @author Hubert Marzec
* @param {Object} source - klasa/obiekt
* @param {string} className - nazwa klasy
* @param {array} methodList - wyszczególniona lista metod
*/
function classLogger(source, className, methodsList){
if (source &&
(typeof source == "object" || typeof source == "function")) {
source = source.prototype || source;
className = className || '';
methodsList = methodsList || [];
var name, method;
var vLog = (typeof(console) !== 'undefined'
&& console != null) ? console.log : function(){};
for (name in source){
method = source[name];
if (typeof method == "function" && (methodsList.length ?
(inArray(methodsList, name)): true )){
source[name] = function(name, method){
return function(){
var vResult = method.apply(this, arguments);
vResult = vResult || '';
vLog(className + '->' + name,
arguments, ' = ',
vResult
);
return vResult;
};
}(name, method);
}
}
}
function inArray(pArray, value) {
pArray = pArray || [];
for(var i=0, all=pArray.length; i < all; i++) {
if (pArray[i] == value) {
return true;
}
}
return false
}
}
Działanie jest dość proste: wybrane lub wszystkie (gdy nie wyszczególniono konkretnych) metody danego obiektu/klasy zostają opakowane przez dodatkową funkcje, która jest odpowiedzialna za wyświetlanie nazwy, parametrów wejściowych oraz wyniku funkcji oryginalnej.
Całość jest wyświetlana przy pomocy konsoli przeglądarki. W przypadku gdy konsola nie jest zaimplementowana, logi nie są wyświetlane. Przykładowe sposoby użycia classLoggera:
var mainWindow = new Ext.Window({
title: 'okno'
});
classLogger(Ext.Panel, 'Ext.Panel');
classLogger(mainWindow, 'mainWindow');
Będzie mi bardzo miło, jeżeli ten fragment kodu się komuś przyda. Jednocześnie jestem otwarty na uwagi i waszą opinię.
Zadanie było jasno określone: po dwukrotnym kliknięciu radiobuttona miał się on odznaczać. Czyli miał się zachowywać dokładnie jak checkbox. Po krótkich poszukiwaniach odnalazłem ten plugin - wszystko fajnie, radiobutton się odznacza, ale przy submicie formularza i tak pamiętana jest stara wartość zaznaczonego radiobuttona :/
Zgodnie z zasadą - jeżeli coś ma być zrobione dobrze, zrób to sam - napisałem prosty plugin, który przy dwukrotnym kliknięciu odznacza radiobutton, a przy wysyłaniu formularza usuwa wcześniej nadaną wartość.
/**
* Behave like Checkbox
*
* @autor Hubert Marzec
* @link dzbanyit.pl
*/
(function(){
jQuery.fn.likeCheckbox = function() {
return $(this).each(function(){
$(":radio", this).dblclick(function(){
$(this).clone().hide().val('').insertAfter(this);
});
});
}
})(jQuery);
Jest to najprostsza wersja, bez limitu na liczbę tworzonych klonów- uznałem to za zbędne. A działanie jest bardzo proste, tworzymy klon naszego radiobuttona, ustawiamy pustą wartość, ukrywamy i wstawiamy za oryginalnym obiektem. Testowane pod IE 6,7 oraz FF 2,3.
Tytuł może być trochę mylący. Bo nie jest możliwe przesyłanie plików poprzez XMLHTTPRequest! Wszystkie znane Wam z sieci ajaxowe uploady bazują na pewnych trickach, o których zamierzam opowiedzieć.
IFrame
Tak to ten sam stary dobry IFRAME, kiedy web nie miał jeszcze numerka, a na stronach www rządził kolor szary i niebieskie linki. Minęło trochę czasu i ten znacznik został zapomniany, a nawet wyklęty. Jednak bez ten trick nie będzie mógł działać.
Przepis jest prosty. Formularz z polem input type="file" umieszczamy w pływającej ramce. Kiedy naciśniemy przycisk wyślij - zacznie się uplodowanie pliku, ale wszystkie pięknie w ‘tle’. Można dodać indykator tak, aby użytkownik myślał, że to ajax.
Plusy
- Bardzo proste rozwiązania
Minusy
- Brak paska postępu
- Można uploadować tylko jeden plik naraz
Flash upload
Kolejne rozwiązanie bazuje na flashu i javascript. Cały proces uploadu przechodzi przez ‘niewidzialny’ obiekt flasha. Sposób jest prawie idealny… problem tkwi w tym, że flash uruchamia własną sesje. A to jest dużym problemem (np. autoryzacja). Rozwiązanie tego problemu to przejęcie sesji, w php można to uzyskać poprzez session_id($passedId).
Moim zdaniem najlepsza implementacją uploadu z wykorzystanie flashu jest biblioteka swfupload. Jest napisane w czystym javascripcie, dlatego można ją integrować z dowolnym innych kodem js. Ma sporą społeczność i jest ciągle rozwijana
Plusy
- Można zaznaczyć wiele plików naraz
- Pasek postępu dla każdego pliku
- Wstępna walidacja przed uplodem
Minusy
- tworzy własną sesje
- limit wielkości pliku do 100MB
W jQuery zakochałem się od pierwszego wejrzenia. I była to miłość odwzajemniona. Dzięki tej bibliotece javascript byłem w stanie tworzyć ciekawe efekty oraz dodawać funkcjonalności do stron przy pomocy kilku linijek kodu i małej ilości pracy. Analizując kod pluginów, jak i samej biblioteki doskonaliłem swoje umiejętności programowania w javascripcie, co pozwoliło mi na budowanie bardzo zaawansowanych stron i całych ‘ajaxowych’ portali.
JQuery ma tę samą wspaniała cechę co Zend Framework. Jest tak pięknie zaprojektowana, że można dowolnie modyfikować i rozszerzać. Kolejnym super rozwiązaniem jest zastosowanie fluent interface co bardzo skraca zapis i ułatwia programowanie.
$('a[@href^=http]')
.not('[@href*=www.dzbanyit.pl]')
.addClass('linkexternal');
Filozofie pisania pod jquerowemu, trzeba po prostu poznać i polubić. Dla osób korzystających wcześniej z innych bibliotek, w szczególności Prototype, może to zabrać więcej czasu, ale naprawdę warto.
Główne cechy jQuery:
- Skompresowane jQuery waży tylko 19kb
- Wspiera selektory: CSS 1-3 i XPath
- Działa pod: IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+
Ponieważ nie lubię wynajdywać koła na nowa i tworzył kolejnego kursy ‘podstawy jQuery’, poniżej prezentują wam garść przydatnych linków, a w następnych postach z cyklu jQuery & javascript będę poruszał konkretne tematy i pokazywał rozwiązania realnych problemów.
dfc46656ab49a56e4ca8ff326a124c76
Dodaj mój rss to swojego czytnika.
