Records are composite data values consisting of field slots, which are name-value pairs, such that we can access the value of a record field via its name. Record fields typically have primitive data values.
Examples of records are address records like {street: "37
Market St", city: "New York", zipCode: 10473} or phone book
entries like {type:"home", areaCode:"757"
number:"3765295"}.
Colors can be defined with three components on the basis of a color model such as the Red-Green-Blue (RGB) color model or the Hue-Saturation-Lightness (HSL) color model. In both models a fourth component, in the form of a decimal number from the unit interval [0,1] or a corresponding percentage, for defining the opacity (technically called alpha channel) of a color can be added.
In the RGB model, each component value is an integer between 0
and 255. In CSS, an RGB color is specified by a ternary term like
rgb( 255, 255, 255) corresponding, e.g., to a JS triple
record like {R:255, G:255, B:255}.
In the HSL model, the H component is an integer between 0 and
360 denoting an angle degree in the rainbow color circle with red = 0
= 360, green = 120, and blue = 240. Saturation and lightness are
represented as percentages, such that S=100% is full saturation, and
0% is a shade of grey, L=100% is white, 0% lightness is black, and 50%
lightness is "normal". In CSS, an HSL color is specified by a ternary
term like hsl( 0, 0%, 100%) corresponding, e.g., to a JS
triple record like {H:0, S:0, L:100}.
In an HTML form-based user interface, color definitions are supported by HTML5
input elements of type "color", which are supposed to be rendered in the form of
a color picker widget.
Geographic coordinates (or geodetic positions) can be defined in
the form of records like {latitude: 40.6643, longitude:
-73.9385}.
A record-valued property (like geoCoordinates)
should be rendered as a list of fields in a coherent region in the UI,
preferably with a fieldset element with the property's
label as the content of the legend element. In simple
cases, like in the following example, with only a few record fields,
using suitable CSS rules, it may be possible to render all fields
horizontally on the same line.
<form id="form1"> <fieldset data-bind="geoCoordinates"> <legend>Geo-coordinates</legend> <label>Latitude: <input type="number" name="latitude"/></label> <label>Longitude: <input type="number" name="longitude"/></label> </fieldset> </form>
Notice how the the property geoCoordinates is bound to the
fieldset element with the help of the custom attribute
data-bind.
Data collections are ordered or unordered sets or bags (multi-sets), with all members being either primitive data values, records of a certain type or data collections of a certain type. Instead of "unordered set", we simply say "set", and instead of "ordered bag" we say "list".
Examples:
The nick names of a person may be recorded in a set-valued
attribute nickNames.
The favorite composers of a person may be recorded in an ordered-set-valued
attribute favoriteComposers such that the order represents a ranking.
A train trip route may be recorded as a list of train stop locations.
In a user interface, a collection-valued attribute may be rendered as a text field with a comma-separated list of strings if the value collections are sufficiently small. Otherwise, a special UI widget is needed for displaying collection values and allowing value assignments and changes.