LoSoft Blog

Pojawilo sie nowe narzedzie w sekcji Tools. Password Generator umozliwia generowanie zarowno prostych hasel alfa-numerycznych, jak i bardziej zlozonych zawierajacych znaki specjalne. Ciekawa moze okazac sie mozliwosc definiowania wlasnego ciagu znakow, na podstawie ktorego zostanie wygenerowane haslo. Moga to byc limitowane znaki specjalne, badz znaki narodowe takie jak ĄĆĘŁŃÓŚŹ ąćęłńóśź ÄÖÜ äöü. Program umozliwia wygenerowanie jednorazowo do 100 hasel o dlugosci do 32 znakow.

Zobacz jak to dziala

Back-end aplikacji webowej, mozna kontrolowac przegladajac raporty i logi, lecz nijak ma sie to do front-endu wyswietlanego po stronie klienta. Nie dowiemy sie czy i kiedy wystapi blad, dopoki jakis nawiedzony klient nie zwymysla nam do sluchawki, chyba, ze mamy 105 srodowisk testowych, na ktorych mozemy sprawdzic kazda funkcjonalnosc aplikacji.

I tutaj nasuwa sie pytanie, czy nie ma innej mozliwosci?
Sa, a to jedna z nich, dzieki asynchronicznym zapytaniom, raport o bledzie klienta trafi do back-endu, i zapisany zostanie, do bazki czy pliku logow.

Przechwytywanie bledow

1. Dodajemy wymagane pliki bibliotek

<script type="text/javascript" src="http://www.losoft.org/blog/download/ajax/loajax_v1.1.js"></script>

plik mozna pobrac z dzialu Download, albo zamiast klasy loAJAX, linkujemy wlasnego wrappera ajax.

2. Tworzymy metode akcyjna zdarzenia window.onerror

// on/off powiadomienie klienta o bledzie
var suppressErrors = true;
// nowy obiekt ajax
var ajax = new loAJAX(this, "http://www.losoft.org/blog/examples/ajax/errorreport.php", null, AJAX_POST);
// akcja zdarzenia onerror
function errorReport(msg, url, lineNumber)
{
	ajax.reset();
	ajax.addParam("msg", msg);
	ajax.addParam("url", url);
	ajax.addParam("lineNumber", lineNumber);
	ajax.request();
 
	if (suppressErrors) {
		return true;
	}
	alert("Error occurred: " + msg + "\nURL: " + url + "\nLine Number: " + lineNumber);
};

3. Podpiecie akcji

window.onerror = errorReport;

Jak mamy juz gotowa metode, to teraz … czytaj dalej

Wyobrazmy sobie pania Jole, ktora plodzi cos przez godzine, nastepnie klika przycisk Odswiez i cala jej prace szlag trafia. Znajoma sytuacja? Dlatego tez czasem musimy zabezpieczyc dane uzytkownikow, przed nimi samymi.

Najlepsza metoda na zabezpieczenie wiekszosci takich przypadkow, tzn. wywolanie funkcji Wstecz, Dalej, Odswiez czy Strona domowa, jest podpiecie sie pod zdarzenie onbeforeunload i wyswietlenie stosownego komunikatu, aby user mial czas zastanowic sie czy na pewno chce zrobic to co robi.

Ustawiamy zmienna isChanged, okreslajaca czy dane, np. na formularzach, sa zmienione.

var isChanged = false;
function setIsChanged(value)
{
	isChanged = value;
};

Tworzymy metode wyladowania strony

function preventLostData(event)
{
	if (!event) event = window.event;
	if (isChanged) {
		if (window.navigator.appName == "Microsoft Internet Explorer") {
			event.cancelBubble = true;
		}
		event.returnValue = "Nacisnij \"Zapisz zmiany\", aby uchronic sie przed utrata danych.";
		if (event.stopPropagation) {
			event.stopPropagation();
			event.preventDefault();
		}
	}
};

Podlaczamy nasza metode pod zdarzenie wyladowania strony

window.onbeforeunload = preventLostData;

Aby zasymulowac zmiane danych utworzymy modyfikatory, umozliwiajace zmiane wartosci zmiennej isChanged.

<input type="button" value="Symuluj zmiany" onclick="setIsChanged(true);" />
<input type="button" value="Zapisz zmiany" onclick="setIsChanged(false);" />

Powyzszy przyklad chroni przed zmiana strony, zamknieciem zakladki a nawet calej przegladarki (Nie testowane w ie < 7, ale oL4c ten $h|t, 8).

Tutaj mozna potestowac:
czytaj dalej

Nawiazujac do poprzedniego wpisu o instalacji Flex Builder 3, pragne dodac krotki opis konfiguracji tego srodowiska w taki sposob aby mozliwe bylo debugowanie kodu w czasie rzeczywistym. Sam mialem z tym problem, wiec moze komus sie przyda.

1. Na poczatek potrzebujemy zmodyfikowanej wersji Flash Playera

czlowiek@maszyna:~$ wget http://download.macromedia.com/pub/flashplayer/updaters/10/flash_player_10_linux_dev.tar.gz -O /tmp/flash_player_10_linux_dev.tar.gz

2. Nastepnie ekstraktujemy do katalogu tymczasowego

czlowiek@maszyna:~$ tar xzvf /tmp/flash_player_10_linux_dev.tar.gz -C /tmp
czlowiek@maszyna:~$ tar xzvf /tmp/flash_player_10_linux_dev/plugin/debugger/install_flash_player_10_linux.tar.gz -C /tmp

3. Instalujemy Flash Player

czlowiek@maszyna:~$ /tmp/install_flash_player_10_linux/flashplayer-installer

czytamy instrukcje i odpowiadamy na pytania, sciaga: y, n .

Restartujemy Firefox’a i na upartego powinno wszystko dzialac. Ja osobiscie mam wieczny problem z kompatybilnoscia FF i FP. Firefox potrafi sypnac sie z byle powodu (sa rozne, tylko jemu znane) lub Flash Player nie odpowiada na zapytanie debuggera. Po wielu doswiadczeniach i zmarnowanych godzinach na analizie problemu doszedlem do wniosku, ze FF nie jest jedyna przegladarka i ze w tej kwestii Epiphany Web Browser sprawdza sie znakomicie.

4. Instalujemy Epiphany Web Browser

czlowiek@maszyna:~$ sudo apt-get install epiphany-browser

5. Konfigurujemy Eclipse-Flex do wspolpracy z nowa przegladarka
Window->Preferences, nastepnie zakladka General->Web Browser teraz klikamy New i wypelniamy formularz zgodnie z zalaczonym PrtScrn’em

sciaga:

Epiphany Web Browser
/usr/bin/epiphany-browser

Jako, ze Epiphany nie chwyta FF’owego plugina, musimy nadpisac glowny plik playera.

6. Nadpisujemy liba

czlowiek@maszyna:~$ sudo cp /tmp/install_flash_player_10_linux/libflashplayer.so /usr/lib/adobe-flashplugin/libflashplayer.so

Tak oto po paru zabiegach mozemy cieszyc sie “stabilnym” srodowiskiem Flex Builder 3 pod Ubuntu

Kodzik

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
	creationComplete="init()">
	<mx:HBox horizontalAlign="center" verticalAlign="middle" width="100%" height="100%">
		<mx:VBox>
			<mx:Label id="lb_helloWorld" text="Hello world" fontSize="36" />
			<mx:HBox horizontalAlign="center" verticalAlign="middle" width="100%" height="100%">		
				<mx:Button id="btn_increase" label="+" />
				<mx:Button id="btn_decrease" label="-" />
			</mx:HBox>
		</mx:VBox>
	</mx:HBox>
 
	<mx:Script>
	<![CDATA[
		private var _fontSize: int = 36;
 
		public function init():void
		{
			this.btn_increase.addEventListener(MouseEvent.CLICK, this.increaseFontSize);
			this.btn_decrease.addEventListener(MouseEvent.CLICK, this.decreaseFontSize);
		}
 
		public function increaseFontSize(event: MouseEvent): void
		{
			this._fontSize++;
			this.lb_helloWorld.setStyle("fontSize", this._fontSize);
		}
 
		public function decreaseFontSize(event: MouseEvent): void
		{
			this._fontSize--;
			this.lb_helloWorld.setStyle("fontSize", this._fontSize);
		}
	]]>
	</mx:Script>
</mx:Application>

Zobacz takze:
- Instalacja Flex Builder 3 na Ubuntu

Flex, Air, Flash, chyba nie trzeba nikomu tlumaczyc co to jest, z czym to sie je i ze ta technologia opanowala swiat. Postaram sie wiec w paru krokach przedstawic proces instalacji i konfiguracji Flex Builder 3 Linux Alpha 4 na Ubuntu dla potencjalnych programistow. To co w win$hitcie sprowadza sie do paru klikniec w Linuxie wyglada troche bardziej “profesjonalnie”. Ale nie taki diabel straszny jak go maluja. Jako, ze instalacja AFB3LA4 wymaga Eclipse w wersji 3.3.x, dlatego tym razem nie skorzystamy z repo.

1. Sciagamy pakiet Eclipse Europa

czlowiek@maszyna:~$ wget http://www.eclipse.org/downloads/download.php?file=/technology/epp/downloads/release/europa/winter/eclipse-java-europa-winter-linux-gtk.tar.gz -O /tmp/eclipse-java-europa-winter-linux-gtk.tar.gz

nie jakis tam, ale ten konkretny inaczej Flex odrzuci wspolprace z inna wersja.

2. Po sciagnieciu wypakowujemy Eclipse do uprzednio przygotowanego katalogu

czlowiek@maszyna:~$ mkdir ~/Programy
czlowiek@maszyna:~$ tar xzvf /tmp/eclipse-java-europa-winter-linux-gtk.tar.gz -C ~/Programy/
czlowiek@maszyna:~$ mv ~/Programy/eclipse ~/Programy/flex

po tych manewrach mamy rozpakowany Eclipse Europa do katalogu flex w ~/Programy/

3. Sciagamy Flex Builder’a

czlowiek@maszyna:~$ wget http://download.macromedia.com/pub/labs/flex/flexbuilder_linux/flexbuilder_linux_install_a4_081408.bin -O /tmp/flexbuilder_linux_install_a4_081408.bin

4. Instalujemy Flex’a

czlowiek@maszyna:~$ chmod +x /tmp/flexbuilder_linux_install_a4_081408.bin
czlowiek@maszyna:~$ /tmp/flexbuilder_linux_install_a4_081408.bin

odpali sie instalator, ktory umozliwi instalacje softu,

nastepnie
- akceptujemy licencje,
- wybieramy katalog do zainstalowania SDK /home/czlowiek/Programy/sdk/Adobe_Flex_Builder_Linux,
- wybieramy katalog uprzednio rozpakowanego Eclipse Europa /home/czlowiek/Programy/flex (jezeli wersja eclipse nie jest prawidlowa instalator zglosi blad),
- dodatkowe opcje – odznaczamy wszystko,
- Next, Next, Install

5. Testujemy Flex’a

czlowiek@maszyna:~$ ~/Programy/flex/eclipse

odpali sie standardowy Eclipse, ktorego musimy “nieco” zmodyfikowac, czyli otwieramy nowa perspektywe

Po tych wszystkich zabiegach, mozemy juz przystapic do programowania aplikacji we Flex’ie.

6. Hello world
Klik, klik, klik, czyli File->New->Flex Project i wypelniamy formularz,

dajemy Finish i przystepujemy do programowania aplikacji HelloWrold

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:HBox horizontalAlign="center" verticalAlign="middle" width="100%" height="100%">
		<mx:Label text="Hello world" fontSize="36" />
	</mx:HBox>
</mx:Application>

nastepnie klikamy przycisk Run i po chwili w domyslnej przegladarce uruchomi sie oczekiwana aplikacja Flashowa,

zadna wypasna ale dziala .

Zobacz takze:
- Flex Builder 3 debagowanie pod Ubuntu