Chips:Checkbox/es

From xQuidWiki

Jump to: navigation, search

Contents

Checkbox

El componente checkbox se corresponde con un check.

Propiedades

Propiedad Tipo Descripción Valor por defecto
disabled boolean Indica si el componente está deshabilitado ó no. false
displayName string Nombre que identifica al componente. checkbox+(nº de componente tipo checkbox)
skin string Nombre de la clase CSS definida en la hoja de estilo asociada al componente. checkbox
state string Nombre de los diferentes estados CSS que puede contener el componente definidos en la hoja de estilo asociada al componente. normal
style string Estilos CSS definidos en el propio componente.
name string Nombre que identifica al componente.
focusable boolean Indica si el componente puede obtener el foco ó no. true
selected boolean Indica si el check está marcado ó no false
tabindex int Posición que ocupa el componente en la tabulación. -1
visible boolean Indica si el componente es visible en la página ó no. true
value string Valor asociado al check si está marcado. dummyVal
x int Coordenada en el eje de abcisas donde se va a pintar el componente Depende donde se tire el componente
y int Coordenada en el eje de ordenadas donde se va a pintar el componente Depende donde se tire el componente

Métodos

Eventos

  • onBlur
Description
Este evento se dispara cuando el checkbox pierde el foco.
Event properties
  • source - Esta propiedad contiene al checkbox que ha disparado el evento.
  • onClick
Description
Este evento se dispara cuando se hace click sobre el propio check. Al hacer click sobre el check tambien se lanza el evento onSelectionChanged. Se pueden enlazar métodos propios (wiring) para realizar alguna acción asociada a la selección del check.
Event properties
  • source - Contiene al check que ha disparado el evento.
  • onEnter
Description
Este evento se dispara cuando se pulsa la tecla Enter teniendo el foco el checkbox. El comportamiento es igual que hacer click sobre el checkbox .
Event properties
  • source - Esta propiedad contiene al checkbox que ha disparado el evento.
  • onFocus
Description
Este evento se dispara cuando el checkbox obtiene el foco.
Event properties
  • source - Esta propiedad contiene al checkbox que ha disparado el evento.
  • onSelectionChanged
Description
Este evento se dispara cuando cambia la selección del checkbox.
Event properties
  • source - (object) - Contiene al check que ha disparado el evento.
  • isSelected - (boolean) - Booleano que indica si el check está seleccionado.

Ejemplo de uso 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
<!-- /static is the path where Kernel find the modules to load -->
<meta name="kernel:baseURI" content="/static" />
<!-- Importing Draw Core -->
<meta name="kernel:import" content="xquid.chips.checkbox"/>
<meta name="kernel:init" content="initMyPage();"/>
<title>Standalone test for component xquid.chips.checkbox</title>
<link rel="StyleSheet" href="/static/xquid/aux_kernel/css/simpleLog.css" type="text/css">
<link rel="StyleSheet" href="/static/xquid/aux_kernel/css/desktopProgressSmall.css" type="text/css">
<!-- xQuid Framework -->
<script language="JavaScript" type="text/javascript" src="/static/xquid/kernel.js"></script>
<script language="JavaScript" type="text/javascript" src="/static/xquid/aux_kernel/kernelProgressSmall.js"></script>
<!--
<script language="javascript" type="text/javascript" src="/static/xquid/aux_kernel/firebug-lite-compressed.js"></script>
<script language="JavaScript" type="text/javascript" src="/static/xquid/aux_kernel/fireBugLog.js"></script>
<script language="JavaScript" type="text/javascript" src="/static/xquid/aux_kernel/fireBugConfig.js"></script>
-->
<script language="JavaScript" type="text/javascript" src="/static/xquid/aux_kernel/simpleLog.js"></script>
<script language="JavaScript" type="text/javascript" src="/static/xquid/aux_kernel/desktopConfig.js"></script>
<script language="JavaScript" type="text/javascript">
//ats.kernel.VERBOSE=true;
var uiFactory={
   '$type$':'xquid.chips.checkbox',
   'parentId':'parentDiv',
   'x':0,
   'y':0
}
var uiInstance;
function initMyPage()
{
  try{
    uiInstance=uiFactory.newPart();
    uiInstance.$set('selected',true);
    uiInstance.$set('value',1);
    uiInstance.addOnSelectionChangedListener(this.checkSelection,this);
    uiInstance.render();
  }catch(err)
  {
    alert(err+":"+err.message);
  }
}

function checkSelection(ev){
  if(ev.isSelected){
    alert("checkbox is selected, with value "+ev.source.value);
  }
  else{
    alert("checkbox is NOT selected, with value "+ev.source.value);
  }
}
</script>
</head>
<body style="border: 0px solid;width:100%;height: 100%;margin:0px;padding:0px;position:absolute">
<div id="parentDiv" style="margin:0px;padding:0px;top:0px;left:0px;width: 100%;height: 100%;border-style: none;border-width: 0px;position: absolute;">		
</div>
</body>
</html>

En este ejemplo instanciamos un check, lo seleccionamos,le cambiamos la propiedad value y le asociamos un listener al evento onSelectionChanged. En el método que se llama al producirse el evento mostramos diferentes mensajes según esté el check seleccionado ó no.


Para poder levantar los componentes debemos importar el modulo de los componentes que queramos usar, en este caso xquid.chips.checkbox. También indicamos a que función JavaScript llamar para la inicialización de la página: 

<!-- Importing Draw Core -->
<meta name="kernel:import" content="xquid.chips.checkbox"/>
<meta name="kernel:init" content="initMyPage();"/>

Podemos habilitar/deshabilitar (deshabilitado por defecto) un LOG para poder ver los posibles errores en el componente mediante la directiva: 

//ats.kernel.VERBOSE=true;

Para poder instanciar los componentes hacemos uso de un objeto JSON indicándole el tipo de componente que queremos instanciar y el identificador del div donde lo va a pintar: 

var uiFactory={
   '$type$':'xquid.chips.checkbox',
   'parentId':'parentDiv',
   'x':0,
   'y':0
}

Para instanciar un checkbox llamamos al método newPart() del objeto uiFactory creado anteriormente: 

function initMyPage()
{
  try{
    uiInstance=uiFactory.newPart();
    ...

Una vez instanciado el checkbox ya podemos modificar sus propiedades y usar sus métodos. Para un mejor uso de la API xQuid debe emplearse .$set, si no se va a emplear una expresión de EL dentro del nombre del elemento a cambiar: 

uiInstance.$set('selected',true);
uiInstance.$set('value',1);

Vamos a añadir un listener a un evento del checkbox, indicándole que acción queremos realizar cuando se dispare dicho evento y el contexto para la ejecución del método. Para añadir un listener al evento onSelectionChanged del checkbox usamos la siguiente notación: 

uiInstance.addOnSelectionChangedListener(this.checkSelection,this);

En la función de callback asociada al listener hacemos uso del objeto que propaga el evento de la siguiente manera: 

function checkSelection(ev){
  if(ev.isSelected){
    alert("checkbox is selected, with value "+ev.source.value);
  }
  else{
    alert("checkbox is NOT selected, with value "+ev.source.value);
  }
}

Por último, para pintar el checkbox en la página llamamos al método render() de instancia del checkbox: 

uiInstance.render();


Retrieved from "http://xquid.sourceforge.net/wiki/index.php/Chips:Checkbox/es"
Personal tools