!../../wiki/easy-ide-book/common/images/toc.gif! !../../wiki/easy-ide-book/common/images/next_page.gif!

Try 3: <font color="black">Displaying Data in a Grid</font>

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: {font:courier new}Try3.zip{font}.

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.

<font color="navy">Basics 1: Using RecordGrid to Display Data as a Table</font>

<font color="black">Create the 'Try 3-1' Project</font>

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).

<font color="black">Inputting the Program</font>

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.

{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
    }
}

<font color="black">Save the File, and then Execute the Program</font>

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

!../../wiki/easy-ide-book/common/images/next_page.gif!