Tech Note 25b: Using Tables

May 01, 2008

Copyright 2008 NS BASIC Corporation
GWH: Need to fix image

In this document, I will introduce how to display a table nicely, without using the Grid object.

Tables are used quite often in applications for many kinds. In a word processor, for example, you may draw lines to create table for organizing data on the screen. That is, a table is a collection of cells, which is arranged in both horizontal and vertical directions. You can draw lines to create a table but the table doesn't let you select or scroll cells. The method I will explain here is to draw lines on the screen while letting users to get data from the table.

Look at the screen below. This application, made using NS Basic, is able to scroll the cells vertically and select data.

      

It looks like it is using a grid object, but look at the IDE window below:

      

The project has a bitmap but there are only three buttons on the screen.
This bitmap is

      

Texts are drawn directly on the bitmap using the DrawChars command.

The program works as follows:
It first defines an array that stores date, content and price. I prepared the following user-defined variable by using Type:

    Type SheetData
        sWhen as String       'when
        sWhat as String       'what
        sHow as Integer       'how much
    End Type
    
    Global ShDat(30) as SheetData     'array for display

The difference between VB and NS Basic is the place of braces "()". 

     In NS Basic:
          ShDat.sWhat(i)
     In Visual BASIC:
          ShDat(i).sWhat

Now, we put dummy data in the variable. The date field contains just a number "day" because I assume that "year" and "month" would be displayed somewhere else. The data here doesn't mean anything.

Sub Project_Startup()
    
    Type SheetData
        sWhen as String       'when
        sWhat as String       'what
        sHow as Integer       'how much
    End Type
    
    Global ShDat(30) as SheetData     'array for display
    
    'make dummy data here
    Dim i as Integer
    
    For i=1 to 25
        ShDat.sWhen(i) = Trim(Str(Int(i/3)+1))
        ShDat.sWhat(i) = "Data" + str(Int(i/3))
        ShDat.sHow(i) = 100*Rand()*100
    Next
    
End Sub

Actually, even though there are 30 elements in the array, there are 25 records.

Now, we display the data on the bitmap. The idea is like this:

      

The important point is which record comes to the top of the table. If we find it, we can display 8 records from that record. So we need a variable to keep track of the record.

    Global iTop as Integer          'top record data

    'initialization
    iTop=1

The initial value for the variable is 1.
If you pay attention to the coordinates, writing character data is not difficult. The size of the table I prepared is:

      

Then, the vertical coordinate of ith record is:

      i * 14 + Py

where Py is the vertical coordinate of the top field. The code is:

    Dim iSt as Integer
    Dim iEd as Integer
    
    DrawBitmap 1004,0,16

    iSt=iTop
    iEd=iTop+7
    
    For j=iSt to iEd
        jy= (j-iSt) * 14 + 31

         .....

    Next

You have to consider the following things:

  • If iTop becomes greater than prepared elements of array.
  • How to represent the selected record. (highlighting)

You have probably understood the outline of the table creation. Please check the source code for details. You can download the project file here.

As you know from the sample, the process is quite fast, so you don't need to use a character object such as Label, drawing characters by DrawChars are very practical. Although non-object program seems old-fashioned, in some case, it may be better to use graphics window than using objects.