<![CDATA[Curl Global Community - Try 6: Integrating Applications]]> https://communities.curl.com/ Sun, 26 Apr 2026 19:46:47 +0000 MyBB <![CDATA[Page 8: Extra Practice]]> https://communities.curl.com/showthread.php?tid=86 Mon, 20 Jun 2011 04:55:09 +0000 https://communities.curl.com/showthread.php?tid=86 Extra Practice

Practice Problem 1: Basics

Let’s take the example from Basics 1 and create a TabContainer with a label displayed on the right. Furthermore, in the initial display, have the "Page 2" tab displayed.



Hint: We can specify the position of a label using the tab-placement of a TabContainer. In TabPane, for the item that is to be displayed initially, the value of show? should be true.

Solution

Solution Program: c:\Curl\Try6\04_exercise1\start.curl

Code:
{value
    let tab-container:TabContainer =
        {TabContainer
            control-color = #EEFFFF,
            tab-placement = right,
            {TabPane
                label = Page 1,
                margin = 5pt,
                Contents of Page 1
            },
            {TabPane
                label = Page 2,
                margin = 5pt,
                show? = true,
                {image source = {url curl_logo.gif}}
                
            },
            {TabPane
                label = Page 3,
                margin = 5pt,
                {VBox
                    spacing = 5pt,
                    Display of multiple objects using a VBox,
                    {image source = {url curl_logo.gif}}
                }
            }
        }
    
    tab-container                                  
}

Explanation

Using the tab-placement option, we can place the label on any side of the tab container (top, bottom, left, right). And, by setting show?=true, we can specify which pane is initially displayed.

Practice Problem 2: Application

In the “Application” section, we used tabs to switch panes. Here we’ll modify the layout, create a navigation section, and provide a means of switching the content by pressing a command button.



Hint: To replace dynamic content, use a Frame. Frame.add has a keyword parameter replace?. If replace? is true, then the Frame's previous child, if any, will be replaced with a the specified graphical object.

Solution

Solution Program: c:\Curl\Try6\05_exercise2\start.curl
  • Use the same make-chart.scurl file that was used in Try 6-3.

Code:
{include make-chart.scurl}
{value
    let name-field:TextField = {TextField width = 100pt}
    let age-field:TextField = {TextField width = 100pt}
    let score-field:TextField = {TextField width = 100pt}
    
    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}
                         }
    
    let header:HBox = {HBox
                          background = skyblue,
                          margin = 5pt,
                          {image source = {url curl_logo.gif}},
                          {Fill},
                          {bold {big color = white, Curl Sample Application}},
                          {Fill},
                          {image source = {url curl_logo.gif}}
                      }
    
    
    let input-form:VBox = {VBox
                              spacing = 5pt,
                              {Table columns = 2,
                                  Name, name-field,
                                  Age, age-field,
                                  Score, score-field
                              },
                              {CommandButton
                                  label = Add data,
                                  {on Action do
                                      {data.append
                                          {RecordData
                                              name = name-field.value,
                                              age = age-field.value,
                                              score = score-field.value
                                          }
                                      }
                                      {data.commit}
                                  }
                              }
                          }
    
    let content1:VBox = {VBox
                            spacing = 10pt,
                            margin = 5pt,
                            input-form,
                            {RecordGrid
                                record-source = data,
                                height = 100pt
                            }
                        }
    
    let content2:VBox = {VBox
                            spacing = 10pt,
                            halign = center,
                            {bold Score Age Graph},
                            {make-chart data, type = area}
                        }
    
    
    let content-holder:Frame = {Frame
                                   halign = center,
                                   valign = center,
                                   background = aliceblue,
                                   width = {make-elastic},
                                   height = 300pt,
                                   content1
                               }
    
    let navigation:VBox = {VBox
                              halign = center,
                              background = mediumseagreen,
                              spacing = 5pt,
                              height = 300pt,
                              width = 100pt,
                              {CommandButton
                                  label = Page 1,
                                  {on Action do
                                      {content-holder.add replace? = true, content1}
                                  }
                              },
                              {CommandButton
                                  label = Page 2,
                                  {on Action do
                                      {content-holder.add replace? = true, content2}
                                  }
                              }
                          }
    
    let footer:HBox = {HBox
                          background = skyblue,
                          width = {make-elastic},
                          height = 30pt
                      }
    
    {VBox
        width = 500pt,
        header,
        {HBox
            valign = top,
            navigation,
            content-holder
        },
        footer
    }
}

Explanation

Frame is used to replace dynamic content. We use the replace?=true option on the add method. This method is often used to implement page transitions in Curl applications.]]> Extra Practice

Practice Problem 1: Basics

Let’s take the example from Basics 1 and create a TabContainer with a label displayed on the right. Furthermore, in the initial display, have the "Page 2" tab displayed.



Hint: We can specify the position of a label using the tab-placement of a TabContainer. In TabPane, for the item that is to be displayed initially, the value of show? should be true.

Solution

Solution Program: c:\Curl\Try6\04_exercise1\start.curl

Code:
{value
    let tab-container:TabContainer =
        {TabContainer
            control-color = #EEFFFF,
            tab-placement = right,
            {TabPane
                label = Page 1,
                margin = 5pt,
                Contents of Page 1
            },
            {TabPane
                label = Page 2,
                margin = 5pt,
                show? = true,
                {image source = {url curl_logo.gif}}
                
            },
            {TabPane
                label = Page 3,
                margin = 5pt,
                {VBox
                    spacing = 5pt,
                    Display of multiple objects using a VBox,
                    {image source = {url curl_logo.gif}}
                }
            }
        }
    
    tab-container                                  
}

Explanation

Using the tab-placement option, we can place the label on any side of the tab container (top, bottom, left, right). And, by setting show?=true, we can specify which pane is initially displayed.

Practice Problem 2: Application

In the “Application” section, we used tabs to switch panes. Here we’ll modify the layout, create a navigation section, and provide a means of switching the content by pressing a command button.



Hint: To replace dynamic content, use a Frame. Frame.add has a keyword parameter replace?. If replace? is true, then the Frame's previous child, if any, will be replaced with a the specified graphical object.

Solution

Solution Program: c:\Curl\Try6\05_exercise2\start.curl
  • Use the same make-chart.scurl file that was used in Try 6-3.

Code:
{include make-chart.scurl}
{value
    let name-field:TextField = {TextField width = 100pt}
    let age-field:TextField = {TextField width = 100pt}
    let score-field:TextField = {TextField width = 100pt}
    
    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}
                         }
    
    let header:HBox = {HBox
                          background = skyblue,
                          margin = 5pt,
                          {image source = {url curl_logo.gif}},
                          {Fill},
                          {bold {big color = white, Curl Sample Application}},
                          {Fill},
                          {image source = {url curl_logo.gif}}
                      }
    
    
    let input-form:VBox = {VBox
                              spacing = 5pt,
                              {Table columns = 2,
                                  Name, name-field,
                                  Age, age-field,
                                  Score, score-field
                              },
                              {CommandButton
                                  label = Add data,
                                  {on Action do
                                      {data.append
                                          {RecordData
                                              name = name-field.value,
                                              age = age-field.value,
                                              score = score-field.value
                                          }
                                      }
                                      {data.commit}
                                  }
                              }
                          }
    
    let content1:VBox = {VBox
                            spacing = 10pt,
                            margin = 5pt,
                            input-form,
                            {RecordGrid
                                record-source = data,
                                height = 100pt
                            }
                        }
    
    let content2:VBox = {VBox
                            spacing = 10pt,
                            halign = center,
                            {bold Score Age Graph},
                            {make-chart data, type = area}
                        }
    
    
    let content-holder:Frame = {Frame
                                   halign = center,
                                   valign = center,
                                   background = aliceblue,
                                   width = {make-elastic},
                                   height = 300pt,
                                   content1
                               }
    
    let navigation:VBox = {VBox
                              halign = center,
                              background = mediumseagreen,
                              spacing = 5pt,
                              height = 300pt,
                              width = 100pt,
                              {CommandButton
                                  label = Page 1,
                                  {on Action do
                                      {content-holder.add replace? = true, content1}
                                  }
                              },
                              {CommandButton
                                  label = Page 2,
                                  {on Action do
                                      {content-holder.add replace? = true, content2}
                                  }
                              }
                          }
    
    let footer:HBox = {HBox
                          background = skyblue,
                          width = {make-elastic},
                          height = 30pt
                      }
    
    {VBox
        width = 500pt,
        header,
        {HBox
            valign = top,
            navigation,
            content-holder
        },
        footer
    }
}

Explanation

Frame is used to replace dynamic content. We use the replace?=true option on the add method. This method is often used to implement page transitions in Curl applications.]]> <![CDATA[Page 7: Summary]]> https://communities.curl.com/showthread.php?tid=85 Mon, 20 Jun 2011 04:51:59 +0000 https://communities.curl.com/showthread.php?tid=85 TRY 6 Summary

Convenient functions for creating a layout
  • TabContainer
  • TabAccordion

Curl file extensions

  • Leftover space in a layout can be taken up with Fill
  • Objects that can stretch or contract are created using the make-elastic expression for their height and width


Procedure definition

Code:
{define-proc {procedure_name [argument_1, argument_2, …]}: return_value
}


Arguments
  1. Positional arguments... must supply a value for each argument. The number, data type, and order of positional arguments in a function call must match those in the function definition
  2. Keyword arguments... have default values. If a caller does not specify a value for a keyword argument, the function uses the default value
  3. Rest arguments... allows functions to accept an unlimited number of arguments. A rest argument is not individually named in the function definition. Instead, three periods (...) at the end of the list of arguments indicate that a function accepts rest arguments.


.png   6-2.PNG (Size: 8.4 KB / Downloads: 1209) ]]> TRY 6 Summary

Convenient functions for creating a layout
  • TabContainer
  • TabAccordion

Curl file extensions

  • Leftover space in a layout can be taken up with Fill
  • Objects that can stretch or contract are created using the make-elastic expression for their height and width


Procedure definition

Code:
{define-proc {procedure_name [argument_1, argument_2, …]}: return_value
}


Arguments
  1. Positional arguments... must supply a value for each argument. The number, data type, and order of positional arguments in a function call must match those in the function definition
  2. Keyword arguments... have default values. If a caller does not specify a value for a keyword argument, the function uses the default value
  3. Rest arguments... allows functions to accept an unlimited number of arguments. A rest argument is not individually named in the function definition. Instead, three periods (...) at the end of the list of arguments indicate that a function accepts rest arguments.


.png   6-2.PNG (Size: 8.4 KB / Downloads: 1209) ]]> <![CDATA[Page 6: Structure of a Program that Creates the Screen Layout]]> https://communities.curl.com/showthread.php?tid=84 Mon, 20 Jun 2011 04:49:35 +0000 https://communities.curl.com/showthread.php?tid=84 Structure of the Program that Creates the Screen Layout





So, let’s take a look at the source code. This is the largest example that we’ve seen so far. Please think of it as a review of what we’ve seen.

1. Including an scurl file

Code:
{include make-chart.scurl}

The contents of the file in the specified path are included at the location specified with include. In our example, this expression has the same meaning as including the contents of the make-chart.scurl file are the same as those described at this location. Using scurl files, it is easy to break up and manage large collections of code. It is also possible to include multiple files into a single scurl file.

Unlike applets with the .curl extension, files with the .scurl extension cannot be executed individually. As in the case of our example, .scurl files contain code that becomes part of a larger application.

Curl supports several other file extensions. Some examples are shown below.



2. Creating an input field

Code:
let name-field:TextField = {TextField width = 100pt}
let age-field:TextField = {TextField width = 100pt}
let score-field:TextField = {TextField width = 100pt}

The above code declares TextFields that are used for input.

3. RecordSet declaration

Code:
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}
    }

The above code creates the RecordSet that contains the data to be displayed as a grid or graph.

4. Creating HBox for the headers

Code:
let header:HBox =
    {HBox
        background = skyblue,
        margin = 5pt,
        {image source = {url curl_logo.gif}},
        {Fill},
        {bold {big color = white, Curl Sample Application}},
        {Fill},
        {image source = {url curl_logo.gif}}
    }

The above code creates the header that is displayed at the top of the screen. The HBox includes images and the title text. The images and text are separated by Fill objects. Fills are used to fill up spaces in a layout. The following illustration shows how this is done.



When used with no width or height specification as in this example, Fill stretches elastically to fill extra space. Each Fill object stretches by the same amount, causing the title to be centered in the HBox. Fill objects can also have specified height and/or width properties, in which case they will take on the specified size and will not stretch.
  • Example of a Fill that specifies a width

Code:
{Fill
    width = 50pt
}

5. Creating an input form layout

Code:
let input-form:VBox =
    {VBox
        spacing = 5pt,
        {Table columns = 2,
            Name, name-field,
            Age, age-field,
            Score, score-field
        },
        {CommandButton
            label = Add data,
            {on Action do
                {data.append
                    {RecordData
                        name = name-field.value,
                        age = age-field.value,
                        score = score-field.value
                    }
                }
                {data.commit}
            }
        }
    }

If we look at the contents of the first page tab, we find that there is an area for inputting data, as well as a grid for displaying that data. Here, we’ll create the area that is used for input. VBox contains two objects, namely Table and CommandButton.



Table arranges objects into rows and columns for display. When we create a Table, we can initially specify the number of columns and then specify the data contained in each row.



Note: There are many different ways of creating and manipulating a Table. For details, see the Developer's Guide.

Next, let’s take a look at the command buttons. When a button is clicked, the corresponding event handler stores the input value (using the value from in each text field) into RecordData, and adds it to RecordSet. Then, that change is finalized using commit. Changes can be undone using revert, which restores the state existing when commit was previously applied.

For a RecordSet, data can be modified using append, delete, and so on.

6. Creating a central TabContainers

Code:
let tab-container:TabContainer =
    {TabContainer
        width = {make-elastic},
        height = 300pt,
        ...
    }

Here, we’ll create a TabContainer that is displayed in the center of the screen. We can use options to specify a width and a height.

For width, which we use to specify using the width property, we won’t specify a fixed value such as 100 pt. Instead, we’ll specify the width using the {make-elastic} expression. By specifying {make-elastic} for the height and width, we create objects that can expand and contract. If, after estimating the size of the outside object, there is still space available, then the object can be enlarged. If there isn’t enough space, however, then the object made smaller. This is how the height and width are determined.

{make-elastic} also allows us to specify the smallest size and the initial size before expansion/contraction. Please refer to the Curl documentation for more information.

In our example, the data is read, line-by-line, and then added to the character string array.

7. First page TabPane

Code:
{TabPane
    label = Page 1,
    {VBox
        spacing = 10pt,
        margin = 5pt,
        input-form,
        {RecordGrid
            record-source = data,
            height = 100pt
        }
    }
},

By using VBox in the first page tab, we can display the input-form and RecordGrid. The input-form variable stores the input area defined in (5).

8. Second page TabPane

Code:
{TabPane
    label = Page 2,
    {make-chart data, type = area}
}

The execution results are displayed as a graph on the second page tab. The corresponding code is {make-chart data, type = ”char”} where make-chart is the name of a procedure. A procedure is a type of function that receives data known as arguments, performs predefined processing, and then returns the results. The definition of a procedure is explained below.


Calling a Procedure

Code:
{Procedure_name [argument_1, argument_2,…]}

When specifying multiple arguments, we delimit each argument with a comma (,).


9. Creating HBox for the footer

Code:
let footer:HBox =
    {HBox
        background = skyblue,
        width = {make-elastic},
        height = 30pt
    }

The above creates the footer that is displayed at the bottom of the screen. Here, again, we use make-elastic for the width.

10. VBox for displaying the overall layout

Code:
{VBox
    width = 600pt,
    header,
    tab-container,
    footer
}

The overall layout that appears on the screen is defined at the end of the value expression. The VBox contains the header, TabContainer, and footer that are displayed.

Next, we’ll take a look at the code contained in the make-chart.scurl file.

11. Importing a graph creation package

Code:
{import * from CURL.GUI.CHARTS}

We need to import the Curl package that allows us to create graphs. Note that this package must be explicitly imported.

12.Defining a procedure

Code:
{define-proc {make-chart rs:RecordSet, type:String = [color=red]bar[/color]}:LayeredChart
}

In (8), we looked at procedures and how they can be called. Here, we’ll discuss how to define a procedure.

A procedure is defined using the define-proc keyword. We can then specify a name for a procedure. We can actually specify any legal variable name, but the most common naming convention involves using all lower-case characters and “-“ as a delimiter between words. After that, we can specify arguments. When there are multiple arguments to be specified, we delimit them with commas (,). Lastly, we specify the type of the value returned by the procedure. Curl functions can return zero or more values. To deal with multiple return values, we specify the return value types as (return_value_type_1, return_value_type_2) using “()” and “,” as delimiters. When no value is to be returned, we specify void.


Procedure definition

Code:
{define-proc {procedure_name [argument_1, argument_2,…]}: return_value
}



Procedure definition (with multiple return values)

Code:
{define-proc {procedure_name [argument_1, argument_2,…]}: (return_value_1, return_value_2)
}



Procedure definition (when nothing is returned)

Code:
{define-proc {procedure_ name [argument_1, argument_2,…]}:void
}


If we take a closer look at this example, we see that two arguments are declared for our procedure, and that the declaration of each argument varies slightly. In Curl, there are several different ways of declaring arguments. Please consult the Curl documentation for more information.

Argument example 1

Code:
{define-proc {function1 param1:int, param2:double}:double
    {return param1*param2}
}
{function1 5, 1.52}

In the argument declaration, argument_name: argument_type must be specified when the procedure is declared. In our example, the “5” and “1.52” in {function1 5, 1.52} are specified to call the procedure. In calculations, the first “5” is substituted for param1, when the subsequent “1.52” is substituted for param2. In this type of case, where the order determines the value that will be substituted for an argument, we refer to the arguments as positional arguments.

Argument example 2

Code:
{define-proc {function2 param1:int = 1, param2:double = 0.0}:double
    {return param1*param2}
}
{function2 param1 = 5, param2 = 1.52}
{function2 param2 = 1.52}
{function2}
{function2 param2 = 1.52, param1 = 5}

In these argument declarations, we specify argument_name:argument_type = value to declare the arguments. In the examples, the procedure arguments are described in four different ways. All of these are valid ways of calling this procedure. In the case of , calling the procedure without specifying an argument, we use the default argument values specified in the procedure declaration. Unlike a positional argument, this kind of argument is not understood based on its position but instead on argument_name = value, whereby we look at the argument name to determine the argument that is intended. As a result, we can set the correct values for arguments without having to use a standard order. Such arguments are known as keyword arguments.

As in our example, positional and keyword arguments can be used together. In a declaration, the recommended specification method involves first describingt the positional arguments, followed by the keyword arguments.

In addition, we can also declare rest arguments, which allow a procedure to have a variable number of arguments. Rest arguments are indicated by a string of three periods (…).

Example procedure using rest arguments

Code:
{define-proc {function3 param1, param2:double = 0.0, ...}:double
    (proc body here)
}
{function3 5, param2 = 1.25, [color=red]aaaa[/color], color = [color=red]red[/color]}
  • For more information on rest arguments, refer to the Curl documentation.

In our example, when we call make-chart, we must specify the RecordSet value for the rs argument and, if necessary, pass a character string to the type argument.

13.Creating the graphs

Code:
let chart:LayeredChart =
    {LayeredChart
        height = 150pt, width = 200pt
    }
let layer:#ChartLayer =
    {switch type
     case bar do {BarLayer}
     case line do {LineLayer}
     case area do {AreaLayer}
     else null
    }
{if-non-null layer then
    set layer.x-axis-data = {ChartDataSeries rs, name}
    {layer.append-data-series {ChartDataSeries rs, score}}
    {layer.append-data-series {ChartDataSeries rs, age}}
    {chart.append-chart-layer layer}
}

Here, we’ll use the LayeredChart class to create a graph. In this example, ChartLayer and ChartDataSeries are not specified when LayeredChart is declared, but instead are added later using append-data-series and append-chart-layer. And, using the switch expression, the format of the graph is determined from the arguments passed to the procedure.

14.Specifying return values

Code:
{return chart}

The value returned by a procedure is specified using the return expression. If there is no return value (when void has been specified), the return expression is not necessary. Also, when there are multiple return values, these are specified with {return return_value_1, return_value_2, …}, delimited with commas (,).

.png   6-1.PNG (Size: 8.23 KB / Downloads: 1375) ]]> Structure of the Program that Creates the Screen Layout





So, let’s take a look at the source code. This is the largest example that we’ve seen so far. Please think of it as a review of what we’ve seen.

1. Including an scurl file

Code:
{include make-chart.scurl}

The contents of the file in the specified path are included at the location specified with include. In our example, this expression has the same meaning as including the contents of the make-chart.scurl file are the same as those described at this location. Using scurl files, it is easy to break up and manage large collections of code. It is also possible to include multiple files into a single scurl file.

Unlike applets with the .curl extension, files with the .scurl extension cannot be executed individually. As in the case of our example, .scurl files contain code that becomes part of a larger application.

Curl supports several other file extensions. Some examples are shown below.



2. Creating an input field

Code:
let name-field:TextField = {TextField width = 100pt}
let age-field:TextField = {TextField width = 100pt}
let score-field:TextField = {TextField width = 100pt}

The above code declares TextFields that are used for input.

3. RecordSet declaration

Code:
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}
    }

The above code creates the RecordSet that contains the data to be displayed as a grid or graph.

4. Creating HBox for the headers

Code:
let header:HBox =
    {HBox
        background = skyblue,
        margin = 5pt,
        {image source = {url curl_logo.gif}},
        {Fill},
        {bold {big color = white, Curl Sample Application}},
        {Fill},
        {image source = {url curl_logo.gif}}
    }

The above code creates the header that is displayed at the top of the screen. The HBox includes images and the title text. The images and text are separated by Fill objects. Fills are used to fill up spaces in a layout. The following illustration shows how this is done.



When used with no width or height specification as in this example, Fill stretches elastically to fill extra space. Each Fill object stretches by the same amount, causing the title to be centered in the HBox. Fill objects can also have specified height and/or width properties, in which case they will take on the specified size and will not stretch.
  • Example of a Fill that specifies a width

Code:
{Fill
    width = 50pt
}

5. Creating an input form layout

Code:
let input-form:VBox =
    {VBox
        spacing = 5pt,
        {Table columns = 2,
            Name, name-field,
            Age, age-field,
            Score, score-field
        },
        {CommandButton
            label = Add data,
            {on Action do
                {data.append
                    {RecordData
                        name = name-field.value,
                        age = age-field.value,
                        score = score-field.value
                    }
                }
                {data.commit}
            }
        }
    }

If we look at the contents of the first page tab, we find that there is an area for inputting data, as well as a grid for displaying that data. Here, we’ll create the area that is used for input. VBox contains two objects, namely Table and CommandButton.



Table arranges objects into rows and columns for display. When we create a Table, we can initially specify the number of columns and then specify the data contained in each row.



Note: There are many different ways of creating and manipulating a Table. For details, see the Developer's Guide.

Next, let’s take a look at the command buttons. When a button is clicked, the corresponding event handler stores the input value (using the value from in each text field) into RecordData, and adds it to RecordSet. Then, that change is finalized using commit. Changes can be undone using revert, which restores the state existing when commit was previously applied.

For a RecordSet, data can be modified using append, delete, and so on.

6. Creating a central TabContainers

Code:
let tab-container:TabContainer =
    {TabContainer
        width = {make-elastic},
        height = 300pt,
        ...
    }

Here, we’ll create a TabContainer that is displayed in the center of the screen. We can use options to specify a width and a height.

For width, which we use to specify using the width property, we won’t specify a fixed value such as 100 pt. Instead, we’ll specify the width using the {make-elastic} expression. By specifying {make-elastic} for the height and width, we create objects that can expand and contract. If, after estimating the size of the outside object, there is still space available, then the object can be enlarged. If there isn’t enough space, however, then the object made smaller. This is how the height and width are determined.

{make-elastic} also allows us to specify the smallest size and the initial size before expansion/contraction. Please refer to the Curl documentation for more information.

In our example, the data is read, line-by-line, and then added to the character string array.

7. First page TabPane

Code:
{TabPane
    label = Page 1,
    {VBox
        spacing = 10pt,
        margin = 5pt,
        input-form,
        {RecordGrid
            record-source = data,
            height = 100pt
        }
    }
},

By using VBox in the first page tab, we can display the input-form and RecordGrid. The input-form variable stores the input area defined in (5).

8. Second page TabPane

Code:
{TabPane
    label = Page 2,
    {make-chart data, type = area}
}

The execution results are displayed as a graph on the second page tab. The corresponding code is {make-chart data, type = ”char”} where make-chart is the name of a procedure. A procedure is a type of function that receives data known as arguments, performs predefined processing, and then returns the results. The definition of a procedure is explained below.


Calling a Procedure

Code:
{Procedure_name [argument_1, argument_2,…]}

When specifying multiple arguments, we delimit each argument with a comma (,).


9. Creating HBox for the footer

Code:
let footer:HBox =
    {HBox
        background = skyblue,
        width = {make-elastic},
        height = 30pt
    }

The above creates the footer that is displayed at the bottom of the screen. Here, again, we use make-elastic for the width.

10. VBox for displaying the overall layout

Code:
{VBox
    width = 600pt,
    header,
    tab-container,
    footer
}

The overall layout that appears on the screen is defined at the end of the value expression. The VBox contains the header, TabContainer, and footer that are displayed.

Next, we’ll take a look at the code contained in the make-chart.scurl file.

11. Importing a graph creation package

Code:
{import * from CURL.GUI.CHARTS}

We need to import the Curl package that allows us to create graphs. Note that this package must be explicitly imported.

12.Defining a procedure

Code:
{define-proc {make-chart rs:RecordSet, type:String = [color=red]bar[/color]}:LayeredChart
}

In (8), we looked at procedures and how they can be called. Here, we’ll discuss how to define a procedure.

A procedure is defined using the define-proc keyword. We can then specify a name for a procedure. We can actually specify any legal variable name, but the most common naming convention involves using all lower-case characters and “-“ as a delimiter between words. After that, we can specify arguments. When there are multiple arguments to be specified, we delimit them with commas (,). Lastly, we specify the type of the value returned by the procedure. Curl functions can return zero or more values. To deal with multiple return values, we specify the return value types as (return_value_type_1, return_value_type_2) using “()” and “,” as delimiters. When no value is to be returned, we specify void.


Procedure definition

Code:
{define-proc {procedure_name [argument_1, argument_2,…]}: return_value
}



Procedure definition (with multiple return values)

Code:
{define-proc {procedure_name [argument_1, argument_2,…]}: (return_value_1, return_value_2)
}



Procedure definition (when nothing is returned)

Code:
{define-proc {procedure_ name [argument_1, argument_2,…]}:void
}


If we take a closer look at this example, we see that two arguments are declared for our procedure, and that the declaration of each argument varies slightly. In Curl, there are several different ways of declaring arguments. Please consult the Curl documentation for more information.

Argument example 1

Code:
{define-proc {function1 param1:int, param2:double}:double
    {return param1*param2}
}
{function1 5, 1.52}

In the argument declaration, argument_name: argument_type must be specified when the procedure is declared. In our example, the “5” and “1.52” in {function1 5, 1.52} are specified to call the procedure. In calculations, the first “5” is substituted for param1, when the subsequent “1.52” is substituted for param2. In this type of case, where the order determines the value that will be substituted for an argument, we refer to the arguments as positional arguments.

Argument example 2

Code:
{define-proc {function2 param1:int = 1, param2:double = 0.0}:double
    {return param1*param2}
}
{function2 param1 = 5, param2 = 1.52}
{function2 param2 = 1.52}
{function2}
{function2 param2 = 1.52, param1 = 5}

In these argument declarations, we specify argument_name:argument_type = value to declare the arguments. In the examples, the procedure arguments are described in four different ways. All of these are valid ways of calling this procedure. In the case of , calling the procedure without specifying an argument, we use the default argument values specified in the procedure declaration. Unlike a positional argument, this kind of argument is not understood based on its position but instead on argument_name = value, whereby we look at the argument name to determine the argument that is intended. As a result, we can set the correct values for arguments without having to use a standard order. Such arguments are known as keyword arguments.

As in our example, positional and keyword arguments can be used together. In a declaration, the recommended specification method involves first describingt the positional arguments, followed by the keyword arguments.

In addition, we can also declare rest arguments, which allow a procedure to have a variable number of arguments. Rest arguments are indicated by a string of three periods (…).

Example procedure using rest arguments

Code:
{define-proc {function3 param1, param2:double = 0.0, ...}:double
    (proc body here)
}
{function3 5, param2 = 1.25, [color=red]aaaa[/color], color = [color=red]red[/color]}
  • For more information on rest arguments, refer to the Curl documentation.

In our example, when we call make-chart, we must specify the RecordSet value for the rs argument and, if necessary, pass a character string to the type argument.

13.Creating the graphs

Code:
let chart:LayeredChart =
    {LayeredChart
        height = 150pt, width = 200pt
    }
let layer:#ChartLayer =
    {switch type
     case bar do {BarLayer}
     case line do {LineLayer}
     case area do {AreaLayer}
     else null
    }
{if-non-null layer then
    set layer.x-axis-data = {ChartDataSeries rs, name}
    {layer.append-data-series {ChartDataSeries rs, score}}
    {layer.append-data-series {ChartDataSeries rs, age}}
    {chart.append-chart-layer layer}
}

Here, we’ll use the LayeredChart class to create a graph. In this example, ChartLayer and ChartDataSeries are not specified when LayeredChart is declared, but instead are added later using append-data-series and append-chart-layer. And, using the switch expression, the format of the graph is determined from the arguments passed to the procedure.

14.Specifying return values

Code:
{return chart}

The value returned by a procedure is specified using the return expression. If there is no return value (when void has been specified), the return expression is not necessary. Also, when there are multiple return values, these are specified with {return return_value_1, return_value_2, …}, delimited with commas (,).

.png   6-1.PNG (Size: 8.23 KB / Downloads: 1375) ]]> <![CDATA[Page 5: Application: Creating the Screen Layout]]> https://communities.curl.com/showthread.php?tid=83 Mon, 20 Jun 2011 04:46:22 +0000 https://communities.curl.com/showthread.php?tid=83 Application: Creating the Screen Layout

Let’s use a combination of graphical containers to create a screen layout. We’ll also look at how we can use Curl code that is written in a separate file and access it from within start.curl.

Create the 'Try 6-3' Project

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



Inputting the Program

Copy the curl_logo.gif file from c:\Curl\Try6\03_create_layout_1 and paste it into c:\Curl\lesson\Try6\03_create_layout_1, and then input the following program. You can copy the program code below or use c:\Curl\Try6\03_create_layout_1\start.curl and then paste it into the editor in the IDE.

Code:
{value
    let name-field:TextField = {TextField width = 100pt}
    let age-field:TextField = {TextField width = 100pt}
    let score-field:TextField = {TextField width = 100pt}
    
    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}
                         }
    
    let header:HBox = {HBox
                          background = skyblue,
                          margin = 5pt,
                          {image source = {url curl_logo.gif}},
                          {Fill},
                          {bold {big color = white, Curl Sample Application}},
                          {Fill},
                          {image source = {url curl_logo.gif}}
                      }
    
    
    let input-form:VBox = {VBox
                              spacing = 5pt,
                              {Table columns = 2,
                                  Name, name-field,
                                  Age, age-field,
                                  Score, score-field
                              },
                              {CommandButton
                                  label = Add data,
                                  {on Action do
                                      {data.append
                                          {RecordData
                                              name = name-field.value,
                                              age = age-field.value,
                                              score = score-field.value
                                          }
                                      }
                                      {data.commit}
                                  }
                              }
                          }
    
    let tab-container:TabContainer = {TabContainer
                                         width = {make-elastic},
                                         height = 300pt,
                                         {TabPane
                                             label = Page 1,
                                             {VBox
                                                 spacing = 10pt,
                                                 margin = 5pt,
                                                 input-form,
                                                 {RecordGrid
                                                     record-source = data,
                                                     height = 100pt
                                                 }
                                             }
                                         },
                                         {TabPane
                                             label = Page 2
                                         }
                                     }
    let footer:HBox = {HBox
                          background = skyblue,
                          width = {make-elastic},
                          height = 30pt
                      }
    
    {VBox
        width = 600pt,
        header,
        tab-container,
        footer
    }
}

Save the program, and then execute it. Provided no errors occur, the layout is as shown in Figures 6-15 and 6-16, proceed to the next step.





Creating a New File

Next, from the IDE “File” menu, select “New Project.” In the \[New\] dialog box, a \[New File\] tab will be displayed. As shown in Figure 6-18, select \[empty .scurl file\] (1), input make-chart.scurl as the file name (2), specify c:\Curl\lesson\Try6\03create_layout_1 (3), place a check mark in the “Make this file part of the current project” check box (4), and then click \[OK\].





Confirm that this file has been added to the project. Figure 6-20 shows the contents of the file that is added to the project.





Adding Content to the New File

Input the following content to the make-chart.scurl file. Or, if you prefer, you can copy the content from c:\Curl\Try6\03 create_layout_1\make-chart.scurl and then paste it into the editor.

Code:
{import * from CURL.GUI.CHARTS}
{define-proc {make-chart rs:RecordSet, type:String = bar}:LayeredChart
    let chart:LayeredChart = {LayeredChart
                                 height = 150pt, width = 200pt
                             }
    let layer:#ChartLayer = {switch type
                             case bar do {BarLayer}
                             case line do {LineLayer}
                             case area do {AreaLayer}
                             else null
                            }
    {if-non-null layer then
        set layer.x-axis-data = {ChartDataSeries rs, name}
        {layer.append-data-series {ChartDataSeries rs, score}}
        {layer.append-data-series {ChartDataSeries rs, age}}
        {chart.append-chart-layer layer}
    }
    
    {return chart}
}

Adding Code to start.curl

Open the start.curl file using the editor. Add the following source code between the herald declaration and the value expression.

Code:
{include [color=red]make-chart.scurl[/color]}



Next, look at the location of the tab-container variable. You’ll see that nothing is included in the second page tab. Immediately after label = ”second page” add a comma (,). After the comma, add the following source code.

Code:
{make-chart data, type = [color=red]area[/color]}



Save the File, and then Execute the Program

After inputting the code, save the file, and then execute the program. Then, display the second page tab and check that the graph has been added.



Input a value into the input form on the first page tab (1), and then click the Add data button (2). The input data will be added.





Look at the second page tab. As a result of adding the data, the graph is also modified.

]]> Application: Creating the Screen Layout

Let’s use a combination of graphical containers to create a screen layout. We’ll also look at how we can use Curl code that is written in a separate file and access it from within start.curl.

Create the 'Try 6-3' Project

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



Inputting the Program

Copy the curl_logo.gif file from c:\Curl\Try6\03_create_layout_1 and paste it into c:\Curl\lesson\Try6\03_create_layout_1, and then input the following program. You can copy the program code below or use c:\Curl\Try6\03_create_layout_1\start.curl and then paste it into the editor in the IDE.

Code:
{value
    let name-field:TextField = {TextField width = 100pt}
    let age-field:TextField = {TextField width = 100pt}
    let score-field:TextField = {TextField width = 100pt}
    
    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}
                         }
    
    let header:HBox = {HBox
                          background = skyblue,
                          margin = 5pt,
                          {image source = {url curl_logo.gif}},
                          {Fill},
                          {bold {big color = white, Curl Sample Application}},
                          {Fill},
                          {image source = {url curl_logo.gif}}
                      }
    
    
    let input-form:VBox = {VBox
                              spacing = 5pt,
                              {Table columns = 2,
                                  Name, name-field,
                                  Age, age-field,
                                  Score, score-field
                              },
                              {CommandButton
                                  label = Add data,
                                  {on Action do
                                      {data.append
                                          {RecordData
                                              name = name-field.value,
                                              age = age-field.value,
                                              score = score-field.value
                                          }
                                      }
                                      {data.commit}
                                  }
                              }
                          }
    
    let tab-container:TabContainer = {TabContainer
                                         width = {make-elastic},
                                         height = 300pt,
                                         {TabPane
                                             label = Page 1,
                                             {VBox
                                                 spacing = 10pt,
                                                 margin = 5pt,
                                                 input-form,
                                                 {RecordGrid
                                                     record-source = data,
                                                     height = 100pt
                                                 }
                                             }
                                         },
                                         {TabPane
                                             label = Page 2
                                         }
                                     }
    let footer:HBox = {HBox
                          background = skyblue,
                          width = {make-elastic},
                          height = 30pt
                      }
    
    {VBox
        width = 600pt,
        header,
        tab-container,
        footer
    }
}

Save the program, and then execute it. Provided no errors occur, the layout is as shown in Figures 6-15 and 6-16, proceed to the next step.





Creating a New File

Next, from the IDE “File” menu, select “New Project.” In the \[New\] dialog box, a \[New File\] tab will be displayed. As shown in Figure 6-18, select \[empty .scurl file\] (1), input make-chart.scurl as the file name (2), specify c:\Curl\lesson\Try6\03create_layout_1 (3), place a check mark in the “Make this file part of the current project” check box (4), and then click \[OK\].





Confirm that this file has been added to the project. Figure 6-20 shows the contents of the file that is added to the project.





Adding Content to the New File

Input the following content to the make-chart.scurl file. Or, if you prefer, you can copy the content from c:\Curl\Try6\03 create_layout_1\make-chart.scurl and then paste it into the editor.

Code:
{import * from CURL.GUI.CHARTS}
{define-proc {make-chart rs:RecordSet, type:String = bar}:LayeredChart
    let chart:LayeredChart = {LayeredChart
                                 height = 150pt, width = 200pt
                             }
    let layer:#ChartLayer = {switch type
                             case bar do {BarLayer}
                             case line do {LineLayer}
                             case area do {AreaLayer}
                             else null
                            }
    {if-non-null layer then
        set layer.x-axis-data = {ChartDataSeries rs, name}
        {layer.append-data-series {ChartDataSeries rs, score}}
        {layer.append-data-series {ChartDataSeries rs, age}}
        {chart.append-chart-layer layer}
    }
    
    {return chart}
}

Adding Code to start.curl

Open the start.curl file using the editor. Add the following source code between the herald declaration and the value expression.

Code:
{include [color=red]make-chart.scurl[/color]}



Next, look at the location of the tab-container variable. You’ll see that nothing is included in the second page tab. Immediately after label = ”second page” add a comma (,). After the comma, add the following source code.

Code:
{make-chart data, type = [color=red]area[/color]}



Save the File, and then Execute the Program

After inputting the code, save the file, and then execute the program. Then, display the second page tab and check that the graph has been added.



Input a value into the input form on the first page tab (1), and then click the Add data button (2). The input data will be added.





Look at the second page tab. As a result of adding the data, the graph is also modified.

]]> <![CDATA[Page 4: Structure of a Program that uses a Tab Accordion to Create the Layout]]> https://communities.curl.com/showthread.php?tid=82 Mon, 20 Jun 2011 04:44:26 +0000 https://communities.curl.com/showthread.php?tid=82 Structure of the Program that uses a TabAccordion to Create the Layout



The use of TabAccordion to create a layout is similar to that of TabContainer. For each tab, we specify a TabPane declaration, in the same manner as in Basics 1.

1. Declaring a TabAccordion

Code:
let tab-accordion:TabAccordion =
    {TabAccordion
    }

To create a tab accordion, we use TabAccordion. Unless specified otherwise, the page layout is oriented vertically, as in the case of this example. To orient the layout horizontally, we would specify tab-orientation = Orientation.horizontal.

Code:
let tab-accordion:TabAccordion =
    {TabAccordion
        tab-orientation = Orientation.horizontal,
        ... (additional code) ...
    }

Note: In the STEP 2 source code, ||tab-orientation = Orientation.horizontal is commented out. Simply by removing the || we can flip the TabAccordion orientation from vertical to horizontal.


]]> Structure of the Program that uses a TabAccordion to Create the Layout



The use of TabAccordion to create a layout is similar to that of TabContainer. For each tab, we specify a TabPane declaration, in the same manner as in Basics 1.

1. Declaring a TabAccordion

Code:
let tab-accordion:TabAccordion =
    {TabAccordion
    }

To create a tab accordion, we use TabAccordion. Unless specified otherwise, the page layout is oriented vertically, as in the case of this example. To orient the layout horizontally, we would specify tab-orientation = Orientation.horizontal.

Code:
let tab-accordion:TabAccordion =
    {TabAccordion
        tab-orientation = Orientation.horizontal,
        ... (additional code) ...
    }

Note: In the STEP 2 source code, ||tab-orientation = Orientation.horizontal is commented out. Simply by removing the || we can flip the TabAccordion orientation from vertical to horizontal.


]]> <![CDATA[Page 3: Basics 2: Using a Tab Accordion to Display a Layout]]> https://communities.curl.com/showthread.php?tid=81 Mon, 20 Jun 2011 04:43:16 +0000 https://communities.curl.com/showthread.php?tid=81 Basics 2: Using a TabAccordion to Display a Layout

Create the 'Try 6-2' Project

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



Inputting the Program

Copy the curl_logo.gif file from c:\Curl\Try6\02_accordion_layout and paste it into the c:\Curl\lesson\Try6\02_accordion_layout folder. Next, we’ll input the program. You can copy the program code below or use c:\Curl\Try6\02_accordion_layout\start.curl and then paste it into the editor in the IDE.

Code:
{value
    let tab-accordion:TabAccordion =
        {TabAccordion
            || tab-orientation = Orientation.horizontal,
            {TabPane
                label = Page 1,
                margin = 5pt,
                Contents of Page 1
            },
            {TabPane
                label = Page 2,
                margin = 5pt,
                {image source = {url curl_logo.gif}}
                
            },
            {TabPane
                label = Page 3,
                margin = 5pt,
                {VBox
                    spacing = 5pt,
                    Display multiple objects using a VBox,
                    {image source = {url curl_logo.gif}}
                }
            }
        }    
    tab-accordion
}

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.





]]> Basics 2: Using a TabAccordion to Display a Layout

Create the 'Try 6-2' Project

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



Inputting the Program

Copy the curl_logo.gif file from c:\Curl\Try6\02_accordion_layout and paste it into the c:\Curl\lesson\Try6\02_accordion_layout folder. Next, we’ll input the program. You can copy the program code below or use c:\Curl\Try6\02_accordion_layout\start.curl and then paste it into the editor in the IDE.

Code:
{value
    let tab-accordion:TabAccordion =
        {TabAccordion
            || tab-orientation = Orientation.horizontal,
            {TabPane
                label = Page 1,
                margin = 5pt,
                Contents of Page 1
            },
            {TabPane
                label = Page 2,
                margin = 5pt,
                {image source = {url curl_logo.gif}}
                
            },
            {TabPane
                label = Page 3,
                margin = 5pt,
                {VBox
                    spacing = 5pt,
                    Display multiple objects using a VBox,
                    {image source = {url curl_logo.gif}}
                }
            }
        }    
    tab-accordion
}

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.





]]> <![CDATA[Page 2: Structure of a Program that uses Tab Containers]]> https://communities.curl.com/showthread.php?tid=80 Mon, 20 Jun 2011 04:41:29 +0000 https://communities.curl.com/showthread.php?tid=80 Structure of the Program that uses Tab Containers

First, let's look at the functions that we can use to create a layout. Each tab container can contain multiple pages. Let’s take a look at the source code.



1. Declaring a TabContainer

Code:
let tab-container:TabContainer =
    {TabContainer
        control-color = #EEFFFF,
        
    }

By using TabContainer, we can integrate multiple pages, and then select and display any one of those pages. The control-color option is used to specify the background color for the TabContainer.

2. First TabPane

Code:
{TabPane
    label = Page 1,
    margin = 5pt,
    Contents of Page 1
},

Each page is created using a TabPane. Using the label option, we can specify the display of a label. Only one object can be directly incorporated into TabPane. In our example, the character string “Contents of first page” is incorporated into the TabPane.



3. Second TabPane

Code:
{TabPane
    label = Page 2,
    margin = 5pt,
    {image source = {url curl_logo.gif}}
    
},

The second pane displays an image.

4. Third TabPane

Code:
{TabPane
    label = Page 3,
    margin = 5pt,
    {VBox
        spacing = 5pt,
        Display multiple objects using a VBox,
        {image source = {url curl_logo.gif}}
    }
}

The third pane displays both a character string and an image. Since each TabPane can only contain one object we use VBox (as in this example) or another container such as HBox.

5. TabContainer display

Code:
tab-container

Finally, we display the tab container.]]> Structure of the Program that uses Tab Containers

First, let's look at the functions that we can use to create a layout. Each tab container can contain multiple pages. Let’s take a look at the source code.



1. Declaring a TabContainer

Code:
let tab-container:TabContainer =
    {TabContainer
        control-color = #EEFFFF,
        
    }

By using TabContainer, we can integrate multiple pages, and then select and display any one of those pages. The control-color option is used to specify the background color for the TabContainer.

2. First TabPane

Code:
{TabPane
    label = Page 1,
    margin = 5pt,
    Contents of Page 1
},

Each page is created using a TabPane. Using the label option, we can specify the display of a label. Only one object can be directly incorporated into TabPane. In our example, the character string “Contents of first page” is incorporated into the TabPane.



3. Second TabPane

Code:
{TabPane
    label = Page 2,
    margin = 5pt,
    {image source = {url curl_logo.gif}}
    
},

The second pane displays an image.

4. Third TabPane

Code:
{TabPane
    label = Page 3,
    margin = 5pt,
    {VBox
        spacing = 5pt,
        Display multiple objects using a VBox,
        {image source = {url curl_logo.gif}}
    }
}

The third pane displays both a character string and an image. Since each TabPane can only contain one object we use VBox (as in this example) or another container such as HBox.

5. TabContainer display

Code:
tab-container

Finally, we display the tab container.]]> <![CDATA[Page 1: Integrating Applications]]> https://communities.curl.com/showthread.php?tid=79 Mon, 20 Jun 2011 04:39:34 +0000 https://communities.curl.com/showthread.php?tid=79 Try 6: Integrating Applications

Please download the Try6.zip file by selecting the following link: Try6.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.

In the previous chapters, we’ve simply displayed grids and graphs in our browser. In Try 6, we’ll examine how we can actually arrange the displayed objects on the screen.

Basics: Integrating multiple pages into a tab container.

Create the 'Try 6-1' Project

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



Copying an Image File

Copy the curl_logo.gif file from c:\Curl\try6\01_tab_layout folder to c:\Curl\lesson\Try6\01_tab_layout.



Inputting the Program

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

Code:
{value
    let tab-container:TabContainer =
        {TabContainer
            control-color = #EEFFFF,
            {TabPane
                label = Page 1,
                margin = 5pt,
                Contents of Page 1
            },
            {TabPane
                label = Page 2,
                margin = 5pt,
                {image source = {url curl_logo.gif}}
                
            },
            {TabPane
                label = Page 3,
                margin = 5pt,
                {VBox
                    spacing = 5pt,
                    Display multiple objects using a VBox,
                    {image source = {url curl_logo.gif}}
                }
            }
        }
    
    tab-container
}

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. Try switching the tabs as shown in Figures 6-3, 6-4, and 6-5.





]]> Try 6: Integrating Applications

Please download the Try6.zip file by selecting the following link: Try6.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.

In the previous chapters, we’ve simply displayed grids and graphs in our browser. In Try 6, we’ll examine how we can actually arrange the displayed objects on the screen.

Basics: Integrating multiple pages into a tab container.

Create the 'Try 6-1' Project

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



Copying an Image File

Copy the curl_logo.gif file from c:\Curl\try6\01_tab_layout folder to c:\Curl\lesson\Try6\01_tab_layout.



Inputting the Program

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

Code:
{value
    let tab-container:TabContainer =
        {TabContainer
            control-color = #EEFFFF,
            {TabPane
                label = Page 1,
                margin = 5pt,
                Contents of Page 1
            },
            {TabPane
                label = Page 2,
                margin = 5pt,
                {image source = {url curl_logo.gif}}
                
            },
            {TabPane
                label = Page 3,
                margin = 5pt,
                {VBox
                    spacing = 5pt,
                    Display multiple objects using a VBox,
                    {image source = {url curl_logo.gif}}
                }
            }
        }
    
    tab-container
}

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. Try switching the tabs as shown in Figures 6-3, 6-4, and 6-5.





]]>