API Docs for: 0.0.2
Show:

Notification Class

Extends View
Module: ludo

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:

Example:

new ludo.Notification({
    html : 'Your e-mail has been sent',
    duration:4
});

Methods

addChild

(
  • child.
  • insertAt
  • pos
)
View

Inherited from View: api/src/view.js:979

Add a child component. The method will returned the created component.

Parameters:

  • child. Object | View

    A Child object can be a View or a JSON config object for a new View.

  • insertAt String
  • pos String

Returns:

View: child

addChildren

(
  • children
)
Array

Inherited from View: api/src/view.js:965

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:

Returns:

Array: of new children

dispose

(
  • view
)

Inherited from View but overwritten in api/src/util.js:78

Dispose LudoJS components

Parameters:

  • view Core

disposeAllChildren

()

Inherited from View: api/src/view.js:1028

Remove all children

Returns:

void

getAllChildren

()

Inherited from View: api/src/view.js:791

Return array of all child components, including grand children

Returns:

Array of sub components

getBody()

() Object

Inherited from View: api/src/view.js:667

Return reference to the "body" DOM element. A component consists of one container and inside it a DOM "body" element

Returns:

Object: DOMElement

getCanvas

() canvas.Canvas

Inherited from View: api/src/view.js:1146

Returns drawable Canvas/SVG

Returns:

canvas.Canvas: canvas

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 }));

getChild

(
  • childName
)

Inherited from View: api/src/view.js:1009

Get child by name or id

Parameters:

getChildren

()

Inherited from View: api/src/view.js:783

Return Array reference to direct direct child components.

Returns:

Array of Child components

getClassChildren

() Array | Children

Inherited from View: api/src/view.js:318

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:

Array | Children:

getEl()

() Object

Inherited from View: api/src/view.js:658

Return reference to components DOM container. A component consists of one container and inside it a DOM "body" element

Returns:

Object: DOMElement

getForm *

() form.Manager

Inherited from View: api/src/view.js:1091

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.

getHeight

() Number

Inherited from View: api/src/view.js:836

Get current height of component

Returns:

getParent

() Object

Inherited from View: api/src/view.js:599

Get reference to parent component

Returns:

Object: component | null

getSocket

() socket.Socket

Inherited from View: api/src/view.js:1136

Return socket for NodeJS communication

Returns:

socket.Socket: socket

getTitle

()

Inherited from View: api/src/view.js:1047

Returns title of Component.

Returns:

string

getWidth

() Number

Inherited from View: api/src/view.js:827

Returns total width of component including padding, borders and margins

Returns:

Number: width

hasChildren

() Boolean

Inherited from View: api/src/view.js:809

Returns true if this component contain any children

Returns:

hide

()

Inherited from View: api/src/view.js:676

Hide this component

Returns:

void

hideAfterDelay

(
  • seconds
)

Inherited from View: api/src/view.js:694

Hide component after n seconds

Parameters:

insertJSON

(
  • data
)

Inherited from View: api/src/view.js:531

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:

Returns:

void

isCollapsible

() Boolean

Inherited from View: api/src/view.js:901

Returns true component is collapsible

Returns:

isHidden

() Boolean

Inherited from View: api/src/view.js:703

Is this component hidden?

Returns:

isVisible

() Boolean

Inherited from View: api/src/view.js:712

Return true if this component is visible

Returns:

load

()

Inherited from View: api/src/view.js:581

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:

void

ludoConfig

(
  • config
)

Inherited from View: api/src/view.js:368

First life cycle step when creating and object

Parameters:

ludoDOM

()

Inherited from View: api/src/view.js:424

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

()

Inherited from View: api/src/view.js:466

The third life cycle method This is the place where you add custom events

Returns:

void

Example:

ludoEvents:function(){ this.parent(); this.addEvent('load', this.myMethodOnLoad.bind(this)); }

ludoRendered

()

Inherited from View: api/src/view.js:490

The final life cycle method. When this method is executed, the componenent (including child components) are fully rendered.

resize

(
  • config
)

Inherited from View: api/src/view.js:845

Resize Component and it's children. Example:

Parameters:

Example:

component.resize( { width: 200, height:200 } );

setHtml

(
  • html
)

Inherited from View: api/src/view.js:558

Set HTML of components body element

Parameters:

setTitle

(
  • title
)

Inherited from View: api/src/view.js:818

Set new title

Parameters:

show

(
  • skipEvents
)

Inherited from View: api/src/view.js:722

Show this component.

Parameters:

Returns:

void

showChild

(
  • key
)
Boolean

Inherited from View: api/src/view.js:767

Call show() method of a child component key must be id or name of child

Parameters:

Returns:

Boolean: success

Properties

array availableButtons

Unknown private

Defined in api\src\ludo.js:35

array unReneredChildren

Unknown

Inherited from View: api\src\view.js:189

Array of unrendered children

boolean isRendered

Unknown

Inherited from View: api\src\view.js:183

Property set to true when component and it's children are rendered.

layout

Object | String

Inherited from View: api\src\view.js:233

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

Defined in api\src\ludo.js:29

Reference to currently selected button

object activeComponent

Unknown private

Defined in api\src\ludo.js:23

Reference to current active component

string cssSignature

Unknown private

Inherited from View: api\src\view.js:63

CSS class added to container of this component

Default: undefined

tpl

String

Inherited from View: api\src\view.js:255

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

autoDispose

Boolean

true to dispose/erase notification on hide

Default: false

children

Array

Inherited from View: api\src\view.js:97

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

Inherited from View: api\src\view.js:168

CSS styles of component container example: { padding : '2px', margin: '2px' }

Default: undefined

copyEvents

Object

Inherited from View: api\src\view.js:205

Create copies of events, example: This will fire a "send" event for every "click" event.

Default: undefined

Example:

copyEvents:{ 'click' : 'send' }

css

Object

Inherited from View: api\src\view.js:161

CSS styles of body element of component example: { padding : '2px', margin: '2px' }

Default: undefined

duration

Number

Seconds before notification is automatically hidden

Default: 3

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'

effectDuration

Number

Duration of animation effect

Default: 1

form

Object

Inherited from View: api\src\view.js:218

Form object, used for form submission. Example

Default: undefined

Example:

form : { url: 'my-submit-url.php', method:'post', name : 'myForm' }

formConfig

Object

Inherited from View: api\src\view.js:175

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

Inherited from View: api\src\view.js:195

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

height

Number

Inherited from View: api\src\view.js:138

Height of component

hidden

Boolean

Inherited from View: api\src\view.js:153

Set this property to true if you want to initally hide the component. You can use method show to show the component again.

Default: true

html

String

Inherited from View: api\src\view.js:146

Static HTML content for the view.

Default: ''

ludoDB

Object

Inherited from View: api\src\view.js:284

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

Inherited from View: api\src\view.js:271

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

Inherited from View: api\src\view.js:75

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

Inherited from View: api\src\view.js:117

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'] }

width

Number

Inherited from View: api\src\view.js:133

Width of component

Events

activate

Inherited from View: api\src\view.js:646

Event Payload:

beforeload

Inherited from View: api\src\view.js:588

This event is fired from the "load" method before a remote request is sent to the server.

Event Payload:

beforeshow

Inherited from View: api\src\view.js:737

Event fired just before a component is shown using the show method

Event Payload:

hide

Inherited from View: api\src\view.js:685

Fired when a component is hidden using the hide method

Event Payload:

render

Inherited from View: api\src\view.js:502

Event fired when component has been rendered

Event Payload:

resize

Inherited from View: api\src\view.js:893

Event fired when component is resized

show

Inherited from View: api\src\view.js:746

Fired when a component is shown using the show method

Event Payload: