Spark Framework Class: Form

This method is responsible from binding DOM events to the element of this view. It uses native DOM event names which is all lowercase. If your options has an event name and a callback function in events object View will bind and listen those events automatically.

Inherited From:

spark.core.View#bindEvents_

Source:

core/View.js, line 460

createButton(options)

Creates button with the options.

Parameters:

Name	Type	Description
`options`	Object	Options to create a button component.

Source:

components/forms/Form.js, line 112

<private> createContainers_()

Creates DOM element to hold input and button elements.

Source:

components/forms/Form.js, line 54

<private> createDomElement_()

Creates the element with the configuration passed to constructor.

Inherited From:

spark.core.View#createDomElement_

Source:

core/View.js, line 62

createInput(options)

Creates field component from passed option using FieldFactory. FIXME: Creating LabeledInput should be handled in FieldFactory.

Parameters:

Name	Type	Description
`options`	Object	Field options to create a field component.

Source:

components/forms/Form.js, line 72

destroy()

Destroys the view. It will unlisten all binded events including the DOM events and destroy all child views finally remove the element from document.

Inherited From:

spark.core.View#destroy

Source:

core/View.js, line 498

disable()

Disable view.

Inherited From:

spark.core.View#disable

Source:

core/View.js, line 298

emit(eventName, data)

Dispatches an event and calls all listeners listening for events of this event. See also goog.events.Listenable.prototype.dispatchEvent

Parameters:

Name	Type	Argument	Description
`eventName`	string		Name of the event.
`data`	*	<optional>	Data which will passed to listeners

Inherited From:

spark.core.Object#emit

Source:

core/Object.js, line 152

enable()

Enable view.

Inherited From:

spark.core.View#enable

Source:

core/View.js, line 311

freeze()

Freezes object to prevent adding new properties, updating or deleting existing properties.

Inherited From:

spark.core.Object#freeze

Source:

core/Object.js, line 113

getAttribute(name)

Native getAttribute wrapper.

Parameters:

Name	Type	Description
`name`	string	Atrribute name.

Inherited From:

spark.core.View#getAttribute

Source:

core/View.js, line 279

getButtons() → {Array.<spark.components.Button>}

Returns inputs

Source:

components/forms/Form.js, line 187

Returns:

Type: Array.<spark.components.Button>

getButtonsContainer() → {spark.core.View}

Returns buttons container

Source:

components/forms/Form.js, line 169

Returns:

Type: spark.core.View

getChildren() → {Array.<spark.core.View>}

Returns the child views.

Inherited From:

spark.core.View#getChildren

Source:

core/View.js, line 179

Returns:

DOM element of this view.

Type: Array.<spark.core.View>

getClass() → {string}

Returns class name of the element.

Inherited From:

spark.core.View#getClass

Source:

core/View.js, line 118

Returns:

Class name.

Type: string

getClassList() → {Array}

Returns class list of the element.

Inherited From:

spark.core.View#getClassList

Source:

core/View.js, line 128

Returns:

List of class names.

Type: Array

getCssClass(options, optionalClass)

Helper method to set css class to options set.

Parameters:

Name	Type	Argument	Description
`options`	Object		Class options.
`optionalClass`	string	<optional>	Optinal CSS class which will added to default.

Inherited From:

spark.core.View#getCssClass

Source:

core/View.js, line 479

getData()

Returns form data from DOM elements. This method may be useful for serializing the form data.

Source:

components/forms/Form.js, line 144

getDomId() → {string|null}

Returns the DOM id if exists, otherwise it will return null.

Inherited From:

spark.core.View#getDomId

Source:

core/View.js, line 97

Returns:

Type: string | null

getElement() → {Element}

Returns the DOM element.

Inherited From:

spark.core.View#getElement

Source:

core/View.js, line 169

Returns:

DOM element of this view.

Type: Element

getHeight() → {number}

Returns the height of the element.

Inherited From:

spark.core.View#getHeight

Source:

core/View.js, line 381

Returns:

View element height.

Type: number

getInputByName(name) → {Array.<spark.components.Field>|null}

Returns a field by name.

Parameters:

Name	Type	Description
`name`	string	Field name.

Source:

components/forms/Form.js, line 197

Returns:

Type: Array.<spark.components.Field> | null

getInputs() → {Array.<spark.components.Field>}

Returns inputs

Source:

components/forms/Form.js, line 178

Returns:

Type: Array.<spark.components.Field>

getInputsContainer() → {spark.core.View}

Returns input container

Source:

components/forms/Form.js, line 160

Returns:

Type: spark.core.View

getOption() → {*}

Returns value of a key in options object.

Inherited From:

spark.core.Object#getOption

Source:

core/Object.js, line 64

Returns:

Value of key or null.

Type: *

getOptions() → {Object}

Returns all options object.

Inherited From:

spark.core.Object#getOptions

Source:

core/Object.js, line 54

Returns:

Options object.

Type: Object

getUid() → {string}

Return unique id.

Inherited From:

spark.core.Object#getUid

Source:

core/Object.js, line 103

Returns:

Unique id of this component.

Type: string

getWidth() → {number}

Returns the width of the element.

Inherited From:

spark.core.View#getWidth

Source:

core/View.js, line 369

Returns:

View element width.

Type: number

hasClass(cssClass) → {boolean}

Returns true if element has that class name.

Parameters:

Name	Type	Description
`cssClass`	string	Name of the class which will be tested.

Inherited From:

spark.core.View#hasClass

Source:

core/View.js, line 159

Returns:

Whether element has a class name or not.

Type: boolean

isDestroyed() → {boolean}

Returns the object's destroy state.

Inherited From:

spark.core.Object#isDestroyed

Source:

core/Object.js, line 199

Returns:

Whether the object is destroyed or not.

Type: boolean

isDisabled()

Returns the current disabled state of the button.

Inherited From:

spark.core.View#isDisabled

Source:

core/View.js, line 337

off()

Override Object::off to remove events binded to DOM element.

Inherited From:

spark.core.View#off

Source:

core/View.js, line 447

on()

Override Object::on to support two way binding for DOM events.

Inherited From:

spark.core.View#on

Source:

core/View.js, line 419

once()

Override Object::once to support two way binding for DOM events.

Inherited From:

spark.core.View#once

Source:

core/View.js, line 434

removeAttribute(name)

Native removeAttribute wrapper.

Parameters:

Name	Type	Description
`name`	string	Atrribute name.

Inherited From:

spark.core.View#removeAttribute

Source:

core/View.js, line 289

removeClass(cssClass)

Remove a class name from the element.

Parameters:

Name	Type	Description
`cssClass`	string	Name of the class which will be removed.

Inherited From:

spark.core.View#removeClass

Source:

core/View.js, line 148

removeFromDocument() → {boolean}

Removes element from DOM if it is in DOM.

Inherited From:

spark.core.View#removeFromDocument

Source:

core/View.js, line 230

Returns:

Whether element removed from document or not.

Type: boolean

render(target)

Renders element into another View instance or a DOM element. Be aware that this method only appends the element of this class into another element. If the parent element is not in DOM, this method will not append the parent into DOM. Also you can use this method with renderTo option. If you pass renderTo as a View instance or DOM element, View will call render method by default.

Parameters:

Name	Type	Description
`target`	spark.core.View \| Element	Target view or element to be rendered.

Inherited From:

spark.core.View#render

Source:

core/View.js, line 398

setAttribute(name, value)

Native setAttribute wrapper.

Parameters:

Name	Type	Description
`name`	string	Atrribute name.
`value`	string	Attribute value.

Inherited From:

spark.core.View#setAttribute

Source:

core/View.js, line 269

setClass(cssClass)

Sets the class name of element. This will override existing class names. Use @addClass if you want to add new class name to the element.

Parameters:

Name	Type	Description
`cssClass`	string	Class name.

Inherited From:

spark.core.View#setClass

Source:

core/View.js, line 108

setData()

Sets form data and update fields with the data. Data should be an object and keys should match field names in this form. Values should be string.

Source:

components/forms/Form.js, line 125

setDomId(domId)

Sets DOM id.

Parameters:

Name	Type	Description
`domId`	string	Id of the element.

Inherited From:

spark.core.View#setDomId

Source:

core/View.js, line 87

setHeight(height)

Sets height of this view's DOM element.

Parameters:

Name	Type	Description
`height`	string \| number	Height of the element. It can be string with 'px' value or just number.

Inherited From:

spark.core.View#setHeight

Source:

core/View.js, line 359

setOptions(options)

Sets options object of this class.

Parameters:

Name	Type	Description
`options`	Object	Options object.

Inherited From:

spark.core.Object#setOptions

Source:

core/Object.js, line 44

setTemplate(template)

Basic templating support for Spark Framework. Currently templates can include variable tags like in Mustache templates. This can be changed in the future versions of the framework.

Variable tags should start with {{ and end with }}. That's borrowed from Mustache. Tags are not whitespace sensitive, so {{name}} and {{ name }} is the same.

Template should also be a function. Just make sure that function returns a string which will be the template. setTemplate will call the template function by passing the data of this View. So you can use class data in your template function. This will allow framework to easily integrate other template engines.

Spark Framework will use Closure Templates as it's default template engine. This is because to maintain the compiled code size advantage. I am also considering to support Mustache and Handlebar templates in Spark.

Parameters:

Name	Type	Argument	Description
`template`	string \| function	<optional>	HTML string of the element or function which will return the html string. Function will be called with class data. FIXME: Fix annotation for template variable, it should be `{string\|Function}`