Table on DroidScript? It's real

[Alex]

I was wondering, is it possible to make a table on the DS? At first I wanted to do it on the basis of the list, but list has no method to determine the coordinates of the touch.

So I made a sketch using the textedit. This is a readonly table. It would be interesting to make editable. What do you think about this table?

app.DisableKeys( 'ENTER,DPAD_LEFT,DPAD_RIGHT,DPAD_UP,DPAD_DOWN' );

var charInRow = 2;

function OnStart()
{
    lay = app.CreateLayout( "linear", "VCenter,FillXY" );   
 
    columns = [];
    columns[0] = 3;
    columns[1] = 10;
    columns[2] = 5;

    columns1 = [];
    columns1[0] = 6;
    columns1[1] = 13;
    columns1[2] = 7;
   
    for( var _col in columns1 ){
       
        charInRow += columns1[ _col ];
    }
   
    txe_blank = app.CreateTextEdit( '' );
    txe_blank.SetSize( 0, 0);
   
    txe = app.CreateTextEdit( 'test test', -1, -1, 'Html, ReadOnly, NoSpell');
    txe.SetBackColor( '#ff333333' );
    txe.SetOnTouch( touchDown );
   
    lay.AddChild( txe );
    lay.AddChild( txe_blank );
   
    app.AddLayout( lay );
   
    _listIn = [];
    _listIn.push( '№1,item1 - long long long long long long string,1$' );
    _listIn.push( '№2,not long long string,2$' );
    _listIn.push( '№3,short string,3$' );
    _listIn.push( '№4,short,4$' );
    _listIn.push( '№5,short string,5$' );
    _listIn.push( '№6,item1 - long long long long long long string,6$' );
    _listIn.push( '№7,not long long string,2$' );
    _listIn.push( '№8,short string,8$' );
    _listIn.push( '№9,short,9$' );
    _listIn.push( '№10,short string,10$' );

    getText();   
}

function getText(){
   
    var _listOut = [];
   
    for( var _item in _listIn ){
       
        var _split = _listIn[ _item ].split( ',' );
        var _row = [];
       
        for( var _col in columns ){
           
             _row.push( getTrimString( _split[ _col ], columns[ _col ]));
        }
       
        _listOut.push( '|&nbsp;' + _row.join( '&nbsp;|&nbsp;' ) + ' <br>' );
    }
   
    txe.SetHtml( _listOut.join( '' ).slice( 0, -4 ));
    txe.length = txe.GetText().length;
   
}

function select( p_start, p_end ){
   
    txe_blank.Focus();
    txe.SetSelection( p_start, p_end );
}

function getPos( p_object ){
   
    var _row = p_object.GetCursorLine();
    var _start = _row * charInRow;
    var _cur = p_object.GetCursorPos() - _start;
    var _right = 0;
   
    for( var _col = 0, _colMax = columns1.length; _col < _colMax; _col++ ){
       
        _right += columns1[ _col ];
       
        if( _cur <= _right ){
           
            app.ShowPopup( 'Selected row - ' + _row +' column - ' +  _col );
            break;           
        }
    }
   
    var _end = parseInt(_start) + charInRow;
   
    if( _end > p_object.length ){
       
        _end = p_object.length;
    }
   
    var _startOffset = 0;
   
    for( var _i = 0; _i < _col; _i++ ){
       
        _startOffset += columns1[ _i ];
    }

    select( _start + _startOffset + 1, _start + _startOffset + columns1[ _col ] );
}


function touchDown( ev ){

    getPos( this );
}

function getTrimString( p_str, p_width ){
   
    var _length = p_str.length;
   
    if( _length >= p_width ){
       
        p_str = p_str.substring( 0, p_width );
       
    } else {

        for( var _i = 0, _iMax = p_width - _length; _i < _iMax; _i++ ){
           
            p_str += '&nbsp;';
        }   
    }   
    return '<font face="monospace">' + p_str + '</font>';
} 

[Symbroson Development]

Cool table - with one text edit - nice
Think it is possible to make this shorter but it works ^^

[Netpower8]

there is a table editor sample on the forum somwhere

[Steve Garman]

There is an attempt at an editable html table in a webview at https://groups.google.com/d/msg/androidscript/xCf2831SfKI/XRc2Bp3hWnEJ

I don't know whether that is what Nelson was referring to.

[Netpower8]

Yep thats the one. Still have not have the time to look at the code.

[Alex]

I looked at the DBtable from Steve. Well. Output is produced using html. I want to make a table just with DS.

Already something happens and I found the opportunity to make mask edit fields in which the cursor can move only in specified areas of the text.

I want to try still Image to display the table, but I'm afraid it will be slow.

If TextEdit was the OnScroll event handler, it would be possible to synchronize two or more TextEdit to retrieve the table.

[Steve Garman]

One small suggestion about your textEdit.

Your current code relies on the fact that the NoSpell option forces a monospace font.

This is always the case for now but it is an unintended side-effect that may change in the future.

I would recommend using the MonoSpace option as well.

[Alex]

Thanks, Steve. Add it.

Do I understand correctly that "overwrite" mode in textEdit (where input character from keyboard replaces the character above the cursor) need to do programmatically?

In Android Fn + Ins does not work?

[Charles Wilt]

I have only skimmed over the conversation on this topic so I may be wrong. If I needed a grid I would try using an array of textedits with 0 margins. Similar to the buttons in the calculator example. 

[Alex]

DS is slow with lots of objects, so for speed I use for a table one object textEdit. For small tables you can use an array textEdit, but not for a few hundred cells. You can create a small array of textEdit and load data into it, but I want the opportunity to make textEdit on a table with several hundred (thousands) of cells.

Soon I will show an editable table on the editText.

[Steve Garman]

Overwrite mode is not something that android users expect and would be hard to implement in an OnChange callback.

The only time I experimented with it was a long time ago, when adding some extra keys of my own. http://wiki.droidscript.me.uk/doku.php?id=sample_code:extra_keys

[Alex]

Thanks, Steve, I understand. I implemented overwrite mode for my tasks. It needed to edit table cells - allows to edit without changing the length of the string in the cell that led to the shake table.

Charles Wilt, you can test speed of textEdit array. Is it good?

function OnStart()
{
    lay = app.CreateLayout( "absolute", "Left,Top,FillXY" );   
   
    btn = app.CreateButton( 'Clear fields' );
    btn.SetPosition( 0, 0.95);
    btn.SetOnTouch( clearFields );
   
    _list = [];

    var _t = 0;
    for( var _y = 0, _yMax = 19; _y < _yMax; _y++ ){
       
       
       
        for( var _x = 0, _xMax = 9; _x <= _xMax; _x++ ){
            _t++;   
            var _txe = app.CreateTextEdit( _t , 0.1, 0.05 );
            _txe.SetPosition( _x * 0.1, _y * 0.05 );
            _list.push( _txe );
            lay.AddChild( _txe );
        }
    }
   
    lay.AddChild( btn );
    app.AddLayout( lay );
   
}

function clearFields(){
   
    for( var _i in _list ){
       
        _list[ _i ].SetText( '' );
    }
}

[Charles Wilt]

It took 3.1 seconds to clear on my test device which is a samsung note 3.

[Alex]

I have the same time on my tablet Fujitsu. For me it's slow.

I tried DrawText on the canvas, but it's even slower. I've not experimented, but it seems that the graphics on the canvas is slower than the transformation of views.

Moving one Button on the screen I like more than moving one rectangle with the cleaning of the canvas. In this case, it is possible to place graphics on the layout and transform the layout.

[Alex]

An intermediate version of the table being edited. My research showed that:

1. array of textEdit - for 10-20 cells
2. One TextEdit using html (SetHtml) - for 100 - 300 cells
3. One TextEdit without using html (SetText) - for 1000 - 5000 cells
   

Table on one TextEdit with monospaced font doesn't look good, but works fast!

[Alex]

Hi guys,

Another way to do scrolling and editable table with multiple textEdit as columns. This can be used to synchronize lists.

var _currentCol;

app.SetOnKey( OnKey );

function OnKey(action, keyName, keyCode, mods){ 

    getCurrentLine();
}

function OnStart()
{
    var _layTop = app.CreateLayout( "linear", "vCenter, vertical,fillXY" );
   
        var _layControl = app.CreateLayout( "linear", "horizontal" );
           
            var txtText = app.CreateText( 'first - text, second - col, third - row', -1, -1, 'singleLine');
            txtText.SetTextSize(14);
            txeText = app.CreateTextEdit( 'test', 0.1, -1, 'singleLine');
            txeCol = app.CreateTextEdit( '1', 0.1, -1, 'singleLine');
            txeRow = app.CreateTextEdit( '1', 0.1, -1, 'singleLine');
            var _txeInsert = app.CreateButton( 'Insert');
            _txeInsert.SetOnTouch( insertValue );
       
        _layControl.AddChild( txeText );
        _layControl.AddChild( txeCol );
        _layControl.AddChild( txeRow );
        _layControl.AddChild( _txeInsert );
   
        var _lay = app.CreateLayout( "linear", "horizontal" );   
        var _text = [];
   
        txe0 = app.CreateTextEdit( _text.join( '\n' ), 0.2, -1);
        txe0.SetOnChange( changeText );
        txe0.SetOnTouch( touch );
        txe0.col = 0;
       
        txe1 = app.CreateTextEdit( _text.join( '\n' ), 0.2, -1);
        txe1.SetOnChange( changeText );
        txe1.SetOnTouch( touch );
        txe1.col = 1;
   
        _lay.AddChild( txe0 );
        _lay.AddChild( txe1 );

        var _scr = app.CreateScroller( 0.4, 0.2);
       
            var _layScr = app.CreateLayout( 'linear');
           
           _layScr.AddChild( _lay )
          
        _scr.AddChild( _layScr );
   
    _layTop.AddChild( txtText );
    _layTop.AddChild( _layControl );
    _layTop.AddChild( _scr );
   
    setRowCount( 20 );
   
    app.AddLayout( _layTop );
   
}

function setText( p_text, p_col, p_row ){
   
    try{
       
        if(( p_row < 0) || ( p_row > 19 )){
           
            throw true;
        }
       
        var _rows = window[ 'txe' + p_col ].GetText().split( '\n' );
        var _length = p_text.length;
       
        var _start = 0;
       
        for( var _r = 0; _r < p_row; _r++ ){
           
            _start += _rows[ _r ].length + 1;
        }
       
        var _end = _start + _rows[ _r ].length;
       
        window[ 'txe' + p_col ].ReplaceText( p_text, _start, _end );
       
    } catch(e) {
       
        app.ShowPopup( 'Enter col from 0 to 1 and row from 0 to 19' );
    }
}

function setRowCount( p_rowCount ){
   
    var _text = '';
   
    for( var _row = 0; _row <= p_rowCount; _row++ ){
       
        _text += _row + '\n' ;
    }
   
    _text = _text.slice( 0, -1);
   
    txe0.SetText( _text );
    txe1.SetText( _text );
}

function changeText(){
   
    var _line = this.GetCursorLine();
    var _spl = this.GetText().split( '\n' );
    var _text = _spl[ _line ];
    //app.ShowPopup( _text );//var _lengthText = _text.length;
    //txe2.SetSelection( 0, 3);
}

function getCurrentLine(){
   
    try{
       
        var _col = _currentCol;
        var _row = window[ 'txe' + _currentCol ].GetCursorLine();
       
        txeCol.SetText( _col );
        txeRow.SetText( _row );

   
        app.ShowPopup( 'col - ' + _col + ', row - ' + _row );
    }   
    catch(e){}
}

function insertValue(){
   
    var _text = txeText.GetText();
    var _col = txeCol.GetText();
    var _row = txeRow.GetText();
   
    setText( _text, _col, _row );
}

function touch(){
   
    _currentCol = this.col;
    getCurrentLine();
}