Caph Mixin: Focusable

An mixin object to focusable component.

Since:

2.0.0

See:

caph.module.focus.Manager

Example

var CustomClass = $class({
     $extends: caph.module.renderer.View,
     $mixins: [caph.module.mixins.focus.Focusable],
     $constructor: function(){
         this.$super();
         this.focusable(true).focusContainer(false).active(true).level(0).domEvent(true);
     }
 });
 var focusable = new CustomClass();

 focusable.focus();
 focusable.blur();

Members

<static> DEFAULT

An integer value indicates that we should not change the focus.

Since:

2.1.0

Example

var button = new Button({
     contents : 'Hello',
     position : [10, 10],
     size : [50, 50]
 }).defaultNextFocus(caph.module.focus.Manager.Buttons.DOWN, caph.module.mixins.focus.Focusable.DEFAULT);

<static> NONE

An integer value indicates that we should not change the focus.

Since:

2.1.0

Example

var button = new Button({
     contents : 'Hello',
     position : [10, 10],
     size : [50, 50]
 }).defaultNextFocus(caph.module.focus.Manager.Buttons.DOWN, caph.module.mixins.focus.Focusable.DEFAULT);

Methods

active(isActive) → {caph.module.mixins.focus.Focusable|boolean}

Sets active flag. / Gets active flag.
Active or not active focusable component.

Parameters:

Name	Type	Argument	Description
`isActive`	Boolean	<optional>	true : active false : inactive

Since:

2.0.0

Returns:

If there is an argument, then it returns itself to provide method chaining.
In case of no argument, it returns boolean value (isActive).

Type: caph.module.mixins.focus.Focusable | boolean

Example

var CustomClass = $class({
     $extends: caph.module.renderer.View,
     $mixins: [caph.module.mixins.focus.Focusable]
 });

 var focusableComponent = new CustomClass();
 focusableComponent.active(false);

blur()

Blur focusable component.

Since:

2.0.0

Example

var CustomClass = $class({
     $extends: caph.module.renderer.View,
     $mixins: [caph.module.mixins.focus.Focusable]
 });

 var focusableComponent = new CustomClass();
 focusableComponent.blur();

defaultNextFocus(property, value) → {caph.module.mixins.focus.Focusable}

Sets next focused component for current component. / Gets next focused component for current component.

Parameters:

Name	Type	Description
`property`	String \| Object	A button name or next focus property name-value pair object.
`value`	String	A value to set for the property.

Since:

2.1.0

Returns:

If there is defaultNextFocus argument, then it returns itself to provide method chaining.
In case of no argument, it returns next focused component.

Type: caph.module.mixins.focus.Focusable

Example

var Component = caph.require('ui.base.Component');
 var component = new Component(); // mixin caph.module.mixins.focus.Focusable component
 var nextFocus = component.defaultNextFocus(caph.module.focus.Manager.Buttons.LEFT, caph.module.mixins.focus.Focusable.NONE);

domEvent(sendDomEvent) → {caph.module.mixins.focus.Focusable|boolean}

Sets send DOM event to focusable component or not. / Gets send DOM event to focusable component or not.
If you want to not fire Dom event(focus,blur) when focus, blur event is occurred by focus manager, make it false.

Parameters:

Name	Type	Argument	Description
`sendDomEvent`	Boolean	<optional>	true : send Dom Event false : not send Dom Event

Since:

2.0.0

Returns:

If there is an argument, then it returns itself to provide method chaining.
In case of no argument, it returns boolean value (sendDom).

Type: caph.module.mixins.focus.Focusable | boolean

Example

var CustomClass = $class({
     $extends: caph.module.renderer.View,
     $mixins: [caph.module.mixins.focus.Focusable]
 });

 var focusableComponent = new CustomClass();
 focusableComponent.domEvent(false);

focus()

Focus focusable component.

Since:

2.0.0

Example

var CustomClass = $class({
     $extends: caph.module.renderer.View,
     $mixins: [caph.module.mixins.focus.Focusable]
 });

 var focusableComponent = new CustomClass();
 focusableComponent.focus();

focusable(isFocusable) → {caph.module.mixins.focus.Focusable|boolean}

Sets focusable status. / Gets focusable status.
It is true if it can focused.

Parameters:

Name	Type	Argument	Description
`isFocusable`	Boolean	<optional>	true : focusable, false : not focusable.

Since:

2.0.0

Returns:

If there is an argument, then it returns itself to provide method chaining.
In case of no argument, it returns boolean value (isFocusable).

Type: caph.module.mixins.focus.Focusable | boolean

Example

var CustomClass = $class({
     $extends: caph.module.renderer.View,
     $mixins: [caph.module.mixins.focus.Focusable]
 });

 var focusableComponent = new CustomClass();
 focusableComponent.focusable(true);

focusContainer(isFocusContainer) → {caph.module.mixins.focus.Focusable|boolean}

Sets it is focuscontainer or not. / Gets it is focuscontainer or not.
The container which includes focusable components.

Parameters:

Name	Type	Argument	Description
`isFocusContainer`	caph.ui.base.Component	<optional>	target to get 'isFocusContainer' flag.

Since:

2.0.0

Returns:

If there is an argument, then it returns itself to provide method chaining.
In case of no argument, it returns boolean value (isFocusContainer).

Type: caph.module.mixins.focus.Focusable | boolean

Example

var CustomClass = $class({
     $extends: caph.module.renderer.View,
     $mixins: [caph.module.mixins.focus.Focusable]
 });

 var focusableComponent = new CustomClass();
 focusableComponent.focusContainer(true);

keyEvent(useKeyEvent) → {caph.module.mixins.focus.Focusable|boolean}

Sets focusable component will focus with key event or not. / focusable component will focus with key event or not.

Parameters:

Name	Type	Argument	Description
`useKeyEvent`	Boolean	<optional>	true : use Key Event false : not use Key Event

Since:

2.1.0

Returns:

If there is an argument, then it returns itself to provide method chaining.
In case of no argument, it returns boolean value (_useKeyEvent).

Type: caph.module.mixins.focus.Focusable | boolean

Example

var CustomClass = $class({
     $extends: caph.module.renderer.View,
     $mixins: [caph.module.mixins.focus.Focusable]
 });

 var focusableComponent = new CustomClass();
 focusableComponent.keyEvent(false);

level(level) → {caph.module.mixins.focus.Focusable|Number}

Sets focus level of focusable component. / Gets focus level of focusable component.

Parameters:

Name	Type	Argument	Description
`level`	Number	<optional>	(0: default, -1: always focusable, positive num: level idx)

Since:

2.0.0

Returns:

If there is an argument, then it returns itself to provide method chaining.
In case of no argument, it returns its focus level.

Type: caph.module.mixins.focus.Focusable | Number

Example

var CustomClass = $class({
     $extends: caph.module.renderer.View,
     $mixins: [caph.module.mixins.focus.Focusable]
 });

 var focusableComponent = new CustomClass();
 focusableComponent.level(3);

mouseEvent(useMouseEvent) → {caph.module.mixins.focus.Focusable|boolean}

Sets focusable component will focus with mouse event or not. / focusable component will focus with mouse event or not.

Parameters:

Name	Type	Argument	Description
`useMouseEvent`	Boolean	<optional>	true : use Mouse Event false : not use Mouse Event

Since:

2.1.0

Returns:

If there is an argument, then it returns itself to provide method chaining.
In case of no argument, it returns boolean value (_useMouseEvent).

Type: caph.module.mixins.focus.Focusable | boolean

Example

var CustomClass = $class({
     $extends: caph.module.renderer.View,
     $mixins: [caph.module.mixins.focus.Focusable]
 });

 var focusableComponent = new CustomClass();
 focusableComponent.mouseEvent(false);

visibility(isVisibile) → {caph.module.mixins.focus.Focusable|boolean}

Sets focusable component is visible or not. / Gets focusable component is visible or not

Parameters:

Name	Type	Argument	Description
`isVisibile`	Boolean	<optional>

Since:

2.1.0

Returns:

If there is an argument, then it returns itself to provide method chaining.
In case of no argument, it returns boolean value (_visibility).

Type: caph.module.mixins.focus.Focusable | boolean

Example

var CustomClass = $class({
     $extends: caph.module.renderer.View,
     $mixins: [caph.module.mixins.focus.Focusable]
 });

 var focusableComponent = new CustomClass();
 focusableComponent.visibility(false);