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

Roberto Lopez · Post by **Roberto Lopez** » Sun Jul 01, 2012 4:02 pm

HOW TO CONTRIBUTE - Roberto lopez (http://www.hmgforum.com)

Contributions are welcome, but, please do it without change the core library source file
(hmgscript.js). Do it in a separate file (ie: contrib.js).

As an example I've enhanced the button class with 'enanle()' and 'disable()' methods.

The file 'www/lib/contrib.js' will contain the following:

Code: Select all

///////////////// Start of contrib.js File //////////////////////////////////////

Button.prototype.disable = function()
{
	document.getElementById( this.getId() ).disabled = true;
}

Button.prototype.enable = function()
{
	document.getElementById( this.getId() ).disabled = false;
}

/////////////////// End of contrib.js File //////////////////////////////////////

Then in index.html head section, you'll need to include a reference to contrib.js:

Code: Select all

   <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="lib/contrib.js"></script>
      <script type="text/javascript" src="app/demo.js"></script>
   </head>

Finally, to test it, I'll modified the Button demo as follows:

Code: Select all

function test_1() 
{
   oWin = new Form( "Button Demo", 600 , 300 );

   oBtn1 = new Button( oWin , 50 , 240 , 
	"Set Btn Value" , "oBtn1.setValue('New Value')" );  

   oBtn2 = new Button( oWin , 130 , 240 , 
	"Disable oBtn1" , "oBtn1.disable()" );  

   oBtn3 = new Button( oWin , 170 , 240 , 
	"Enable oBtn1" , "oBtn1.enable()" );  

   oBtn2 = new Button( oWin , 240 , 248 , "Close" , "oWin.release()" );  
}

Enjoy!

Roberto Lopez · Post by **Roberto Lopez** » Mon Jul 02, 2012 12:36 am

HMGSCRIPT R26

- New: setPassword( bValue ) TextBox method.

- New: setAutoFocus( bValue ) TextBox method.

- New: enable() TextBox method.

- New: disable() TextBox method.

- Changed: Login demo.

- Changed: Browse demo (it allows editing now).

- Fixed: Bug with overlapped forms.

HMGSCRIPT REFERENCE (R26) - Roberto Lopez (http://www.hmgforum.com)

FORM:

Element: DIV

You can use all the properties, events and methods availables for it via DOM.

Syntax:

Form( cCaption , nWidth , nHeight )

Methods:

- release( cValue )
- getId()

Example:

oWin = new Form ( "Window Demo", 600 , 300 );

oWin.release()

------------------------------------------------------------------------------------------------

BUTTON:

Element: INPUT (Type: BUTTON)

You can use all the properties, events and methods availables for it via DOM.

Syntax:

Button( oParent , nRow , nCol , cCaption , cOnClick [,nWidth] )

Methods:

- setValue( cValue )
- getValue()
- getId()

Example:

oBtn = new Button( oForm ,
50 , 240 ,
"Set Btn Value" ,
"oBtn.setValue('New Value')" );

------------------------------------------------------------------------------------------------

LABEL:

Element: SPAN

You can use all the properties, events and methods availables for it via DOM.

Syntax:

Label( oParent , nRow , nCol , cValue )

Methods:

- getId()

------------------------------------------------------------------------------------------------

TEXTBOX:

Element: INPUT (Type: TEXT)

You can use all the properties, events and methods availables for it via DOM.

Syntax:

TextBox( oParent , nRow , nCol , cValue )

Methods:

- setValue( cValue )
- setPassword( bValue )
- setAutoFocus( bValue )
- enable()
- disable()
- getValue()
- getId()

Example:

oText = new TextBox( oForm , 130, 230, "TextBox!" );

alert( oText.getValue() );

------------------------------------------------------------------------------------------------

EDITBOX:

Element: INPUT (Type: TEXTAREA)

You can use all the properties, events and methods availables for it via DOM.

Syntax:

EditBox( oParent , nRow , nCol , cValue )

Methods:

- setValue( cValue )
- getValue()
- getId()

Example:

oEdit = new EditBox( oForm , 130, 230, "TextBox!" );

alert( oEdit.getValue() );

------------------------------------------------------------------------------------------------

CHECKBOX:

Element: INPUT (Type: CHECKBOX)

You can use all the properties, events and methods availables for it via DOM.

Syntax:

CheckBox( oParent , nRow , nCol , bChecked )

Methods:

- check()
- unCheck()
- isChecked()
- getId()

Example:

oCheck = new CheckBox( oForm , 140 , 280 , true );

alert(oCheck.isChecked())
oCheck.check()
oCheck.unCheck()

------------------------------------------------------------------------------------------------

COMBOBOX:

Element: SELECT

You can use all the properties, events and methods availables for them via DOM.

Syntax:

ComboBox( oParent , nRow , nCol , aOptions , aValues [, nSelectedIndex] )

Methods:

- getValue( nIndex )
- setValue( nIndex , cValue )
- setSelectedIndex ( nIndex )
- getSelectedIndex()
- getId()

Example:

oCombo = new ComboBox( oForm , 140 , 270 ,
[ 'one' , 'two' , 'three' ] ,
[ 'value one' , 'value two' , 'value three' ] , 0 );

alert ( oCombo.getSelectedIndex() );

------------------------------------------------------------------------------------------------

IMAGE:

Element: IMAGE

You can use all the properties, events and methods availables for it via DOM.

Syntax:

Image( oParent , nRow , nCol , cSrc )

Methods:

- getId()

------------------------------------------------------------------------------------------------

PANEL:

Element: DIV

You can use all the properties, events and methods availables for it via DOM.

Syntax:

Panel( oParent , nRow , nCol , nWidth , nHeight , cValue )

Methods:

- getId()

------------------------------------------------------------------------------------------------

APPEND:

Appends a record.

Syntax:

Append( cTable , aColumns , aValues )

------------------------------------------------------------------------------------------------

DELETE:

Delete records matching the cForExpr.

Syntax:

Delete( cTable , cForExpr )

------------------------------------------------------------------------------------------------

MODIFY:

Modifies records matching the cForExpr.

Syntax:

Modify( cTable , aColumns , aValues , cForExpr )

------------------------------------------------------------------------------------------------

LOGIN:

Syntax:

Login( cUser , cPassword )

------------------------------------------------------------------------------------------------

LOGOUT:

Syntax:

Logout()

------------------------------------------------------------------------------------------------

BROWSE:

Elements: DIV/TABLE

Creates an HTML table inside a scrollable DIV, loaded with the specified dbf query.

Syntax:

Browse( oParent , nRow, nCol, nWidth, nHeight, cDbfFile, aColumns,
aHeaders , cForExpr , cOrder , nInnerWidth )

Methods:

- refresh()
- getSelectedRows()
- getRowCount()
- select()
- unSelect()
- getCell(nRow,nCount)
- getSelectedRowCount()
- getId()

Example:

oBrowse = new Browse( oParent , 050 , 050 , 550 , 300 ,
'test' , [ 'code' , 'first' , 'last' , 'birth' , 'married' ] ,
[ 'Code' , 'First' , 'last' , 'Birth' , 'Married' ] ,
'code < 100' ,
'code' , 700 );

oBrowse.refresh()

------------------------------------------------------------------------------------------------

QUERY:

Returns a recordset from a server table as an array.

Syntax:

Query ( cDbf, aColumns, cForExpr, cOrder )

Example:

aRecordSet = Query ( 'test' ,
[ 'code' , 'first' , 'last' , 'birth' , 'married' ] ,
'code<=10' , '' );

------------------------------------------------------------------------------------------------

GRID:

Elements: DIV/TABLE

Creates an HTML table inside a scrollable DIV.

Syntax:

Grid( oParent, nRow, nCol, nWidth, nHeight, aHeaders, nInnerWidth )

Methods:

- addRow(aRow)
- getSelectedRows()
- getRowCount()
- select()
- unSelect()
- getCell(nRow,nCount)
- setCell(nRow,nCount,cValue)
- getSelectedRowCount()
- deleteRow(nRow)
- getId()

Example:

oGrid = new Grid( oWin, 40, 020, 480, 190,
[ 'One' , 'Two' , 'Three' ], 550 );

oGrid.addRow ( [ 'cell 1.1' , 'cell 1.2' , 'Cell 1.3' ] );

------------------------------------------------------------------------------------------------

RADIOGROUP:

Element: INPUT (Type: RADIO)

You can use all the properties, events and methods availables for them via DOM.

Syntax:

RadioGroup( oParent , nRow , nCol , aOptions , nSelectedIndex )

Methods:

- setSelectedIndex ( nIndex )
- getSelectedIndex()
- getId( nIndex )

Example:

oRadio = new RadioGroup( oForm , 140 , 270 ,
[ 'one' , 'two' , 'three' ] ,
1 );

alert ( oRadio.getSelectedIndex() );

------------------------------------------------------------------------------------------------

LISTBOX:

Element: SELECT

You can use all the properties, events and methods availables for them via DOM.

Syntax:

ListBox( oParent , nRow , nCol , aOptions , aValues , nSize [, nSelectedIndex] )

Methods:

- getValue( nIndex )
- setValue( nIndex , cValue )
- setSelectedIndex ( nIndex )
- getSelectedIndex()
- getId()

Example:

oList = new ListBox( oForm , 140 , 270 ,
[ 'one' , 'two' , 'three' ] ,
[ 'value one' , 'value two' , 'value three' ] , 3 , 1 );

alert ( oList.getSelectedIndex() );

------------------------------------------------------------------------------------------------

SPINNER:

Element: INPUT (Type: number)

You can use all the properties, events and methods availables for them via DOM.

Syntax:

Spinner( oParent , nRow , nCol , nValue )

Methods:

- getValue( nIndex )
- setValue( nIndex , cValue )
- setMin( nValue )
- setMax( nValue )
- setStep( nValue )
- getId()

Example:

oSpinner = new Spinner( oWin , 130, 230, 5 );

oSpinner.setMin(1);
oSpinner.setMax(10);
oSpinner.setStep(0.5);

alert( oSpinner.getValue() );

------------------------------------------------------------------------------------------------

SLIDER:

Element: INPUT (Type: range)

You can use all the properties, events and methods availables for them via DOM.

Syntax:

Slider( oParent , nRow , nCol , nValue )

Methods:

- getValue( nIndex )
- setValue( nIndex , cValue )
- setMin( nValue )
- setMax( nValue )
- setStep( nValue )
- getId()

Example:

oSlider = new Slider( oWin , 130, 230, 5 );

oSlider.setMin(1);
oSlider.setMax(100);
oSlider.setStep(50);

alert( oSlider.getValue() );

------------------------------------------------------------------------------------------------

DATEPICKER:

Element: INPUT (Type: DATE)

You can use all the properties, events and methods availables for it via DOM.

Syntax:

DatePicker( oParent , nRow , nCol , dValue )

Methods:

- setValue( cValue )
- getValue()
- getId()

Example:

oDate = new DatePicker( oForm , 130, 230, "2012-12-31" );

alert( oDate.getValue() );

Enjoy!

luisfrancisco62 · Post by **luisfrancisco62** » Mon Jul 02, 2012 3:20 am

ok gracias

Roberto Lopez · Post by **Roberto Lopez** » Mon Jul 02, 2012 3:25 am

HMGSCRIPT R27

- fixed: TextBox IE compatibility problem.

- Fixed: Unselect() (Grid/Browse) method bug.

- Changed: Textbox syntax (pasword is specified via a parameter instead a method now). setPassword method() removed.

Enjoy!

Post by **Rathinagiri** » Mon Jul 02, 2012 5:47 am

Thank you Roberto.

I have started using this for my Interest(ing) Calculator (web version)

Now, some of the problems I have encountered:

1. When deleting all the rows in a grid, the header is also removed.

Before:

: ic2.jpg (39.84 KiB) Viewed 5250 times

After:

: ic1.jpg (54.84 KiB) Viewed 5250 times

2. Scope of variables is a problem. I can't use variable name 'n' because it is used inside Grid part of library. It is changed.

Some feature requests too:

1. Justification of columns inside a grid.

2. Numeric textbox.

Roberto Lopez · Post by **Roberto Lopez** » Mon Jul 02, 2012 12:44 pm

rathinagiri wrote:Thank you Roberto.

I have started using this for my Interest(ing) Calculator (web version)

Now, some of the problems I have encountered:
<...>

Thanks for the report.

1. If you look at the sources, you'll note that the table header is added as a row (it is effectively a row), so you must take care of it when deleting all.

2. You are right. I must to take care of variable scopes. I'll do for the next release.

Feature requests:

1. Justification is very easy to do.

2. Regarding numeric textbox, I'm researching about pattern property in HTML5 to implement it or as a variant (if possible) of input type number (our spinner).

I must dedicate to other things by some time, meanwhile, fell free to experiment and work on (ie) new methods and controls using contrib.js.

Roberto Lopez · Post by **Roberto Lopez** » Mon Jul 02, 2012 1:01 pm

Roberto Lopez wrote: I must dedicate to other things by some time, meanwhile, fell free to experiment and work on (ie) new methods and controls using contrib.js.

And...

I've added getId() method to all controls, thinking on contributions.

Having the Id of an element, you can do anything you want with it.

So, you must only get the id of a control to be able to it expand in any way you want, using standard JS/DOM code, without need to modify the core library code.

JavaScript is so ubiquitous than you only must to google for the thing you want to do and you'll find thousands of code samples.

Post by **Rathinagiri** » Mon Jul 02, 2012 1:05 pm

Thanks for the info Roberto.

Post by **Rathinagiri** » Mon Jul 02, 2012 2:36 pm

This is my small contribution to the contrib.js (for grid column alignment)

Code: Select all

Grid.prototype.justify = function( aAlign )
{
   var rowcount = this.getRowCount();
   var i = 0;
   var j = 0;
   for( i = 1; i < rowcount; i++ )
   {
      for( j = 1; j <= ( aAlign ).length; j++ )
      {
         document.getElementById( this.getId() ).rows[ i ].cells[ j ].style.textAlign = aAlign[ j - 1 ];
      }   
   }
}

Usage:

oGrid1.justify( [ 'right', 'left', 'center', 'justify', 'right' ] );

Post by **danielmaximiliano** » Mon Jul 02, 2012 2:50 pm

luisfrancisco62 wrote:congratulations

como seria una funcion de menu?

en win7 starter 64 no me funciona el uhttpd.exe

podrias subir los fuentes?

gracias muchas gracias

Hola Luis :
en Windows 7 Home Profesional funciona bien. no necesite ni siquiera "Ejecutar como Administrador"
con el boton derecho del mouse

HMGforum.com

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

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

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

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

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

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

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

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

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

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

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