Modifying Properties

Properties provide an abstraction layer for the complexities of browser event models and DHTML syntax. General Interface prototype components are preconfigured with default property values, which can be modified.

These properties are name-value pairs that are displayed in the Properties Editor palette. For example, the properties of a button include some of the following: text/HTML, font size, background color, width, and so on.

To modify a property, complete the following steps:

1. Select a component or multiple components in the work area or the Component Hierarchy palette.

   Use Ctrl+click to select multiple components. Use Shift+click to choose a range of components. See Working with Multiple Components.

2. Find the property you want to modify in the Properties Editor palette.

   To learn more about properties, hover the mouse over the property name in the Properties Editor palette or see General Interface GUI Property Reference (Help > API Documentation > GUI Property Reference).

3. To modify a property, do one of the following in the Properties Editor palette:
   
   • Type a value in the Value column. For example, for the Font Size property, you might type 12.
     
   • Right-click and choose a dynamic property value from the menu, if available. For example, for the Color property, you might choose the dynamic property, @Light.
     For properties that are common to many components and properties that require localization, such as labels, it's recommended that you use dynamic properties or properties bundle files. See the General Interface Developer Guide.
     
   • Type the key (ID) of a dynamic property or a properties bundle in the Value column.
     
   • Click the down arrow in the Value column and select a value from the list, if available. For example, for the Font Weight property, you might choose Bold.

Entering CSS Values

For properties that require CSS values, such as padding, margin, and border, you can enter a W3C valid CSS syntax or General Interface syntax. General Interface syntax is a more efficient, concise syntax specific to General Interface. Values are converted to General Interface syntax at runtime. If performance is critical, the General Interface syntax is recommended, because CSS syntax can reduce performance.

For examples of General Interface syntax, see the following topics:

• Padding
• Margin
• Border

  When using the General Interface syntax, be sure to enter a space between values as shown in the examples. Some CSS values also require a space.

For more information on CSS, see Cascading Style Sheets Specification at http://www.w3.org/TR/CSS21/.

Padding

The Padding property (jsxpadding) sets the white-space gap between the outer edge or border of the object to its inner content. When using General Interface syntax, padding is specified as one or four implied pixel values applied in this order: top, right, bottom, and left.

General Interface Syntax

The following are valid General Interface syntax for specifying 8 pixels of padding:

• 8
• 8 8 8 8

W3C CSS Syntax

W3C CSS syntax is also supported as long as explicit pixel units are used. The following are all valid CSS for specifying 8 pixels of padding:

• padding:8px;
• padding:8px 8px;
• padding:8px 8px 8px 8px;
• padding-top:8px;padding-right:8px;padding-bottom:8px;padding-left:8px;

Margin

The Margin property (jsxmargin) sets the gap between the object's border and its parent and/or sibling containers. When using General Interface syntax, margin is specified as one or four implied pixel values (top, right, bottom, and left).

General Interface Syntax

The following are valid General Interface syntax for specifying 4 pixels for margins:

• 4
• 4 4 4 4

W3C CSS Syntax

The following are all valid CSS for specifying 4 pixels for margins:

• margin:4px;
• margin:4px 4px;
• margin:4px 4px 4px 4px;
• margin-top:4px;margin-right:4px;margin-bottom:4px;

margin-left:4px;

Border

The Border property (jsxborder) sets the CSS border definition. The border is one or four value sets (top, right, bottom, and left).

The General Interface syntax is specified in this form:

style width color[;style width color;...]

General Interface Syntax

The following are valid General Interface syntax for specifying a black 1 pixel border:

• solid 1px black
• solid 1px #000000;solid 1px #000000;solid 1px #000000;solid 1px #000000;

W3C CSS Syntax

The following are all valid CSS for specifying a black 1 pixel border:

• border:solid 1px black;
• border-top:solid 1px #000000;border-right:solid 1px #000000;border-bottom:solid 1px #000000;border-left:solid 1px #000000;

CSS values of either type can also be used in the Dynamic Properties editor and in JavaScript code using the JavaScript API. For example:

myBlock.setBorder("solid 1px red;solid 1px red;solid 1px red;solid 1px red;");