| Client-Side Framework and Components / Snippets-components relationship | |
The Client-Side Framework does not enforce any naming convention to work properly, however Genero chose a set of attribute names that match the SBRE paths used in snippets.
Table 1 lists the most notable attributes and data-g-* attributes used in snippets.
| Attribute | Used by | Value | Description | Example |
|---|---|---|---|---|
| tabindex | csf (typehead) | <tabIndex> or <not present> | {isModifiable && tabIndex ? tabIndex : null} | |
| data-g-id | csf | Type, *, ... (unescaping the character is not yet provided) | type is the name of the component (gwc.componentSet.*) that is attached to the underlying DOM elements. Other arguments are free to use for the component but these values should be constant during the live-cycle of the component. | {type},{xdid} |
| data-g-focus | csf, components, css, StyleList | <true> or <not present> | the widget or action that has the keyboard focus in a server point of view (not equal to :focus pseudo class). only one at a time. | {hasFocus || null} |
| data-g-modif | components, css, StyleList | <true> or <not present> | the widget or container is modifiable | {isModifiable || null} |
| data-g-picture | components | picture mask or <not present> | the value of the 4gl picture for the widget | {picture || null} |
| data-g-query | components, StyleList | <true> or <not present> | the widget is in construct mode | {isQuery || null} |
| data-g-selectable | components, css, StyleList | <true> or <not present> | the widget or the container content is selectable (such as a widget in a matrix, a row of a table) | {isSelectable || null} |
| data-g-selected | css | <true> or <not present> | the widget is selected | {(isSelectable && check(isSelected)) || null} |
| data-g-active-container | components, StyleList | <true> or <not present> | the container is active | {hasFocus || null} |
| data-g-no-loc-accel | components | <true> or <not present> | inhibit local accelerators | {edit/style["localAccelerators"] != "yes" || null} |
| data-g-dnd-target | csf (DnD) | string | Is the name of the DnD (drag-n-drop) target. Implies that it is a droppable area. | {isModifiable && subtabindex ? subtabindex : null} |
| data-g-subtabindex | csf (typehead) | <subtabIndex> or <not present> | {isModifiable && subtabindex ? subtabindex : null} | |
| data-g-notabnext | csf (typehead) | <true> or <not present> | inhibit the typeahead and wait that the DVM set the next field | {verify || null} |
| data-g-state | csf, components | comma-separated list of boolish strings | factorize several data-g-* .This helps to reduce the amount of data from the server. | hasOnChange ? "1" : ""},{queryeditable ? "1" : ""} |
| data-g-scrollable | components | <true> or <not present> | the container is scrollable | {isScrollable || null} |