[FB3] RadioButton met component als label

[Dauntless]

Hey,

Wat ik zoek, is een RadioButton waarin je zelf nog een waarde kan invullen. Het zou dus een radiobutton met een textinput zijn.

Geprobeerd: Een CustomRadioButton component waarin er een lege radiobutton staat met daarnaast dus gewoon een textinput. Het probleem daar is dat ik hem dan niet meer in een radiobuttongroup kan zetten... (De andere RB's uit de group zitten in de main app en niet in de component)

Wat is hiervoor de mooiste (en werkende) oplossing?

Greets!

[TheDutch]

Het standaard RadioButton component in Flex heeft een property "label" die een label naast de radio button zet zoals jij wilt. Met het property "labelPlacement" kan je hem positioneren. Zie LiveDocs (http://livedocs.adobe.com/flex/2/langref/mx/controls/RadioButton.html) ;).

[Dauntless]

Uiteraard, maar ik wil juist een TextInput ALS label. Ik heb dus dit:
http://www.flashfocus.nl/forum/attachment.php?attachmentid=8933&stc=1

Maar zoals je ziet zijn de radiobutton groups dan fout (aangezien de 'myGroup' uit de component een andere myGroup is dan degene uit de main app)

(Wat denk je wel niet van mijn, Erwin ? :p)

[TheDutch]

Het is nog vroeg, iets te snel gelezen waardoor ik TextField zag staan ipv. TextInput ;).
Ik heb even snel een klein opzetje gemaakt:

package
{
import mx.controls.RadioButton;
import mx.controls.TextInput;
import mx.events.FlexEvent;

public class RB extends RadioButton
{
public function RB()
{
super();
this.addEventListener(FlexEvent.CREATION_COMPLETE, onCreationComplete);
}

private function onCreationComplete(event:FlexEvent):void
{
this.mouseChildren = true;
this.textField.visible=false;
var txt:TextInput = new TextInput();
txt.width = 100;
txt.height = 21;
this.addChild(txt);
txt.x = 25;
}
}
}

Hier zet ik het standaard text field op onzichtbaar en voeg een text input toe. De waarden zijn nu heel hard en als een proof of concept neergezet. In de uiteindelijk versie moet je functies als measure() en updateDisplayList() overridden zodat dit nieuwe text input goed dynamisch neergezet wordt zoals je van een generiek component verwacht. Ik kan je misschien vanavond een wat meer uitgewerkte versie toesturen :).

ps. Je kunt voor het aanpassen of uitbreiden van bestaande Flex classes / componenten beter de class direct overerven zoals hierboven dan een MXML bestand maken zoals je nu hebt gedaan.

[Dauntless]

Het extenden van standaard components & classes blijkt in AS3 wel vaak voor te komen, dus die techniek zal ik in m'n achterhoofd houden :).

Bedankt ook voor het voorbeeld! Dit zal al zeker helpen (en indien je een uitgebreider voorbeeld kan geven is dat natuurlijk ook welkom).

Niet dat het nu nog uitmaakt, maar ik kon het ook niet gewoon rechtstreeks op m'n canvas, naast elkaar zetten (een radiobutton met lege label & een textinput) omdat het in een <mx:Form> te staan kwam en daar komt alles onder elkaar in. Sowieso is deze oplossing ook mooier natuurlijk :).

Thx erwin!

[TheDutch]

RadioButton blijkt een zeer lastig component om te overerven voor dit soort zaken. Het is me vanavond niet gelukt er een generiek mooi component van te maken. Het label moet eigenlijk verwijderd worden uit de RadioButton vanwege conflicten, maar deze zit helaas te diep verweven in de code met veel afhankelijkheden. De RadioButton stamt namelijk af van Button waar een label en een icon in zit. De bullet binnen de RadioButton is werkelijk niets meer dan een icon binnen de Button. Veel layout processing gebeurt aan de hand van het label binnen Button class. Feitelijk komt het er op neer dat je meer dan de helft van het RadioButton/Button component moet herschrijven wil het lukken zoals je wilt. Niet echt een prettig werkje en waarschijnlijk te veel tijd voor het doel :).

Waarom doe je het niet zo?:

<mx:Form>
<mx:FormItem>
<mx:TextInput />
</mx:FormItem>
<mx:FormItem>
<mx:RadioButton label="één" />
</mx:FormItem>
<mx:FormItem>
<mx:RadioButton label="twee" />
</mx:FormItem>
<mx:FormItem>
<mx:HBox>
<mx:RadioButton />
<mx:TextInput />
</mx:HBox>
</mx:FormItem>
</mx:Form>

Op deze manier heb je gewoon een verticale form met een horizontale box met daarin de radio button met het label.

[Dauntless]

Dat zou inderdaad ook wel werken. Ik heb nu de classe die je hierboven gaf gebruikt en voor wat ik nodig heb is hij goed genoeg, dus ga ik daar gewoon even mee gaan :). Hij is iets beter bruikbaar dan een apparte RB & text input.

Toch bedankt voor het proberen!