Estoy tratando de incluir texto html a partir de la propiedad .htmlText del objeto TextField y darle formato a partir de un archivo *.css externo. Sé que es un tema bastante comentado ya por la web y he encontrado ejemplos al respecto que me han servido de orientación pero no consigo que el html introducido me coja los estilos.
Tampoco tengo del todo claro que me pille el html tal cual se le indica pq no separa los párragos, independientemente del formato (CSS).
El texto html a introducir se obtiene de un fichero externo XML (nodo <content>)
//file XML
Código ActionScript :
<theory> <styleSheetFile>style_teoria_1.css</styleSheetFile> <content><![CDATA[<h1>TEORIA</h1><p>El sistema de numeración que usaban los romanos, utilizaban siete letras mayúsculas para representar todos los números.</p><p class="styleSpecial00"><img src="Data/ES/Trimestre1/Teoria/Tema1/Apartado1/images/sistNumeracion.png" width="411px" height="71px"/></p><p class="styleCuriosity"><span class="styleRomanOverline">CURIOSIDAD: </span>Los romanos desconocían el cero, así que no existe ninguna letra en la numeración romana que lo represente. El cero fue introducido posteriormente por los árabes.</p>]]> </content> </theory>
//file CSS
Código ActionScript :
@charset "utf-8";
h1,p,span{
font-family:Arial, Helvetica, sans-serif;
text-align:justify;
color:#000000;
width:600px;
}
h1, p{
padding:5px;
margin:5px;
}
h1{
font-size:22px;
font-weight:400px;
}
p{font-size:13px;}
img{border:none;}
.styleSpecial00{text-align:center;}
p.styleCuriosity{
font-size:12px;
color:#990033;
font-style:italic;
}
p.styleCuriosity span{
font-weight:700;
color:#990033;
font-style:normal;
}
.styleRomanOverline{text-decoration:overline;}
Y por último tengo la clase que se encarga de:
-Cargar el contenido del archivo XML
-Cargar el contenido del archivo CSS
-Crear y configurar el TextField que mostrará el contenido html
-Aplicar las reglas de estilo al TextField
-Añadir a la lista de visualización el TextField
-etc...
Código ActionScript :
package myAs{
import flash.display.MovieClip;
import flash.events.MouseEvent;
import flash.display.Sprite;
import flash.events.*;
import flash.text.*;
import flash.net.*;
import myAs.core.FrameScript;
import myAs.ClassDispatcher;
public class ContentHtml extends Sprite{
private var urlCssFile:String="style_file_1.css";
private var urlFile:String="file_1.xml";
private var loader:URLLoader;
private var cssLoader:URLLoader;
private var datos:XML;
private var style:StyleSheet;
private var contentHtmlText:String="";
private var contentHtmlTextField:TextField;
public function ContentHtml():void{
//1. Creamos el TextField donde introduciremos el contenido procedente del XML
contentHtmlTextField=new TextField();
//2. Configuramos el TextField+
contentHtmlTextField.width=500;
contentHtmlTextField.height=800;
contentHtmlTextField.x=100;
contentHtmlTextField.y=150;
//contentHtmlTextField.autoSize= TextFieldAutoSize.CENTER;
contentHtmlTextField.multiline=true;
//contentHtmlTextField.wordWrap=true;
//3. Cargar la petición del archivo XML externo que contiene el nodo HTML
loader=new URLLoader();
//3.1.
loader.addEventListener(Event.COMPLETE,onXmlLoaded);
loader.load(new URLRequest(urlFile));
//3. Cargar la petición del archivo CSS externo
cssLoader=new URLLoader();
//3.1. Atender la escucha de eventos [COMPLETE]
cssLoader.addEventListener(Event.COMPLETE,onCssLoaded);
cssLoader.load(new URLRequest(urlCssFile));
}//end constructor
private function onXmlLoaded(e: Event):void{
//1. Sms informativo
trace("File: '"+urlFile+"' has been loaded sucessfully!");
//2. Almacenamos el contenido del XML en datos
datos=new XML(e.currentTarget.data);
//3. Almacenamos en un String el contenido HTML del nodo que nos interesa
contentHtmlText=datos.content;
}//end 'onXmlLoaded()'
private function onCssLoaded(e:Event):void{
//1. Sms informativo
trace("File: '"+urlCssFile+"' has been loaded sucessfully!");
//1. Creamos obj. StyleSheet
style=new StyleSheet();
//2. Transferir las declaraciones de estilo de 'style'
style.parseCSS(cssLoader.data);
//3. Aplicar el estilo al campo de texto
contentHtmlTextField.styleSheet=style;
//4. Asignar el texto almacenado al textField
contentHtmlTextField.htmlText=contentHtmlText;
//Añadir obj a la lista de visualización
addChild(contentHtmlTextField);
}//end 'onCssLoaded()'
private function onXmlFailed(e:Event):void{
trace("Error loading XML file: " + e);
}// end 'onXmlFailed()'
private function onCssFailed(e:Event):void{
trace("Error loading CSS file: " + e);
}//end 'onCssFailed()'
}//end class
}//end package
Tanto la carga de los dos archivos (xml , css) como mostrar el contenido html (texto + imagen) lo hace correctamente. Lo que no hace es darle el formato indicado por el archivo CSS. Y otra duda que se me plantea es porque si he separado el texto en varios párrafos me lo muestra todo seguido y rodeando la imagen ( no inferiormente si son elementos de bloque html).
Por favor, cualquier sugerencia bienvenida será
MIl gracias de antemano!
.