Exontrol's Custom Row Designer

® Copyright 1999-2007 by Exontrol Software, Inc. All Rights Reserved.

The Exontrol's Custom Row Designer ( exCRD ) is a WYSWYG tool to build new layouts for cells/nodes, items/rows or columns/fields. The exCRD tool generates CRD strings from the layout you built. The syntax of CRD strings is designed to be easy to build, change and read. Using CRD strings is powerful than preformatted card view, group view formats, nested bands, and so on, since you are free to define the full layout of the cell/node, item/row or a column/field. 

Start Here, CRD Syntax

For instance, here are few simple CRD strings:

 

generates the following layout.

The CRD syntax in BNF notation is defined like follows:

<CRD> ::= [<Options>] <GroupCRD>
<GroupCRD> ::= <UpPart> [ "|" <DownPart> ] 
<UpPart> ::= <Lines>
<DownPart> ::= <Lines>
<Lines> ::= <Line> | "(" <Lines> ")" | <Lines> "/" <Lines>
<Line> ::= [<Height>;] <LeftPart> [ "|" <RightPart> ] 
<LeftPart> ::= <Fields>
<RightPart> ::= <Fields>
<Fields> ::= <Field> | "(" <Fields> ")" | <Fields> "," <Fields>
<Field> ::= <Identifier> [<Options>] [ ":" <Width>]
<Identifier> ::= <Index> | <Caption>
<Options> ::= <Options> [ "[" <Option> "]" ]
<Option> ::= <Property> [ "=" <Value> ]
<Property> ::= <letter> | <Property> [ <letter> | <digit> ]
<Value> ::= <Number> | <String>
<Index> ::= <Number>
<Caption> ::= <String>
<Width> ::= <Number>
<Height> ::= <Number>
<Number> ::= <digit><Number>
<String> ::= """<any_character>"""
<digit> ::= 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9

The CRD strings may include the following elements:

The Index and Caption element may have one or more of the following options:

For instance, the [b=5] means that the element draws the top and the bottom borders. For instance, if the [b=0] is at the beginning of the CRD string, it specifies that by default, no borders are shown.

The Caption element may have one or more of the following options:

  • 0, TopLeft, Aligns the caption to the top left corner. 
  • 1, TopCenter, Centers the caption on the top edge.
  • 2, TopRight, Aligns the caption to the upper right corner.
  • 16, MiddleLeft, Aligns horizontally the caption on the left side, and centers the caption vertically
  • 17, MiddleCenter, Puts the caption on the center of the element. (Default)
  • 18, MiddleRight, Aligns horizontally the caption on the right side, and centers the caption vertically
  • 32, BottomLeft, Aligns the caption to the lower left corner
  • 33, BottomCenter, Centers the caption on the lower edge
  • 34, BottomLeft, The caption is resized to fit the source

The options for the CRD string may be ( these options must be always at the beginning of the CRD string ):

Introducing the exCRD tool

The exCRD WYSWYG tool helps you to build CRD strings. The left side (1) of the exCRD tool displays the layout. The right side includes an edit control (2) where the CRD string can be changed or updated, the CRD history (3), and a toolbox (4) to update the borders and the alignment of the text for the selected element in the layout. Changing the CRD string in the edit control updates automatically the layout in the left side. Also, changing the layout in the left side, updates the CRD string the right side edit control. The left side's context menu (5) includes options to format the selected element in the layout, such of splitting the element,  aligning the element to the right side, or bottom side, changing the element's background or foreground color, and so on. The tool's status bar displays information about the selected item in the context menu.

  1. The Layout area divides the client area how the CRD format string specifies. Using the mouse or the keyboard you can select a new element. A ticker frame is drawn around the selected element. Once that the user selects an element in the layout area, the portion of CRD text that defines the element is selected in the CRD (2) area. For instance, if you select a caption element, the name of the element including the " characters are selected in the CRD (2) area, so you can use the keyboard to change the name or the index of the element. The toolbox (4) displays the options that can be changed for the selected element. For instance, if you selected a caption element, you can specify the alignment of the caption in the field, the borders around the element, where the text should be wrapped and so on. Use the white tickers to resize the element. While resizing the element in the layout area, the CRD (2) area highlights the portion of the CRD text that defines the width or the height being changed. Use the keyboard to type the width or the height of the element. If the width or the height of the element is missing or it is zero, the control resizes it so the child elements fit the parent's client area. Clicking multiple times in the same element, you get highlighted the parent of the selected element and so on. Use the right click to display the layout's context menu (5). Use the ALT + arrow keys to navigate throw the index elements. Use the CTRL+Z to undo the last operation.

  2. The CRD area displays and edits CRD strings. The CRD area is a simple edit control, and can be used to change the CRD string. The Layout (1) area is updated automatically when the user alters the CRD string. Use this area to locate a specific element, and change it's name or its options. To clear the entire layout, select the entire text in the CRD area and press the DELETE key. 

  3. The History list holds the CRD strings being formatted using the exCRD tool. The CRD strings are saved to the "ExCRD.history" file. The "ExCRD.history" file persists in the same folder where the exCRD tool is. Click the CRD history if you need to save the current layout. If the layout was not saved previously the layout is saved, else the selected layout is loaded and displayed. Use the DELETE key to delete a layout in the history.

  4. The Toolbox displays options like border, alignment of the caption for the selected element in the layout (1). Changing an option in the Toolbox automatically updates the Layout (1) and the CRD(2) area.

  5. Click an element in the Layout (1) area, and then do a right click to invoke the layout's context menu. The current selection in the CRD area is replaced with the format you chose when selecting an item from the layout's context menu. The layout's context menu includes the following:

Start building CRD strings using the exCRD tool

Let's say that we want to have a view to display fields like in the following screen shot. The first step we need to follow is identifying the fields/indexes we need to display in the layout. In our sample we have the following fields:

Once that we identified the fields, we can start building the layout we want to have.

Here's the steps you need to follow in order to build the above layout: 

Display Icons, Images, Pictures and EBN objects

Starting from the version 2.0,  the CRD tool includes an Visual-Appearance area to load icons, images, pictures and EBN objects, so the objects in the CRD format may display <img> or <bg> tags. For instance, the <img>1</img> displays the first icon that was previously loaded using the Images or ReplaceIcon method. The <img>pic1</img> displays a custom size picture that was previously loaded using the HTMLPicture property. The [bg=16777216] indicates that the background of the object displays the EBN object with the identifier 1. The 16777216 represents the 0x1RRGGBB, or 0x1000000, where 1 indicates the identifier of the skin object being loaded using the VisualAppearance.Add method. 

The following screen shot shows in red the area where visual appearance of the CRD strings may be changed:

 

The following properties are known:

Shortly, the Visual-Appearance area displays and handles x-script code for the Exontrol.CRD object.