Page 1: Displaying Data in a Grid

[ashimo]

Displaying Data in a Grid

In this chapter, we’ll take the scores from the Try 2 game, and arrange them into a table. We’ll manage data on names, scores, and ages

Please download the Try3.zip file by selecting the following link: Try3.zip.

Unzip the contents to the C:\Curl directory. This is the working directory for all the examples and exercises contained within this tutorial. Note: If C:\Curl has not already been created, you can create it now.

Basics 1: Using RecordGrid to Display Data as a Table

Create the 'Try 3-1' Project

Close the Try 2 project and then, from the IDE 'File' menu, select 'New Project'. In the 'New Project' dialog box, select “Applet Project” (1), input “Try3-1” (2), specify c:\Curl\lesson\Try3\01_grid in the “Directory” field (3), set the API Version to 6.0 (4), and then click OK (5).


Inputting the Program

Next, we’ll input the program. You can copy the program code below or use c:\Curl\Try3\01_grid\start.curl and then paste it into the editor in the IDE.

Code:

{value
    let data:RecordSet = {RecordSet
                             {RecordFields
                                 {RecordField "name", domain = String},
                                 {RecordField "age", domain = int},
                                 {RecordField "score", domain = int}
                             },
                             {RecordData name = "Matt", age = 33, score = 88},
                             {RecordData name = "Sarah", age = 27, score = 79},
                             {RecordData name = "Jacob", age = 26, score = 90}
                         }
    
    {RecordGrid
        record-source = data,
        width = 10cm,
        height = 3cm
    }
}

Save the File, and then Execute the Program

After inputting the code, save the file, and then execute the program. The following result will appear in your browser.