CSS in Flash via XML ... close!

[knappster]

Hi there,

I've managed to learn alot of steps to getting to where I've gotten, but I can't seem to get it, and I'm at a dead end. What I'm trying to do is display CSS enhanced text in flash with an XML file. The problem is that when the text is in the given text box, it's not formatted, and only the 2nd entry is posted, even though tracing it displays the text perfectly.

Here is the flash:

newsText.html = true;
newsText.wordWrap = true;
newsText.multiline = true;
newsText.label.condenseWhite=true;

newsStyle = new TextField.StyleSheet();
newsStyle.load("styles.css");
newsText.styleSheet = newsStyle;

newsContent = new XML();
newsContent.ignoreWhite = true;
newsContent.load("conglomeration.xml");
newsContent.onLoad = function(success)
{
	if (success) {
		var news = newsContent.firstChild.firstChild;
		var newsEntries = news.childNodes;
		for (var e=0; e<newsEntries.length; e++){
		currEntry = newsEntries[e];
		newsText.text =  currEntry.firstChild.firstChild.nodeValue +" > "+ currEntry.firstChild.nextSibling.firstChild.nodeValue +"\n"+ currEntry.firstChild.nextSibling.nextSibling.firstChild.nodeValue +"\n"
		}
	}
}

Here is the XML:
[HTML]<?xml version="1.0" encoding="UTF-8" ?>
<conglomeration>
<news>
<entry>
<entrydate>Jul.18.05</entrydate>
<entrytitle>First Entry</entrytitle>
<entrybody>
<![CDATA[First news entry will go here.]]>
</entrybody>
</entry>
<entry>
<entrydate>Jul.19.05</entrydate>
<entrytitle>Second Entry</entrytitle>
<entrybody>
<![CDATA[Second news entry will go here.]]>
</entrybody>
</entry>
</news>
</conglomeration>[/HTML]

and here is the CSS:

entrydate {
  color: #FF0000;
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: bold;
  display: block;
}
entrytitle {
  color: #0000FF;
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: normal;
  display: block;
}
entrybody {
  color: #000000;
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: normal;
  display: block;
}

I've also attached the files used.

Thanks in advance for any help

[AlsoGaiusCoffey]

1. You need to use htmlText to show the html...
2. Which means you need to include tags...
3. Which means you don't need to walk the tree to show your list...

code:

---

newsContent.onLoad = function(success) {

	if (success) {

		newsText.htmlText = newsContent.firstChild.firstChild

	}

};

---

[knappster]

Thanks, that's a little closer ... the CSS works at least. I would like to be able to format the text, however. For example, I would like the <entrydate> and <entrytitle> to be on the same line, and each <entry> to be seperated by something like "______" and another break.

Any ideas?

[AlsoGaiusCoffey]

You can use the "display" attribute in CSS to control whether tags should display "inline" or in a separate "block".
If you want to start playing with the layout more, it is best to separate the elements, for example:

code:

---

function nodeToObject(n:XMLNode):Object {

 var o:Object = new Object();

 for (var i in n.childNodes) {

  o[n.childNodes[i].nodeName] = n.childNodes[i].firstChild.nodeValue;

 }

 return o;

}

newsContent.onLoad = function(success)

{

 if (success) {

  var ns:Array = this.firstChild.firstChild.childNodes;

  var s:String = "";

  for( var i=0;i<ns.length;i++ ) {

   var newsItem:Object = nodeToObject(ns[i]);

   s += "<entryDate>News item number "+(i+1)+" published on "+newsItem.entryDate+"</entryDate>";

   s += "<entrytitle>"+newsItem.entryTitle+"</entrytitle>";

   s += "<entrybody>"+newsItem.entryBody+"</entrybody>";

   if((i+1) < ns.length) s += "<BR />______ ----- @@@@</BR>";

  }

 }

 newsText.htmlText = s;

}

---