Page 8: Extra Practice

[ashimo]

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.