|
De component TextInput wordt gebruikt voor tekst op één regel en omvat het native ActionScript-object TextField. Gebruik de component TextArea wanneer u een tekstveld met meerdere regels nodig hebt. U kunt een component TextInput bijvoorbeeld gebruiken als wachtwoordveld in een formulier. U zou ook een listener kunnen instellen die controleert of het veld voldoende tekens bevat wanneer de gebruiker het veld met Tab verlaat. Deze zou dan een foutbericht kunnen weergegeven waarin wordt aangegeven dat een juist aantal tekens moet worden ingevoerd.
U kunt de eigenschap
textFormat
instellen met de methode
setStyle()
om de stijl te wijzigen van tekst die in een instantie TextInput wordt weergegeven. Een component TextInput kan ook worden opgemaakt in HTML of als een wachtwoordveld dat de tekst verbergt.
Gebruikersinteractie met de component TextInput
Een component TextInput kan worden in- of uitgeschakeld in een toepassing. In de uitgeschakelde toestand kan de component geen muis- of toetsenbordinvoer ontvangen. Wanneer de component is ingeschakeld, volgt deze dezelfde focus-, selectie- en navigatieregels als een ActionScript-object TextField. Wanneer een instantie TextInput focus heeft, kunt u ook de volgende toetsen gebruiken om de instantie te beheren:
|
Toets
|
Beschrijving
|
|
Pijltoetsen
|
Hiermee wordt het invoegpunt één teken naar links of rechts verplaatst.
|
|
Shift+Tab
|
Hiermee wordt de focus naar het vorige object verplaatst.
|
|
Tab
|
Hiermee wordt de focus naar het volgende object verplaatst.
|
Zie de klasse FocusManager in de
Naslaggids voor ActionScript 3.0 voor
Adobe Flash Professional CS5
en
Werken met FocusManager
voor meer informatie over focusbeheer.
Een live voorvertoning van elke instantie TextInput geeft direct wijzigingen weer in parameters in Eigenschapcontrole of Componentcontrole tijdens het ontwerpen. In de live voorvertoning is tekst niet selecteerbaar en u kunt in de componentinstantie in het werkgebied geen tekst invoeren.
Wanneer u de component TextInput aan een toepassing toevoegt, kunt u deze toegankelijk maken voor schermlezers via het deelvenster Toegankelijkheid.
Parameters van de component TextInput
U kunt in Eigenschapcontrole of Componentcontrole de volgende ontwerpparameters instellen voor elke instantie van de component TextInput:
editable
,
displayAsPassword
,
maxChars
,
restrict
en
text
. Elk van deze parameters heeft een bijbehorende ActionScript-eigenschap met dezelfde naam. Zie de klasse TextInput in de
Naslaggids voor ActionScript 3.0
voor Adobe Flash Professional CS5
voor informatie over de mogelijk waarden voor deze parameters.
U kunt ActionScript-code schrijven om deze optie en aanvullende opties voor de component TextInput te beheren met de eigenschappen, methoden en gebeurtenissen van de component. Zie de klasse TextInput in de
Naslaggids voor ActionScript 3.0
voor Adobe Flash Professional CS5
voor meer informatie.
Een toepassing maken met de component TextInput
De volgende procedure laat zien hoe u een component TextInput aan een toepassing kunt toevoegen. In het voorbeeld worden twee TextInput-velden gebruikt om een wachtwoord te ontvangen en te bevestigen. Er wordt gebruikgemaakt van een gebeurtenislistener om te controleren of ten minste acht tekens zijn ingevoerd en of de tekst in de twee velden overeenkomt.
-
Maak een nieuw Flash-document (ActionScript 3.0).
-
Sleep een component Label van het deelvenster Componenten naar het werkgebied en voer de volgende waarden voor deze component in Eigenschapcontrole in:
-
Voer de instantienaam
pwdLabel
in.
-
Voer de waarde
100
in voor W.
-
Voer de waarde
50
in voor X.
-
Voer de waarde
150
in voor Y.
-
Voer in het gedeelte Parameters de waarde
Wachtwoord:
in voor de parameter text.
-
Sleep een tweede component Label van het deelvenster Componenten naar het werkgebied en voer de volgende waarden voor deze component in:
-
Voer de instantienaam
confirmLabel
in.
-
Voer de waarde
100
in voor W.
-
Voer de waarde
50
in voor X.
-
Voer de waarde
200
in voor Y.
-
Voer in het gedeelte Parameters de waarde
Wachtwoord
bevestigen:
in voor de parameter text.
-
Sleep een component TextInput van het deelvenster Componenten naar het werkgebied en voer de volgende waarden voor deze component in:
-
Voer de instantienaam
pwdTi
in.
-
Voer de waarde
150
in voor W.
-
Voer de waarde
190
in voor X.
-
Voer de waarde
150
in voor Y.
-
Dubbelklik in het gedeelte Parameters op de waarde voor de parameter
displayAsPassword
en selecteer
true
. Hierdoor wordt de waarde die in het tekstveld wordt ingevoerd, gemaskeerd met sterretjes.
-
Sleep een tweede component TextInput van het deelvenster Componenten naar het werkgebied en voer de volgende waarden voor deze component in:
-
Voer de instantienaam
confirmTi
in.
-
Voer de waarde
150
in voor W.
-
Voer de waarde
190
in voor X.
-
Voer de waarde
200
in voor Y.
-
Dubbelklik in het gedeelte Parameters op de waarde voor de parameter
displayA
s
Password
en selecteer
true
. Hierdoor wordt de waarde die in het tekstveld wordt ingevoerd, gemaskeerd met sterretjes.
-
Open het deelvenster Handelingen, selecteer frame 1 van de hoofdtijdlijn en voeg de volgende ActionScript-code toe:
function tiListener(evt_obj:Event){
if(confirmTi.text != pwdTi.text || confirmTi.length < 8)
{
trace("Password is incorrect. Please reenter it.");
}
else {
trace("Your password is: " + confirmTi.text);
}
}
confirmTi.addEventListener("enter", tiListener);
Met deze code wordt een gebeurtenishandler
enter
op de instantie TextInput met de naam
confirmTi
ingesteld. Wanneer de twee wachtwoorden niet overeenkomen of de gebruiker minder dan acht tekens invoert, wordt het volgende bericht weergegeven. “Het wachtwoord is onjuist. Voer dit nogmaals in.” Wanneer de wachtwoorden minimaal acht tekens lang zijn en overeenkomen, wordt de ingevoerde waarde in het deelvenster Uitvoer weergegeven.
-
Selecteer Besturing > Film testen.
Een instantie TextInput met ActionScript maken
In het volgende voorbeeld wordt met ActionScript een component TextInput gemaakt. Er wordt bovendien een Label gemaakt dat wordt gebruikt om de gebruiker te vragen zijn of haar naam in te voeren. In het voorbeeld wordt de eigenschap
restrict
van de component ingesteld, zodat alleen hoofd- en kleine letters, punten en spaties worden toegestaan. Er wordt tevens een object TextFormat gemaakt dat wordt gebruikt om de tekst in zowel de component Label als de component TextInput op te maken.
-
Maak een nieuw Flash-document (ActionScript 3.0).
-
Sleep een component TextInput van het deelvenster Componenten naar het deelvenster Bibliotheek.
-
Sleep een component Label van het deelvenster Componenten naar het deelvenster Bibliotheek.
-
Open het deelvenster Handelingen, selecteer frame 1 van de hoofdtijdlijn en voeg de volgende ActionScript-code toe:
import fl.controls.Label;
import fl.controls.TextInput;
var nameLabel:Label = new Label();
var nameTi:TextInput = new TextInput();
var tf:TextFormat = new TextFormat();
addChild(nameLabel);
addChild(nameTi);
nameTi.restrict = "A-Z .a-z";
tf.font = "Georgia";
tf.color = 0x0000CC;
tf.size = 16;
nameLabel.text = "Name: " ;
nameLabel.setSize(50, 25);
nameLabel.move(100,100);
nameLabel.setStyle("textFormat", tf);
nameTi.move(160, 100);
nameTi.setSize(200, 25);
nameTi.setStyle("textFormat", tf);
-
Selecteer Besturing > Film testen om de toepassing uit te voeren.
|
|
|
