DateTimePicker komponent

Takie coś kiedyś napisałem (hen dawno temu), a teraz na powrót to odkryłem:

(aby zobaczyć prawidłowo funkcjonujące demo otwórz skrypt w nowym oknie)

Jest to prosty skrypt wyświetlający kalendarzyk, i wstawiający wybraną przez użytkownika datę do pola tekstowego. Wywołanie skryptu jest banalne:

<input id="DateShow" style="width: 80px;" maxlength="10" name="DateShow" type="text" />
<img style="cursor:pointer;" onclick="DateTimePicker.Show(this,'DateShow');" src="calendar.gif" alt="" />

W drugim parametrze przekazujemy id pola tekstowego, do którego chcemy wstawić wybraną przez użytkownika datę. Paczuszkę ze skryptem, stylami i przykładowym użyciem można pobrać tutaj. Jak zajrzycie do kodu źródłowego, to odkryjecie wiele dodatkowych możliwości (ok, zdradzę trochę: można zmienić język w jakim kalendarz jest wyświetlany, albo format zwracanej daty).

Nie gadaj, rób swoje

Zainspirowany pewny młodym startupem (hmm, czyżby pleonazm?) ze Szczecina – a precyzyjniej słowami jego założyciela – w jeden wieczór uruchomiłem w internecie nowy sewis.

Marek Rafałowicz napisał:

Czy pomysł ma taki potencjał, by warto było go stworzyć? No cóż, uznałem, że […] stworzenie takiej strony jest tańsze niż zastanawianie się nad tym czy warto.

Tak bardzo mnie tym natchnął, że również nie zastanawiając się wiele wykonałem i uruchomiłem niewielki serwis. No cóż, faktyczne koszty jakie poniosłem to kilka godzin pracy oraz 1zł+VAT za rejestrację domeny.

Że co, że takie serwisy już istnieją? No ba, ale mój ma fajną domenę ;) Konwerter jednostek znajdziesz tu przelicznik jednostek.

W obronie wolności (Free as a Freedom)

Niezwykle interesująca biografia ojca licencji GNU oraz założyciela Fundacji Wolnego Oprogramowania – Richarda Stallmana. Przedstawia mentalność programistów wczesnych lat 70 i 80, ówczesne podejście do własności kodu, historię i przyczyny powstania Wolnego Oprogramowania, genezę określenia “Open Source”, jak również przemyślenia i poglądy Stallmana na temat Linuxa, programistów tworzących zamknięty kod, Linusa Torvaldsa, wolności osobistej i wielu innych :)

Książka pozwala uporządkować wiedzę na te tematy, a także dostarcza kolejnych do własnych przemyśleń. Moim zdaniem wartościowa pozycja dla każdego programisty.

Książka wydana na licencji GFDL (GNU Free Documentation License). Autor Sam Williams, w Polsce ukazała się drukiem z wydawnictwa Helion.

Preprocesor dla ActionScript

Preprocesor to narzędzie, które parsuje kod źródłowy programy przed poddaniem go kompilacji. Umożliwia to np. utworzenie warunkowych fragmentów kodu, które w specyficznych sytuacjach są dołączane do pliku wynikowego. Niestety, flex nie udostępnia nam takiego mechanizmu. Możemy jednak sami podpiąć zewnętrzny preprocesor.

Proponuję do tego celu użyć np. programu cpp (C Preprocesor). Jest to chyba jeden z bardziej rozbudowanych tego typu programów. W systemach Linux jest on prawie na pewno preinstalowany, w Windows możemy go uruchomić dzięki pakietowi Cygwin. Oczywiście cpp nie jest jedynym zdatnym dla nas preprocesorem – możemy w jego miejsce zastosować inny.

OK, a więc teraz pora na mini HOW-TO – jak podpiąć cpp do FlexBuildera – wersja dla Windows:

W pierwszym kroku należy ściągnąć i zainstalować cygwin, oraz doinstalować do niego kompilator C (to właśnie w nim znajduje się cpp).

Następnie utwórz skrypt:

c:
cd c:\cygwin\bin\
 
FOR /R %1 %%F IN (*.as) DO (
	@COPY /Y "%%F" "%%F.cpp-bak"
	cpp.exe -E -P -C '%%F' -o '%%F.cpp-processed'
	@MOVE /Y "%%F.cpp-processed" "%%F"
)

i zapisz go pod nazwą cpp.bat. Utwórz drugi skrypt:

@ECHO off
 
FOR /R %1 %%F IN (*.as) DO (
	@MOVE /Y "%%F.cpp-bak" "%%F"
)

i nazwij go cpp_restore.bat.

Teraz, w FlexBuilder, w ustawieniach projektu wybierz zakładkę Builders i utwórz nowego “budowniczego” klikając w przycisk New. W okienku, które się otworzy, w polu Name: wpisz nazwę np. Preprocesor, w polu Location: wpisz pełną ścieżkę do skryptu cpp.bat, a w polu Arguments: wpisz “${project_loc}”. Zatwierdź wciskając OK.

Teraz dokładnie to samo zrób dla drugiego skryptu, podaj tylko inną nazwę np. Preprocesor – restore.

Gdy już utworzysz obydwu “budowniczych”, ustaw ich w następującej kolejności:
– Preprocesor
– Flex
– Preprocesor – restore

Zrobione. Teraz możesz już używać instrukcji preprocesora w swoim kodzie. Dokumentację do niego znajdziesz pod adresem gcc.gnu.org/onlinedocs/cpp/.

Uwaga
Jest pewna wada przedstawionego rozwiązania. Ponieważ preprocesor usuwa linie zawierające jego rozkazy, wobec tego numery linii w komunikatach o błędach ActionScript nie będą się pokrywały z rzeczywistością. Rozwiązaniem byłoby wymuszenie na preprocesorze wstawiania pustych linii w miejsce usuniętych – niestety na razie nie wiem jak to skutecznie zrobić.

Szerokość i wysokość aplikacji actionscript 3

Bawiąc się dalej FlexBuilderem, natrafiłem na problem z ustawieniem rozmiarów aplikacji actionscript. W ustawieniach projektu nie znajdziemy odpowiednich opcji, nie da się ich również podać w argumentach kompilatora. Okazuje się, że robi się to poprzez metatag [SWF] wstawiony przed definicją głównej klasy projektu:

package
{
  [SWF(width="800", height="600", backgroundColor="#ffaa22")]
  public class MyApp extends Sprite  {
    //...
  }
}

Wykopaliska

Z pewnym zdumieniem odnalazłem w sieci pozostałości mojego portalu poświęconego elektronice cyfrowej. Całkiem przyjemne to uczucie, gdy okazuje się, że coś co kiedyś stworzyłem, a następnie o czym zapomniałem, nadal w pewnej postaci funkcjonuje w sieci.

Ha, a więc dajmy na to artykuł o bramkach logicznych:
http://stud.wsi.edu.pl/~sikrolb/artykuly-bramki_logiczne.html

Albo o moim pierwszym robocie :)
http://stud.wsi.edu.pl/~sikrolb/artykuly-robot.html

I z innej beczki – oczywistym hitem pozostaje “Rowerów wpływ na potencję”, które można znaleźć na pierwszej stronie wyników w google:
http://www.cyfronet.krakow.pl/rowery/impotent.html

No ładna heca! :))

Retrospekcja

Sięgając pamięcią kilka lat wstecz odnajduję dosyć ciekawe projekty, które miałem przyjemność realizować. Poniżej – w mniejszym lub większym skrócie – przedstawiam kilka wybranych.

6ka.pl – celująca edukacja
System internetowej platformy kursów językowych. Początkowo oferował naukę języka niemieckiego, obecnie został rozszerzony również o język angielski. Od czasu gdy odszedłem od projektu, uległ on pewnym przeobrażeniom, ale jak widzę wciąż pozostał w tej samej, pięknej szacie graficznej. http://6ka.pl/

Monitoring ruchu na stronach internetowych
Swego czasu, około roku 2003, wykonałem dla DMH Business Solutions rozbudowany system monitorujący ruch na stronach internetowych. Poważnym testem było już jego pierwsze wdrożenie – został wykorzystany na stronach sieci Macro Cash and Carry, gdzie zliczał dziesiątki tysięcy odwiedzin dziennie. Więcej o rozwiązaniu można poczytać na stronach jego właściciela: http://www.dmh.pl/rozwiazania-wideview.php

Association Européenne Des Agents Artistiques
Całkiem interesujący serwis sprzed kilku lat, z dedykowanym systemem CMS. http://aeaa.info/

Wydawnictwo Uniwersytetu Jagielońskiego
A to mój pierwszy poważny projekt, który zrealizowaliśmy wspólnymi siłami w AEM Studio. Działo się to około roku 2000 – jak pamiętam były to czasy kiedy narzędzia typu CMS dopiero zaczynały zdobywać popularność, a myśmy starali się wyjść przed szereg wykonując elastyczny system z obsługą wielojęzyczności, bogatym zarządzaniem uprawnieniami, dynamicznymi atrybutami dokumentów i tym wszystkim, co później stało się standardem. I chyba nawet nam się udało, a serwis działa na niezmienionym oprogramowaniu do dzisiaj! :) http://wuj.pl/

Scroller, pokazywacz komunikatów, reklam itp.

Pod tym wybitnym tytułem, kryje się obiekt w Javascript, który powstał pewnego dnia w przerwie pomiędzy pierwszą kanapką a drugą ;). W każdym razie umożliwia on łatwo osiągnięcie takiego efektu jak widać to poniżej.

A oto kod obiektu:

function Scroller(divID,stringsArray) {
 
	var pause=3000;
 
	var currentIndex=0;
	var mainDiv=document.getElementById(divID);
	var innerDiv=document.createElement('div');
	mainDiv.style.overflow='hidden';
 
	mainDiv.appendChild(innerDiv);	
 
	var marginTop;
	var stepDelta=2;
 
	var initScrolling = function() {
		marginTop=mainDiv.offsetHeight;
		innerDiv.innerHTML=stringsArray[currentIndex];
		innerDiv.style.marginTop=marginTop+'px';
	}
 
	var CountDelta = function() {
		var newDelta=Math.sin(marginTop/mainDiv.offsetHeight)*10;
		if (newDelta&lt;=0.01) { newDelta=0.01; }	
		return newDelta;
	}	
 
	var SetPosition = function() {
		stepDelta=CountDelta()
 
		if (marginTop&gt;0) {
			marginTop-=stepDelta;			
			innerDiv.style.marginTop=marginTop+'px';
		}
 
		return marginTop;
	}
 
	var nextString = function() {
		if (currentIndex&lt;stringsArray.length-1) {
			currentIndex++;
		} else {
			currentIndex=0;
		}
		startScrolling();
	}
 
	var startScrolling = function() {
 
		initScrolling();
 
		var stepInterval = window.setInterval(function () {
			if (SetPosition()&lt;=0) {
				clearInterval(stepInterval);
				setTimeout(nextString,pause);
			} 
		},10);
	}
 
	startScrolling();
}

A tutaj przykład użycia:

<html>
<head>
<script src="scroller.js" type="text/javascript" language="javascript"></script>
</head>
<body>
 
<div id="scroller" style="width:300px;height:70px;padding:5px;background-color:orange;font-size:8pt;font-family:verdana;"></div>
 
<script type="text/javascript" language="javascript">
//<![CDATA[
 
var Strings=new Array();
Strings[0]='Hi! Jestem mrówka!';
Strings[1]='Lorem ipsum dolor sit amet consectetuer turpis lacinia Curabitur vel a. Massa morbi Donec est in leo consequat vestibulum lobortis enim.';
Strings[2]='Lákamí vůněhulás úmyval rohlivý jednovod lek vlač Partavěď ka vla.';
Strings[3]='Massa morbi Donec est in leo consequat vest. Massa morbi Donec est in leo consequat vest, massa morbi Donec est in leo consequat vest.';
 
var scroller=new Scroller('scroller',Strings);
//]]>
</script>
 
 
</body>
</html>

W pierwszym parametrze konstruktora przekazujemy ID warstwy na której chcemy wyświetlać komunikaty, w drugim natomiast tablicę z komunikatami. Voila.

Przetestowane pod Firefox2, IE7, Opera9.