LudoJS

ludo.FramedView

ludo.

new ludo.FramedView(config)

Extends: ludo.View

Displays a View with a title bar and support for a bottom button bar .

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

Title for the title bar
icon String

Path to icon to be placed in top left corner of title bar, default:undefined
minimizable Boolean

True to add minimize button to the title bar.
minimized Boolean

True to render the view minimized.
buttonBar Object

Optional button bar configuration. The button bar is div at the bottom of the view where child views(example buttons) are rendered in a linear horizontal layout.
Alignment of button can be set using config.buttonBar.align(left, center or right).
Example:
buttonBar: { align:'left', children:[ {type:'ludo.form.Button', value: 'OK' }]}. .
Default alignment is "right"
Source:
Fires:
  • ludo.FramedView#minimize Fired on mimimize. Argument: ludo.event:FramedView
  • ludo.FramedView#event:maximize Fired on maximize

Extends

Members

titleBar :Object

Config object for the title bar

Type:
  • Object
Default Value:
  • undefined
Source:
Examples
new ludo.Window({
	 		titleBar:{
				buttons: [{
					type : 'reload',
					title : 'Reload grid data'
				},'minimize','close'],
				listeners:{
					'reload' : function(){
						ludo.get('myDataSource').load();
					}
				}
			}
	 	});

	 You can create your own buttons by creating the following css classes:
	 
.ludo-title-bar-button-minimize {
			 background-image: url('../images/title-bar-btn-minimize.png');
		 }

		 .ludo-title-bar-button-minimize-over {
			 background-image: url('../images/title-bar-btn-minimize-over.png');
		 }

	 Replace "minimize" with the unique name of your button.

	 If you want to create a toggle button like minimize/maximize, you can do that with this code:

	 
ludo.view.registerTitleBarButton('minimize',{
			toggle:['minimize','maximize']
		 });

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.

Inherited From:
Source:
Returns:
Type
Array | children

__construct(config)

Constructor for Views.

Parameters:
Name Type Description
config Object
Inherited From:
Source:

__rendered()

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

Inherited From:
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
Inherited From:
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
Inherited From:
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));

disableButton(id) → {Boolean}

Disable a button on the button bar

Parameters:
Name Type Description
id
Source:
Returns:

success

Type
Boolean

enableButton(id) → {Boolean}

Enable a button on the button bar

Parameters:
Name Type Description
id
Source:
Returns:

success

Type
Boolean

getAllChildren()

Return Array of child views, recursive.

Inherited From:
Source:
Returns:

Array of sub components

getButtonBarConfig() → {Object|undefined}

Return button bar config using a method instead of using buttonBar config object. Useful when you need to refer to
"this"

Source:
Returns:
Type
Object | undefined

getChild(childName)

Get child view by name or id

Parameters:
Name Type Description
childName String

id or name of child view
Inherited From:
Source:

getChildren()

Return Array of direct child views.

Inherited From:
Source:
Returns:

Array of Child components

getEl() → {HTMLElement}

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

Inherited From:
Source:
Returns:

DOMElement

Type
HTMLElement

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

Returns ludo.form.Manager" for this view.

Inherited From:
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

Inherited From:
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

Inherited From:
Source:
Returns:

view | null

Type
Object

getTitle()

Returns title

Inherited From:
Source:
Returns:

string

getTitleBarConfig() → {Object|undefined}

Return config of title bar using a method instead of config object. Useful when you need to refer to "this"

Source:
Returns:
Type
Object | undefined

getWidth() → {Number}

Returns total width of component including padding, borders and margins

Inherited From:
Source:
Returns:

width

Type
Number

hasChildren() → {Boolean}

Returns true if this component contain any children

Inherited From:
Source:
Returns:
Type
Boolean

hideButton(id) → {Boolean}

Hide a button on the button bar

Parameters:
Name Type Description
id

of button
Source:
Returns:

success

Type
Boolean

html(html) → {string}

Set HTML

Parameters:
Name Type Description
html
Inherited From:
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?

Inherited From:
Source:
Returns:
Type
Boolean

isResizable() → {Boolean}

Is component resizable

Source:
Returns:
Type
Boolean

isVisible() → {Boolean}

Return true if this component is visible

Inherited From:
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
Inherited From:
Source:
Returns:

void

load()

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

Inherited From:
Source:
Returns:

void

maximize()

Maximize component

Source:
Returns:

void

minimize()

Minimize component

Source:
Returns:

void

remove()

Hide and removes the view view

Inherited From:
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 }
Inherited From:
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
Inherited From:
Source:

show(skipEvents)

Make the view visible

Parameters:
Name Type Description
skipEvents Boolean
Inherited From:
Source:
Returns:

void

showButton(id) → {Boolean}

Show a button on the button bar

Parameters:
Name Type Description
id

of button
Source:
Returns:

success

Type
Boolean

showChild(key) → {Boolean}

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

Parameters:
Name Type Description
key String
Inherited From:
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.

Inherited From:
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);