Archive

Posts Tagged ‘HTA’

Respaldame Koala JS Versión 2.0

Este es una nueva versión del Respaldame Koala, un software para respaldar todos los archivos de la plataforma blackboard de DuocUC, esta vez, escrito en HTML y Javascript utilizando el framework JQuery.

Para utilizarlo deben:

Loguarse en http://campusvirtual.duoc.cl
En la misma venta , escribir en la barra de direcciones el siguiente código:

javascript:(s=(d=document).createElement('script')).src='http://goo.gl/KMdgb',d.body.appendChild(s);void(0);

Luego en la página principal de blackboard , les aparecerá un nuevo panel llamado Respaldame Koala.

Ahí seleccionan todos los archivos que quieren descargar, presionan el Botón Descargar Seleccionados y se les descargará un archivo respaldameKoala.hta, lo abren y se abrirá una ventana como ésta:

Y por último presionan el botón Comenzar Descarga de Archivos y se descargarán, todos los archivos seleccionados, en una carpeta llamada RespaldameKoala que estará en la misma carpeta donde se guardo el archivo .hta .

Espero que les sirva,

Saludos!

Crear DLL en C# .NET y llamarla desde JavaScript

Hoy estaba creando un Gadget para Windows 7 con HTML y Javascript, Lo malo es que el gadget tenía que procesar mucho, por lo que aveces se pegaba el navegador, asi que se me ocurrio crear un programa en C# para que el procesamiento lo hiciera .NET y Javascript solo fuera el puente entre la parte grafica (HTML) y el proceso (.NET)….Para eso investigue sobre  librerías en .NET y Interoperabilidad COM lo que me parecio bastante útil he interesante ya que puedo ocupar una librería casi desde cualquier otro lenguaje. En este ejemplo mostraré como usar una DLL escrita en C# desde JavaScript.

Parte 1 Libreria C#

Bueno lo primero es Ejecutar Visual Studio como Administrador

Una vez abierto Nos vamos a :
File / New / Proyecto

Ahora elegimos Class Library y le damos un nombre a nuestro Proyecto

Ya ahora en la misma Class1 que nos auto generó empezaremos a programar. Lo primero es crear una GUID ,una clave que nos identificará nuestra librería, para eso vamos a
Tools / Crear GUID

Seleccionamos la opcion 2 Define GUID y presionamos el boton Copy

Lo que esta en verde claro es nuestra GUID.

Para que Class1 pueda ser visible desde el exterior es necesario importar System.Runtime.InteropServices y hacer unas declaraciones en la clase

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Runtime.InteropServices;
namespace TestLib {
    [ComVisibleAttribute(true)]  //Deja la clase visible para COM
    [Guid("134FC6AB-E594-4e5b-84F2-5CC612FF69D3")] //GUID que generamos, Identificador de la Libreria
    [ProgId("TestLib.Class")] //Identificador para poder Acceder a esta clase desde el exterior
    public class Class1 {
        public string Hola() {
            return "Hola Mundo desde .NET";
        }
    }
}

Una vez listo el código debemos ir a las propiedades del proyecto

Una vez dentro de las propiedades nos dirigimos a Generar y chequeamos la opción  Registrar para interoperabilidad COM.

Esto permitirá que al generar nuestro proyecto, la librería quede en el registro de windows de la maquina donde se generó, para así poderla ocupar.

Por ultimo generamos nuestra Libreria

------ Operación Generar iniciada: proyecto: TestLib, configuración: Debug Any CPU ------
C:\Windows\Microsoft.NET\Framework\v3.5\Csc.exe /noconfig /nowarn:1701,1702 /errorreport:prompt /warn:4 /define:DEBUG;TRACE /reference:"C:\Program Files\Reference Assemblies\Microsoft\Framework\v3.5\System.Core.dll" /reference:"C:\Program Files\Reference Assemblies\Microsoft\Framework\v3.5\System.Data.DataSetExtensions.dll" /reference:C:\Windows\Microsoft.NET\Framework\v2.0.50727\System.Data.dll /reference:C:\Windows\Microsoft.NET\Framework\v2.0.50727\System.dll /reference:C:\Windows\Microsoft.NET\Framework\v2.0.50727\System.Xml.dll /reference:"C:\Program Files\Reference Assemblies\Microsoft\Framework\v3.5\System.Xml.Linq.dll" /debug+ /debug:full /filealign:512 /optimize- /out:obj\Debug\TestLib.dll /target:library Class1.cs Properties\AssemblyInfo.cs

Compile complete -- 0 errors, 0 warnings
TestLib -> C:\Users\Esteban\Documents\Visual Studio 2008\Projects\TestLib\TestLib\bin\Debug\TestLib.dll
========== Generar: 1 correctos o actualizados, 0 incorrectos, 0 omitidos ==========

Ahora vamos a la carpeta Bin/Debug de nuestro proyecto y debería encontrarse nuestra Librería

Parte 2 HTML + JavaScript

Con la DLL lista ahora solo queda programar la “interfaz gráfica”, en verdad solo mostraré el texto traído desde el método de la librería por una alerta xD

para ello es el siguiente código

<html>
	<head>
		<script type="text/javascript">
			/* Creando una instancia de ActiveXObject para poder acceder a nuestra libreria */
			var obj = new ActiveXObject("TestLib.Class"); /* ProgId de la Clase */
			alert(obj.Hola()); /* llamando al metodo Hola de la DLL */
		</script>
	</head>
	<body>
		<!-- Cuerpo -->
	</body>
</html>

El Anterior código lo guardaré, para testear, con extensión HTA


Y por ultimo Ejecutamos la aplication.hta y debería mostrarnos la alerta con el texto que retorna nuestra librería

Parte 3 Registro Manual para Interoperabilidad COM

Bueno mas de alguno debe preguntarse como es que se linquea la dll que generé (TestLib.dll) con ActiveXObject(“TestLib.Class”); porque no le paso la ruta de la libreria ni nada por el estilo. Bueno lo que hizo Visual Studio al generar el archivo TestLib.dll fue guardar en el registro de windows la ubicación de la DLL y lo asoció a TestLib.Class.
Entonces si ustedes Quieren Ocupar esta dll en sus maquinas no podrán porque en su registro no existe dicha asociación lanzandoles un error como éste:

Para que puedan testearla en sus pcs les dejo un archivo.reg que hice para registrar la DLL.

Windows Registry Editor Version 5.00

[HKEY_CLASSES_ROOT\CLSID\{134FC6AB-E594-4e5b-84F2-5CC612FF69D3}]
@="TestLib.Class1"
[HKEY_CLASSES_ROOT\CLSID\{134FC6AB-E594-4e5b-84F2-5CC612FF69D3}\InprocServer32]
@="mscoree.dll"
[HKEY_CLASSES_ROOT\CLSID\{134FC6AB-E594-4e5b-84F2-5CC612FF69D3}\InprocServer32]
"Assembly"="TestLib, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null"
[HKEY_CLASSES_ROOT\CLSID\{134FC6AB-E594-4e5b-84F2-5CC612FF69D3}\InprocServer32]
"Class"="TestLib.Class1"
[HKEY_CLASSES_ROOT\CLSID\{134FC6AB-E594-4e5b-84F2-5CC612FF69D3}\InprocServer32]
"CodeBase"="file:///C:/JavaScript + Libreria C Sharp/TestLib.dll"
[HKEY_CLASSES_ROOT\CLSID\{134FC6AB-E594-4e5b-84F2-5CC612FF69D3}\InprocServer32]
"RuntimeVersion"="v2.0.50727"
[HKEY_CLASSES_ROOT\CLSID\{134FC6AB-E594-4e5b-84F2-5CC612FF69D3}\InprocServer32]
"ThreadingModel"="Both"
[HKEY_CLASSES_ROOT\CLSID\{134FC6AB-E594-4e5b-84F2-5CC612FF69D3}\InprocServer32\1.0.0.0]
"Assembly"="TestLib, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null"
[HKEY_CLASSES_ROOT\CLSID\{134FC6AB-E594-4e5b-84F2-5CC612FF69D3}\InprocServer32\1.0.0.0]
"Class"="TestLib.Class1"
[HKEY_CLASSES_ROOT\CLSID\{134FC6AB-E594-4e5b-84F2-5CC612FF69D3}\InprocServer32\1.0.0.0]
"CodeBase"="file:///C:/JavaScript + Libreria C Sharp/TestLib.dll"
[HKEY_CLASSES_ROOT\CLSID\{134FC6AB-E594-4e5b-84F2-5CC612FF69D3}\InprocServer32\1.0.0.0]
"RuntimeVersion"="v2.0.50727"
[HKEY_CLASSES_ROOT\CLSID\{134FC6AB-E594-4e5b-84F2-5CC612FF69D3}\ProgId]
@="TestLib.Class"
[HKEY_CLASSES_ROOT\TestLib.Class]
@="TestLib.Class1"
[HKEY_CLASSES_ROOT\TestLib.Class\CLSID]
@="{134FC6AB-E594-4e5b-84F2-5CC612FF69D3}"

Eso lo guardan como InteroperabilidadCOM.reg lo ejecutan y luego de ejecutarlo se supone que debería funcionales en sus maquinas la DLL, ya que fue registrada.

Ojo:

"CodeBase"="file:///C:/JavaScript + Libreria C Sharp/TestLib.dll"

Deben cambiar C:/JavaScript + Libreria C Sharp/TestLib.dll por la ruta donde ustedes tengan la DLL.

Con esto se puede ampliar mucho mas la capacidad de sus aplicaciones porque ahora no es solamente javascript sino que tiene por debajo el poder y fortaleza de .NET y su gran cantidad de clases y librerías ademas de su rápido procesamiento.

Código de Fuente:

http://estebanfuentealba.net/ejemplos/JavaScript + Libreria C Sharp.rar

Espero que les sirva esto, es solo una idea xD

Saludos!

Mp3 Player HTA WMPlayer.OCX + JQuery

Bueno en la entrada anterior hablaba sobre como crear HTA , bueno ahora dejo un ejemplo de como usar ActiveXObject en sus HTA o HTML bueno hice un pequeño reproductor de musica usando HTML + JavaScript (Jquery)

Bueno sin nada mas que decir les dejo el codigo de este pequeño reproductor.

Player.hta

<html>
	<head>
	<!--
			@Autor: Esteban Fuentealba
			@Email: mi [dot] warezx [at] gmail [dot] com
	-->
		<title>Mp3 Player HTA  WMPlayer.OCX + JQuery</title>
		<hta:application
			id = "primerHTA"
			applicationname = "Tutorial HTA"
			border = "thick"
			caption = "yes"
			showintaskbar = "yes"
			singleinstance = "yes"
			sysmenu = "yes"
			windowstate = "normal"
			scroll = "yes"
			scrollflat = "yes"
			version = "1.0"
			innerborder = "yes"
			selection = "no"
			maximizebutton = "yes"
			minimizebutton = "yes"
			navigable = "yes"
			contextmenu = "yes"
			borderstyle = "normal" 
		/>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
	<script language="VBScript">
			' Redimensiono la Ventana, Ancho 550 pixelex y alto 110 pixeles
			Window.ResizeTo 400, 100
	</script>
	<script type="text/javascript">
	var obj = new ActiveXObject('WMPlayer.OCX'); 
	$(function(){
		$('#atras').click(function() { obj.controls.currentPosition = obj.controls.currentPosition - 5; });
		$('#play').click(function() { obj.controls.play() });
		$('#pause').click(function() { obj.controls.pause() });
		$('#stop').click(function() { obj.controls.stop() });
		$('#adelante').click(function() { obj.controls.currentPosition = obj.controls.currentPosition + 5; });
		$('#load').change(function(){
				obj.url = $(this).val();
		});
	});
	</script>
	<style>
		.player { font-family: Webdings; font-size: 10px; }
	</style>
	</head>
	<body>
	<center>
		<form>
			<input type="button" id="atras" value="7" class="player" />
			<input type="button" id="play" value="4" class="player" />
			<input type="button" id="pause" value=";" class="player" />
			<input type="button" id="stop" value="<" class="player" />
			<input type="button" id="adelante" value="8" class="player" />
			<input type="file" id="load" />
		</form>
	</center>
	</body>
</html>

Bueno con ActiveXObject pude ocupar los “servicios” de Windows media player que está en mi pc, asi mismo se pueden ocupar recursos del pc como para ver la información de discos duros, creacion de archivos, conexiones , etc, solo leer.

Aqui les dejo una ScreenShot de mi pequeño player

player

Tutoriales de HTA y ActiveXObject:
http://www.microsoft.com/technet/scriptcenter/topics/htas/tutorial1.mspx
http://www.microsoft.com/technet/scriptcenter/topics/htas/tutorial2.mspx

Saludos!

Crear Aplicaciones de Escritorio Solo con Notepad y JQuery

Este es un pequeño tutorial que hice para crear aplicaciones de escritorio solo con notepad y JQuery. Bueno para crear estas aplicaciones es necesario usar HTA, ¿ que es eso ? HTML applications, programas ejecutados por parte de Internet Explorer bajo un programa llamado mshta.exe que hace que un código de HTML sea ejecutado como si fuera una aplicación.

Bueno la estructura de un archivo HTML normal es

<html>
	<head>
		<title>Tutorial HTA + JQuery</title>
	</head>
	<body>
	</body>
</html>

Y la para el HTA es casi lo mismo solo que se le agrega un tag con las propiedades de la ventana

<html>
	<head>
		<title>Tutorial HTA + JQuery</title>
		<hta:application
			id = "primerHTA"
			applicationname = "Tutorial HTA"
			border = "thick"
			caption = "yes"
			showintaskbar = "yes"
			singleinstance = "yes"
			sysmenu = "yes"
			windowstate = "normal"
			scroll = "yes"
			scrollflat = "yes"
			version = "1.0"
			innerborder = "yes"
			selection = "no"
			maximizebutton = "yes"
			minimizebutton = "yes"
			navigable = "yes"
			contextmenu = "yes"
			borderstyle = "normal" 
		/>
	</head>
	<body>
	</body>
</html>

HTA al ser HTML podremos ocupar en la aplicacion javascript, VBScript y otros lenguajes interpretados que quizas no conosca.

Ahora pondre un simple ejemplo de una aplicacion que sume dos numeros, usaré el framework JQuery para hacer mas facil la programacion.

<html>
	<head>
		<title>Tutorial HTA + JQuery</title>
		<!-- Agrego el FrameWorlk JQuery a mi Aplicacion -->
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
		<!--  Agrego el Tag para que este HTML sea un Correcto HTA  -->
		<hta:application
			id = "primerHTA"
			applicationname = "Tutorial HTA"
			border = "thick"
			caption = "yes"
			showintaskbar = "yes"
			singleinstance = "yes"
			sysmenu = "yes"
			windowstate = "normal"
			scrollflat = "yes"
			version = "1.0"
			innerborder = "yes"
			selection = "no"
			maximizebutton = "yes"
			minimizebutton = "yes"
			navigable = "yes"
			contextmenu = "yes"
			borderstyle = "normal" 
		/>
		<!-- VBScript -->
		<script language="VBScript">
			' Redimensiono la Ventana, Ancho 550 pixelex y alto 110 pixeles
			Window.ResizeTo 550, 100
		</script>
		<!-- JavaScript -->
		<script type="text/javascript">
			/*
				Onload: Esta funcion se ejecutara cuando se cargue la pagina completamente
			*/
			$(function(){
				/*  Al clickear el elemento con la ID 'Suma' se ejecuta la funcion*/
				$('#Suma').click(function() {
					/* Al elemento con la ID 'resultado' le seteo el valor con la suma de 'NumeroA' + 'NumeroB' */
					$('#resultado').val(
						/* Transformo a entero el valor del input NumeroA*/
						parseInt($('#NumeroA').val()) 
						+ 
						/* Transformo a entero el valor del input NumeroB*/
						parseInt($('#NumeroB').val())
					);
				});
			
			});
		</script>
	</head>
	<body>
		<center>
		<!-- -->
			<form>
				<input type="text" id="NumeroA" />
				<input type="text" id="NumeroB" />
				<input type="button" id="Suma" value="+" />
				<input type="text" id="resultado" disabled/>
			</form>
		</center>
	</body>
</html>

Ese codigo lo copian y pegan en notepad, lo deben guardar con una extensión .hta , yo lo guarde como calc.hta
calc

Al ejecutar ese archivo nos aparecerá nuestra Aplicación =D
calc01

En Conclusión con muy poco podemos hacer muchisimo, ya que solo HTML y javascript se podria hacer casi cualquier cosa.
Se podría ocupar ActiveXObject , eso significa poder tener una gran variedad de acceso a servidores u objetos de la maquina donde se ejecuta la aplicacion.

Espero que les sirva esto,

Saludos!