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

Moderator: Rathinagiri

Post Reply
User avatar
Roberto Lopez
HMG Founder
Posts: 3987
Joined: Wed Jul 30, 2008 6:43 pm
Has thanked: 27 times
Been thanked: 172 times

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

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

Roberto


(Veritas Filia Temporis)

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

Post by Rathinagiri »

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: 4529
Joined: Wed Jul 30, 2008 9:17 pm
DBs Used: DBF
Location: iskenderun / Turkiye
Has thanked: 406 times
Been thanked: 115 times
Contact:

Post by esgici »

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: 4059
Joined: Wed Sep 08, 2010 1:18 pm
Location: Curitiba - Brasil
Has thanked: 100 times
Been thanked: 182 times

Post 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
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: 3987
Joined: Wed Jul 30, 2008 6:43 pm
Has thanked: 27 times
Been thanked: 172 times

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

Roberto


(Veritas Filia Temporis)

User avatar
Roberto Lopez
HMG Founder
Posts: 3987
Joined: Wed Jul 30, 2008 6:43 pm
Has thanked: 27 times
Been thanked: 172 times

Post 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 14675 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 1541 times
Regards/Saludos,

Roberto


(Veritas Filia Temporis)

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

Post by Rathinagiri »

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: 3987
Joined: Wed Jul 30, 2008 6:43 pm
Has thanked: 27 times
Been thanked: 172 times

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

Roberto


(Veritas Filia Temporis)

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

Post 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 !
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: 3987
Joined: Wed Jul 30, 2008 6:43 pm
Has thanked: 27 times
Been thanked: 172 times

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

Roberto


(Veritas Filia Temporis)

Post Reply