El SiteKiosk Object Model de SiteKiosk ofrece cientos de objetos, métodos y propiedades para permitir una programación personalizada de SiteKiosk, adicional a los numerosos ajustes que ya ofrece el asistente de configuración. También se desarrolló para el motor de navegador Internet Explorer, y tras la incorporación del motor de navegador Chrome se añadió el método callHostFunction para permitir emulación de las mismas funciones para el motor de navegador Chrome, además de un desarrollo paulatino de un Object Model para motor Chrome.
En este tema tratamos cómo modificar el DOM (Document Object Model) de una página web con el fin de adaptarla a un mejor uso en un Kiosco.
Las páginas web que se utilizan en cualquier proyecto de un kiosco, en general son creadas con antelación antes de tener en mente su potencial desde un terminal. En la mayoría de los casos no tiene importancia. Pero en ocasiones los requerimientos del proyecto para el kiosco pueden necesitar un uso particular para su uso en el terminal (ej. el cambio de tamaño de un botón). Lo ideal sería poder modificar una página en cuestión específicamente para su uso en el kiosco, pero esto no siempre es posible, por ejemplo si no tenemos acceso directo a la edición de esa página.
Con la ayuda del SiteKiosk Object Model el código que permite que la páginas sean mostradas en el navegador SiteKiosk (para el motor de navegador Internet Explorer, para el caso de Chrome ver el tema equivalente) puede alterarse editando directamente el DOM de esa página. Para ello necesitará echar un vistazo al código fuente de la página, por ejemplo utilizando la herramienta para desarrollador de IE, Chrome o Firefox, y encontrar las secciones de código en las que queremos aplicar los cambios.
En el siguiente ejemplo se muestra cómo hacer esto aplicado sobre la página de Google para mostrar "buscar SiteKiosk" como leyenda del botón buscar, y establecer "SiteKiosk" como criterio de búsqueda. Naturalmente, puede cambiar el texto a mostrar y criterio de búsqueda de acuerdo con sus preferencias para adaptarlo a su proyecto. Copie el código de ejemplo al bloc de notas (o un editor de html), sálvelo como un archivo script con extensión ".js" con el nombre que prefiera, por ejemplo, manipulardom.js, y guárdelo por ejemplo en la carpeta ..\SiteKiosk\Html (que cuenta con permisos por defecto para su ejecución). Abra el asistente de configuración de SiteKiosk, vaya a Página de inicio y navegador -> Navegador -> Diseño de navegador, haga clic en el botón Avanzado y añada el script como script externo. Guarde la configuración, arranque SiteKiosk y vaya a https://www.google.com" onclick="window.open(this.href);return false; para ver el resultado.
Código: Seleccionar todo
SiteKiosk.Logfile.OnMessage = OnMessage;
function OnMessage(seq, time, utcoff, awtype, awlevel, facility, text)
{
if(text.indexOf("Navigation:") !== -1 && text.indexOf("google.") !== -1)
evtid = SiteKiosk.Scheduler.AddDelayedEvent(1000, ManipulateDOM);
}
function ManipulateDOM()
{
for (var i=1;i<=SiteKiosk.WindowList.Windows.Count;i++)
{
try
{
if(SiteKiosk.WindowList.Windows(i).SiteKioskWindow.SiteKioskWebBrowser.WebBrowser.LocationURL.indexOf("https://www.google.") !== -1)
{
SiteKiosk.WindowList.Windows(i).SiteKioskWindow.SiteKioskWebBrowser.WebBrowser.Document.getElementsByName('q').item(0).value = "SiteKiosk";
SiteKiosk.WindowList.Windows(i).SiteKioskWindow.SiteKioskWebBrowser.WebBrowser.Document.getElementsByName('btnK').item(1).value = "Buscar SiteKiosk";
}
}
catch(e)
{
//SiteKiosk.Logfile.Notification("Editing the DOM failed for window: " + SiteKiosk.WindowList.Windows(i).ItemText); //Debug
}
}
}Tenga en cuenta para este o cualquier otro ejemplo donde manipule una página que debe cuidar todos los aspectos relativos a las leyes locales, propiedad intelectual y copyright, etc. También tenga en cuenta que este ejemplo funcionará mientras que Google no realice cambios en su página web, y de forma análoga para adaptar el funcioamiento de cualquier página web de terceros en su proyecto de kiosco.