LudoJS

ludo.View

ludo.

new ludo.View(config)

A basic ludoJS view. When rendered on a Web page, a View is made out of two <div> elements, one parent and one child(called body).

Parameters:
Name Type Description
config Object
Properties
Name Type Description
bodyCls String

Additional css classes to assign to the body <div>, example: bodyCls: "classname1 classname2"
children Array

An array of config objects for the child views. Example: children:[{ html: "child 1", layout:{ height: 100 }}, { html: "Child 2", layout: { height:200 } }]. See Demo
cls String

Additional css classes to assign to the views <div>, example: cls: "classname1 classname2"
elCss Object

Specific css rules to apply to the View, @example: elCss:{ border: '1px solid #ddd' } for a gray border
css Object

Specific css rules to apply to the View's body <div, @example: css:{ 'background-color': '#EEEEEE' } for a light gray background
dataSource Object

A config object for the data source.
formConfig Object

Default form properties for child form views. Example: formConfig:{labelWidth:100}. Then we don't have to specify labelWidth:100 for all the child form views.
hidden Boolean

When true, the View will be initially hidden. For performance reasons initially hidden Views will not be rendered until View.show() is called.
html String

Static HTML to show inside the View's body <div>
id String

Id of view. When set, you can easily get access to the View by calling ludo.get("<idOfView>").
layout Object

An object describing the layout for this view and basic layout rules for child views
name String

When set, you can access it by calling parentView.child["<childName>"]
title String

Title of this view. If the view is a child in tab layout, the title will be displayed on the Tab
tpl String

A template for string when inserting JSON Content(the insertJSON method), example: "name:{firstname} {lastname}
"
alwaysInFront Boolean

True to make this view always appear in front of the other views.
form Object

Configuration for the form Manager. See ludo.form.Manager for details.
loadMessage String

Message to show if a data source is used and data is being loaded from server.
Source:
Fires:
  • ludo.View#rendered Fired when the view has been rendered and resized. Argument: ludo.event:View
  • ludo.View#toFront Fired when view has brought to front. Argument: ludo.event:View
  • ludo.View#hide Fired when view has been hidden using the hide method. Argument: ludo.event:View
  • ludo.View#show Fired when view is displayed using the show method. Argument. ludo.event:View
  • ludo.View#beforeshow Fired just before a view is displayed using the show method. Argument: ludo.event:View
  • ludo.View#event:resize Fired when a view has been resized.
Examples
 <!--  A basic rendered ludoJS view -->
 <div class="ludo-view">
 <div class="ludo-body"></div>
 </div>
 
 // Example 1: View render to &lt;body> tag
 new ludo.View({
 		renderTo:document.body,
 		html : 'Hello'
	}

 // Example 2: Creating custom View
 myApp = {};
 myApp.View = new Class({
 		Extends: ludo.View,
 		type : 'myApp.View',
 		__rendered:function(){
 			this.html('My custom view');
		}
	}
 children:[{
		type : 'myApp.View'
	}]

Extends

Methods

__children() → {Array|children}

Alternative to the "children" config array. By defining children in __children, you will have access to "this" referring to
the View instance. This is a method you override when creating your own Views.

Source:
Returns:
Type
Array | children

__construct(config)

Constructor for Views.

Parameters:
Name Type Description
config Object
Source:

__rendered()

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

Source:

addChild(insertAt, pos) → {View}

Add a child View. The method will returned the created view.

Parameters:
Name Type Description
child. Object | View

A Child object can be a View or a JSON config object for a new View.
insertAt String
pos String
Source:
Returns:

child

Type
View

addChildren(children) → {Array}

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:
Name Type Description
children Array
Source:
Returns:

of new children

Type
Array

addControllerEvents()

Add events to controller

Inherited From:
Source:
Returns:

void

Example
this.controller.addEvent('eventname', this.methodName.bind(this));

getAllChildren()

Return Array of child views, recursive.

Source:
Returns:

Array of sub components

getChild(childName)

Get child view by name or id

Parameters:
Name Type Description
childName String

id or name of child view
Source:

getChildren()

Return Array of direct child views.

Source:
Returns:

Array of Child components

getEl() → {HTMLElement}

Return reference to the Views DOM div element.
DOM "body" element

Source:
Returns:

DOMElement

Type
HTMLElement

getForm *() → {ludo.form.Manager}

Returns ludo.form.Manager" for this view.

Source:
Returns:
Type
ludo.form.Manager
Examples
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}

Get current height of component

Source:
Returns:
Type
Number

getId()

Return id of component

Inherited From:
Source:
Returns:

String id

getName()

Get name of component and form element

Inherited From:
Source:
Returns:

String name

getNamespace() → {String}

Returns component type minus class name, example:
type: calendar.View will return "calendar"

Inherited From:
Source:
Returns:

namespace

Type
String

getParent() → {Object}

Get reference to parent view

Source:
Returns:

view | null

Type
Object

getTitle()

Returns title

Source:
Returns:

string

getWidth() → {Number}

Returns total width of component including padding, borders and margins

Source:
Returns:

width

Type
Number

hasChildren() → {Boolean}

Returns true if this component contain any children

Source:
Returns:
Type
Boolean

html(html) → {string}

Set HTML

Parameters:
Name Type Description
html
Source:
Returns:
Type
string
Example
var view = new ludo.View({
	 	renderTo:document.body,
	 	layout:{ width:500,height:500 }
	 });
     view.html('<h1>Heading</h1><p>Paragraph</p>');

isHidden() → {Boolean}

Is this component hidden?

Source:
Returns:
Type
Boolean

isVisible() → {Boolean}

Return true if this component is visible

Source:
Returns:
Type
Boolean

JSON(json, tpl)

Parse and insert JSON into the view
The JSON will be sent to the JSON parser(defined in JSONParser) and
This method will be called automatically when you're using a JSON data-source

Parameters:
Name Type Description
json Object
tpl String

Optional String template
Source:
Returns:

void

load()

Load content from the server. This method will send an Ajax request to the server
using the data source

Source:
Returns:

void

remove()

Hide and removes the view view

Source:
Returns:

void

resize(size)

Resize View and it's children.

Parameters:
Name Type Description
size Object

Object with optional width and height properties. Example: { width: 200, height: 100 }
Source:
Example
view.resize(
        { width: 200, height:200 }
     );

saveState()

Save state for stateful components and views. States are stored in localStorage which
is supported by all major browsers(IE from version 8).

Inherited From:
Source:
Returns:

void

Examples
myComponent.saveState();
	 OR
	 
this.fireEvent('state');
	 which does the same.

setTitle(title)

Set new title

Parameters:
Name Type Description
title String
Source:

show(skipEvents)

Make the view visible

Parameters:
Name Type Description
skipEvents Boolean
Source:
Returns:

void

showChild(key) → {Boolean}

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

Parameters:
Name Type Description
key String
Source:
Returns:

success

Type
Boolean

svg() → {ludo.svg.Canvas}

Creates(if not exists) SVG surface and returns it. The SVG element is appended to the body of
the view.

Source:
Returns:

canvas

Type
ludo.svg.Canvas
Example
var win = new ludo.Window({
		   id:'myWindow',
		   left:50, top:50,
		   width:410, height:490,
		   title:'Canvas',
		   css:{
			   'background-color':'#FFF'
		   }
	   });
     // Get reference to canvas
     var canvas = win.svg();
     // Using the svg dollar function to create SVG DOM nodes.
     var circle = canvas.$('circle', { cx:100,cy:100, r: 50, fill: "#000" });
     canvas.append(circle);