Hola Mundo 2: Indroduciendo interactividad a tu cuadro de mandos

Una vez que hemos creado nuestro primer cuadro de mandos con un grafico vamos a ver que es lo que tenemos que hacer para proporcionarle interactividad.

La forma de hacerlo es a trabes de javascript y objetos listeners.

Ya hemos explicado las propiedades genericas de los componentes vamos a ver como utilizarlas.

Necesitamos:

• Una función JavaScript que se encargue de ejecutar los cambios deseados. Es decir, una función donde yo defina las acciones a ejecutar.

• La invocación de esta función JavaScript para que realize los cambios.

• Algo que responda a estos cambios.

Tenemos un cuadro de mandos que nos está sirviendo de ejemplo. Este cuadro de mandos tiene un gráfico y un titulo. Lo que vamos a hacer es hacer que cambie el titulo en función del lugar del gráfico en el que picas.

para ello introduciremos los siguientes elemnetos en nuestro template.html

<!-- El titulo del cuadro de mandos. El objeto que cambiará -->

<h1><div id="ObjetoTitulo"></div></h1>

<!-- El objeto a sustituir -->

<div id="Pastel1"></div>

<div id="Pastel2"></div>



<script language="javascript" type="text/javascript">

// la definición de los componentes

miOtroPastel = 

{

  name: "miOtroPastel",
  type: "xaction",
  solution: "empleo",
  path: "miMiCuadro",
  action: "otro_chart.xaction",
  listeners:[],
  parameters: [],
  htmlObject: "Pastel2",
  executeAtStart: true

}

// el objeto titulo que tiene como listener la cadena titulo. Cuando la cadena strTitulo cambie, el objeto cambiará
titleString = 
{
  name: "cadenaTitulo",
  type: "text",
  title: "El titulo del cuadro de mandos",
  listeners:["strTitulo"],
  htmlObject: "ObjetoTitulo",
  executeAtStart: true,
  expression: function(){return this.title},
  preExecution:function(){
  	if( strTitulo == "null" ) {
		this.title = "Titulo del cuadro de mandos ";
	} 
	else  {
		this.title = "La empresa clicada es  " + strTitulo ;
	}
  },
  postExecution:function(){}
}


// Array de componentes separados por comas ,
var components = [ miOtroPastel , titleString];


// mi titulo -  Actuará de listener.
var strTitulo = "null";

// La función que cargará los componentes al inicializar el cuadro de mandos
function load(){

	Dashboards.init(components);

}


// función que invoco desde el grafico y a la que le paso el parámetro que me interesa
function clic(value) {
	Dashboards.fireChange('strTitulo',value);
}


// Inicializo 
load();

</script>

Ahora ya tengo todo lo necesario, tan sólo necesito invocar la función click(value). Necesito invocarla y pasarle el parámetro que me interesa. Eso se hace en la definición de la XACTION.

Abrimos la XACTION y nos vamos a la vista de proceso clicando en el icono a tal efecto:

Tras lo cual podemos introducir la invocación a nuestra función click.

Para ello lo que hacemos es introducir los elementos ( tag )

• <url-template>: Invocación a la función javascript:
• <paramName>: Parametro que se le pasará a la función javascript. En este caso es la columna de la consulta sql que contiene el nombre.

  <url-template>javascript:clic("{nombre}");</url-template>  
  <paramName>nombre</paramName>  

De este modo consigo pasarle el nombre de la empresa (en mi ejemplo) a la función javascript y con este nombre de empresa consigo actualizar el titulo del cuadro de mandos.

Este es el aspecto de la *xaction*

<?xml version="1.0" encoding="UTF-8"?>
<action-sequence> 
  <title/>
  <version>1</version>
  <logging-level>ERROR</logging-level>
  <documentation> 
    <author/>  
    <description>Empty blank action sequence document</description>  
    <help/>  
    <result-type/>  
    <icon/> 
  </documentation>

  <inputs/>

  <outputs> 
    <image-tag type="string"/> 
  </outputs>

  <resources/>
  
  <actions> 
    <action-definition> 
      <component-name>SQLLookupRule</component-name>
      <action-type>Relational</action-type>
      <action-outputs> 
        <query-result type="result-set" mapping="query_result"/> 
      </action-outputs>
      <component-definition> 
        <jndi><![CDATA[Empleo]]></jndi>  
        <query><![CDATA[select  nombre , sum(numero) as numero 
                        from dwh_oferta o, dwh_empresa e
                        where o.id_empresa = e.id
                        group by id_empresa
                        order by numero desc
                        limit 10]]></query>  
        <live><![CDATA[true]]></live> 
      </component-definition> 
    </action-definition>
  
    <action-definition> 
      <component-name>ChartComponent</component-name>
      <action-type>Pie Chart</action-type>
      <action-inputs> 
        <chart-data type="result-set" mapping="query_result"/> 
      </action-inputs>
      <action-outputs> 
        <image-tag type="string"/> 
      </action-outputs>
      <component-definition>
        <chart-attributes> 
          <chart-type>PieChart</chart-type>  
          <width><![CDATA[400]]></width>  
          <height><![CDATA[400]]></height>  
          <url-template>javascript:clic("{nombre}");</url-template>  
          <paramName>nombre</paramName>  
          <legend-font> 
            <size>10</size> 
          </legend-font> 
        </chart-attributes>
      </component-definition> 
    </action-definition>
 
  </actions> 
</action-sequence>

Y este es el resultado final:

Fijate que:

1. Al poner el raton sobre cada uno de los sectores de la tarta se invoca la función javascript click (2) que hemos implemnetado con el parametro del nombre de la empresa
2. Puedes comprobar que la función se invoca y cambia de parametro en la barra de estado
3. Puedes comprobar que antes de clickar en ningún elemento el titulo del cuadro de mandos es la definición inicial “Titulo del cuadro de mandos “

Y si clicamos sobre algúno de los cortes del pastel el titulo efectivamente cambia: