Edit text field border using JavaScript ?

[et]

Is there a simple way, using javascript, to :
- change the edges setting to "edit together" / "edit individually" ?
- change the appearance to "none", "solid", "dashed" ?

THanks !!!

ET

[John Nesbitt]

This blog from Stefan Cameron will help you understand the following
script:

http://forms.stefcameron.com/2006/11/09/oneofchild-scripting-property/

I don't know how to change the "edit together" / "edit
individually" (I'm pretty sure this is something Designer does to make
your life easier, rather than something that is stored in the XDP) and
I don't know how to change individual edges around the text field (I
can see that Designer puts multiple <edge> and <corner> nodes under
the <border> node but I don't know how to do that in JavaScript.

Here is how to change ALL of the edges to a particular stroke:

// Example 1 - Lowered - 3D
yourFieldName.ui.oneOfChild.border.edge.stroke = "lowered";
yourFieldName.ui.oneOfChild.border.corner.stroke = "lowered";

// Example 2 - Embossed
yourFieldName.ui.oneOfChild.border.edge.stroke = "raised";
yourFieldName.ui.oneOfChild.border.corner.stroke = "raised";

Here are the options for stroke (taken from the LiveCycle Designer
reference - http://www.adobe.com/go/learn_lc_scriptingReference):

solid | dashed | dotted | dashDot | dashDotDot | lowered | raised |
etched | embossed

Hope this helps,
John.

[Matthew Weber]

I was actually trying to find out the answer to this:

I don't know how to change individual edges around the text field (I 
can see that Designer puts multiple <edge> and <corner> nodes under 
the <border> node but I don't know how to do that in JavaScript.

I was eventually able to solve the problem, but I never found the solution posted anywhere online. I use tons of forums/grops/etc. to solve problems and I don't give back quite enough so the simlple answer is the resolveNode() method - code below. First thing to know is that behind the scenes of a Livecycle Form is a big XML file (View > XML Source). The next thing to know is that when you use "dot notation" (not sure if that is the right phrasology) in javascript to identify a property that you want to modify (Ex. TextField1.border.edge.presence), what you are really doing is drilling down into the SOM (Scripting Object Model). The last thing you need to know before the solution is that the whether you set the borders to be editted individually or as a whole, there are still four "edge" elements in the XML; similarly to CSS, the first one is the top, the second is right side, etc. Here is what the border element looks like for a text field that has had the left border set, then turned off (It is good to know that when you set the thickness, it is retained even if you turn off that border; it is just made hidden) in XML:

<border>
 <edge presence="hidden"/> <!-- edge[0], top border -->

 <edge presence="hidden"/> <!-- edge[1], right border -->
 <edge presence="hidden"/> <!-- edge[2], bottom border -->
 <edge thickness="0.508mm" presence="hidden"/> <!-- edge[3], left border -->
<!-- There are also four corner tags [removed]  -->
</border>

The code that was used in my case on the enter event, was as follows:

this.border.resolveNode("edge[3]").presence = "visible";
this.ui.oneOfChild.border.fill.color.value = "255,255,255";

The code that was used in my case on the exit event, was as follows:

this.border.resolveNode("edge[3]").presence = "invisible";
this.ui.oneOfChild.border.fill.color.value = "235,235,235";

At this point, you have access to the individual border and can change the presence, thickness, or stroke. In the example below, the background is made white and a left-side thick border is made visible on the entered field.