Page 1 of 28

HMGSCRIPT 2012: Programming For The Web in The Right Way :)

Posted: Wed May 30, 2012 4:04 am
by Roberto Lopez
I've wrote this library after analyze tens of JavaScript samples, code, tutorials and users posts in forums, freely available on the web.

I've simply attempted to arrange in a simple way, the common knowledge available about how to create windows and controls on the fly using JavaScript.

So, I not consider this code as mine, then, I'm publishing it as public domain.

From the user's perspective, these GUI functions should be as easy to use as HMG GUI commands and I've wrote them with such goal in mind.

This library must be considered as pre-pre-alpha :)

EDIT: There is newer versions of the library in more recent posts of this thread.

Enjoy!

Re: HMGSCRIPT 2012: Programming For The Web in The Right Way

Posted: Wed May 30, 2012 4:49 am
by Rathinagiri
Wow!

The countdown (perhaps countup :)) starts now!

Re: HMGSCRIPT 2012: Programming For The Web in The Right Way

Posted: Wed May 30, 2012 9:39 am
by esgici
Thanks a lot :D

An happy, revolutionary and very important milestone on the HMG way :arrow:

Best regards and saludos cordiales :)

--

Esgici

Re: HMGSCRIPT 2012: Programming For The Web in The Right Way

Posted: Wed May 30, 2012 12:32 pm
by Pablo César
I enjoying... !

I made some changings in my hmgscript.css as follows:

Code: Select all

.window
{
   position        : absolute                 ;
   background-color: rgb(236,233,216)         ;
   text-align      : center                   ;
   border          : 3px solid rgb(2,106,254) ;
}   

.window h1
{
   font-family     : Arial                   ; 
   font-size       : 12pt                    ;
   background      : rgb(2,106,254)          ;
   color           : white                   ;
   margin          : 0                       ;
   padding         : 4px                     ;
}   

.cover
{
   position        : absolute                ;
   top             : 0                       ;
   left            : 0                       ;
   background-color: rgb(14,14,14)           ;
   opacity         : 0.7                     ;
}
I have replaced color items with rgb() that it makes more intuitive sense. And I choose some diferent colors:

Image

Re: HMGSCRIPT 2012: Programming For The Web in The Right Way

Posted: Wed May 30, 2012 1:21 pm
by Roberto Lopez
Pablo César wrote:I enjoying... !

I made some changings in my hmgscript.css as follows:
<...>
I have replaced color items with rgb() that it makes more intuitive sense. And I choose some diferent colors:
I feel in XP! :)

I guess that we could have multiple hmgscript.css files in a 'themes' folder.

So, the one I've created could be called 'hmgs.standard.css' and the one you've created as 'hmgs.xp.css'.

What do you think?

PS: I've already done it :)

Re: HMGSCRIPT 2012: Programming For The Web in The Right Way

Posted: Wed May 30, 2012 5:21 pm
by Roberto Lopez
Hi!

Now, we have Label and TextBox controls too and two themes (std and xp).
Image1.png
Image1.png (97.03 KiB) Viewed 23300 times
This is the JS app source code:

Code: Select all

function test_1()
{
	oWindow = new Window( "Hello World!", 600 , 300 );
	Label( oWindow , 100 , 260 , "This is a Label!" );
	TextBox( oWindow , 130, 230, "This is a TextBox!" );
	Button( oWindow , 240 , 248 , "Close" , "oWindow.Release()" );  
}   
Enjoy!

Re: HMGSCRIPT 2012: Programming For The Web in The Right Way

Posted: Wed May 30, 2012 5:48 pm
by Rathinagiri
Very nice Roberto.

Re: HMGSCRIPT 2012: Programming For The Web in The Right Way

Posted: Wed May 30, 2012 7:39 pm
by Roberto Lopez
Hi,

HTML5 has a lot of new advanced features regarding forms.

So, we will able to expand HMGSCRIPT capabilities almost with no effort.

Please, look at this interesting page:

http://wufoo.com/html5/

Re: HMGSCRIPT 2012: Programming For The Web in The Right Way

Posted: Wed May 30, 2012 10:59 pm
by Pablo César
Roberto wrote:I guess that we could have multiple hmgscript.css files in a 'themes' folder.

So, the one I've created could be called 'hmgs.standard.css' and the one you've created as 'hmgs.xp.css'.
GREAT !

I am following the progress of this project. I'm loving ...
I made more changings at demo.html, as follows:

Code: Select all

<html>

	<head>
		<title></title>
		<link rel="stylesheet" type="text/css" href="themes/hmgs.xp.css">
		<script type="text/javascript" src="lib/hmgscript.js"></script>
		<script type="text/javascript" src="app/demo.js"></script>
	</head>

	<body>

		<center>
		<input type="button" value="Button Demo" onClick="test_1()" style="width:200;height:200" >
		<input type="button" value="Label / TextBox Demo" onClick="test_2()" style="width:200;height:200" >
		<input type="button" value="Available" onClick="" style="width:200;height:200" >
		<br>
		<input type="button" value="Available" onClick="" style="width:200;height:200" >
		<input type="button" value="Available" onClick="" style="width:200;height:200" >
		<input type="button" value="Available" onClick="" style="width:200;height:200" >
		<br>
		<input type="button" value="Available" onClick="" style="width:200;height:200" >
		<input type="button" value="Available" onClick="" style="width:200;height:200" >
		<input type="button" value="Available" onClick="" style="width:200;height:200" >
		</center>

	</body>

</html>
And also made at demo.js, just to enhance the two functions:

Code: Select all

function test_1()
{
	oWindow = new Window( "Hello World!", 600 , 300 );
	Button( oWindow , 240 , 248 , "Close" , "oWindow.Release()" );  
}

function test_2()
{

	oWindow = new Window( "Hello World!", 600 , 300 );

	Label( oWindow , 100 , 260 , "This is a Label!" );

	TextBox( oWindow , 130, 230, "This is a TextBox!" );

	Button( oWindow , 240 , 248 , "Close" , "oWindow.Release()" );  

}
And the result it´s:

Image
HTML5 has a lot of new advanced features regarding forms.
That´s excellent for future !

Re: HMGSCRIPT 2012: Programming For The Web in The Right Way

Posted: Thu May 31, 2012 1:24 am
by Roberto Lopez
Pablo César wrote: I am following the progress of this project. I'm loving ...
I made more changings at demo.html, as follows:
I've applied your changes.

Thanks!