Usability w projektach Flex – prezentacja FlashCamp 2010 Warsaw from Robert Podgórski on Vimeo.

Ściągnij .pdf file
Ściągnij pliki Keynote

Konkretnie – będzie to kalkulator, z nastawieniem na kolorową i ciekawą oprawę graficzną – użyjemy trybu chrome okna (czyli okno będzie miało niestandardowy kształt).
Głównym celem tego posta jest pokazanie jak tworzyć aplikacje z chrome’owanymi oknami oraz przechwytywać eventy z klawiatury i myszki.

Projekt

Możemy zaprojektować interface naszego widget’a od razu we Flashu lub zaimportować dowolny plik graficzny (np. z Photoshopa). W tym przypadku wszystkie elementy zostały narysowane bezpośrednio we Flashu. Tworzenie grafiki odbywa się dokładnie w ten sam sposób co “regularne” tworzenie Flashowych treści.
(przy okazji – projekt kalkulatora jest rozpowszechniony zgodnie z licencją Creative Commons – można całość lub dowolne elementy wykorzystać w prywatnych i komercyjnych pracach – to samo dotyczy kodu).

Klasa Calc

Stworzymy klasę, która będzie odpowiadała za operacje kalkulatora.
Jest to odrobinę strzelanie z armaty do wróbli:)
Poniżej kod klasy:

package{
public class Calc{
public static function sum(liczba1:Number,liczba2:Number):Number{
var wynik = liczba1 + liczba2;
return wynik;
}
public static function deduct(liczba1:Number,liczba2:Number):Number{
var wynik = liczba1 - liczba2;
return wynik;
}
public static function multiply(liczba1:Number,liczba2:Number):Number{
var wynik = liczba1 * liczba2;
return wynik;
}
public static function divide(liczba1:Number,liczba2:Number):Number{
var wynik = liczba1 / liczba2;
return wynik;
}
}
}

Kodowanie kalkulatora

Poniżej omawiam kod kalkulatora (najciekawsze elementy). Pełen kod z komentarzami jest do ściągnięcia na koncu posta.

import flash.desktop.NativeApplication;

Tego potrzebujemy aby obsługiwać nasze chromowane okno.


var myCalc:Calc = new Calc();

Tworzymy nowy obiekt klasy Calc.


function calculateResult()
{
...
}

Funkcja wykorzystująca obiekt Calc i obliczająca rezultat.


function removeTrailingZeros()
{
...
}

Funkcja do usuwania zer na końcu wyniku.


function calculatorInterface(action:String)
{
...
}

Interface kalkulatora – czyli akcje powiązane z odpowiednimi klawiszami.


function reportKeyDown(event:KeyboardEvent):void
{
trace(String.fromCharCode(event.charCode))
...
}
stage.addEventListener(KeyboardEvent.KEY_DOWN, reportKeyDown);

Listener’y dla eventów związanych z klawiaturą.
Kiedy na klawiaturze zostaje naciśnięty klawisz – jego kod jest przekazany do funkcji interface’u.


theCalc.moveButton.addEventListener(MouseEvent.MOUSE_DOWN, moveWindow);
function moveWindow(event:MouseEvent):void {
//przesuwanie okna
stage.nativeWindow.startMove();
}
theCalc.calcCloseButton.buttonMode = true;
theCalc.calcCloseButton.addEventListener(MouseEvent.MOUSE_DOWN, closeWindow)
function closeWindow(event:MouseEvent):void {
//zamykanie okna
NativeApplication.nativeApplication.exit();
}
theCalc.minimizeButton.buttonMode = true;
theCalc.minimizeButton.addEventListener(MouseEvent.CLICK, minimize_CLICK);
function minimize_CLICK(event:MouseEvent):void
{
//minimalizacja okna
stage.nativeWindow.minimize();
}

Kod odpowiedzialny za zamykanie, przesuwanie i minimalizację okna.
Jako, że nasz widget ma chromowane okno – musimy te akcje dorobić sami.

Tworzenie pliku AIR

Do tej pory stworzyliśmy najzwyklejszy w świecie plik Flash oparty na AS 3.0 – czas zamienić go w aplikację AIR.
Najpierw wybieramy menu File – Publish Settings. Pod tabem “Flash” wybieramy opcję “Version” na “Adobe AIR 1.0″.
Następnie z menu Commands wybieramy opcję “AIR – Application and Installer Settings”.

W tym oknie możemy określić parametry tworzonego installera.
Na razie większość opcji pozostawiamy w domyślnym ustawieniu – poza “Window Style”, które zmieniamy na “Custom Chorme (transparent)”.

Ostatnim krokiem jest wskazanie pliku z certyfikatem. Certyfikat należy kupić – np. na stronie Adobe. Nie jest niezbędny do tworzenia plików AIR – ale użytkownicy mogą bardzo podejrzliwie podchodzić do aplikacji bez certyfikatu.

Download

Pliki:
Instalator kalkulatora
Źródła .fla i .as

Zapraszam do komentarzy:)


function randomColor()
{
var r1 = random(16).toString(16);
var r2 = random(16).toString(16);
var g1 = random(16).toString(16);
var g2 = random(16).toString(16);
var b1 = random(16).toString(16);
var b2 = random(16).toString(16);
var rColor = "0x"+r1+r2+g1+g2+b1+b2;
return(rColor);
}