Notification Class
Class for providing short messages and feedback in a small popup. Notifications automatically disappear after a timeout. Positioning of notification can be configured using the layout object.
Constructor
Notification
-
config
Parameters:
-
config
Object
Example:
new ludo.Notification({
html : 'Your e-mail has been sent',
duration:4
});
Item Index
Methods
- addChild
- addChildren
- dispose
- disposeAllChildren
- getAllChildren
- getBody()
- getCanvas
- getChild
- getChildren
- getClassChildren
- getEl()
- getForm *
- getHeight
- getParent
- getSocket
- getTitle
- getWidth
- hasChildren
- hide
- hideAfterDelay
- insertJSON
- isCollapsible
- isHidden
- isVisible
- load
- ludoConfig
- ludoDOM
- ludoEvents
- ludoRendered
- resize
- setHtml
- setTitle
- show
- showChild
Properties
Attributes
Events
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:
-
children
Array
Returns:
dispose
-
view
Dispose LudoJS components
Parameters:
-
view
Core
disposeAllChildren
()
Remove all children
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.
getTitle
()
Returns title of Component.
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:
-
data
Object
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.
resize
-
config
Resize Component and it's children. Example:
Parameters:
-
config
Object
Example:
component.resize( { width: 200, height:200 } );
Properties
array availableButtons
Unknown
private
array unReneredChildren
Unknown
Array of unrendered children
boolean isRendered
Unknown
Property set to true when component and it's children are rendered.
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
object activeButton
Unknown
private
Reference to currently selected button
object activeComponent
Unknown
private
Reference to current active component
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}'
Attributes
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
effect
String
Use an effect when notification is hidden Possible values: fade, slide
Default: undefined
effect
String
Use an effect when notification is shown Possible values: fade, slide
Default: undefined
effect
String
Effect used for both show and hide. Individual effects can be set by defining showEffect and hideEffect Possible values: fade, slide
Default: 'fade'
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
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
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".
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' }
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.
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'] }
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:
-
this
Object
resize
Event fired when component is resized