Altova MobileTogether Designer

Navigation: Controls and Control Events > Controls

Vertical Line

Home Prev Top Next

The Vertical Line control enables you to add vertical lines within tables. You can style vertical lines for properties such as color and width; the available properties are listed below. If you copy a vertical line to another location using Ctrl+drag-and-drop, note that you can copy only to a location inside a table.

 

Click to expand/collapseNotes

•To reset a style or property (in the Styles & Properties Pane), select the property and click Reset in the pane's toolbar.

•To edit the XPath expression of a style or property (in the Styles & Properties Pane), select the style or property, and click Edit XPath in the pane's toolbar.

•To copy a control to another location in the design, press Ctrl and drag-and-drop the control to the desired copy location.

 

Vertical Line events

There is no event associated with the Vertical Line control.

 

Vertical Line properties

The control's properties are available in the Styles & Properties Pane, and are listed below in the order in which they appear.

 

Click to expand/collapseName

The name is used to reference the control from elsewhere in the page or project. Double-click inside the value field to edit.

 

Click to expand/collapseAll Styles

The All Styles property becomes visible if the All Styles setting of the More Project Settings dialog has been set to true. (The default of this setting is false.)

 

The property enables you to set all of the component's styles via a single XPath map expression, such as the two map expressions below:

 

map{

  "Bold Text"        : $XML1/R/@bold = "1",

  "Italic Text"      : true(),

  "Text"             : "hello",

  "Text Color"       : "red",

  "Background Color" : $XML1/R/@background,

  "Text Size"        : $XML1/R/@textsize

  }

 

map{

  "Style Sheet"      : "Sheet-1"

  }

 

Note the following points:

 

•When you enter a value for the All Styles property—even if it is not a map—all the styling properties of the current component in the Styles & Properties Pane will no longer be visible .

•This is an advanced feature, so you must ensure that your XPath map expression is correct, both syntax and values.

•You can enter the key–value pairs of the map in any order.

•The key names are the names of style properties (or styles). In the first map above, for example, Bold Text and Text Size are style names. The styles that are available for a particular component are listed under that component in the Styles & Properties Pane.

•You can also specify a style sheet to use, as shown in the second map above.

 

Click to expand/collapseLine Width

Sets the width (thickness) in pixels of the line. Select a width value (in pixels, dp, or sp) from the dropdown list of the combo box, or double-click in the value field to enter a numeric value. You can also use an XPath expression. The numeric value is understood to be a pixel value. For this reason, no unit should be specified.

 

For information about the relationships between pixels, dp (device-independent pixels), and sp (scale-independent pixels), see Sizes: Pixels, DPI, DP, SP.

 

Click to expand/collapsePoints versus pixels on iOS devices

If you enter pixel values for properties that define lengths, then, when rendering for iOS devices, these values are read as points in the viewport coordinate space. The viewport coordinate space is the canvas on which the design components are drawn, and a point is the length unit in this space; a point here is not the typographical unit that is equal to 1/72 of an inch. The iOS device automatically maps the points of the viewport coordinate space to pixels in the device coordinate space. Mapping the values in this way (from viewport values to device values) ensures that design components maintain the same size relationship to both the canvas and to each other, no matter what the resolution of the iOS device is or what units are used.

 

In MobileTogether Designer, you can use the $MT_CanvasX and $MT_CanvasY dynamic variables to find out the current viewport (canvas) dimensions and so obtain lengths that are relative to these dimensions. (For iOS devices, the values returned by these variables are calculated as follows: The pixel dimensions of the current device coordinate space are converted (using an appropriate conversion factor) to point values in the viewport coordinate space. These point values—as numbers—are returned by the variables as pixels for use in the design.) For example, if you want an image to be half the width of the viewport, then give it a width in pixels that is equal to $MT_CanvasX * 0.5; the XPath expression for this image width would be concat($MT_CanvasX * 0.5, 'px').

 

Click to expand/collapseLine Style

Specifies the style of the line. You can select one of the options from the dropdown list of the combo box, or use an XPath expression. The default value is solid.

 

Click to expand/collapseLine Color

Specifies the color of the line. You can do one of the following to select the color:

 

•Click the color palette to select a line color

•Select a color from the dropdown list of the combo box

•Double-click in the value field to enter a color code (for example, #FF0000), or click the XPath toolbar button and enter an XPath expression to generate or fetch the required color code

 

Click to expand/collapseVisible

An XPath expression that should evaluate to true() or false(). If the expression evaluates to false()—and only if it evaluates to false()—then the control is not visible. If the expression evaluates to true() or returns some other value, then the control is visible. The default is true(). Double-click inside the value field, or click the XPath button, to enter or edit an XPath expression. The Visible property can be used to render an object visible or not depending upon whether an XPath expression evaluates to true(). As a result, the display of an object can be made to be dynamically dependent on the content or structure of data.

 

Note:  For information about the visibility of spanned columns/rows, see Table Properties.

 

Note:  The $MTControlValue variable is not available for the evaluation of the Visible property. If it is used, then a validation error results.

 

Click to expand/collapseHorizontal Alignment

This property applies in the case of some controls (such as images and vertical lines) to the control, in other cases (such as radio buttons and check boxes) to the text that accompanies the control. The property sets the horizontal alignment of the control or text to left, center, or right. Default is left for all controls except vertical lines, for which it is center. The property's value can also be specified via an XPath expression (which enables the value to be generated dynamically).

 

Click to expand/collapseMargin

Sets the margin offsets of the control (or page) relative to the surrounding objects or to the borders of the containing object. Select a value in pixels, dp, or sp from the dropdown list of the combo box, or double-click in the value field to enter a length value. The specified offset will be created on all four sides of the control or page. If you wish to set a different margin for any of the four sides, expand the Margin property to display the individual margin properties (left, right, top and bottom), and set the different value. For example: If you set Margin to be 6px and Margin Bottom to be 12px, then the top, left and right margins will be 6px and the bottom margin will be 12px.

 

For information about the relationships between pixels, dp (device-independent pixels), and sp (scale-independent pixels), see Sizes: Pixels, DPI, DP, SP.

 

Click to expand/collapsePoints versus pixels on iOS devices

If you enter pixel values for properties that define lengths, then, when rendering for iOS devices, these values are read as points in the viewport coordinate space. The viewport coordinate space is the canvas on which the design components are drawn, and a point is the length unit in this space; a point here is not the typographical unit that is equal to 1/72 of an inch. The iOS device automatically maps the points of the viewport coordinate space to pixels in the device coordinate space. Mapping the values in this way (from viewport values to device values) ensures that design components maintain the same size relationship to both the canvas and to each other, no matter what the resolution of the iOS device is or what units are used.

 

In MobileTogether Designer, you can use the $MT_CanvasX and $MT_CanvasY dynamic variables to find out the current viewport (canvas) dimensions and so obtain lengths that are relative to these dimensions. (For iOS devices, the values returned by these variables are calculated as follows: The pixel dimensions of the current device coordinate space are converted (using an appropriate conversion factor) to point values in the viewport coordinate space. These point values—as numbers—are returned by the variables as pixels for use in the design.) For example, if you want an image to be half the width of the viewport, then give it a width in pixels that is equal to $MT_CanvasX * 0.5; the XPath expression for this image width would be concat($MT_CanvasX * 0.5, 'px').

 

Click to expand/collapseStyle Sheet

The Style Sheet property sets the style sheet to use for the control. The dropdown list of the Style Sheet property's combo box displays all the user-created style sheets that have been defined in the project. Select the style sheet you want to use for the control. Alternatively, you can use an XPath expression to select the style sheet you want; this has the advantage that you can make the selection of the style sheet conditional (see Applying User-Created Style Sheets). See the section Style Sheets for more information.

 

Click to expand/collapseBrowser CSS Class

The name of one or more CSS classes that you want to associate with this control. Use a space to assign multiple classes: LabelClassOne LabelClassTwo. These classes can then be used in a CSS file (specified in the Browser Settings dialog) to assign properties specifically for this control. You can also use an XPath expression to generate or fetch the names of the class(es).

 

 

© 2017-2023 Altova GmbH