Inicio > HTML, JavaScript, Windows > Crear Aplicaciones de Escritorio Solo con Notepad y JQuery

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!

About these ads
  1. darcon3371
    febrero 12, 2010 en 9:42 am

    Que interesante! Me gustaria saber mas sobre esta tecnología.

    Alguna vez haz hecho aplicaciones grandes, con muchos formularios de esta forma ?

  2. diciembre 7, 2012 en 12:25 pm

    y esto significa que si no tienes explorer no funciona? en mac no funciona?

  1. octubre 8, 2009 en 11:34 pm
  2. octubre 12, 2009 en 5:58 pm
  3. enero 9, 2010 en 12:27 am

Deja un comentario

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

Seguir

Recibe cada nueva publicación en tu buzón de correo electrónico.

Únete a otros 27 seguidores

A %d blogueros les gusta esto: