:-$

Ryan's work blog

My Links

News

The WeatherPixie
Subscribe with Bloglines
About this blog

Tools I use:

Post Categories

Article Categories

Archives

Image Galleries

Blog Stats

Personal

Projects

Random Blogs

Random other

Reference

Web comics

Work

XUL + description + \n =

So I tried displaying a multiline string in a description element, and got the pretty black boxes ( ) that means it doesn't like newlines. After googling a little bit, I found a code sample, hosted by the same folks as last time, about breaking up multiline text in XUL.

Of course, the law of code samples applied, and the sample didn't work. Luckily, it was just an incorrect variable name, and not something that takes hours to track down in a foriegn API. But, now that it does work, I'm still astounded at how ugly it is.

Instead of putting text into a description element, the one designed to hold text, you have to split the text up into lines, then create a description node for each line, and then add that to another container. I chose a vbox, since I tend to read things from top to bottom.

Here's the code sample:
//the actual comment is coming from RDF in a roundabout way (thats a hack for another time)
var comment = "big \n huge \n multiline \n comment";

//get the vbox that the multi-line comment should be in
var commentHolder = document.getElementById('commentHolder');

//split the text by newline to get the list of single line strings
var lines = comment.split('\n');

//Clear the comment holder of all children, which removes any previous multiline text being displayed.
while(commentHolder.firstChild != null){
   commentHolder.removeChild(commentHolder.firstChild);
}

//loop through each line in the list
for(var i = 0; i < lines.length; i++){

   //make a new description node for your text         
   var descriptionNode = document.createElement("description");    
         
   //create a new node for the text (setting descriptionNode.value does NOT work)
   var linetext = document.createTextNode(lines[i]);
   
   //add the text node to the description node
   descriptionNode.appendChild(linetext);
   
   //add the description to the holder.
   commentHolder.appendChild(descriptionNode);
}
Ouch. Kinda makes you yearn for a comment.Replace("\n", "<br/>"); doesn't it?
Or better yet, a description.textMode property.

posted on Thursday, September 23, 2004 6:20 PM