Styling UITextField

Question

J'ai joué avec différentes méthodes pour déterminer au moment de l'exécution la largeur d'un "label" de sorte que je puisse redimensionner le "label" parce que je ne veux pas qu'il soit tronqué. J'ai finalement trouvé une solution facile à travers UITextField qui me permet de définir le .autoSize ce qui est génial! Cependant, maintenant j'essaie de "style" (simplement ajuster la police et la taille de la police) du UITextField mais il semble que je doive le faire manuellement avec '.htmlText' (que je vais accepter avec plaisir si cela C'est le seul moyen).

J'utilise le .text pour définir la valeur de l'étiquette.

Mon cas de test implique un HBox (J'utilise en fait une grille, mais ils devraient être les mêmes et je l'ai fait tester à la fois):

1. style I le HBox et la le style se poursuit jusqu'au UITextField. Je ne crois pas que cela fonctionnera pour moi parce que j'ai d'autres composants à l'intérieur que j'ai besoin de style différemment.
2. J'ai essayé. UITextFormat et TextFormat (je vois que le .htmlText mise à jour en conséquence, mais la sortie ne met pas à jour alors j'ai remarqué que chaque fois que j'ai appelé hbox.addChild (myUITextField) il emporterait la .htmlText
3. J'ai essayé définir le style avec myUITextField.setStyle (« fontSize », 20) avant et/ou après l'appel à addChild ni qui a eu un impact sur la afficher selon ce que j'ai noté ci-dessus

Des modifications sont en cours mais elles semblent être annulées lorsque je l'ajoute à l'affichage.

Alors, que dois-je faire pour le style de la UITextField en dehors de la mise manuellement avec mes contenus dans .htmlText? Les solutions qui n'utilisent pas UITextField fonctionnent correctement tant qu'il existe un moyen simple de ne pas tronquer le texte.

EDIT: Je veux juste faire textField.setStyle ('fontSize', 20) et s'attendre à ce que chaque fois que je change le texte, je n'aurais pas besoin d'utiliser HTML pour l'accompagner (donc je peux juste faire textField .text = 'quelque chose d'autre' et s'attendre à ce qu'il aura toujours une taille de police de 20). C'est ce que je voulais dire en n'utilisant pas .htmlText (désolé si je n'étais pas clair avant).

2ème ÉDITION: Je suppose que je devrais présenter le problème entier et peut-être que cela clarifiera ce que j'ai fait mal ou n'a pas pu réaliser.

Mon intention est d'avoir une grille et d'y ajouter du texte. Je ne veux pas le faire envelopper ou faire défiler alors je l'ajoute à la ligne suivante dans la grille lorsque la largeur totale des enfants de la ligne courante dépasse un certain nombre. Pour l'ajouter à la ligne suivante, je dois pouvoir calculer la largeur du texte.Je voudrais être capable de styliser ce texte individuellement en fonction des cas et il pourrait y avoir d'autres composants (comme un TextInput). Essentiellement, ce que j'essaie d'accomplir, c'est «Remplissez le vide».

J'ai inclus le code pour montrer ce que je fais actuellement et cela fonctionne un peu. Cela pourrait ne pas être lié à la question originale du style, mais je ne peux pas comprendre comment ajuster la distance entre chaque UITextField, mais à part cela, cela correspond à ce que je voudrais accomplir. Relevant de la question est la suivante: je voudrais changer le style I façon dont chaque UITextField (réglage actuellement .htmlText) en quelque chose un peu simple mais comme je l'ai je l'ai déjà mentionné serai heureux d'accepter l'aide .htmlText si c'est le seule solution.

J'ai donc une grille avec x lignes et dans chaque rangée, j'ai exactement un GridItem. Basé sur l'entrée, j'ajoute UITextField et TextInput dans le GridItem passant au GridItem suivant si nécessaire. Si vous avez une meilleure façon de le faire, alors ce serait mieux, mais je suppose que ce que je veux vraiment, c'est trouver un style différent.

Aussi un autre problème, je ne suis pas sûr de la façon exacte d'ajouter un TextField dans l'affichage. J'ai essayé:

var t : TextField = new TextField(); 
t.text = "I'm a TextField"; 
hBox.addChild(t); // doesn't work 
//this.addChild(t); // doesn't work either 

Mais je reçois l'erreur suivante:

TypeError: Erreur # 1034: Type Coercion a échoué: ne peut pas convertir flash.text :: TextField @ 172c8f9 à mx.core.IUIComponent.

Voici ce que j'ai qui fonctionne.

private function styleQuestionString(str : String) : String { 
    return '<FONT leading="1" face="verdana" size="20">' + str + '</FONT>'; 
} 

private function loadQuestion(str : String) : void { 
    /* Split the string */ 
    var tmp : Array = str.split("_"); 

    /* Track the current width of the GridItem */ 
    var curWidth : int = 0; 

    /* Display components that we will add */ 
    var txtField : UITextField = null; 
    var txtInput : TextInput = null; 

    /* Track the current GridItem */ 
    var curGridItem : GridItem = null; 

    /* Track the GridItem we can use */ 
    var gridItemAC : ArrayCollection = new ArrayCollection(); 

    var i : int = 0; 

    /* Grab the first GridItem from each GridRow of Grid */ 
    var tmpChildArray : Array = questionGrid.getChildren(); 
    for (i = 0; i < tmpChildArray.length; i++) { 
    gridItemAC.addItem((tmpChildArray[i] as GridRow).getChildAt(0)); 
    } 
    curGridItem = gridItemAC[0]; 
    gridItemAC.removeItemAt(0); 

    /* Used to set the tab index of the TextInput */ 
    var txtInputCounter : int = 1; 

    var txtFieldFormat : UITextFormat = new UITextFormat(this.systemManager); 
    txtFieldFormat.leading = "1"; 

    //var txtFieldFormat : TextFormat = new TextFormat(); 
    //txtFieldFormat.size = 20; 

    /* Proper Order 
    txtField = new UITextField(); 
    txtField.text = tmp[curItem]; 
    txtField.autoSize = TextFieldAutoSize.LEFT; 
    txtField.setTextFormat(txtFieldFormat); 
    */ 

    var txtLineMetrics : TextLineMetrics = null; 
    var tmpArray : Array = null; 

    curGridItem.setStyle("leading", "1"); 

    var displayObj : DisplayObject = null; 

    for (var curItem : int= 0; curItem < tmp.length; curItem++) { 
    /* Using UITextField because it can be auto-sized! */ 

    /** CORRECT BLOCK (ver 1) 
    txtField = new UITextField(); 
    txtField.text = tmp[curItem]; 
    txtField.autoSize = TextFieldAutoSize.LEFT; 
    txtField.setTextFormat(txtFieldFormat); 
    ***/ 

    tmpArray = (tmp[curItem] as String).split(" "); 

    for (i = 0; i < tmpArray.length; i++) { 
     if (tmpArray[i] as String != "") { 
     txtField = new UITextField(); 
     txtField.htmlText = styleQuestionString(tmpArray[i] as String); 
     //txtField.setTextFormat(txtFieldFormat); // No impact on output 
     txtLineMetrics = curGridItem.measureHTMLText(txtField.htmlText); 
     curWidth += txtLineMetrics.width + 2; 

     if (curWidth >= 670) { 
      curGridItem = gridItemAC[0]; 
      curGridItem.setStyle("leading", "1"); 
      if (gridItemAC.length != 1) { 
      gridItemAC.removeItemAt(0); 
      } 
      // TODO Configure the proper gap distance 
      curWidth = txtLineMetrics.width + 2; 
     } 
     displayObj = curGridItem.addChild(txtField); 
     } 
    } 

    //txtField.setColor(0xFF0000); // WORKS 

    if (curItem != tmp.length - 1) { 
     txtInput = new TextInput(); 
     txtInput.tabIndex = txtInputCounter; 
     txtInput.setStyle("fontSize", 12); 
     txtInputCounter++; 
     txtInput.setStyle("textAlign", "center"); 
     txtInput.width = TEXT_INPUT_WIDTH; 
     curWidth += TEXT_INPUT_WIDTH; 

     if (curWidth >= 670) { 
     curGridItem = gridItemAC[0]; 
     if (gridItemAC.length != 1) { 
      gridItemAC.removeItemAt(0); 
     } 
     // TODO Decide if we need to add a buffer 
     curWidth = TEXT_INPUT_WIDTH + 2; 
     } 
     curGridItem.addChild(txtInput); 
     txtInputAC.addItem(txtInput); 

     /* Adds event listener so that we can perform dragging into the TextInput */ 
     txtInput.addEventListener(DragEvent.DRAG_ENTER, dragEnterHandler); 
     txtInput.addEventListener(DragEvent.DRAG_DROP, dragDropHandler); 
     txtInput.addEventListener(DragEvent.DRAG_EXIT, dragExitHandler); 
    } 

    /* Add event so that this label can be dragged */ 
    //txtField.addEventListener(MouseEvent.MOUSE_MOVE, dragThisLabel(event, txtField.text)); 
    } 
} 

Answer 1

EDIT SUR LA BASE Askers COMMENTAIRES: Je ne vous ai pas voulu réaliser d'appliquer un seul style à l'ensemble textfield, je pensais que vous vouliez le style des pièces individuelles. Ceci est encore plus simple pour vous, ne vous donnera aucun problème du tout :)

var textFormat: TextFormat = new TextFormat("Arial", 12, 0xFF0000); 
myText.setTextFormat(textFormat); 

Soyez conscient que cela définit le style du texte qui est dans le champ de texte, pas de texte nécessairement futur vous mettre. Alors ayez votre texte sur le terrain avant d'appeler setTextFormat, et réglez-le à chaque fois que vous le changez juste pour être sûr qu'il reste.

Il est probablement préférable d'utiliser un TextField normal plutôt que le composant. Si vous voulez toujours le composant, vous devrez peut-être appeler textArea.validateNow() pour le mettre à jour avec le nouveau style (pas sûr à 100% sur celui-ci). Les composants Adobe sont notoirement mauvais, et doivent être évités. :(

Pour voir toutes les options disponibles sur l'objet TextFormat voir here

FIN EDIT ---------

Ceci est assez facile de le faire avec CSS dans une ancienne TextField normale .

var myCSS: String = "Have some CSS here, probably from a loaded file"; 
var myHTML: String = "Have your HTML text here, and have it use the CSS styles"; 

// assuming your textfield's name is myText 
var styleSheet: StyleSheet = new StyleSheet(); 
styleSheet.parseCSS(myCSS); 
myText.autoSize = TextFieldAutoSize.LEFT; 
myText.styleSheet = styleSheet; 
myText.htmlText = myHTML; 

pris en charge les balises HTML peuvent être trouvés here
CSS pris en charge peut être trouvé here

Answer 2

La raison pour laquelle vous avez un problème lors de l'ajout de Textfield aux conteneurs est qu'il n'implémente pas l'interface IUIComponent.Vous devez utiliser UITextField si vous voulez l'ajouter. Cependant, cela me présente mes propres problèmes de style qui m'ont amené à cette question.

Quelques choses que je sais:

1. TextField utilise la définition de style TextFormat, et l'appliquer à la textfield. Comme l'a dit Bryan, l'ordre est important.

2. setStyle ne fait rien sur IUITextField et la méthode TextFormat ne semble pas fonctionner de la même manière que dans les TextFields normaux. (Edit # 2:. Ahah Vous devez remplacer la fonction "validateNow" sur UITextFields d'utiliser la fonction setTextFormat)

3. Pour autoSize un TextArea, vous devez faire quelque chose comme ça (héritant de TextArea):

import mx.core.mx_internal; use namespace mx_internal; ... super.mx_internal::getTextField().autoSize = TextFieldAutoSize.LEFT; this.height = super.mx_internal::getTextField().height;

trouvé ce code, je pense, sur StackOverflow un certain temps. Toutes mes excuses à l'auteur original. Mais l'idée est que vous devez accéder au champ de texte brut "mx_internal".

4. Texte et TextArea ont des options d'habillage. (L'étiquette ne fait pas). Donc, si vous définissez la largeur explicite d'un objet Text, vous pourrez peut-être dimensionner en utilisant l'option measuredHeight et éviter la troncature.

(edit: C'était # 4, mais stackoverflow parsé dans un 1 ...)

Answer 3

Après environ 8 heures de recherche d'une solution à ce qui semble être une question simple que je ENFIN tombé sur vos messages ici ... Merci!

J'ai été trébucher autour d'essayer de faire fonctionner TextField et n'avait pas de joie, Label était bien, mais formatage limité, et je dois être en mesure d'utiliser les polices intégrées et faire pivoter. Après avoir lu ce qui précède ce finalement fonctionné pour moi:

var myFormat:TextFormat = new TextFormat(); 
myFormat.align = "center"; 
myFormat.font = "myFont"; 
myFormat.size = 14; 
myFormat.color = 0xFFFFFF; 

var newTxt:UITextField = new UITextField(); 
newTxt.text = "HELLO"; 
addChild(newTxt); 
newTxt.validateNow(); 
newTxt.setTextFormat(myFormat); 

L'ordre de addChild avant les 2 dernières étapes était critique! (myFont est une police intégrée que j'utilise).

Un nouveau ... mille années thankyou ...

John