ValueView introduces the
jQuery.valueview widget which may be used to display and edit
data values (
DataValue objects defined in the
DataValues library and supported via the
jQuery.valueview widget and its resources may be extended to support custom
Recent changes can be found in the release notes.
jQuery.valueview may be used to display and edit data values. While the widget's original
constructor is located at
jQuery.valueview.valueview, the widget should be instantiated via its
jQuery.valueview.Experts are widgets that deal with editing
Expert provides the
functionality to edit a specific
StringValue) or a
DataValue suitable for a
DataType (e.g. the
DataType which uses the
StringValue for representation; see
also DataTypes library).
jQuery.valueview.Expert is the base
constructor for such
jQuery.valueview.ExpertExtender may be used to provide additional information and/or input
elements while interacting with the
ExpertExtender may, for example, be used to
provide a preview of how the parsed value will be displayed after saving (see
jQuery.ExpertExtender.Preview). Options provided by the
ValueParser corresponding to the
DataValue being edited may be set using
jQuery.valueview.ExpertExtender.* input elements added
Experts are managed by
jQuery.valueview.ExpertStore instance which provides its
ViewState acts as a Facade linking
Experts to observe certain aspects of
jQuery.valueview and enables
to update the linked
For the usage examples, it is assumed the following packages are installed:
jQuery.valueview for handling a
knowledge about an
Expert dedicated to the
DataValue's type is required and can be set up as
var dv = dataValuesvv = jQueryvalueviewdt = dataTypesexperts = ;var stringValue = 'foo' ;// Consider this a DataType using the StringValue DataValue internally:var urlDataType = 'url' dvStringValueTYPE ;experts;console;// true because "url" DataType's DataValue type is "string"; The "string" DataValue's Expert will be// used as fall-back.
jQuery.valueview.ExpertStore can be injected into a new
enabling it to edit "string"
var $subject = ;// In addition to the Expert store, a ValueParser store and two ValueFormatters need to be provided. The parser store// features the same mechanisms as the Expert store. For this example, we just initialize the parser store with// the "string" parser as default. The formatters will format a string as it is.var parsers = valueParsersStringParser ;$subject;var valueView = $subjectdata 'valueview' ;
Having created a
jQuery.valueview displaying text, the widget's member functions may be used for
interaction, for example:
- Emptying the view:
valueView.value( null );
- Allowing the user to edit the value:
- Stopping the user from editing the value:
- Returning the current value:
jQuery.valueview instance's value to a
DataValue it cannot handle because no suitable
Expert can be determined from the
ExpertStore will result in an error notification being
.value() will still return the value but the user can neither see nor edit the
jQuery.valueview heavily depends on
ValueParsers defined via the
used to convert
DataValue instances to DOM elements, and
ValueParsers are used to convert plain
strings (which may be accompanied by some options) to
Experts only are used for editing values, they are constructed when starting edit mode and
destroyed after leaving edit mode.
Experts have the following lifecycle:
_init(): Load parsed, formatted and raw (text) values from the
jQuery.valueviewinstance linked via
ViewStateand initialize DOM.
- Edit loop
- (User edits)
viewNotifier.notify( 'change' )and triggers parsing and formatting.
rawValue(): Return the current raw (text) value.
preview.showSpinner(): Replace preview with a loading spinner.
draw(): (Re-)draw non-editable parts of the
Expertusing the (new) parsed and formatted value from the
destroy(): Destroy DOM.
Other methods an
Expert needs to provide: