Introducción a los gadgets de hojas de cálculo

Un gadget de hoja de cálculo es un pequeño programa que interactúa con el contenido de una hoja de cálculo. Su instancia se crea visualmente, ya sea dentro de la misma hoja de cálculo o en otra página web que admita Gadgets de Google.

Los gadgets de hojas de cálculo pueden:
  • añadir funciones específicas a una hora de cálculo,
  • combinar datos de hojas de cálculo con contenido web,
  • visualizar datos de hojas de cálculo de formas únicas,
  • presentar información de una hoja de cálculo en otras páginas web.
Para ver cómo se utilizan los gadgets de hojas de cálculo existentes, visita esta página de ejemplos.

Para ver dónde se accede a los gadgets de hojas de cálculo en el producto Documentos de Google, inicia sesión en Documentos de Google y haz lo siguiente:
  • Abre una hoja de cálculo nueva
  • Haz clic en el icono Gráfico o el menú "Insertar"
  • Selecciona "Gadget..." para ver la lista de gadgets públicos disponibles.

Tu primer gadget de hoja de cálculo:

Para escribir un nuevo gadget de hoja de cálculo, empieza con el código que se incluye a continuación y experimenta con nuestra lógica. El ejemplo recupera y muestra, como una columna, el contenido de un rango de celdas. Todas las celdas que contienen "world" aparecen en rojo. El ejemplo consta de tres partes principales: definición del encabezado de Google Gadgets, uso de Google Visualizations para recuperar los datos de la hoja de cálculo y ejecución de nuestra lógica para generar el código HTML. Esto requiere otras dos API: la API de Google Gadgets y la API de visualización de Google. A medida que tus necesidades técnicas se hagan más complejas, deberás consultar la información detallada relativa a dichas API.

Empieza por el encabezado de Google Gadgets:


 

Usa la API de visualización para recuperar datos de hoja de cálculo. En primer lugar, carga el cargador común de Google, que nos da la API de visualización para leer el contenido de la hoja de cálculo:


 

<script src="http://www.google.com/jsapi" type="text/javascript"></script>

Define algún área HTML (una etiqueta DIV en este caso) para colocar nuestros resultados:


 

<div id="tablediv" style="overflow: auto;"><img src="http://www.google.com/ig/images/spinner.gif" /></div>

 

Carga por orden todas las API e indica el nombre de una función ("sendQuery") para ejecutarla una vez cargada la API:


 

<script> var gadgetHelper = null; _IG_RegisterOnloadHandler(loadVisualizationAPI); function loadVisualizationAPI() { google.load("visualization", "1"); google.setOnLoadCallback(sendQuery); }

Crea una consulta (formada por las preferencias de usuario del gadget) y, a continuación, envíala al origen de datos de la hoja de cálculo. Indica además el nombre de una función ("handleQueryResponse") para ejecutarla una vez recuperados los datos de la hoja de cálculo:


 

function sendQuery() { var prefs = new _IG_Prefs(); // Preferencias de usuario gadgetHelper = new google.visualization.GadgetHelper(); var query = gadgetHelper.createQueryFromPrefs(prefs); query.send(handleQueryResponse); }

La lógica del núcleo. Procesa los datos de la hoja de cálculo como quieras. En este caso, creamos HTML para volver a presentarlo al usuario. Utilizaremos comentarios en el código para ofrecer una descripción paso a paso de lo que estamos haciendo:


 

function handleQueryResponse(response) { /** * Utiliza la clase GadgetHelper de visualización para administrar los errores */ if (!gadgetHelper.validateResponse(response)) { return; // Administración de errores predeterminada realizada, salir. } /** * OBTENER LOS DATOS DESDE LA HOJA DE CÁLCULO; sentimos el uso de mayúsculas, pero este paso es fundamental. */ var data = response.getDataTable(); var html = []; // iniciar la cadena de salida de HTML html.push('Looking for the secret word\n'); /** * Procesar todas las filas del rango especificado */ for (var row = 0; row < data.getNumberOfRows(); row++) { /** * Procesar las columnas de cada fila */ for (var col = 0; col < data.getNumberOfColumns(); col++) { /** * OBTENER UN VALOR DE DATOS DEL RANGO; sentimos utilizar mayúsculas otra vez, pero es que éste es el otro paso fundamental */ var formattedValue = data.getFormattedValue(row, col); formattedValue = escapeHtml(formattedValue); /** * Busca 'world'... añade la palabra al html de cualquier modo, pero aplica un formato distinto */ if (formattedValue == 'world') { html.push('<span style="color:red; font-size:24pt; font-weight:bold;">'); html.push(formattedValue); html.push('</span>'); } else { html.push(formattedValue); } html.push('\n'); } } /** * Establecer el html generado en el div contenedor. */ var tableDiv = _gel('tablediv'); tableDiv.innerHTML = html.join(''); tableDiv.style.width = document.body.clientWidth + 'px'; tableDiv.style.height = document.body.clientHeight + 'px'; }

Define el código de soporte que necesites (como esta práctica función para caracteres especiales para la salida HTML):


 

function escapeHtml(text) { if (text == null) { return ''; } return _hesc(text); } </script>

Termina toda la cuestión de los gadgets con etiquetas XML de finalización:


 

]]> </Content> </Module>


Y ya lo tienes. Aquí está el código incrustado en el Editor de Google Gadget. Puedes jugar con nuestra lógica con total libertad.

 

(Nota: Es posible que esto aparezca en Safari como una zona en blanco)
Para desarrollar e implementar completamente un gadget de hoja de cálculo, simplemente:
  1. Escribe el código.
  2. Coloca el código en un servidor.
  3. Accede al código desde el editor de hojas de cálculo de Documentos de Google.
Aquí tienes algunas cosas que podrían resultarte útiles durante cada paso de este proceso:

1. Escritura del código:

Herramientas para escribir, editar y guardar el código del gadget online:
  • El Editor de Google Gadget (GGE) te permite editar, previsualizar, guardar, cargar y publicar código de gadget. Se utiliza en esta misma página para que puedas interactuar con nuestro código de ejemplo. El propio GGE es un gadget (¡meta!).
  • Google Home Project Hosting es otra opción para publicar tu código online.
  • Si prefieres un editor o proveedor de alojamiento distinto, puedes usarlo con total libertad.
Uso del Editor de Google Gadgets
  • Para configurar el Editor de Google Gadget (GGE) para el desarrollo de gadgets:
    1. Coloca el GGE en su propia pestaña.
    2. Edita la configuración de la pestaña haciendo clic en la pequeña flecha que hay junto al nombre de la pestaña y seleccionando "Editar esta pestaña". Si cambias el diseño a una o dos columnas, el GGE aparecerá más ancho.
  • El GGE te permite guardar y cargar código desde un servidor de Google. Para obtener la URL del código, haz clic en el hipervínculo situado en la parte superior derecha del GGE.

2. Colocación del código en un servidor:

Si decides utilizar el Editor de Google Gadgets, tu código ya reside en un servidor de Google. Puedes obtener la URL de cualquier gadget específico abriéndola en el Editor de Google Gadgets, haciendo clic con el botón derecho del ratón (o CTRL+clic en un Mac) en el nombre o enlace del gadget en el lado superior derecho y seleccionando "Copiar enlace". Esto te prepara para el siguiente paso: "Acceso al código del gadget". Si eliges otro método de alojamiento para tu gadget, solo necesitas obtener la URL completa del gadget.

3. Acceso al código del gadget desde el editor de hojas de cálculo:

Comprobación y uso de tu gadget personalizado
  1. Ahora que has alojado el gadget en algún servidor, copia la URL de tu gadget. Debe terminar en ".xml".
  2. En una hoja de cálculo, haz clic en "Insertar" > "Gadget..." y selecciona "Personalizado..." en el lado izquierdo del selector de gadgets.
  3. Pega la URL en el campo. NOTA IMPORTANTE: Si estás probando tu gadget,, añade la opción "?nocache" al final de la URL para asegurarte de que el gadget se actualiza al cambiar el código.
  4. Haz clic en "Añadir". Tu gadget aparecerá ahora como una ventana flotante encima de la hoja de cálculo. Ahora puedes establecer las preferencias de usuario e interactuar con el gadget.
  5. Si el gadget no se comporta del modo esperado, comprueba estas sugerencias de depuración.
Compartir el gadget con otras personas
  • Si quieres compartir tu gadget con otras personas, puedes compartir con ellos una hoja de cálculo que tenga el gadget o, si deseas compartir solo el gadget y no la hoja de cálculo, necesitarás enviarles la URL y pedirles que añadan tu gadget a sus hojas de cálculo como un gadget personalizado. Estamos trabajando para facilitarte esta tarea.
Envío del gadget para que lo utilice todo el mundo