vegUI
version 2.1.1
Introduction
AJAX Bridge
Button
Content Box
Checkbox
Effects
List
Menu
Property-set
Scroll Bar
Selector
Standard Library
Tabbed Dialog
Taskbar
Window
Browser Sniffer
Addons
vegui. std. prototypefix.js
Index

vegui. propertyset. class.js

Summary
vegui. propertyset. class.js
Constants
VUI_PROP_SET
VegUI element type for VegUIPropertySet
Field Input Types
VegUIPropertySet
A property set element, that has name value pairs and lets the user set the value via different methods
Hierarchy
extends VegUIContentBox
Type
VUI_PROP_SET
Child Elements
All these children are accessable over this.[child_name] even if they may not be direct children of the element
Field Object Explained
The field object is used to populate the property set with name value pairs.
Valid field properties
Code example of a valid fields object
Tutorials
http://www.vegui.org- /site- /blog- /22- /vegui-tutorial-13---the-property-set-widget.html
Properties
Object Properties
Template Properties
Functions
VegUIPropertySet
constructor
adjust
Adjusts the scrollbars to the property set list, this is called automatically by the dataset_add, dataset_build and flush methods
build_propset
Builds the property set
dataset_add
Adds a single field to the property set list
dataset_build
Builds the property set from a fields object.
dataset_cancel_input
Cancels the input for a certain field, toggling input mode off and reverting it to its old value
dataset_tgl_input
Toggles input mode for a field in the property set list on or off
dataset_update
Updates the value of a single valid field object
flush
Clears the property set, effectivly removing all name values pairs
set_propset
Sets the most common template properties for the property set
to_xml
Returns the property set as a valid xml string

Constants

VUI_PROP_SET

VegUI element type for VegUIPropertySet

Field Input Types

VUI_PSET_INPUTgeneric input text field
VUI_PSET_LISTVegUIList as input
VUI_PSET_CHECKVegUICheckBox as input
VUI_PSET_CUSTOMcustom function as input

VegUIPropertySet

A property set element, that has name value pairs and lets the user set the value via different methods

Summary
Hierarchy
extends VegUIContentBox
Type
VUI_PROP_SET
Child Elements
All these children are accessable over this.[child_name] even if they may not be direct children of the element
Field Object Explained
The field object is used to populate the property set with name value pairs.
Valid field properties
Code example of a valid fields object
Tutorials
http://www.vegui.org- /site- /blog- /22- /vegui-tutorial-13---the-property-set-widget.html
Properties
Object Properties
Template Properties
Functions
VegUIPropertySet
constructor
adjust
Adjusts the scrollbars to the property set list, this is called automatically by the dataset_add, dataset_build and flush methods
build_propset
Builds the property set
dataset_add
Adds a single field to the property set list
dataset_build
Builds the property set from a fields object.
dataset_cancel_input
Cancels the input for a certain field, toggling input mode off and reverting it to its old value
dataset_tgl_input
Toggles input mode for a field in the property set list on or off
dataset_update
Updates the value of a single valid field object
flush
Clears the property set, effectivly removing all name values pairs
set_propset
Sets the most common template properties for the property set
to_xml
Returns the property set as a valid xml string

Hierarchy

extends VegUIContentBox

Inherits all properties and methods from VegUIContentBox

VegUINode
   |
   +--> VegUIContentBox
           |
           +--> VegUIPropertySet

Type

VUI_PROP_SET

Child Elements

All these children are accessable over this.[child_name] even if they may not be direct children of the element

<inherited>Child elements from VegUIContentBox
TableVegUINode, table
TBody<VegUINOde>, tbody
FldInputVegUINode, the input field used to gather value by text input
CbInputVegUICheckBox, the checkbox used to gather values

Field Object Explained

The field object is used to populate the property set with name value pairs.  It should have one property for each field, the property name should be the fields name and be a javascript object.

Each field can have several sub properties that define its behaviour in regards to the property set

Sometimes the documentation will talk about Single Valid Field Objects , which means a single field object.  Like the field_1 object in the code example below.

Valid field properties

namestring, the name of the field
valuevariable, predefined value of the field
typeint, input type of the field.  Field Input Types
fill_listfunction, if input type is VUI_PSET_LIST, this function will be called to populate the liss that pops up
fetchfunction, if input type VUI_PSET_CUSTOM, this function will be called to return the value
captionstring, if set this will be displayed in the name column instead of the actual field name
oncancelfunction, executed when input is canceled on field
isPasswordbool, if true a password input field will be shown instead of a regular input field
is_largeint, if >0, the input field will be a text area with n height
disabledbool, if true, input can not be toggled for this field
xml_typeint, if 1, to_xml will output this field as it’s own tag instead of as an attribute of the main tag

Code example of a valid fields object

fields = {
  field_1 : {
    name : 'field_1',
    value : 'some string',
    type : VUI_PSET_INPUT,
    caption : 'A field'
  }
}

Tutorials

http://www.vegui.org- /site- /blog- /22- /vegui-tutorial-13---the-property-set-widget.html

Properties

Object Properties

fieldsObject, field information object
listXint, x offset for list popup
listYint, y offset for list popup
ListTemplateVegUIList, all lists will be cloned from this template
cssNamestring, css class to use for the name column
cssValuestring, css class to use for the value column
nameWidthint, width of the name column (percentage)

Template Properties

T.listXlistX
T.listYlistY
T.ListTemplateListTemplate
T.cssNamecssName
T.cssValuecssValue
T.cssTableCss class to use for the Table child
T.nameWidthnameWidth
T.fieldsfields

Functions

VegUIPropertySet

function VegUIPropertySet(refName,
Parent,
Manager)

constructor

See Parent

VegUINode::VegUINode

adjust

this.adjust = function()

Adjusts the scrollbars to the property set list, this is called automatically by the dataset_add, dataset_build and flush methods

build_propset

this.build = this.build_propset = function(toNode)

Builds the property set

private function

You should always use VegUIManager::build_element to build a vegUI element

Alias

build()

Parameters

<HTMLNode toNode>if submitted the created html node will be appended to toNode

Returns

int1 on success
nullon failure

See Parent

VegUINode::build_node

dataset_add

this.dataset_add = function(fld)

Adds a single field to the property set list

private function

Parameters

Object fldsingle valid field object.  Field Object Explained

See also

dataset_build, dataset_update

dataset_build

this.dataset_build = function(fields)

Builds the property set from a fields object.  Field Object Explained

Parameters

Object fieldsvalid fields object containing 1 or more fields

See also

dataset_add, flush

Example

// create fields object

fields = {
  field_1 : {
    name : 'field_1',
    type : VUI_PSET_INPUT,
    value : 'some default value',
    caption : 'Field 1'
  },
  field_2 : {
    name : 'field_2',
    type : VUI_PSET_CHECK,
    value : false,
    caption : 'Is this true?'
  }
};

// rebuild the dataset with the new fields

Dataset.dataset_rebuild(fields);

dataset_cancel_input

this.dataset_cancel_input = function(newValue)

Cancels the input for a certain field, toggling input mode off and reverting it to its old value

Parameters

<variable newValue>if submitted this will be the new value of the field instead of its original value

See also

<tgl_input>

dataset_tgl_input

this.dataset_tgl_input = function(fld,
b)

Toggles input mode for a field in the property set list on or off

Parameters

Object fldsingle valid field object that needs to exist in the fields property.
bool bturn input on or off for the submitted field

See also

dataset_cancel_input

Example

// assuming there is a field stored with the property index 'field_2'
Dataset.dataset_tgl_input(Dataset.fields.field_2, true);

dataset_update

this.dataset_update = function(fld,
newValue)

Updates the value of a single valid field object

Parameters

Object fldsingle valid field object.  <Field Types Explained>
variable newValuenew value

See also

dataset_cancel_input

Example

// assuming there is a field stored in the fields object under the
// property name of field_2
// field_2 is of type VUI_PSET_INPUT

Dataset.dataset_update(Dataset.fields.field_2, 'some text');

flush

this.flush = function()

Clears the property set, effectivly removing all name values pairs

Also clears the fields property

set_propset

this.set = this.set_propset = function(w,
h,
x,
y,
nameWidth,
fields,
listX,
listY,
cssTable,
cssName,
cssValue,
itemHeight)

Sets the most common template properties for the property set

Alias

set()

Parameters

int wwidth (pixels)
int hheight (pixels)
int xx position (pixels)
int yy position (pixels)
int nameWidthwidth of the name column (percentage)
Object fieldsfields object.  Field Object Explained
int listXx offset for input lists (pixels)
int listYy offset for input lists (pixels)
string cssTableCSS class to use for the Table element
string cssNameCSS class to use for the name column
string cssValueCSS class to use for the value column

See Parent

VegUINode::set_node

to_xml

this.to_xml = function(tag)

Returns the property set as a valid xml string

Parameters

string tagname of the starting xml tag

Returns

stringxml string containing the data of the property set

Example

// assuming this is the property set:
// Dataset.fields = {
//   field_1 : {
//     name : 'field_1',
//     type : VUI_PSET_INPUT,
//     value : 'some default value',
//     caption : 'Field 1'
//   },
//   field_2 : {
//     name : 'field_2',
//     type : VUI_PSET_CHECK,
//     value : false,
//     caption : 'Is this true?',
//     xml_type : 1
//   }
// };
//
// Note how the xml_type property for field_2
// is set to 1, this will cause field_2 to be
// outputted as its own tag instead as
// an attribute of the main tag
//
// In the example below
// xml will be set to this string:
//
// '<mydata field_1="some default value">
//    <field_2>false</field_2>
//  </mydata>'
var xml = Dataset.to_xml('mydata');
Generated by Natural Docs
A property set element, that has name value pairs and lets the user set the value via different methods
VegUI element type for VegUIPropertySet
function VegUIPropertySet(refName,
Parent,
Manager)
constructor
this.adjust = function()
Adjusts the scrollbars to the property set list, this is called automatically by the dataset_add, dataset_build and flush methods
this.dataset_add = function(fld)
Adds a single field to the property set list
this.dataset_build = function(fields)
Builds the property set from a fields object.
this.flush = function()
Clears the property set, effectivly removing all name values pairs
this.build = this.build_propset = function(toNode)
Builds the property set
this.dataset_cancel_input = function(newValue)
Cancels the input for a certain field, toggling input mode off and reverting it to its old value
this.dataset_tgl_input = function(fld,
b)
Toggles input mode for a field in the property set list on or off
this.dataset_update = function(fld,
newValue)
Updates the value of a single valid field object
this.set = this.set_propset = function(w,
h,
x,
y,
nameWidth,
fields,
listX,
listY,
cssTable,
cssName,
cssValue,
itemHeight)
Sets the most common template properties for the property set
this.to_xml = function(tag)
Returns the property set as a valid xml string
The checkbox widget
A scrollable frame to display content in.
The most basic VegUI Element.
VegUIList as input
custom function as input
int, x offset for list popup
int, y offset for list popup
VegUIList, all lists will be cloned from this template
string, css class to use for the name column
string, css class to use for the value column
int, width of the name column (percentage)
Object, field information object
function VegUINode(refName,
Parent,
Manager)
this.build_element = function(VegUIObj,
toNode)
builds a VegUIElement.
this.build = this.build_node = function(toNode,
takeNode)
build a HTML node from the template properties of this element.
The field object is used to populate the property set with name value pairs.
this.set = this.set_node = function(nodeType,
w,
h,
x,
y,
pos,
z)
Template Function