Titled Panel Control

 

Documentation home

 

Description. 1

Properties 1

Style Tab – Styling Assistant 1

Html Element Properties Tab. 6

Layout Tab. 7

Title Bar 7

Advanced Properties 8

Hints and Tips 8

Control overflows to the right 8

Right Click Menu Actions 8

Appearance in Outline View. 8

 

See also: Controls, Layouts

Description

A Titled Panel Control is a container control with a title bar and border, where the title bar can contain a text and/or an image. The control has options to display rounded, square or slashed corners.

titlepanel1

Properties

See also control common properties and local/inherited control properties.

 

Style Tab – Styling Assistant

 

 

 

Property

Description

Name1

Type1

Get1

Set1

Get/Set Values1

Width

Sets the width to one of the following:

·         A specific value e.g. 300px

·         The minimum value: this results in the Titled Panel Control being just as wide as it needs to be to accommodate its content

 

Note that this setting will be ignored if the parent container layout specifies a horizontal cell alignment of fill (this applies to Horizontal Box, Vertical Box and Column layouts). This is equivalent to specifying 100% above.

 

Warning: when a specific value is set, any margins will be in addition to the specified value and can cause the Titled Panel Control to “break out” of its parent space. Click here for further info.

 

See also: hints and tips, understanding width.

width

Character

Yes

Yes

As per CSS width property

Child: equivalent to minimum

 

Border Color

This color is applied to the border surrounding the control, including the corners.

titlePanelBorderColor

Character

Character

Yes

Yes

As CSS color property

Margin

Margin is the space between a control and its neighbours. See margin properties.

 

 

 

 

 

Title Bar:

Following properties apply to the title bar

 

 

 

 

 

  Text

Title text properties: font, size, color, bold, italic etc. See text properties.

titleBarStyle

.xxx

 

 

 

 

  Background Color

Title bar background color.

titlebarColor

Character

Yes

Yes

As CSS background-color property

  Padding

Padding is the space between the title text/image and the border. See padding and margin properties.

titleBarStyle

.xxx

 

 

 

 

  Horizontal Alignment

Sets horizontal alignment. Both the title text and image are aligned together as a block.

titleBarStyle

.hAlign

Character

Yes

Yes

Click here for values. Value Fill is not supported.

  Corners

The style of corner applied to the top left and top right corners. Options are:

·         Rounded – corners are drawn with a rounded image

·         Square – corners are square

  • Slash – corners are a straight diagonal line

titlebarCornerType

Character

Yes

Yes

Rounded, Square, Slash

  Text & Image Gap

Gap between the title text and optional image

textImageGap

Character

Yes

Yes

As CSS font-size property

  Image

Configuration properties for the optional image: width, height, borders. See image properties.

imageProperties

 

 

 

 

  Image Position

Position of the optional image relative to the text. Options are Left and Right and None.

imagePosition

Character

Yes

Yes

Left, Right, None

Contents:

Following properties apply to the content area where child controls are shown as configured by the layout type property.

 

 

 

 

 

  Height

Sets the height of the content area.

contentHeight

Character

Yes

Yes

As per CSS height property

  Text

Sets the text properties for any child controls: font, size, color, bold, italic etc. See text properties.

contentText

 

 

 

 

  Background Color

Content area background color.

panelColor

Character

Yes

Yes

As CSS background-color property

  Padding

Padding is the space between the content and its border. See padding and margin properties.

contentPadding

 

 

 

 

  Corners

The style of corner applied to the bottom left and bottom right corners. Options are:

·         Rounded – corners are drawn with a rounded image

·         Square – corners are square

  • Slash – corners are a straight diagonal line

panelCornerType

Character

Yes

Yes

Rounded, Square, Slash

Advanced Properties:

 

 

 

 

 

 

  Style

CSS class and inline style applied to the outer table container. See Advanced Properties below.

cssClass

style

Character

Yes

Yes

As per HTML class parameter

As per HTML style parameter

  Text Style

CSS class and inline style applied to the text on the title bar. See Advanced Properties below.

textClass

textStyle

Character

Yes

Yes

As per HTML class parameter

As per HTML style parameter

  Image Style

CSS class and inline style applied to the image on the title bar. See Advanced Properties below.

imageClass

imageStyle

Character

Yes

Yes

As per HTML class parameter

As per HTML style parameter

  Content Style

CSS class and inline style applied to the content area. See Advanced Properties below.

panelClass panelStyle

Character

Yes

Yes

As per HTML class parameter

As per HTML style parameter

  Title Bar Style

CSS class and inline style applied to the entire title bar. See Advanced Properties below.

titlebarClass

titlebarStyle

Character

Yes

Yes

As per HTML class parameter

As per HTML style parameter

 

Html Element Properties Tab

This allows you to add element properties to the root element of the Control – see Html Element Properties for more information.

 

Layout Tab

Property

Description

Name1

Type1

Get1

Set1

Get/Set Values1

Layout type

Defines the layout used to lay out all child controls in the content area.

layout

Character

Yes

No

 

Layout properties

Shown when a layout type is specified. Click to display the styling assistant for the selected layout.

 

 

 

 

 

 

Title Bar

Property

Description

Name1

Type1

Get1

Set1

Get/Set Values1

Text

The title bar text.

text

Character

Yes

Yes

 

Image URL

URL of the optional image to be displayed on the title bar. See URL properties for more information.

imageURL

Character

Yes

Yes

 

Image alternate text

Alternate text applied to the image.

imageAltText

Character

Yes

Yes

 

Image mouse over text

Mouse over text applied to the image.

imageMouseOverText

Character

Yes

Yes

 

 

1 See accessing control properties from scripts

 

Examples of setting properties using Javascript:

 

controls.TITLEPANEL1.width = "1000px";

controls.TITLEPANEL1.text.text = "new title text";

controls.TITLEPANEL1.titlePanelBorderColor = "#FFFFCC";

controls.TITLEPANEL1.titleBarStyle.textBold = "Bold";

controls.TITLEPANEL1.titleBarStyle.hAlign = "Right";

controls.TITLEPANEL1.panelColor = "yellow";

controls.TITLEPANEL1.contentPadding.allPadding = "10px";

controls.TITLEPANEL1.contentText.textColor = "black";

controls.TITLEPANEL1.imageURL = "images/image10.gif";

controls.TITLEPANEL1.imageProperties.imageHeight = "50px";

controls.TITLEPANEL1.imageProperties.borderWidth = "5px";                 // image border width

controls.TITLEPANEL1.cssClass = "tableClassxx";

 

Examples of setting properties using FPL:

 

set TITLEPANEL1.width = '1000px';

set TITLEPANEL1.text = 'new title text';

set TITLEPANEL1.titlePanelBorderColor = '#FFFFCC';

set TITLEPANEL1.titleBarStyle.textBold = 'Bold';

set TITLEPANEL1.titleBarStyle.hAlign = 'Right';

set TITLEPANEL1.panelColor = 'yellow';

set TITLEPANEL1.contentPadding.allPadding = '10px';

set TITLEPANEL1.contentText.textColor = 'black';

set TITLEPANEL1.imageURL = 'images/image10.gif';

set TITLEPANEL1.imageProperties.imageHeight = '50px';

set TITLEPANEL1.imageProperties.borderWidth = '5px';                 // image border width

set TITLEPANEL1.cssClass = 'tableClassxx';

 

Advanced Properties

The Advanced Properties listed above can be used as illustrated below:

 

titlepanel3

Hints and Tips

Control overflows to the right

The Titled Panel Control seems to break out of the parent control space. This problem typically occurs when a left margin has been configured for the Titled Panel Control. Click here for solutions to this problem.

 

Right Click Menu Actions

Click here for right-click menu actions available to all controls.

There are no specific right click actions for this control.

Appearance in Outline View

A Titled Panel Control is shown with the control name in brackets:

 

tit3