card.NextButton Class
Special Button for card.Deck used to navigate to next card. This button will automatically be disabled when a form is invalid, and automatically enabled when it's valid. A form consists of all form elements of parent component, including form elements of child components. When clicked, next card will be shown
Item Index
Methods
- addChild
- addChildren
- clear
- click
- commit
- disable
- dispose
- disposeAllChildren
- enable
- getAllChildren
- getBody()
- getCanvas
- getChild
- getChildren
- getClassChildren
- getEl()
- getForm *
- getFormEl
- getHeight
- getParent
- getSocket
- getTitle
- getToggleGroup
- getValue
- getWidth
- hasChildren
- hide
- hideAfterDelay
- insertJSON
- isCollapsible
- isDirty
- isHidden
- isValid
- isVisible
- load
- ludoConfig
- ludoDOM
- ludoEvents
- ludoRendered
- reset
- resize
- setHtml
- setTitle
- setValue
- show
- showChild
Properties
Attributes
Methods
addChild
-
child. -
insertAt -
pos
Add a child component. The method will returned the created component.
Parameters:
Returns:
addChildren
-
children
Add child components Only param is an array of child objects. A Child object can be a component or a JSON object describing the component.
Parameters:
-
childrenArray
Returns:
clear
()
Reset value back to the original value sent(constructor value)
Returns:
commit
()
Update initial value to current value. These actions will always trigger a commit
- Form or Model submission
- Fetching new record for a ludo.model.Model
Returns:
disable
()
Disable form element
Returns:
dispose
-
view
Dispose LudoJS components
Parameters:
-
viewCore
disposeAllChildren
()
Remove all children
Returns:
enable
()
Enable form element
Returns:
getAllChildren
()
Return array of all child components, including grand children
Returns:
getBody()
()
Object
Return reference to the "body" DOM element. A component consists of one container and inside it a DOM "body" element
Returns:
getCanvas
()
canvas.Canvas
Returns drawable Canvas/SVG
Returns:
Example:
var win = new ludo.Window({ id:'myWindow', left:50, top:50, width:410, height:490, title:'Canvas', css:{ 'background-color':'#FFF' } }); // Creating style sheet var paint = new ludo.canvas.Paint({ css:{ 'fill':'#FFFFFF', 'stroke':'#DEF', 'stroke-width':'5' } }); var canvas = win.getCanvas(); canvas.adopt(new ludo.canvas.Node('line', { x1:100, y1:100, x2:200, y2:200, "class":paint }));
getChildren
()
Return Array reference to direct direct child components.
Returns:
getClassChildren
()
Array | Children
Return child views of this class. By default it returns the children property of the class. There may be advantages of defining children in this method. By defining children in the children property of the class, you don't have access to "this". By returning children from getClassChildren, you will be able to use "this" as a reference to the class instance.
Returns:
getEl()
()
Object
Return reference to components DOM container. A component consists of one container and inside it a DOM "body" element
Returns:
getForm *
()
form.Manager
Returns form.Manager for this view. The form manager gives you access to form methods like save, deleteRecord, reset etc
Returns:
Example:
view.getForm().reset();
to reset all form fields
view.getForm().save();
to submit the form
view.getForm().read(1);
to send a read request to the server for record with id 1.
getFormEl
()
Get reference to input element
Returns:
getTitle
()
Returns title of Component.
Returns:
getToggleGroup
()
Object
Return instance of ludo.form.ToggleGroup
Returns:
getValue
()
Return current value
Returns:
getWidth
()
Number
Returns total width of component including padding, borders and margins
Returns:
hide
()
Hide this component
Returns:
insertJSON
-
data
Insert JSON into components body Body of Component will be updated with compiled JSON from ludo.tpl.Parser. This method will be called automatically when you're using a JSON data-source
Parameters:
-
dataObject
Returns:
isDirty
()
Boolean
Returns true if current value is different from original value
Returns:
isValid
()
Boolean
Returns true when value of form element is valid, i.e. larger than minValue, matching regex etc.
Returns:
load
()
Load content from the server. This method will send an Ajax request to the server using the properties specified in the remote object or data-source
Returns:
ludoDOM
()
The second life cycle method This method is typically used when you want to create your own DOM elements.
Example:
ludoDOM : function() {
this.parent(); // Always call parent ludoDOM
var myEl = new Element('div');
myEl.set('html', 'My Content');
this.getEl().adopt(myEl);
}
ludoEvents
()
The third life cycle method This is the place where you add custom events
Returns:
Example:
ludoEvents:function(){ this.parent(); this.addEvent('load', this.myMethodOnLoad.bind(this)); }
ludoRendered
()
The final life cycle method. When this method is executed, the componenent (including child components) are fully rendered.
reset
()
Reset / Roll back to last committed value. It could be the value stored by last commit method call or if the original value/default value of this field.
Returns:
resize
-
config
Resize Component and it's children. Example:
Parameters:
-
configObject
Example:
component.resize( { width: 200, height:200 } );
Properties
array unReneredChildren
Unknown
Array of unrendered children
boolean isRendered
Unknown
Property set to true when component and it's children are rendered.
isReady
Boolean
private
Is form element ready for setValue. For combo boxes and select boxes it may not be ready until available values has been loaded remotely
layout
Object | String
Layout config object
Default: undefined
Example:
layout:{ type:'linear', orientation:'horizontal' } or shortcut :
layout:"cols" which is the same as linear horizontal
Layout types: linear, fill, grid, tab, popup
linkWith
String
Link with a form component with this id. Value of these components will always be the same Update one and the other component will be updated automatically. It's sufficient to specify linkWith for one of the two views.
Default: undefined
statefulProperties
Array
When using stateful:true, value will be preserved to next visit.
Default: ['value']
string cssSignature
Unknown
private
CSS class added to container of this component
Default: undefined
tpl
String
Template for JSON compiler.
Curly braces {} are used to specify keys in the JSON object. The compiler will replace {key} with JSON.key
The compiled string will be inserted as html of the body element.
The template will be compiled automatically when you're loading JSON remotely. If JSON is an array of object, the template will be applied to each object, example:
JSON : [ { firstname : 'Jane', lastname : 'Doe' }, { firstname : 'John', lastname: 'Doe' }]
tpl : '<div>{lastname}, {firstname}</div>
will produce this result:
<div>Doe, Jane</div><div>Doe, John</div>
Default: '' (empty string)
Example:
tpl:'Firstname: {firstname}, lastname:{lastname}'
twin
String
Will not validate unless value is the same as value of the form element with this id Example of use: Password and Repeat password. It's sufficient to specify "twin" for one of the views.
Default: undefined
validator
Object
Object of class form.validator.* or a plain validator function When set the isValid method of the validator will be called after standard validation is complete and form element is valid.
Example:
validator : { type : 'form.validator.Md5', value : 'MD5 hash of something' } In order to validate this field, the MD5 of form field value must match form.validator.Md5.value
validator:function(value){ return value === 'Valid value'; } is example of simple function used as validator.
Attributes
applyTo
String
Apply button to a specific view with this id. This view has to have layout type set to "card".
Default: undefined
Fires event applyToChange
Fires when the value for the configuration attribute applyTo is
changed. You can listen for the event using the on method if you
wish to be notified before the attribute's value has changed, or
using the after method if you wish to be notified after the
attribute's value has changed.
Parameters:
-
eEventFacadeAn Event Facade object with the following attribute-specific properties added:
autoHide
Boolean
Automatically hide button instead of disabling it. This will happen on first cards for previous buttons and on last card for next and finish buttons.
Default: false
Fires event autoHideChange
Fires when the value for the configuration attribute autoHide is
changed. You can listen for the event using the on method if you
wish to be notified before the attribute's value has changed, or
using the after method if you wish to be notified after the
attribute's value has changed.
Parameters:
-
eEventFacadeAn Event Facade object with the following attribute-specific properties added:
children
Array
Array of Config objects for dynamically created children
Example:
new ludo.Window({ left : 200, top : 200, width : 400, height: 400, children : [{ type : 'View', html : 'This is my sub component' }] });
containerCss
Object
CSS styles of component container example: { padding : '2px', margin: '2px' }
Default: undefined
copyEvents
Object
Create copies of events, example: This will fire a "send" event for every "click" event.
Default: undefined
Example:
copyEvents:{ 'click' : 'send' }
css
Object
CSS styles of body element of component example: { padding : '2px', margin: '2px' }
Default: undefined
disabled
Boolean
True to initially disable button
Default: false
Fires event disabledChange
Fires when the value for the configuration attribute disabled is
changed. You can listen for the event using the on method if you
wish to be notified before the attribute's value has changed, or
using the after method if you wish to be notified after the
attribute's value has changed.
Parameters:
-
eEventFacadeAn Event Facade object with the following attribute-specific properties added:
fieldWidth
Int
Width of input element
Default: undefined
Fires event fieldWidthChange
Fires when the value for the configuration attribute fieldWidth is
changed. You can listen for the event using the on method if you
wish to be notified before the attribute's value has changed, or
using the after method if you wish to be notified after the
attribute's value has changed.
Parameters:
-
eEventFacadeAn Event Facade object with the following attribute-specific properties added:
form
Object
Form object, used for form submission. Example
Default: undefined
Example:
form : { url: 'my-submit-url.php', method:'post', name : 'myForm' }
formConfig
Object
Form config for child elements, example { labelWidth : 200, stretchField:true }, which will be applied to all child form elemetns if no labelWidth is defined in their config
Default: undefined
formCss
Object, example: border : '1px solid #000'
Custom CSS rules to apply to input element
Default: undefined
Fires event formCssChange
Fires when the value for the configuration attribute formCss is
changed. You can listen for the event using the on method if you
wish to be notified before the attribute's value has changed, or
using the after method if you wish to be notified after the
attribute's value has changed.
Parameters:
-
eEventFacadeAn Event Facade object with the following attribute-specific properties added:
frame
Boolean
Draw a frame around the component. This is done by assigning the container to css class ludo-container-frame and body element to ludo-body-frame. You can also customize layout by specifying css and|or containerCss
Default: false
icon
String
Path to button icon
Default: undefined
Fires event iconChange
Fires when the value for the configuration attribute icon is
changed. You can listen for the event using the on method if you
wish to be notified before the attribute's value has changed, or
using the after method if you wish to be notified after the
attribute's value has changed.
Parameters:
-
eEventFacadeAn Event Facade object with the following attribute-specific properties added:
labelWidth
Width of label
Default: 100
Fires event labelWidthChange
Fires when the value for the configuration attribute labelWidth is
changed. You can listen for the event using the on method if you
wish to be notified before the attribute's value has changed, or
using the after method if you wish to be notified after the
attribute's value has changed.
Parameters:
-
eEventFacadeAn Event Facade object with the following attribute-specific properties added:
ludoDB
Object
Config object for LudoDB integration.
Example:
ludoDB:{ 'resource' : 'Person', 'arguments' : 1, // id of person 'url' : 'router.php' // optional url }
This example assumes that ludoJS properties are defined in the LudoDBModel called "Person".
name
String
"name" is inherited from ludo.View. It will also be set as name of input element
Default: undefined
Fires event nameChange
Fires when the value for the configuration attribute name is
changed. You can listen for the event using the on method if you
wish to be notified before the attribute's value has changed, or
using the after method if you wish to be notified after the
attribute's value has changed.
Parameters:
-
eEventFacadeAn Event Facade object with the following attribute-specific properties added:
object tplParserConfig
Default config for ludo.tpl.Parser. ludo.tpl.Parser is a JSON compiler which converts given tpl into a string. If you want to create your own parser, extend ludo.tpl.Parser and change value of tplParserConfig to the name of your class
Default: { type: 'tpl.Parser' }
required
Boolean
Is a value required for this field
Default: false
Fires event requiredChange
Fires when the value for the configuration attribute required is
changed. You can listen for the event using the on method if you
wish to be notified before the attribute's value has changed, or
using the after method if you wish to be notified after the
attribute's value has changed.
Parameters:
-
eEventFacadeAn Event Facade object with the following attribute-specific properties added:
resizable
Boolean
if set to true and this component is a child of a component with "rows" or "cols" layout, resize handles will be created for it and it will be resizable. Please notice that components with stretch set to true are not resizable.
selected
Boolean
Is this button by default selected When parent component is displayed, it will call select() method for first selected button. If no buttons have config param selected set to true, it will select first SubmitButton.
Default: false
Fires event selectedChange
Fires when the value for the configuration attribute selected is
changed. You can listen for the event using the on method if you
wish to be notified before the attribute's value has changed, or
using the after method if you wish to be notified after the
attribute's value has changed.
Parameters:
-
eEventFacadeAn Event Facade object with the following attribute-specific properties added:
size
String
Size,i.e height of button. Possible values 's', 'm' and 'l' (small,medium, large)
Default: 'm'
socket
Object
Configuration object for socket.Socket, Example: A reference to the socket can be retrieved by this.getSocket()
Default: undefined
Example:
socket:{ url:'http://127.0.0.1:1337', emitEvents:['chat','logout'] }
stretchField
Boolean
Let input field use all remaining space of the component
Default: true
Fires event stretchFieldChange
Fires when the value for the configuration attribute stretchField is
changed. You can listen for the event using the on method if you
wish to be notified before the attribute's value has changed, or
using the after method if you wish to be notified after the
attribute's value has changed.
Parameters:
-
eEventFacadeAn Event Facade object with the following attribute-specific properties added:
toggle
Boolean
Toggle button
Default: false
Fires event toggleChange
Fires when the value for the configuration attribute toggle is
changed. You can listen for the event using the on method if you
wish to be notified before the attribute's value has changed, or
using the after method if you wish to be notified after the
attribute's value has changed.
Parameters:
-
eEventFacadeAn Event Facade object with the following attribute-specific properties added:
toggleGroup
Object
Assign button to a toggleGroup
Default: undefined
Fires event toggleGroupChange
Fires when the value for the configuration attribute toggleGroup is
changed. You can listen for the event using the on method if you
wish to be notified before the attribute's value has changed, or
using the after method if you wish to be notified after the
attribute's value has changed.
Parameters:
-
eEventFacadeAn Event Facade object with the following attribute-specific properties added:
Example:
var buttonLeft = new ludo.form.Button({
value : 'left',
toggle:true,
toggleGroup:'alignment'
});
var buttonCenter = new ludo.form.Button({
value : 'center',
toggle:true,
toggleGroup:'alignment'
});
which creates a singleton ludo.form.ToggleGroup instance and
assign each button to it.
When using a toggle group, only one button can be turned on. The toggle
group will automatically turn off the other button.
You can create your own ludo.form.ToggleGroup by extending
ludo.form.ToggleGroup and set the toggleGroup property to an
object:
var buttonLeft = new ludo.form.Button({
value: 'left',
toggle:true,
toggleGroup:{
type : 'ludo.myapp.form.MyToggleGroup'
}
});
/ toggleGroup:undefined,
/**
* Disable button when form of parent component is invalid * @attribute {Boolean} disableOnInvalid * @default false
value
String
Text of button
Fires event valueChange
Fires when the value for the configuration attribute value is
changed. You can listen for the event using the on method if you
wish to be notified before the attribute's value has changed, or
using the after method if you wish to be notified after the
attribute's value has changed.
Parameters:
-
eEventFacadeAn Event Facade object with the following attribute-specific properties added:
Events
beforeload
This event is fired from the "load" method before a remote request is sent to the server.
beforeshow
Event fired just before a component is shown using the show method
Event Payload:
-
thisObject
blur
On blur event
change
On change event. This event is fired when value is changed manually by the user via GUI. The "change" event is followed by a "valueChange" event. When value is changed using the setValue method only the "valueChange" event is fired.
clean
event fired on blur when value is equal to original/start value
dirty
event fired on blur when value is different from it's original value
focus
On focus event
invalid
Event fired when value of form component is valid. This is fired on blur
key_down
key down event
key_press
key press event
resize
Event fired when component is resized
valid
Event fired when value of form component is valid. This is fired on blur
valueChange
This event is fired whenever current value is changed, either manually by user or by calling setValue. When the value is changed manually by user via GUI, the "change" event is fired first, then "valueChange" afterwards.
Event Payload:
-
valueObject | String | Number -
formform.Elementcomponent