Leerdoelen
- Inzicht in het gebruik van UI Components in actionscript 3
Deze les
- Bespreken vorige les
- Uitleg UI Components
- Maken lesoefeningen
Wat zijn UI components?
UI Components (User Interface Components) zijn standaard objecten die veel voorkomen in applicaties. In Flash zitten een hele berg van die standaard componenten. De componenten die hier worden besproken zijn:- radiobuttons
- checkboxes
- combobox
Radiobuttons
Het kenmerk van een radiobutton is dat je er altijd maar 1 van kan selecteren. Om dit te bewerkstelligen moet je de radiobuttons een groepsnaam geven. (hierboven: groep1)
Hierboven zie je 3 radiobuttons. Elke radiobutton geef je een instancename (hierboven: rb01, rb02 en rb03), maar ook vul je de bijbehorende paramaters in (zie tab parameters in property panel)
Er zijn verschillende parameters voor een radiobutton. Hieronder op een rijtje:
| value | value staat voor de waarde die je wil meegeven als de radiobutton is aangevinkt, dit kan wat anders zijn als het label |
| groupName | Door radiobuttons dezelfde groupname te geven, geef je aan dat ze bij elkaar horen en zorg je ervoor dat er altijd maar 1 selected kan zijn. |
| label | Label is de tekst die in je interface wil meegeven aan je radiobutton, in dit geval 'keuze 1' |
| labelPlacement | Uitlijning van het label: kan aan de linker en rechterkant staan van de button. |
| selected | Boolean (true or false). Moet de button standaard aangevinkt staan of niet? Let op! Er kan er altijd maar 1 selected zijn! |
Deze parameters kun je van te voren instellen in het property panel via de het desbetreffende tab-menu. Je kunt ze ook instellen met behulp van actionscript.
Gegevens uitlezen
Een manier om de status
van een radiobutton uit te lezen is bijv. via een knop.
Maak hiervoor een button (instancename btnCheck) en een dynamic textfield (instancename txtRadio)
Hieronder het script:
// eventlistener op button btnCheck.addEventListener(MousEvent.CLICK, setText)
// function wordt aangeroepen door eventlistener op button function setText(e):void { //check welke radiobutton is aangeklikt if (rb01.selected) {
txtRadio.text = rb01.value; //value komt in dynamic textfield }
if (rb02.selected) {
txtRadio.text = rb02.value; //value komt in dynamic textfield
}
if (rb03.selected) {
txtRadio.text = rb03.value; //value komt in dynamic textfield
} }
Je kunt dus de status van de radiobutton opvragen met de
instancename van de radiobutton punt de eigenschap selected. Deze is true of false.
Als selected op true staat wordt de if uitgevoerd en anders niet.
Je kunt ook opvragen in welke groep de radiobutton staat. Deze kun je uitlezen met de property groupName, bijv.
trace (rb01.groupName);
Bovenstaand script staat in de layer action op frame1 van scene1 (hoofdtijdlijn).
De instancenaam van de radiobutton kun je laten beginnen met rb, waardoor je in je code kan blijven herkennen dat het hier om een
radiobutton gaat, net zoals mc voor movieclip staat.
Op basis van gegevens een radiobutton aansturen
Als je nu
de ingevulde radiobuttons weer wil gebruiken kun je een variabele gebruiken:
var vKeus:Number;
vKeus = rb01.value;
Dan kun je elders, als je de radiobuttons weer wil laten zien, een bepaalde radiobutton weer op selected zetten. Dit doe je met dezelfde code, maar dan andersom:
if (vKeus == 1) {
rb01.selected = true;
}
if (vKeus == 2) {
rb02.selected = true;
}
if (vKeus == 3) {
rb03.selected = true;
}
Let hierbij wel op dat de variabele vKeus globaal moet worden gedeclareerd als je bijv. voor verschillende formulieren gebruik maakt van meerdere keyframes.
Wat je dan doet is een aparte layer maken die je globals noemt.
Deze layer kent maar 1 frame die over het bereik van alle onderliggende keyframes loopt.
In dat frame maak je de variabelen aan, in dit geval vKeus.
var vKeus:Number;
EventListener
Soms wil je dat de radiobutton direct reageert als je de
radiobutton aanvinkt. Dan moet het formulier veranderen of er moet een
plaatje zichtbaar worden. Dit kun je ook doen met behulp van Actionscript. Je
moet dan de radiobutton een eventListener meegeven. Dit betekent dat je
een functie koppelt aan elke radiobutton die iedere keer als de radiobutton
van status veranderd, wordt aangeroepen. Hieronder een voorbeeld:
rb01.addEventListener(MouseEvent.CLICK, showText)
rb02.addEventListener(MouseEvent.CLICK, showText)
rb03.addEventListener(MouseEvent.CLICK, showText)
Het enige wat je moet doen is aan elke radiobutton met behulp van de eventListener een functie koppelen. De code staat hierboven. Daar is weer rb01 tm rb03 gebruikt. In de addEventListener functie worden 2 parameters gebruikt; de eerste is welke event (MouseEvent.CLICK dus) en de tweede is: welke functie gaan we uitvoeren (showText).
Hier nog even een werkend voorbeeld:
checkbox
Dit zijn drie checkboxes. Geef elke checkbox ook weer een een instancename. Er zijn minder parameters voor een checkbox dan voor een radiobutton, maar die er zijn komen wel overeen. Hieronder op een rijtje:
| label | Label is de tekst die in je interface wil meegeven aan je radiobutton, in dit geval keuze 1 |
| labelPlacement | Het label kan aan de linker en rechterkant staan van de button. |
| selected | Moet deze standaard aangevinkt staan of niet. Let op! Ze kunnen hier wel allemaal tegelijk selected zijn. |
Gegevens uitlezen
De checkbox kent geen groupname en value. Verder gaat het uitlezen van een checkbox hetzelfde als bij een radiobutton:
if (cb01.selected) {
txtCheck.text = cb01.label; //label komt in dynamic textfield
}
Maar omdat je hier meerdere checkboxes kunt aanvinken is het handig om ook alle aangevinkte waardes te bewaren of te tonen in een tekstveld:
txtCheck.text = ""; //leegmaken tekstveld
if (cb01.selected) {
txtCheck.text += cb01.label.toString(); //label wordt toegevoegd aan dynamic textfield
}
if (cb02.selected) {
txtCheck.text += cb02.label.toString(); //label wordt toegevoegd aan dynamic textfield
}
En daar natuurlijk weer een function omheen om via eventlisteners en handlers te kunnen werken.
combobox
Dit is een combobox of ook wel een dropdown box of listmenu box genoemd.
Hier kun je erg veel keuzes kwijt op een relatief kleiner stuk van je interface.
Je moet er wel iets voor doen om deze informatie zichtbaar te maken, je moet de dropdown box namelijk open klikken om alle opties te kunnen bekijken en deze eventueel te selecteren.
Hieronder eerst de parameters voor de combobox in de interface op een
rijtje:
| dataProvider | Soms wil je niet dat alle informatie zichtbaar is als label, op deze manier kan je data koppelen aan de labels die wel zichtbaar zijn, zoals bijvoorbeeld id-nummers. |
| editable | is de tekst in de dropdownbox editable? true of false |
| prompt | Wat laat de combobox zien? |
| rowCount | Het maximaal aantal rijen dat zichtbaar is in de dropdownbox, standaard staat deze waarde op 5 . |
Gegevens uitlezen
Ook hier kun je weer prima gebruik maken van event handlers & listeners:
function showCombo(event):void {
//lees combobox cbMenu
trace (cbMenu.selectedItem.label);
}
cbMenu.addEventListener(Event.CHANGE, showCombo);
In plaats van .label kan je ook .data doen, op dat moment haal je de data uit de dropdownbox. Deze kun je natuurlijk opslaan in een variabele en zo deze informatie weer op een volgend scherm gebruiken om zo de daar op voorkomende box al voorgeselecteerd te hebben. Of om de informatie op een andere manier te herbruiken. Voor het selecteren van een option in een combobox kun je het beste ipv selectedItem de property selectedIndex gebruiken:
cbMenu.selectedIndex = 0;
Met deze index kun je opvolgorde waardes aanroepen in de combobox, als in een array.
Dynamisch gegevens toevoegen
Een combobox kun je ook
dynamisch vullen. Maar eerst alleen de code die nodig is om een combobox
te vullen, waarbij het label 'kabouter' is en de data een url met meer
informatie over kabouters:
ddBLeeg.addItem({label:"kabouter", data:"www.kabouter.nl"});
Stel je wilt gegevens in een
combobox plaatsen. Deze kun je uit een database halen, maar dat gaat voor deze les iets te ver.
In dit voorbeeld gebruiken we twee arrays als informatie containers:
//container voor de data
var aData:Array = new Array(
"www.kabouter.nl",
"www.elf.nl",
"www.reus.nl",
"www.dwerg.nl"
); //container voor de labels
var aLabels:Array = new Array(
"kabouters",
"elfen",
"reuzen",
"dwergen"
);
Daarna kun je deze arrays gebruiken om via een loop een dropdownbox te vullen:
for (var i:Number=0; i<aData.length; i++){
combo.addItem({label:aLabels[i], data:aData[i]});
}
Je kunt nog geavanceerder omgaan met data. Wanneer je dit
leuk vind om uit te zoeken, leer dan de dataprovider te hanteren. Hiermee
kun je grote hoeveelheden data verwerken in je combobox.
Help van flash
Flash heeft een uitgebreide help, hier is al vaak op gewezen. Wanneer je een component gebruikt kun je als je de properties van een component bekijkt in het property-window, een vraagteken in een cirkel klikken; deze wijst je meteen door naar de relevante onderwerpen in de help. Zie onderstaand voorbeeld:
Lesopdracht UI Components
Download de fla file hier van bovenstaande swf uitwerking. Maak hem nu zo dat de ingevulde waarden worden doorgegeven naar een volgend scherm. Denk hierbij aan het gebruik van variabelen, en neem ook de opmerking over globals, eerder gemaakt in deze lesbrief, mee in je uitwerking.