The Span object does not cater for all the attributes of rich text that are supported in an XFA form but sometimes can be easier than using E4X.
So an example, the rich text "Please click the red button" is generated by the xHTML;
<body xmlns="http://www.w3.org/1999/xhtml" xmlns:xfa="http://www.xfa.org/schema/xfa-data/1.0/">
<p style="letter-spacing:0in">
Please click the<span style="color:#ff0000">red</span>button
</p>
</body>
As an array of Spans objects this is represented as
({text:"Please click the "})
({text:"red", textColor:["RGB", 1, 0, 0]})
({text:" button"})
Then the code to change all the red text to green would be;
var spans = util.xmlToSpans(Text1.value.exData["##xHTML"].saveXML());
for (var i = 0; i < spans.length; i++)
{
if (spans[i].textColor && color.equal(spans[i].textColor, color.red))
{
spans[i].textColor = color.green;
spans[i].text = "green";
}
}
var xHTML = util.spansToXML(spans);
Text1.value.exData.loadXML(xHTML, false, true);
for (var i = 0; i < spans.length; i++)
{
if (spans[i].textColor && color.equal(spans[i].textColor, color.red))
{
spans[i].textColor = color.green;
spans[i].text = "green";
}
}
var xHTML = util.spansToXML(spans);
Text1.value.exData.loadXML(xHTML, false, true);
The color object used in this code is also from the Adobe Reader API, it defines some common colors (that is black, white, dkGray, gray, ltGray, red, green, blue, cyan, magenta and yellow). As well as the color.equal() method it also has a color.convert() method so to change all the colors to a gray scale we could;
var spans = util.xmlToSpans(Text1.value.exData["##xHTML"].saveXML());
for (var i = 0; i < spans.length; i++)
{
if (spans[i].textColor)
{
spans[i].textColor = color.convert(spans[i].textColor, "G");
}
}
var xHTML = util.spansToXML(spans);
Text1.value.exData.loadXML(xHTML, false, true);
for (var i = 0; i < spans.length; i++)
{
if (spans[i].textColor)
{
spans[i].textColor = color.convert(spans[i].textColor, "G");
}
}
var xHTML = util.spansToXML(spans);
Text1.value.exData.loadXML(xHTML, false, true);
If anyone still needs to have a color form for the screen and a black and white version for printing and uses rich text then this code could go in the prePrint event and then in the postPrint event you could revert to the original formatting with;
Text1.nodes.remove(Text1.value);
Removing the changes made in the Form DOM resets the properties to their initial values as defined in the Template DOM.
To build a rich text value from scratch we could;
var spans = [];
spans.push({text:"Hello "});
spans.push({text:NameField.rawValue, fontWeight:700, fontStyle:"italic"});
spans.push({text:", I hope you like this sample"});
var xHTML = util.spansToXML(spans);
Text1.value.exData.loadXML(xHTML, false, true);
spans.push({text:"Hello "});
spans.push({text:NameField.rawValue, fontWeight:700, fontStyle:"italic"});
spans.push({text:", I hope you like this sample"});
var xHTML = util.spansToXML(spans);
Text1.value.exData.loadXML(xHTML, false, true);
If you need to change a plain-text Text field into a rich-text one then you can use the following code;
if (Text1.value.oneOfChild.className === "text")
{
Text1.value.nodes.remove(Text1.value.text);
var exDataNode = xfa.form.createNode("exData");
Text1.value.nodes.append(exDataNode);
}
{
Text1.value.nodes.remove(Text1.value.text);
var exDataNode = xfa.form.createNode("exData");
Text1.value.nodes.append(exDataNode);
}
The sample SpanDemos.pdf includes a couple of other simple examples, as well as a more complicated example that will take the body element of the rich text then format and colorize it. This sample also shows a workaround for the lack of support for the xfa-spacerun:yes style attribute in the Span objects.
background-color style attribute
This attribute is not mentioned in the XFA spec and there is no support for it with the Designer UI but Reader will render the background color, you just need to enter it in the XML Source view. The trick with using background-color is that all elements following the one the style is applied to will inherit the color. In an HTML page only the descendent elements would inherit the color. This just means you need a second background-color style attribute to reset the color. Designer doesn't play well with this attribute as every time you edit the text using the Design view you will have to add the second background-color style attribute back.The color can be specified in hexadecimal or decimal;
background-color:#C4C4C4 or background-color:rgb(196,196,196)
You can see an example of the background-color style attribute in this sample.
I haven't gone though all the style attributes to see which ones are supported, but I did try adding a border and that didn't work for me.
