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

Moderator: Rathinagiri

Post Reply
User avatar
Roberto Lopez
HMG Founder
Posts: 3899
Joined: Wed Jul 30, 2008 6:43 pm
Has thanked: 13 times
Been thanked: 135 times

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

Post by Roberto Lopez » Wed May 30, 2012 4:04 am

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!
Attachments
hmgscript.2012.05.30.zip
(4.31 KiB) Downloaded 1602 times
Regards/Saludos,

Roberto


(Veritas Filia Temporis)

User avatar
Rathinagiri
Posts: 5163
Joined: Tue Jul 29, 2008 6:30 pm
DBs Used: MariaDB, SQLite, SQLCipher and MySQL
Location: Sivakasi, India
Has thanked: 129 times
Been thanked: 130 times
Contact:

Post by Rathinagiri » Wed May 30, 2012 4:49 am

Wow!

The countdown (perhaps countup :)) starts now!
East or West HMG is the Best.
South or North HMG is worth.
...the possibilities are endless.

User avatar
esgici
Posts: 4337
Joined: Wed Jul 30, 2008 9:17 pm
DBs Used: DBF
Location: iskenderun / Turkiye
Has thanked: 221 times
Been thanked: 77 times
Contact:

Post by esgici » Wed May 30, 2012 9:39 am

Thanks a lot :D

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

Best regards and saludos cordiales :)

--

Esgici
Viva INTERNATIONAL HMG :D

User avatar
Pablo César
Posts: 4058
Joined: Wed Sep 08, 2010 1:18 pm
Location: Curitiba - Brasil
Has thanked: 100 times
Been thanked: 177 times

Post by Pablo César » Wed May 30, 2012 12:32 pm

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
HMGing a better world
"Matter tells space how to curve, space tells matter how to move."
Albert Einstein

User avatar
Roberto Lopez
HMG Founder
Posts: 3899
Joined: Wed Jul 30, 2008 6:43 pm
Has thanked: 13 times
Been thanked: 135 times

Post by Roberto Lopez » Wed May 30, 2012 1:21 pm

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 :)
Regards/Saludos,

Roberto


(Veritas Filia Temporis)

User avatar
Roberto Lopez
HMG Founder
Posts: 3899
Joined: Wed Jul 30, 2008 6:43 pm
Has thanked: 13 times
Been thanked: 135 times

Post by Roberto Lopez » Wed May 30, 2012 5:21 pm

Hi!

Now, we have Label and TextBox controls too and two themes (std and xp).
Image1.png
Image1.png (97.03 KiB) Viewed 9416 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!
Attachments
hmgscript.2012.05.31.zip
(5.44 KiB) Downloaded 1369 times
Regards/Saludos,

Roberto


(Veritas Filia Temporis)

User avatar
Rathinagiri
Posts: 5163
Joined: Tue Jul 29, 2008 6:30 pm
DBs Used: MariaDB, SQLite, SQLCipher and MySQL
Location: Sivakasi, India
Has thanked: 129 times
Been thanked: 130 times
Contact:

Post by Rathinagiri » Wed May 30, 2012 5:48 pm

Very nice Roberto.
East or West HMG is the Best.
South or North HMG is worth.
...the possibilities are endless.

User avatar
Roberto Lopez
HMG Founder
Posts: 3899
Joined: Wed Jul 30, 2008 6:43 pm
Has thanked: 13 times
Been thanked: 135 times

Post by Roberto Lopez » Wed May 30, 2012 7:39 pm

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/
Regards/Saludos,

Roberto


(Veritas Filia Temporis)

User avatar
Pablo César
Posts: 4058
Joined: Wed Sep 08, 2010 1:18 pm
Location: Curitiba - Brasil
Has thanked: 100 times
Been thanked: 177 times

Post by Pablo César » Wed May 30, 2012 10:59 pm

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 !
HMGing a better world
"Matter tells space how to curve, space tells matter how to move."
Albert Einstein

User avatar
Roberto Lopez
HMG Founder
Posts: 3899
Joined: Wed Jul 30, 2008 6:43 pm
Has thanked: 13 times
Been thanked: 135 times

Post by Roberto Lopez » Thu May 31, 2012 1:24 am

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!
Regards/Saludos,

Roberto


(Veritas Filia Temporis)

Post Reply