Brukergrensesnitt og komponenter, hendelser og lyttere

Under arbeid...

For moderne, objektorienterte programmeringsspråk har vi et rammeverk (Framework: Bibliotek med ferdige klasser).
Rammeverket inneholder klasser for de komponentene vi bruker i brukegrensesnittet.
Flash har sin litt spesielle "tegnefilm"-tilnærming, men likevel brukes stort sett de samme navnene på komponentene som i andre språk og rammerverk.

I Actions-panelet er det til venstre en oversikt over alle klassene i rammeverket til ActionScript.
N år du klikker deg innover i egenskaper og metoder her og velger for eksempel en metode,
kan du høyreklikke og velge View Help!
Gjør dette til en vane når du prøver deg frem med klasser i rammerverket.
Det du får opp i nettleseren er Adobes dokumentasjon: (http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/ )

Komponenter (Components, Controls):

• Label: Tekst i brukergrensesnitt. I Flash er det bedre å bruke statisk eller dynamisk tekst laget med Text Tool enn Label, da Text Tool lager TextField, som har flere egenskaper og muligheter enn Label.
  Brukes til å gi ledetekster til brukerinput og utskrift av resultater av hva programmet gjør.
• TextField: Felt hvor bruker kan skrive inn tekst. (Hvis tall, konverter input tekst til tall.)

• TextArea: Større tekstflate hvor flere linjer kan skrives eller tastes inn.

  Linje en linje to linje tre linje fire linje fem

• Button: Knapp som vi kan trykke på for å få gjort noe.

• ComboBox: Nedtrekksmeny hvor vi kan velge blandt et begrenset antall muligheter.

  Dette er første valg Dette er andre valg Dette er tredje valg

• Radio: Radioknapper, som regel en gruppe hvor bare en kan velges i gruppen

• CheckBox: Som radioknapper, men selvstendige, enten valgt eller ikke.

• Spinner: Tallvelger hvor vi kan øke eller minske med en og velge et heltall i et visst område.
  (NumericStepper i Flash)
• Slider: Som dessverre ikke virker ordentlig i skolens verjson av Flash :-(

Eksempel der nesten alle er i bruk:

(Kode for dette eksempelt ligger her.)

GUI - komponenter i tur og orden:

Vi tar dem for oss og eksperimenterer med dem hver for seg:

Labels:

Label finnes som komponent, men jeg syntes det var greiere å bruke TextField:

Lag TextField i Flash med Text Tool. Gi instance navn, slik at den er tilgjengelig fra kode. (Eks: ledetekstLbl)

Gjør det som er nødvendig med egenskaper i property-panelet og husk å embedde font med Embed...-knappen.

UML: (Bare de viktigste egenskapene og metodene.)

Etter å ha lagt inn tekst på skjermen kan vi for eksempel gjøre:

ledetekstLbl.text="Antall dippedutter";
ledtekstLbl.appendText(" og duppeditter:";
ledetekstLbl.background=true;
ledetekstLbl.backgroundColor=0xFF0000;	//Heksadesimale tall og RGB format...
ledetekstLbl.border=true;
ledetekstLbl.borderColor=0x000000;	//Ingen farve er sort... (Alle farver; 0xFFFFFF er hvit)
ledtekstLbl.textColor=0xFFFF00;		//Full R og G blir gul...
ledetekstLbl.setTextFormat("Ariel",20));//TextFormat er en egen klasse, se dokumentasjon...

og får noe a la:

TextField:

Beskrevet under Label, vi kan fortsatt bruke Text Tool til å lage en TextField, vi trenger bare å åpne for input.

For å fange opp bruker-input og hente brukerinput, kan vi gjøre:

var antallTfld: TextField = new TextField();
antallTfld.type = TextFieldType.INPUT;		//Må åpne for bruker input!

antallTfld.addEventListener(KeyboardEvent.KEY_DOWN, tastTrykket);

function tastTrykket(evt:KeyboardEvent):void {
    if (evt.keyCode == Keyboard.ENTER) {
	trace("Enter trykket!");
        trace("Feltet inneholder: "+antallTfld.text);
        trace("Tolket som tall: "+Number(antallTfld.text));
    }//if
}//tastTrykket()

Flash har også komponenten TextInput, som egentlig er ment for brukerinput.

Button:

Kan lage ganske fancy knapper, slik det står beskrvet på side 36 og utover i MMUIFCS5. Her ser vi på komponenten Button:

Dra inn en knapp fra Component - panelet og kall den knapp.

Eksempler på kode:

knapp.setSize(100,100);
knapp.addEventListener(MouseEvent.CLICK,knappKlikket);

function knappKlikket(evt:MouseEvent):void {
    trace("Knappen med navn "+evt.target.name+" ble klikket!"); 
}//knappKlikket()

Egenskapen name (for eksempel forover og bakover) kan brukes hvis vi har flere knapper med samme lytterfunksjon:

if(evt.target.name=="forover") {
    //bla forover
} else if(evt.target.name=="bakover") {
    //bla bakover
}else {
    //...
}//if

ComboBox:

Nedtrekksmenyer er kjekke å ha:

Obs: Det er en feil i vår versjon av Flash Professional når det gjelder ComboBox, hvis du setter antall rader for lite, så henger komponenten seg opp, selv om du endrer antall rader til riktig verdi. La den stå eller pass på at den er høyere enn antall valg pluss en!

Trekk inn en ComboBox fra Components - panelet og kall den valgCB.

I egenskapene kan du gå inn i egenskapen dataProvider og legge inn Label (som blir stående som valg) og Data (som kan inneholde nesten hva som helst), eksempelvisomtrent noe slikt

Label:	Data:
Liten	10
Middels	20
Stor	30

Så kan vi prøve litt kode:

valgCB.prompt="Velg størrelse";
valgCB.addItem( {label: "Enda større", data: 40} );	//Legger inn enda et valg

valgCB.addEventListener(Event.CHANGE,valgUtfort);

function valgUtfort(evt:Event):void {
    trace("Du valgte nr "+ valgCB.selectedIndex);
    trace("   med label "+valgCB.selectedItem.label);
    trace("   og data   "+valgCB.selectedItem.data);
}//valgUtfort()

RadioButton:

Radioknapper må legges i samme gruppe (RadioButtonGroup), se egenskaper i property panelet når du lager dem.
Gruppen passer på at bare en er merket av gangen.

Eksempel på koding:

valglitenRb.label="Liten";
valgmiddelsRb.label="Middels";
valgstorRb.label="Stor";

valglitenRb.addEventListener(MouseEvent.CLICK,radioValgt);
valgmiddelsRb.addEventListener(MouseEvent.CLICK,radioValgt);
valgstorRb.addEventListener(MouseEvent.CLICK,radioValgt);

valglitenRb.addEventListener(Event.CHANGE,radioEndret);
valgmiddelsRb.addEventListener(Event.CHANGE,radioEndret);
valgstorRb.addEventListener(Event.CHANGE,radioEndret);

function radioValgt(evt:Event):void {
    trace("Klikket på "+evt.target.label);
}//radioValgt()

function radioEndret(evt:Event):void {
    trace("Endret "+evt.target.label);
}//radioEndret()

Kan også opprette en gruppe selv:

var gr: RadioButtonBroup = new RadioButtonGroup("grnavn");
valglitenRb.group=gr; 
valgmiddelsRb.group=gr;
valgstorRb.group=gr;

og sjekke hvilken knapp som er valgt med:

var valg:String = gr.selection.label;

Enkleste måte å bruke radioknapp-gruppen på er vist i dette eksemplet.

CheckBox:

CheckBox er enklere å håndtere, da de er selvstendige:

Kode-eksempel:

sjekkboks1.addEventListener(MouseEvent.CLICK,sjekkKlikket);
sjekkboks2. ...  tilsvarende ...

function sjekkKlikket(evt:MouseEvent):void{
    if(sjekkboks1.selected) {
        //gjør noe ...
    }else if ( sjekkboks2.selected) {
        //gjør noe ...
    } else {
        //gjør noe...
    }//if
}//sjekkKlikket()

Oppgaver:

Bruk Adobes AS Reference når du eksperimenterer i oppgavene:

1. Se litt på TextInput og Label på egen hånd, sammenlign med TextField.
2. Se litt på TextArea på egen hånd.
3. Se litt på NumericStepper på egen hånd.
4. Da har vi alt vi trenger for å lage en komplett applikasjon av:
   1. Utregning av poengsum i hoppkonkurranse (Se prøve, siste oppgave.)
   2. Utregning av prisen på pølse med tilbehør i pølseboden Usunt AS. (Se tidligere oppgaver, nederst.)