una - cómo obtener un control de texto flexible para el ajuste de palabras

programa para hacer nubes de palabras on line

Question

Estoy creando una aplicación Adobe Flex y tengo un control de texto (mx: texto), que supuestamente se usa cuando se necesita texto no editable de líneas múltiples (a diferencia de una etiqueta, que es texto no editable de una sola línea). Mi control de texto no se ajusta cuando cambio el tamaño de la ventana del navegador para que sea más pequeño que el texto (o lo cargue con la ventana del navegador ya más pequeña). Al consultar este documento que encontré, parece que la funcionalidad de ajuste de palabras solo ocurre si especifica un ancho absoluto en píxeles. Eso es exactamente lo que trato de evitar. Quiero que el texto se ajuste al tamaño dado a mi objeto Flash para que esté siempre visible ... ¿hay alguna manera de lograr esto, a través de alguna propiedad que me falta o quizás un control diferente? Gracias.

Answer 1

Así que el ejemplo de Christian de solo una aplicación con un elemento de texto dentro del trabajo, pero es demasiado fácil arruinar el diseño. Solo agregue un VBox entre medio y el ajuste no funciona:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="100%" height="100%">
<mx:VBox width="100%">
    <mx:Text width="100%" height="100%" text="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." />    
</mx:VBox>
</mx:Application>

Answer 2

Creo que aplicar VBox width = "100%" y Text width = "100%" es la forma más sencilla. Nota: si el texto se genera dinámicamente, no olvides hacer text.percentWidth = 100

Answer 3

El ancho y la altura de los porcentajes en realidad se resuelven en sus equivalentes de píxel, por lo tanto, si los usa debe lograr el ajuste y el tamaño relativo que está buscando. Por ejemplo:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="100%" height="100%">
    <mx:Text width="100%" height="100%" text="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." />
</mx:Application>

Es decir, siempre que haya una configuración de ancho de cualquier tipo, el tamaño relativo (un número explícito, un porcentaje, un ancla basada en restricciones, por ejemplo, arriba, derecha, abajo, izquierda, etc.) debería hacer que el texto se envuelva de forma natural . ¿Este enfoque no funciona con el diseño que está utilizando? Sin algún código, es difícil de decir, pero tiene razón: el ajuste requiere establecer una propiedad relacionada con el ancho en el contenedor.

Cambiar el tamaño y el ajuste puede ser un poco complicado, dependiendo del contexto, así que si encuentras que esto no funciona, intenta publicar un código. Estoy seguro de que alguno de nosotros podrá ayudarte a resolverlo.

Answer 4

Intenta configurar htmlText = "true" en tu campo de texto.

Answer 5

Podría hacerlo usando solo mxml. El resultado es bastante feo, pero podría hacerlo.

<s:Group id="propDisplay" width="100%">
    <mx:Text id="key" left="0" text="{data.key}:"/>
    <mx:Text left="{key.width}" maxWidth="{propDisplay.width - key.width}" 
                             text="{data.value}" />
</s:Group>

Answer 6

Podría intentar agregar un controlador de eventos al nodo padre para Event.RESIZE y llamar al método validateNow() del objeto Text. (Quizás precedido por una llamada invalidateSize() . ¿Por qué esto no sucede automáticamente? No puedo decirlo.

Answer 7

Si está tratando de que la envoltura de texto funcione dentro de un componente MXML intente esto:

<mx:Text id="testText"  
  width="{ this.width }"
  height="100%"   
  text="Your text here" />

Básicamente está configurando el ancho del ancho del componente y establecer la altura al 100% le permitirá ajustarse correctamente cuando reduzca el tamaño.

Answer 8

Yo tuve el mísmo problema. En mi caso, tenía un mx: bloque de texto (que DEBERÍA haber cubierto), y ese mx: objeto de texto estaba incrustado en DOS contenedores mx: VBox.

La única forma en que obtuve el texto para envolver con éxito fue hacer AMBOS de los siguientes:

1. poner la propiedad ''width = "100%"'' en CADA contenedor VBox (en el que residía mx: text).
2. poner la propiedad ''width = "100%"'' en CADA mx: objeto de texto (que reside dentro de este agrupamiento de VBox)

Muy no intuitivo, pero esto es lo que funcionó para mí.

¡Espero que esto te ayude!

Jon Kinsting

Answer 9

render="invalidateSize();validateNow();
''component id''.mx_internal::getTextField().wordWrap=true"

agregue esto a su componente de texto.