Este documento proporciona un tutorial sobre cómo crear un gráfico en SilverDev mediante 7 pasos: 1) crear un nuevo programa, 2) preparar la pantalla, 3) elegir el tipo de gráfico, 4) insertar datos, 5) compilar, 6) crear un CLP, y 7) poner a disposición la aplicación en MyDesk. El tutorial muestra cómo recuperar datos de tablas de ejemplo y representarlos en un gráfico circular para visualizar el número de libros por tema.

1. Entorno de desarrollo gráfico para IBM i
Tutorial SilverDev
¿Cómo crear un gráfico?

2. SilverDev – Tutorial – Crear un gráfico
Experia Europe -- Derechos reservados -- 2/ 19
¿De qué trata este tutorial?
1. Creación de un nuevo programa .................................................................... 3
2. Preparación de la pantalla .............................................................................. 6
3. Elección del tipo de gráfico ............................................................................ 9
4. Inserción de los datos ................................................................................... 11
5. Compilación .................................................................................................. 14
6. Creación de un CLP ....................................................................................... 15
7. Puesta a disposición en MyDesk .................................................................. 17
8. Resultado ...................................................................................................... 18

3. SilverDev – Tutorial – Crear un gráfico
Experia Europe -- Derechos reservados -- 3/ 19
1. Creación de un nuevo programa
Poner en marcha SilverDev Designer y seleccionar una biblioteca en el menú Tools > Context.
Aquí seleccionamos la biblioteca SILVERDEMO

4. SilverDev – Tutorial – Crear un gráfico
Experia Europe -- Derechos reservados -- 4/ 19
Crear un nuevo programa con el icono « + »
en la pestaña Context.
Este programa contendrá SQL :
Seleccionar el tipo SVDSQLRPG

5. SilverDev – Tutorial – Crear un gráfico
Experia Europe -- Derechos reservados -- 5/ 19
El nombre del programa aparece en el listado del contexto.
Hacer doble clic para abrirlo

6. SilverDev – Tutorial – Crear un gráfico
Experia Europe -- Derechos reservados -- 6/ 19
2. Preparación de la pantalla
Creamos primero una zona de separación arriba de la pantalla con el componente CPanel, en la pestaña Components.
Hacer clic en el icono y otro clic en la pantalla para colocarlo.
Para que el componente se adapte al tamaño de la pantalla, utilizar, en la pestaña Inspector, la valor alTop de la propiedad Align.

7. SilverDev – Tutorial – Crear un gráfico
Experia Europe -- Derechos reservados -- 7/ 19
Creamos el botón que servirá a cargar los datos.
Utilizar el componente CButton, y nombrarlo "Load" con su propiedad Caption en la pestaña Inspector

8. SilverDev – Tutorial – Crear un gráfico
Experia Europe -- Derechos reservados -- 8/ 19
Preparamos la zona de visualización del gráfico:
Utilizar el componente CChart.
Con valor alClient de la propiedad Align, el componente llena todo el resto de la pantalla.

9. SilverDev – Tutorial – Crear un gráfico
Experia Europe -- Derechos reservados -- 9/ 19
3. Elección del tipo de gráfico
Hacer doble clic en la zona del gráfico.
Aparece esta pop-up.
Hacer clic sobre el icono "nuevo" arriba a la izquierda para insertar una nueva serie.
En este cuadro de diálogo se elige el tipo de gráfico.
Aquí seleccionamos el gráfico circular.

10. SilverDev – Tutorial – Crear un gráfico
Experia Europe -- Derechos reservados -- 10/ 19
La pantalla está lista para recibir los datos.
Cuidado, en esta pantalla sólo se previsualiza el fúturo gráfico. No contiene datos reales.

11. SilverDev – Tutorial – Crear un gráfico
Experia Europe -- Derechos reservados -- 11/ 19
4. Inserción de los datos
Volver al botón Load para cargar los datos. Seleccionarlo en la pantalla
En la pestaña Events, seleccionar OnClick
y crear el evento con una doble clic
El código correspondiente se añade automáticamente en la fuente:

12. SilverDev – Tutorial – Crear un gráfico
Experia Europe -- Derechos reservados -- 12/ 19
Recuperamos datos de dos tablas incluidas en la biblioteca de demostración de SilverDev:
Una tabla que contiene un listado de libros (sddmbks) y otra que contiene los temas de estos libros (sddmthm).
En el gráfico, visualizaremos el número de libros en cada uno de los temas.
Declaramos las variables :
Y preparamos la consulta SQL :

13. SilverDev – Tutorial – Crear un gráfico
Experia Europe -- Derechos reservados -- 13/ 19
Antes de insertar el resultado de la consulta en la pantalla, hace falta limpiar los datos previos para que no se superpongan.
Para ésto, utilizar la función SilverDev sdSeriesClear:
Ahora se puede añadir los datos en la serie contenida en el gráfico,
con la función SilverDev sdAddPie
:
Consejo : La tecla F1 permite acceder a la ventana de ayuda de las funciones SilverDev

14. SilverDev – Tutorial – Crear un gráfico
Experia Europe -- Derechos reservados -- 14/ 19
5. Compilación
Guardar y compilar la pantalla desde el menú Forms
En el menú Compiling, generar el programa.

15. SilverDev – Tutorial – Crear un gráfico
Experia Europe -- Derechos reservados -- 15/ 19
6. Creación de un CLP
Para poner la aplicación a disposición de los usuarios, se necesita un CLP:
Crear en un nuevo miembro
En el que añadir la biblioteca
y llamar el programa

16. SilverDev – Tutorial – Crear un gráfico
Experia Europe -- Derechos reservados -- 16/ 19
Guardarlo
Y compilarlo :

17. SilverDev – Tutorial – Crear un gráfico
Experia Europe -- Derechos reservados -- 17/ 19
7. Puesta a disposición en MyDesk
Poner en marcha MyDesk y, en el lugar donde se quiere poner la nueva aplicación, hacer un clic derecho y “New Application”.
Llenar el cuadro de diálogo con el nombre de la nueva aplicación, el nombre del programa y el comando call para llamar el CLP
En la pantalla siguiente, seleccionar las autorizaciones de la aplicación.

18. SilverDev – Tutorial – Crear un gráfico
Experia Europe -- Derechos reservados -- 18/ 19
8. Resultado
Se puede poner en marcha la aplicación, y cargar los datos haciendo clic en el botón Load :

19. SilverDev – Tutorial – Crear un gráfico
Experia Europe -- Derechos reservados -- 19/ 19
Más información en www.silverdev.com