![]() |
|||
|
|||
Display ComponentsAdding a Display ComponentTo add a display component, click the add display object icon Positioning and Sizing Display ComponentsDocument display components are HTML objects that can be added to the document layout to provide the view of the data returned from an SQL query. The designer provides several tools to add, edit and configure the properties of design components. Before going into component details it is worth the time to cover the sizing, positioning and moving of the design components within the designer page layout. Design components are moved by dragging them with a mouse or selecting them and using the keyboard arrow keys. To select one or more design components lasso them by dragging the mouse around them or hold down the control key and click them with the mouse - when selected, a design object will display a red border. Multiple selected objects can be dragged with the mouse - while dragging, only one object will move with the mouse. When the mouse is released, the other objects will move to the new position
Individual components are sized by hovering the mouse over the bottom or right border and dragging to the desired size. Multiple objects are sized by selecting them as described in the previous section and using the keyboard arrow keys while holding down the shift key. The designer toolbar has several icons that are used to size and position selected groups of display components. The toolbar includes the standard text-align icons as well as component align, size and spacing icons. The component align, size and space tools are designed to be used with multiple selected components. The first component selected is considered the anchor and all other components are aligned/sized to that first component. . To size objects with the keyboard hold down the shift key and press the down or right arrow.
Sizing Individual Components with Mouse
Align Components LeftAlign Components RightAlign Components TopAlign Components BottomSize Components WidthSize Components HeightSpace Components HorizontallySpace Components VerticallySetting Component LayerDisplay components on the document can be associated with a layer. Conceptually, components reside in layers and the components in a higher the layer appear on top of components in a lower layer. By default, no layer is assigned to design components so the all appear in the the same layer. In the example below, The blue element covers up - or is on top of - the green element. To bring the green element to the top, click on the green element to display the design object properties and enter a number greater than 1 into the layer field. The green element will now appear "on top" of the blue element. The layer number can be any number - just remember, higher numbers cause the object to appear on top of objects with lower numbers Undo Component MoveThe designer provides a single undo for group or single component moves, resizes and spacing. Single or multiple component property settings can also be undone a single time. The image below shows an example of undoing an align to top operation.Component BordersComponent border types and colors in the page layout are designed to help identify the type of component.
Component Display PropertiesThe designer has several different kinds of components available for use on a document. Display properties on display components can be modified and there are several common properties such as font type, font style, font size, foreground color, background color and border attributes. The Design Object Properties pane is similar for most of the so a discussion of the common object properties would be beneficial. Component-specific properties will be discussed in the next section. Click a component on the designer page layout with the mouse and the Design Object Properties pane will display - select the desired display properties When choosing display properties the example pane in the bottom right quadrant will reflects the current settings.
The color select icon ![]() Available Display ComponentsIn the designer, there are several available components one can add to a document design. To add a new
display component, click on the add component icon DataThe data component provides the display wrapper for the data retrieved from the database. The data component display property settings are the same as described in the Component Display Properties section above with one exception - A data component can be flagged as as an image url and the RBT application will display the image associated with the url. Check the Image URL checkbox to treat the data retrieved data as an image url and display the image. Select the Stretch Image checkbox if you want the image to size to the component rectangle. ![]() LabelThe label component allows the designer to add display text to the document. When chosen, a label object will show the Display Object Properties pane to set the desired label display properties. Common display properties were discussed in the previous section with exception of the Allow Word Wrap checkbox. By default, label text is placed on a single line and is truncated if it extends past the border. If Allow Word Wrap is checked then label text will spill over to the next line if the component border is large enough to hold multiple lines. ImageThe designer accepts images as display components on a document. When you choose an image the Select Image pane will show to allow the designer to choose an image. The image source location is defined in the RBT application configuration file and an explanation of the image repository can be found there. Images in the Select Image pane are scaled to 30px by 25px so large images may be difficult to see. There are a limited set of properties that can be set on image - border, background and foreground attributes
Calculated FieldA calculated field cab be added to a document design. Calculated fields only apply to numeric database fields and will only be added to the summary section. If the current column selections have no numeric fields then the add calculated field selection will be disabled. A calculated field applies one of the following basic math functions to a chosen table column.
Choosing a calculated field component displays the Add Calculated Field pane. Add a descriptive field name, select the column and the function you want to apply. The calculated field will display in the document summary section with a dashed green border.
Page NumberA page number field can be added to a document design. Choose one of the three provided formats. A page number will display in the document with a dashed green border.
Current DateA current date field can be added to a document design. The current date field displays in the document with a dashed green border. Click on the component to show the Display Object Properties pane and set date format and display properties.
LinesHorizontal and vertical line components can be added to the document design. When a line component is chosen, the Display Object properties pane will show to set the line display properties. The color, width and style properties of a line can be set.
|
|||
|