Hola Mundo: Tu primer cuadro de mandos en 4 pasos

Como hemos dicho en la introducción la expresión minima de un cuadro de mandos consta de 3 elementos:

• Un fichero .xcdf con la definición de nuestro cuadro de mandos.

• Una plantilla de documento plantilla de la página normalmente ubicada den system/pentaho-cdf que define el aspecto de la página que mostrará el cuadro de mandos. Quiero decir, si tiene menús, cabeceras, etc.

• Una plantilla de contenido donde se definen los componentes que incluirá nuestro cuadro de mandos y su interacción entre ellos.

<!-- El titulo  -->
<h1> Mi cuadro de mandos </h1>


<!-- El subtitulo -->

<div> hola mundo </div>

<!-- .... -->

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

	// ---------- La definición de los componentes --------//
	// ..........  //
	// ----------  //

	// Los componentes que serán cargados en el cuadro de mandos
	// se declaran en este array
	var components =  [];

	// La función de carga, la que se ejecuta al cargar la página
	function load(){
		Dashboards.init(components);
	}

	// Invocamos  a la función load
        load();

</script>

Y esto nos daría un resultado tal que así:

El componente más básico es la xaction.

Una vez creada una xaction que muestra un grafico:

Vamos a declarar el componente xaction en nuestro cuadro de mandos para comprobar su comportamiento:

template.html

<!-- El titulo del cuadro de mandos -->

<h1>Titulo del Cuadro de mandos</h1>



<!-- El objeto a sustituir -->

<div id="Objeto_a_Sustituir"></div>



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

// la definición de los componentes

// Mi primer componente, una xaction

miPastel = 

{

  name: "miPastel",

  type: "xaction",

  solution: "empleo",

  path: "miMiCuadro",

  action: "report_chart.xaction",

  listeners:[],

  parameters: [],

  htmlObject: "Objeto_a_Sustituir",

  executeAtStart: true

}



// Array de componentes separados por comas ,

var components = [ miPastel ];


// La función que cargará los componentes al inicializar el cuadro de mandos

function load(){

	Dashboards.init(components);

}

// Inicializo 

load();

</script>

Y este es nuestro cuadro de mandos estatico: