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

Moderator: Rathinagiri

Post Reply
User avatar
fchirico
Posts: 324
Joined: Sat Aug 23, 2008 11:27 pm
Location: Argentina

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

Post by fchirico »

Roberto Lopez wrote:
rathinagiri wrote:Image demo is working fine in Chrome and IE and not in my Firefox 10.0 (Let me update and tell you)
OHHH NOOOO!!!

THE FIRST BUG REPORT!!!!

:)
The second...

Con cualquier control si al botón de "CLOSE" en vez de hacerle CLICK presiono la BARRA ESPACIADORA, desaparece el BOTON pero queda el recuadro de la ventana sin poder salir de ella, lo probé en FireFox 12 y en IE 9

Un abrazo.
Attachments
aCaptura.JPG
aCaptura.JPG (19.74 KiB) Viewed 5768 times
Captura.JPG
Captura.JPG (19.37 KiB) Viewed 5768 times
Saludos, Fernando Chirico.
Top
User avatar
Rathinagiri
Posts: 5471
Joined: Tue Jul 29, 2008 6:30 pm
DBs Used: MariaDB, SQLite, SQLCipher and MySQL
Location: Sivakasi, India
Contact:
Contact Rathinagiri

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

Post by Rathinagiri »

I have played with some of the textbox properties and numeric textbox too!

demo2.html

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/demo2.js"></script>
   </head>

   <body>

      <center>
      <input type="button" value="Button Demo"  onClick="test_1()" style="width:200;height:200" >
      <input type="button" value="Label Demo"   onClick="test_2()" style="width:200;height:200" >
      <input type="button" value="TextBox Demo" onClick="test_3()" style="width:200;height:200" >
      <br>
      <input type="button" value="MsgInfo()"    onClick="test_4()" style="width:200;height:200" >
      <input type="button" value="Image Demo"   onClick="test_5()" style="width:200;height:200" >
      <input type="button" value="Properties"   onClick="test_6()" 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>
demo2.js

Code: Select all


function test_1() // Window Demo
{
   Window( "win" , "Hello World!", 600 , 300 );
   Button( 'button_1' , 'win' , 240 , 248 , "Close" , "Release('win')" );  
}

function test_2() // Label Demo
{
   Window( 'win' , "Hello World!", 600 , 300 );
   Label( 'label_1' , 'win' , 100 , 260 , "This is a Label!" );
   Button( 'button_1' , 'win' , 240 , 248 , "Close" , "Release('win')" );  
}

function test_3() // TextBox Demo
{
   Window( 'win' , "Hello World!", 600 , 300 );
   TextBox( "text_1" , 'win' , 130, 230, "TextBox!" );

   Button( 'button_1' , 'win' , 240 , 110 , "Get TxtBox Value" , "MsgInfo(document.getElementById('text_1').value,'TextBox Value')" );  
   Button( 'button_2' , 'win' , 240 , 240 , "Set TxtBox Value" , "document.getElementById('text_1').value = 'New Value' " );  
   Button( 'button_3' , 'win' , 240 , 370 , "Close" , "Release('win')" );  
}

function test_4() // MsgInfo Demo
{
   MsgInfo("Message","This is MsgInfo()!");
}

function test_5() // Image Demo
{
   Window( 'win' , "Image Demo", 600 , 300 );
   Image( 'Image_1' , 'win' , 30 , 225 , "img/logo.gif" );
   Button( 'button_1' , 'win' , 240 , 248 , "Close" , "Release('win')" );  
}

function test_6() // TextBox Properties Demo
{
   Window( 'win', "TextBox Properties Demo", 600, 400 );
   Label( 'label_1' , 'win' , 30 , 10 , "Sample TextBox" );
   TextBox( 'text_1', 'win',  30, 150, "TextBox!" );
   
   Label( 'label_2' , 'win' , 60 , 10 , "defaultValue" );
   TextBox( 'text_2', 'win',  60, 150, "" );
   document.getElementById( 'text_2' ).defaultValue = 'This is default Value';
   
   Label( 'label_3' , 'win' , 90 , 10 , "Disabled" );
   TextBox( 'text_3', 'win',  90, 150, "Disabled!" );
   document.getElementById('text_3').disabled = true;
   
   Label( 'label_4' , 'win' , 120 , 10 , "maxLength = 5" );
   TextBox( 'text_4', 'win',  120, 150, "12345" );
   document.getElementById('text_4').maxLength = 5;
   
   Label( 'label_5' , 'win' , 150 , 10 , "readOnly" );
   TextBox( 'text_5', 'win',  150, 150, "TextBox!" );
   document.getElementById('text_5').readOnly = true;
   
   Label( 'label_6' , 'win' , 180 , 10 , "Size = 30" );
   TextBox( 'text_6', 'win',  180, 150, "TextBox!" );
   document.getElementById('text_6').size = 30;
   
   Label( 'label_7' , 'win' , 210 , 10 , "SetFocus" );
   TextBox( 'text_7', 'win',  210, 150, "TextBox!" );
   SetFocus( 'text_7' );
   
   Label( 'label_8' , 'win' , 240 , 10 , "Right Aligned!" );
   TextBox( 'text_8', 'win',  240, 150, "TextBox!" );
   document.getElementById('text_8').style.textAlign = 'right';
   
   Label( 'label_9' , 'win' , 270 , 10 , "Color" );
   TextBox( 'text_9', 'win',  270, 150, "TextBox!" );
   document.getElementById('text_9').style.color = "rgb(255,0,0)";
   
   Label( 'label_10' , 'win' , 300 , 10 , "Numeric TextBox" );
   NumericTextBox( 'text_10', 'win',  300, 150, 100 );
   
   Button( 'button_2' , 'win' , 340 , 200 , "Get Default" , "MsgInfo( document.getElementById( 'text_2' ).defaultValue, 'Default Value' )" );  
   Button( 'button_3' , 'win' , 340 , 370 , "Close" , "Release('win')" );  
}
hmgscript.js

Code: Select all

//////////////////////////////////////////////////////////////////////////////////
//                                                                              
// HMGSCRIPT: Programming For The Web in The Right Way :)
//                                                                              
//////////////////////////////////////////////////////////////////////////////////
// 
// I've wrote this library after analize 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 modal 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-alpha.
//
//////////////////////////////////////////////////////////////////////////////////


//////////////////////////////////////////////////////////////////////////////////
//
// This is free and unencumbered software released into the public domain.
// 
// Anyone is free to copy, modify, publish, use, compile, sell, or
// distribute this software, either in source code form or as a compiled
// binary, for any purpose, commercial or non-commercial, and by any
// means.
// 
// In jurisdictions that recognize copyright laws, the author or authors
// of this software dedicate any and all copyright interest in the
// software to the public domain. We make this dedication for the benefit
// of the public at large and to the detriment of our heirs and
// successors. We intend this dedication to be an overt act of
// relinquishment in perpetuity of all present and future rights to this
// software under copyright law.
// 
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
// IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
// OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
// ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
// OTHER DEALINGS IN THE SOFTWARE.
// 
// For more information, please refer to <http://unlicense.org/>
//
//////////////////////////////////////////////////////////////////////////////////


//////////////////////////////////////////////////////////////////////////////////
// Window 
//////////////////////////////////////////////////////////////////////////////////
   
function Window( cId , cCaption , nWidth , nHeight )
{

   // Create a div for the cover, set its properties and add to the page body.
   // The cover is used since this is a modal window.
   	  
   var cover              = document.createElement( "div" )                             ;
   cover.className    = "cover"                                                     ;
   cover.style.width  = document.body.clientWidth                                   ;
   cover.style.height = document.body.clientHeight                                  ;
   cover.id           = 'cover_' + cId                                  ;

   document.body.appendChild( cover )                                               ;

   // Create a div for the window, set its properties and add to the page body.

   var window              = document.createElement( "div" )                            ;
   window.className    = "window"                                                   ;
   window.innerHTML    = "<h1>" + cCaption + "</h1>"                                ;
   window.style.top    = ( document.body.clientHeight / 2 ) - ( nHeight / 2 )       ;
   window.style.left   = ( document.body.clientWidth / 2 ) - ( nWidth / 2 )         ;
   window.style.width  = nWidth                                                     ;
   window.style.height = nHeight                                                    ;
   window.id           = cId                                                        ;

   document.body.appendChild( window );
      	                   
}

function Release( cId )
{
	document.getElementById( 'cover_' + cId ).parentNode.removeChild( document.getElementById( 'cover_' + cId ) )
	document.getElementById( cId ).parentNode.removeChild( document.getElementById( cId ) )
}

//////////////////////////////////////////////////////////////////////////////////
// Button 
/////////////////////////////////////////////////////////////////////////////////

function Button( cId , cParentId , nRow , nCol , cCaption , cOnClick )
{

  // Create the button on the fly, set its properties and append to the specified
  // parent window

   var control = document.createElement( "input" )      ;
      
   control.type           = "button"                    ;
   control.value          = cCaption                    ;
   control.onclick        = Function( cOnClick )        ;
   control.style.position = "absolute"                  ;
   control.style.top      = nRow                        ;
   control.style.left     = nCol                        ;
   control.style.width    = 120                         ;
   control.style.height   = 35                          ;
   control.id             = cId                         ;
    
   document.getElementById(cParentId).appendChild( control )                ;

}   

//////////////////////////////////////////////////////////////////////////////////
// Label 
//////////////////////////////////////////////////////////////////////////////////

function Label( cId , cParentId , nRow , nCol , cValue )
{

  // Create the label on the fly, set its properties and append to the specified
  // parent window

   var control = document.createElement( "span" );
      
   control.className      = "label"    ;
   control.style.top      = nRow       ;
   control.style.left     = nCol       ;
   control.innerHTML      = cValue     ;
   control.id             = cId        ;
      
   document.getElementById(cParentId).appendChild( control )                ;

}   

//////////////////////////////////////////////////////////////////////////////////
// TextBox
//////////////////////////////////////////////////////////////////////////////////


function TextBox( cId , cParentId , nRow , nCol , cValue )
{

  // Create the TextBox on the fly, set its properties and append to the specified
  // parent window

   var control = document.createElement( "input" );
   
   control.type           = "text"     ;
   control.className      = "textbox"  ;
   control.style.position = "absolute" ;
   control.style.top      = nRow       ;
   control.style.left     = nCol       ;
   control.value          = cValue     ;
   control.id             = cId        ;
      
   document.getElementById(cParentId).appendChild( control )                ;

}   

//////////////////////////////////////////////////////////////////////////////////
// Image
//////////////////////////////////////////////////////////////////////////////////

function Image( cId , cParentId , nRow , nCol , cSrc )
{
   var control = document.createElement( "image" )                          ;            
      
   control.style.position = "absolute"                                      ;
   control.className      = "image"                                         ;
   control.id             = cId                                             ;
   control.style.top      = nRow                                            ;
   control.style.left     = nCol                                            ;
   control.src            = cSrc                                            ;
      
   document.getElementById(cParentId).appendChild( control )                ;

}   

//////////////////////////////////////////////////////////////////////////////////
// MsgInfo
//////////////////////////////////////////////////////////////////////////////////

function MsgInfo( cMessage , cCaption )
{
   Window( 'msginfowin' , cCaption , 300 , 150 );
   Label( 'msgi_label' , 'msginfowin' , 60 , 150 - ( cMessage.length * 2.3 ) , cMessage );
   Button( 'msgi_button' , 'msginfowin' , 100 , 100 , "Ok" , "Release('msginfowin')" );  
}

//////////////////////////////////////////////////////////////////////////////////
// SetFocus
//////////////////////////////////////////////////////////////////////////////////

function SetFocus( cId )
{
   document.getElementById( cId ).select();
}

     
function NumericTextBox( cId , cParentId , nRow , nCol , nValue )
{

  // Create the TextBox on the fly, set its properties and append to the specified
  // parent window

   var control = document.createElement( "input" );
   
   control.type           = "text"     ;
   control.className      = "textbox"  ;
   control.style.position = "absolute" ;
   control.style.top      = nRow       ;
   control.style.left     = nCol       ;
   control.style.textAlign= 'right'    ;
   control.value          = nValue     ;
   control.id             = cId        ;
   control.onkeypress     = function(e) {
    if(!e) e = event;
    return isNumberKey(e);
};

      
   document.getElementById(cParentId).appendChild( control )                ;

}   
      
function isNumberKey(evt)
{
   var charCode = (evt.which) ? evt.which : evt.keyCode;
   if (charCode > 31 && (charCode < 48 || charCode > 57))
      return false;

   return true;
}
Attachments
textprop.jpg
textprop.jpg (34.28 KiB) Viewed 5768 times
East or West HMG is the Best.
South or North HMG is worth.
...the possibilities are endless.
Top
User avatar
Roberto Lopez
HMG Founder
Posts: 4004
Joined: Wed Jul 30, 2008 6:43 pm

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

Post by Roberto Lopez »

rathinagiri wrote:I have played with some of the textbox properties and numeric textbox too!
<...>
Nice!

I've not tested, but I guess that this new HTML5 input type number will avoid us the tricky JS in NumericTextBox:

http://www.w3.org/TR/html-markup/input.number.html
Regards/Saludos,

Roberto


(Veritas Filia Temporis)
Top
User avatar
Rathinagiri
Posts: 5471
Joined: Tue Jul 29, 2008 6:30 pm
DBs Used: MariaDB, SQLite, SQLCipher and MySQL
Location: Sivakasi, India
Contact:
Contact Rathinagiri

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

Post by Rathinagiri »

That is a great thing.
East or West HMG is the Best.
South or North HMG is worth.
...the possibilities are endless.
Top
User avatar
mol
Posts: 3720
Joined: Thu Sep 11, 2008 5:31 am
Location: Myszków, Poland
Contact:
Contact mol

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

Post by mol »

It looks very nice!
Top
User avatar
mol
Posts: 3720
Joined: Thu Sep 11, 2008 5:31 am
Location: Myszków, Poland
Contact:
Contact mol

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

Post by mol »

I've tested last Rathi's demo on Android Opera Mobile and Dolphin Browser HD.
Opera - properties work almost fine, beside one problem - I can insert non numeric characters into numeric textbox :(
Dolphin - 100% OK
Top
User avatar
Roberto Lopez
HMG Founder
Posts: 4004
Joined: Wed Jul 30, 2008 6:43 pm

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

Post by Roberto Lopez »

Hi,

When you think in expand the library, please remember that we can use all the new HTML5 features, since we will need support for websockets for database connection, so, HMGSCRIPT will work only with HTML5 browsers.

Please, take a special look to all of the 'input' elements. We can use all of them.

Using old information as reference, we could end using complicated JS functions to emulate features already present in HTML5 browsers.

This is the best HTML reference I've found:

http://www.w3.org/TR/html-markup/Overview.html#toc

http://www.w3.org/TR/html-markup/input.html#input

So, before adding new features, please, analyze carefully that.
Regards/Saludos,

Roberto


(Veritas Filia Temporis)
Top
User avatar
Roberto Lopez
HMG Founder
Posts: 4004
Joined: Wed Jul 30, 2008 6:43 pm

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

Post by Roberto Lopez »

A tip:

I'm working now in the connection with Harbour server, so I've stopped work in the GUI, but I guess that the new functions (and the current ones) should respect the HTML names of the elements that they create.

This way, will be easy for us to know what properties events and methods are available for it via DOM using any available documentation.
Regards/Saludos,

Roberto


(Veritas Filia Temporis)
Top
User avatar
Rathinagiri
Posts: 5471
Joined: Tue Jul 29, 2008 6:30 pm
DBs Used: MariaDB, SQLite, SQLCipher and MySQL
Location: Sivakasi, India
Contact:
Contact Rathinagiri

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

Post by Rathinagiri »

Ok Roberto. The input types listed are exhaustive I think. :)
East or West HMG is the Best.
South or North HMG is worth.
...the possibilities are endless.
Top
User avatar
luisvasquezcl
Posts: 1258
Joined: Thu Jul 31, 2008 3:23 am
Location: Chile
Contact:
Contact luisvasquezcl

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

Post by luisvasquezcl »

Hi,
my contribution to the state of controls

include this function in hmgscript.js

function Enabled( cid, lModo ) {
var el= document.getElementById( cid );

if( lModo ) {
el.disabled = "";
}else{
el.disabled = "disabled";
}
}

Uso

function test_3() // TextBox Demo
{
Window( 'win' , "Hello World!", 600 , 300 );
TextBox( "text_1" , 'win' , 130, 230, "TextBox!" );

Button( 'button_1' , 'win' , 240 , 10 , "Get TxtBox Value" , "MsgInfo(document.getElementById('text_1').value,'TextBox Value')" );
Button( 'button_2' , 'win' , 240 , 140 , "Set TxtBox Value" , "document.getElementById('text_1').value = 'New Value' " );
Button( 'button_3' , 'win' , 240 , 270 , "Close" , "Release('win')" );
Button( 'button_4' , 'win', 240 , 400 , "Enabled" , "Enabled('button_1', true)");
Button( 'button_5' , 'win', 240 , 530 , "Disable" , "Enabled('button_1', false)");
}

best regards,
Luis Vasquez
Top
Post Reply

Return to “HMGSCRIPT Project Discussions”