Attribute Setter Builder

 

 

In this topic ...

How do I...

Specifying Inputs

 

Related Topics ...

How to Use the Attribute Sequencer Builder

How to Use the HTML Event Action Builder

The Attribute Setter builder modifies existing elements on a page by replacing or adding to any HTML attribute values that those elements support.

Use the Attribute Setter to add or modify attribute values not set by builder calls. We can tailor the display of control builder calls by using the attribute setter to change the font, size, border, or any other supported attribute for the control.

 

How do I...

Set Text Attributes

Let's assume you want to use an Attribute Setter builder to display the text in red at 7 pts.

  1. Place a <font> tag before the text you want to manipulate, and assign a name for the name attribute, as shown below.

<font name="Text">

     The formatting of this text depends on the attribute setter.

  1. Open Designer and assign an Attribute Setter builder call to the model . Make sure the builder call is assigned to the name provided in the font tag. In the example above, the Attribute Setter builder would be assigned to the "Text" tag.

  2. Assign the color attribute to the text by doing the following:

  1. In the Name field, select the color attribute.

  2. In the Value field, type in a pointer to a variable. For example,

${Variables/Color}

We can also type in the color directly; however, by storing the value in a variable we can dynamically change the variable's value at run time.

  1. Add a Variable builder call of type String to the model.

  2. In the Value field, type the color name, for example red.

  1. Assign the size attribute by doing the following:

  1. Open the attribute builder call you modified in Step 3.

  2. In the Name field, select the size attribute.

  3. In the Value field, type the point size, for example 7.

We can also type in a pointer to a variable; however, keep in mind you will need to create a Variable builder call of type String that contains the value.

  1. Click OK.

Assign Attributes to a Button

Let's assume you want to assign an attribute to a button. When the button is clicked, an alert window is displayed. The following steps provide a brief explanation on how you would do this.

  1. Add a button builder call by using the Button builder. For more information, refer to "How to Use the Button Builder."

  2. Assign an Attribute Setter builder call to the model. Make sure the builder call is assigned to the same tag assigned to the Button builder.

  3. In the Name field, select onclick.

  4. In the Value field, enter the following JavaScript to invoke the alert window. The example below tells the browser to display "Hello World" in an alert box when the button is clicked.

alert("Hello World")

  1. Click OK.

Run an Action as the Result of a User Mouse Click

Don't use an Attribute Setter Builder! To run an action as the result of the user clicking or typing, use the HTML Event Action builder instead rather than an Attribute Setter Builder. Here's why.

When you use an Attribute Setter to associate a mouse attribute such as "onclick" with a method reference such as ${MethodCall/main}, the affect will be "as the page is rendered call method main and use what it returns as the value for the onclick attribute." You will not create the action that "when the user clicks here, hit the server and run main again".

 

Specifying Inputs

The Attribute Setter builder takes the inputs described in the table below. For help on inputs common to many or all builders such as those in the Properties and HTML Attributes input groups, see "Using the Builder Call Editor."

 

Input Name Description
Name Enter a name for this builder call. The Designer displays this name in the Builder Call List.
Page Location Use the Page Location input to specify the page or pages on which this builder call will act.

See "Locating Control Builders on Pages" for detailed documentation about the Page Location input and page location syntax.

Attribute List Select the name of the HTML attribute that you want to add or modify for the HTML element(s) pointed to by the Page Location syntax and enter a value for the selected attribute.

For more information about the attributes listed in the Name column, refer to HTML documentation.

Overwrite Rule If the element(s) on which this attribute setter operates already has the specified attribute set, do one of the following:

  • Overwrite HTML value -- Replaces existing attribute value with the specified attribute value.

  • Prepend new value -- Prepends the specified value to existing attribute value. Typically used for building JavaScript expressions. For example,
    onClick="newJavaScriptExpression";"oldJavaScriptExpression"

  • Append new value -- Appends the specified value to existing attribute value. Typically used for building JavaScript expressions.
    For example,
    border="oldJavaScriptExpression";"newJavaScriptExpression"

  • Don't overwrite HTML value -- Does not set the attribute value.
Value-less Attributes Select how this Builder should interpret an attribute for which no value is specified at regen time. You can choose one of the following:

  • Ignore the attribute - To leave the attribute is it presently is

  • Remove the attribute - To strip the attribute from the HTML

  • Set to attribute name - To assign an XHMTL-style to the attribute value. For example: attr_name="attr_name Use this input for doing things like disabling inputs, enabling check boxes, etc., which use a valueless attribute in old-style HTML. ( See Note below. )

  • Set to empty string - To assign the attribute value an empty string. For example: attr_name=""

Most browsers allow values to be attached to HTML attributes which are technically valueless. In XHTML, the pattern attr_name="attr_name" replaces valueless attributes. Thus you might create a disabled input as: <input type="text" name="foo" disabled="disabled" />

Advanced
Append/Prepend Separator Enter the separator to use when an attribute value is prepended or appended.

The default separator is a comma (,) character.