06-20-2011, 01:55 PM
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
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
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.
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.