HMGforum.com

Exclusive forum for HMG, a Free / Open Source xBase WIN32/64 Bits / GUI Development System
http://www.hmgforum.com/

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

http://www.hmgforum.com/viewtopic.php?t=2355

Page 4 of 28

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

Posted: Fri Jun 01, 2012 2:10 am
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.

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

Posted: Fri Jun 01, 2012 3:00 am
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;
}

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

Posted: Fri Jun 01, 2012 3:39 am
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

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

Posted: Fri Jun 01, 2012 4:48 am
by Rathinagiri
That is a great thing.

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

Posted: Fri Jun 01, 2012 5:24 am
by mol
It looks very nice!

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

Posted: Fri Jun 01, 2012 8:24 am
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

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

Posted: Fri Jun 01, 2012 1:39 pm
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.

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

Posted: Fri Jun 01, 2012 1:46 pm
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.

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

Posted: Fri Jun 01, 2012 3:05 pm
by Rathinagiri
Ok Roberto. The input types listed are exhaustive I think. :)

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

Posted: Fri Jun 01, 2012 3:10 pm
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
All times are UTC
Page 4 of 28

Powered by phpBB® Forum Software © phpBB Limited