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

Question

Estoy creando una aplicación Adobe Flex y tengo un control de texto (mx: texto), que supuestamente se usa cuando necesita texto no editable multilínea (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 this doc que encontré, parecería 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

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

Answer 2

El ancho y la altura de los porcentajes en realidad se resuelven en sus equivalentes de píxel, por lo tanto, al usarlos 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 hay un ajuste de ancho de ningún tipo, tamaño relativo (un número explícito, un porcentaje, un ancla basada en restricciones - por ejemplo, arriba, derecha, abajo, de izquierda - etc.) debe 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 figurar fuera.

Answer 3

Tuve este mismo 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 manera de que me dieron el texto se ajuste éxito era hacer ambos de los siguientes:

1. poner el 'width = '100%'' propiedad en cada recipiente caja vertical (en la que el MX: texto residido).
2. poner el 'width = '100%'' propiedad en cada uno mx: Objeto de texto (que reside dentro de esta caja vertical de anidación de)

muy poco intuitivo, pero esto es lo que funcionó para mí.

Espero que esto te ayude!

Jon Kinsting

Answer 4

creo que la aplicación de ancho de caja vertical = "100%" y el ancho de texto = "100%" es la forma más sencilla. Nota: si el texto se genera dinámicamente, no olvides hacer text.percentWidth = 100

Answer 5

Así que el ejemplo de Christian de simplemente una aplicación con un elemento de texto dentro del trabajo, pero es demasiado fácil arruinar el diseño. Sólo tiene que añadir una caja vertical entre medio y envoltura hace no trabajo:

<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 6

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

Agregar a su componente de texto.

Answer 7

Si usted está tratando de obtener el ajuste de texto para trabajar dentro de un componente MXML intente esto:

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

Básicamente, se está estableciendo la anchura a la anchura del componente y ajuste de la altura al 100% permitirá que se ajuste correctamente cuando reduzca el tamaño.

Answer 8

Podría hacerlo utilizando 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 9

Pruebe la configuración htmlText = "true" en el campo de texto.