Unidad 19. Formularios - ActionScript (X)

19.7. HTML y CSS en cajas de texto

Si recordamos el ejemplo anterior, tras mostrar el contenido del XML, obteníamos el siguiente texto en comentarios_text, una caja de texto:

  <a href="mailto:ana@correo.com">ana</a>: <span class="mensaje">si actualizo aquí se verá en otra ventana?</span>
  <br>
  <a href="mailto:jesus@correo.com">jesús</a>: <span class="mensaje">pues ya estamos todos</span>
  <br>
  <a href="mailto:emilio@correo.com">emilio</a>: <span class="mensaje">yo también me apunto</span>
  <br>
  <a href="mailto:david@correo.com">david</a>: <span class="mensaje">bien, pero trae algo para cenar, no tengo nada en la nevera</span>
  <br> 

Pero lo normal es que si escribimos código HTML es porque queremos que se vea con un determinado formato, no las etiquetas HTML.

Para que Flash tome el contenido como HTML, en vez de utilizar la propiedad comentarios_text.text empleamos comentarios_text.htmlText para establecer el texto.

Pero no sólo queremos ocultar las etiquetas, queremos formatear el texto debidamente utilizando la siguiente hoja de etilos, que tenemos en el archivo estilo_comentarios.css:

.mensaje {
    font-style: italic;
    color: #2C578F;
}   
a {
   font-weight: bold;	
   color: #CF406E;
}

Podemos distinguir dos estilos: uno aplicado a los elementos con la clase mensaje (class="mensaje") y otro aplicado a los enlaces (<a href...).

Como siempre, e independientemente de para qué lo usemos, cargamos la información del archivo con un objeto URLLoader, y preparamos el evento complete, para utilizar los datos cuando estén listos:

var cargadorCSS:URLLoader=new URLLoader();
cargadorCSS.load(new URLRequest('comentarios.css'));
cargadorCSS.addEventListener('complete', estiloCargado);

El objeto que nos permite utilizar las propiedades CSS es del tipo StyleSheet. Lo declaramos, y cuando el cargador tenga los datos listos es su propiedad .data, se los asignamos a la hoja de estilo con su método parseCSS. Y para acabar, con la propiedad styleSheet de la caja de texto indicamos que usará nuestra hoja.

var miHojaEstilo:StyleSheet = new StyleSheet();
function estiloCargado(event):void {
  //Convertimos los datos cargados
  miHojaEstilo.parseCSS(cargadorCSS.data);
  //E indicamos a la caja de texto que use esta hoja
  comentarios_text.styleSheet = miHojaEstilo;
};

Esto debemos de realizarlo antes de rellenar la caja de texto con HTML, ya que flash no trata igual el HTML si no tiene una hoja de estilo asociada.

Si queremos podemos cambiar la propiedad para utilizar otra hoja de estilo. O aprovechando las funciones y objetos definidos, podemos crear un botón para que cargue una nueva hoja:

btn.addEventListener(MouseEvent.CLICK, cambiarHoja);
function cambiarHoja(event) {
  cargadorCSS.load(new URLRequest('comentarios2.css'));
}

Como el cargador ya tiene asociado el evento complete, se volverá a ejecutar la función estiloCargado asignando el nuevo estilo.

Ejercicios del Tema 19.

Prueba evaluativa del Tema 19.

 Cursos Informática Gratuitos