<![CDATA[Curl Global Community - Try 2: Making a Simple Action Game]]> https://communities.curl.com/ Wed, 06 May 2026 16:13:15 +0000 MyBB <![CDATA[Page 8: Extra Practice]]> https://communities.curl.com/showthread.php?tid=54 Thu, 16 Jun 2011 07:05:26 +0000 https://communities.curl.com/showthread.php?tid=54 Extra Practice

Practice Problem 1: Basics

Let’s create a program that uses a CommandButton to change the color of a Frame.



Hint: Give a name to the Frame, and then set the background option in the event handler.

Solution

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

Code:
{value
    let f:Frame = {Frame
                      background = yellow,
                      height = 5cm,
                      width = 5cm
                  }
    let red-button:CommandButton = {CommandButton
                                       label = red,
                                       {on Action do
                                           set f.background = red
                                       }
                                   }
    let blue-button:CommandButton = {CommandButton
                                        label = blue,
                                        {on Action do
                                            set f.background = blue
                                        }
                                    }
    {VBox
        spacing = 5pt,
        halign = center,
        f,
        {HBox
            spacing = 10pt,
            red-button,
            blue-button
        }
    }
}

Practice Problem 2: Application

Let’s add a reset button (reset-btn) to the above solution. Set the initial state of start-btn to invalid, and then add the following processing depending on which of the following three buttons are pressed.

start-btn
  • Disable start-btn
  • Enable stop-btn

stop-btn
  • Enable start-btn
  • Disable stop-btn

reset-btn
  • Reset start-time to null
  • Enable start-btn
  • Disable stop-btn


Hint: Use the enabled? option to switch buttons between enabled and disabled.

Solution

Solution Program: c:\Curl\Try1\05_exercise2\start.curl

Code:
{value
    let start-time:#DateTime
    let start-btn:CommandButton = {CommandButton label = Start}
    let stop-btn:CommandButton = {CommandButton label = Stop, enabled? = false}
    let reset-btn:CommandButton = {CommandButton label = Reset}
    
    {start-btn.add-event-handler
        {on Action do
            set start-time = {DateTime}
            set start-btn.enabled? = false
            set stop-btn.enabled? = true
        }
    }
    
    {stop-btn.add-event-handler
        {on Action do
            set start-btn.enabled? = true
            set stop-btn.enabled? = false
            let elapsed-time:Time = {start-time.elapsed}
            let time-double:double = elapsed-time / 1s
            let score:int = {switch time-double using <=
                             case 10 do (time-double * 10) asa int
                             case 20 do {abs ((20 - time-double) * 10) asa int}
                             else 0
                            }
            
            {popup-message {VBox
                               {center font-size = 20pt, {value score} points!!},
                               {center {value {start-time.elapsed}}}
                           }
            }
        }
    }
    
    {reset-btn.add-event-handler
        {on Action do
            set start-time = null
            set start-btn.enabled? = true
            set stop-btn.enabled? = false
        }
    }
    
    {VBox
        margin = 10pt,
        spacing = 10pt,
        halign = center,
        {bold Try to stop in 10 seconds},
        start-btn,
        stop-btn,
        reset-btn
    }
}
]]> Extra Practice

Practice Problem 1: Basics

Let’s create a program that uses a CommandButton to change the color of a Frame.



Hint: Give a name to the Frame, and then set the background option in the event handler.

Solution

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

Code:
{value
    let f:Frame = {Frame
                      background = yellow,
                      height = 5cm,
                      width = 5cm
                  }
    let red-button:CommandButton = {CommandButton
                                       label = red,
                                       {on Action do
                                           set f.background = red
                                       }
                                   }
    let blue-button:CommandButton = {CommandButton
                                        label = blue,
                                        {on Action do
                                            set f.background = blue
                                        }
                                    }
    {VBox
        spacing = 5pt,
        halign = center,
        f,
        {HBox
            spacing = 10pt,
            red-button,
            blue-button
        }
    }
}

Practice Problem 2: Application

Let’s add a reset button (reset-btn) to the above solution. Set the initial state of start-btn to invalid, and then add the following processing depending on which of the following three buttons are pressed.

start-btn
  • Disable start-btn
  • Enable stop-btn

stop-btn
  • Enable start-btn
  • Disable stop-btn

reset-btn
  • Reset start-time to null
  • Enable start-btn
  • Disable stop-btn


Hint: Use the enabled? option to switch buttons between enabled and disabled.

Solution

Solution Program: c:\Curl\Try1\05_exercise2\start.curl

Code:
{value
    let start-time:#DateTime
    let start-btn:CommandButton = {CommandButton label = Start}
    let stop-btn:CommandButton = {CommandButton label = Stop, enabled? = false}
    let reset-btn:CommandButton = {CommandButton label = Reset}
    
    {start-btn.add-event-handler
        {on Action do
            set start-time = {DateTime}
            set start-btn.enabled? = false
            set stop-btn.enabled? = true
        }
    }
    
    {stop-btn.add-event-handler
        {on Action do
            set start-btn.enabled? = true
            set stop-btn.enabled? = false
            let elapsed-time:Time = {start-time.elapsed}
            let time-double:double = elapsed-time / 1s
            let score:int = {switch time-double using <=
                             case 10 do (time-double * 10) asa int
                             case 20 do {abs ((20 - time-double) * 10) asa int}
                             else 0
                            }
            
            {popup-message {VBox
                               {center font-size = 20pt, {value score} points!!},
                               {center {value {start-time.elapsed}}}
                           }
            }
        }
    }
    
    {reset-btn.add-event-handler
        {on Action do
            set start-time = null
            set start-btn.enabled? = true
            set stop-btn.enabled? = false
        }
    }
    
    {VBox
        margin = 10pt,
        spacing = 10pt,
        halign = center,
        {bold Try to stop in 10 seconds},
        start-btn,
        stop-btn,
        reset-btn
    }
}
]]> <![CDATA[Page 7: Summary]]> https://communities.curl.com/showthread.php?tid=53 Thu, 16 Jun 2011 06:57:49 +0000 https://communities.curl.com/showthread.php?tid=53 TRY 2 Overview

Event handler structure


on

Code:
{on event-type do body}
{on event-type at target-var[:target-type] do body}
{on event-var:event-type at target-var[:target-type] do body}

where
  • event-var:event-type: binds a variable to the event.
  • target-var[:target-type]: binds a variable to the target.
  • body is the code for the event handler procedure.


Branching expressions


if

Code:
{if condition-1 then
    code-block-1
elseif condition-2 then
    code-block-2
elseif condition-3 then
    code-block-3
    ...
elseif condition-n then
    code-block-n
[else
     code-block-n+1]
}

where
  • condition-1, condition-2, ...: are Boolean expressions.
  • code-block-1, code-block-2, ...: each consist of one or more Curl language expressions.


switch

The switch expression has the following syntax:

Code:
{switch compare-expr [using compare-operator]
     case value-1 do
        code-block-1
     case value-2 do
        code-block-2
        ...
     case value-n do
        code-block-n
        [else code-block-n+1]
    }


where
  • compare-expr, value-1, value-2, value-n: are Curl language expressions. These expressions can evaluate to any Curl language type.
  • compare-operator: the operator that the Curl language uses when comparing compare-expr to value-1, value-2, and so on.
  • code-block-1, code-block-2, code-block-n: consist of one or more Curl language expressions.


Types of graphical containers


.png   2-4.PNG (Size: 13.48 KB / Downloads: 1308) ]]> TRY 2 Overview

Event handler structure


on

Code:
{on event-type do body}
{on event-type at target-var[:target-type] do body}
{on event-var:event-type at target-var[:target-type] do body}

where
  • event-var:event-type: binds a variable to the event.
  • target-var[:target-type]: binds a variable to the target.
  • body is the code for the event handler procedure.


Branching expressions


if

Code:
{if condition-1 then
    code-block-1
elseif condition-2 then
    code-block-2
elseif condition-3 then
    code-block-3
    ...
elseif condition-n then
    code-block-n
[else
     code-block-n+1]
}

where
  • condition-1, condition-2, ...: are Boolean expressions.
  • code-block-1, code-block-2, ...: each consist of one or more Curl language expressions.


switch

The switch expression has the following syntax:

Code:
{switch compare-expr [using compare-operator]
     case value-1 do
        code-block-1
     case value-2 do
        code-block-2
        ...
     case value-n do
        code-block-n
        [else code-block-n+1]
    }


where
  • compare-expr, value-1, value-2, value-n: are Curl language expressions. These expressions can evaluate to any Curl language type.
  • compare-operator: the operator that the Curl language uses when comparing compare-expr to value-1, value-2, and so on.
  • code-block-1, code-block-2, code-block-n: consist of one or more Curl language expressions.


Types of graphical containers


.png   2-4.PNG (Size: 13.48 KB / Downloads: 1308) ]]> <![CDATA[Page 6: Let’s look at the make-up of this game]]> https://communities.curl.com/showthread.php?tid=52 Thu, 16 Jun 2011 06:50:06 +0000 https://communities.curl.com/showthread.php?tid=52 Let’s look at the make-up of this game



1. 'let' variable declaration and 'DateTime' date operation

Code:
let start-time:#DateTime

The above declares the variables that are used by the program. The DateTime class is used for date or time-related operations. The program will use this variable to save the time at which the start button is pressed. Pay close attention to the variable declaration.

For the variables that we have seen so far, the declaration has taken this format:

let variable_name:type_name = initial_value.

We can, however, omit the = initial_value part. When the type is int, omitting the initial value results in the variable being set to 0. We refer to int and bool as “primitive” types. Whenever we omit the initial value for variables of these types, a standard default value is used.

In our example, if we don’t specify an initial value, the variable is set to a value that we call null. To declare that null can be substituted for a variable, we have to prefix the type name with # as in #DateTime.



null

null indicates that, at this instant, this variable does not refer to any object.


3. add-event-handler method: start-btn

Code:
{start-btn.add-event-handler
    {on Action do
        set start-time = {DateTime}
    }
}

In previous examples, event handlers have been added immediately after an object is created. In this example, we did not add the event handler when we create the CommandButton. Instead, we used the add-event-handler method to add the event handler later. By adding a variable name, we can use that name to add an event handler later.

In our example here, pressing the 'Start' button causes the current time to be set as the value for the start-time variable.

3. add-event-handler method: stop-btn

Code:
{stop-btn.add-event-handler
    {on Action do
        ...
    }
}

In the same way as in (2), an event handler is also added to stop-btn. The event handler performs the following processing.
Code:
[list]
[*](3)-1   Acquires the length of time that elapses after start-btn is pressed.
[*](3)-2   Determines a score based on the elapsed time.
[*](3)-3   Displays a message
[/list]
Below, we’ll look at these in order.

[size=large][font=Arial][b]3-1. Use “elapsed” method to acquire the length of time that elapses after start-btn is pressed.[/b][/font][/size]

[code]{on Action do
    let elapsed-time:Time = {start-time.elapsed}
    let time-double:double = elapsed-time / 1s
    ...
}

DateTime uses a method called “elapsed” to acquire the length of time since the creation of the DateTime object. That time is given in seconds. A method is a function that defines a behavior of a class.

3-2. Use 'switch' expression to calculate a score.

Code:
let score:int = {switch time-double using <=
                 case 10 do (time-double * 10) asa int
                 case 20 do {abs ((20 - time-double) * 10) asa int}
                 else 0
                }

If we say that exactly 10s is worth a score of 100, a high score will be given for attempts close to 10s. First, the type of the elapsed time data is converted from a time into a real number. Also, at the switch branch, a score is determined. When the elapsed time is within 10s, a score is obtained by multiplying the converted time by 10. When the elapsed time is between 10s and 20s, a score is obtained by subtracting the converted time from 20 and then multiplying the result by 10. For more than 20s, the score is 0.


if

Code:
{if condition-1 then
    code-block-1
elseif condition-2 then
    code-block-2
elseif condition-3 then
    code-block-3
    ...
elseif condition-n then
    code-block-n
    [else
     code-block-n+1]
}

where
  • condition-1, condition-2, ...: are Boolean expressions.
  • code-block-1, code-block-2, ...: each consist of one or more Curl language expressions.



Switch Expression Syntax

The switch expression has the following syntax:

Code:
{switch compare-expr [using compare-operator]
case value-1 do
    code-block-1
case value-2 do
    code-block-2
    ...
case value-n do
    code-block-n
  [else code-block-n+1]
}

where
  • compare-expr, value-1, value-2, value-n: are Curl language expressions. These expressions can evaluate to any Curl language type.
  • compare-operator: is the operator that the Curl language uses when comparing compare-expr to value-1, value-2, and so on. When the comparison operator is omitted, “==” is used.
  • code-block-1, code-block-2, code-block-n: consist of one or more Curl language expressions.


Now, let’s consider the usage the switch expression. This expression sets the initial value of the variable declared in the let phrase. if and switch expressions that include an else clause can return a value.

In our example, the values coded after do and else are used to initialize the variable score.

3-3. Displays a message.

Code:
{popup-message {VBox
                   {center font-size = 20pt, You have {value score} points! ! },
                   {center {value {start-time.elapsed}}}
               }
}

A message containing the score is displayed as a pop-up. popup-message is not limited to displaying character strings, but can also display graphical objects. Here, the VBox graphical container is displayed.


4. Creating a screen layout with 'VBox'

Code:
{VBox
    margin = 10pt,
    spacing = 10pt,
    halign = center,
    {bold Try to stop in 10 seconds},
    start-btn,
    stop-btn
}

If we look at this expression in its entirety, we find that it is enclosed in large value expression. This creates a code block. Each value expression can itself contain multiple expressions. However, when there are multiple expressions, the result for the final expression is returned and displayed on the screen. For this example, the final expression begins with VBox.

VBox is a graphical container that is used to arrange objects vertically. The first three lines in this expression specify option values, which specify the VBox margins and the spacing between objects. The expression coded with bold appears in the VBox, along with start-btn and stop-btn. These are arranged vertically.]]> Let’s look at the make-up of this game



1. 'let' variable declaration and 'DateTime' date operation

Code:
let start-time:#DateTime

The above declares the variables that are used by the program. The DateTime class is used for date or time-related operations. The program will use this variable to save the time at which the start button is pressed. Pay close attention to the variable declaration.

For the variables that we have seen so far, the declaration has taken this format:

let variable_name:type_name = initial_value.

We can, however, omit the = initial_value part. When the type is int, omitting the initial value results in the variable being set to 0. We refer to int and bool as “primitive” types. Whenever we omit the initial value for variables of these types, a standard default value is used.

In our example, if we don’t specify an initial value, the variable is set to a value that we call null. To declare that null can be substituted for a variable, we have to prefix the type name with # as in #DateTime.



null

null indicates that, at this instant, this variable does not refer to any object.


3. add-event-handler method: start-btn

Code:
{start-btn.add-event-handler
    {on Action do
        set start-time = {DateTime}
    }
}

In previous examples, event handlers have been added immediately after an object is created. In this example, we did not add the event handler when we create the CommandButton. Instead, we used the add-event-handler method to add the event handler later. By adding a variable name, we can use that name to add an event handler later.

In our example here, pressing the 'Start' button causes the current time to be set as the value for the start-time variable.

3. add-event-handler method: stop-btn

Code:
{stop-btn.add-event-handler
    {on Action do
        ...
    }
}

In the same way as in (2), an event handler is also added to stop-btn. The event handler performs the following processing.
Code:
[list]
[*](3)-1   Acquires the length of time that elapses after start-btn is pressed.
[*](3)-2   Determines a score based on the elapsed time.
[*](3)-3   Displays a message
[/list]
Below, we’ll look at these in order.

[size=large][font=Arial][b]3-1. Use “elapsed” method to acquire the length of time that elapses after start-btn is pressed.[/b][/font][/size]

[code]{on Action do
    let elapsed-time:Time = {start-time.elapsed}
    let time-double:double = elapsed-time / 1s
    ...
}

DateTime uses a method called “elapsed” to acquire the length of time since the creation of the DateTime object. That time is given in seconds. A method is a function that defines a behavior of a class.

3-2. Use 'switch' expression to calculate a score.

Code:
let score:int = {switch time-double using <=
                 case 10 do (time-double * 10) asa int
                 case 20 do {abs ((20 - time-double) * 10) asa int}
                 else 0
                }

If we say that exactly 10s is worth a score of 100, a high score will be given for attempts close to 10s. First, the type of the elapsed time data is converted from a time into a real number. Also, at the switch branch, a score is determined. When the elapsed time is within 10s, a score is obtained by multiplying the converted time by 10. When the elapsed time is between 10s and 20s, a score is obtained by subtracting the converted time from 20 and then multiplying the result by 10. For more than 20s, the score is 0.


if

Code:
{if condition-1 then
    code-block-1
elseif condition-2 then
    code-block-2
elseif condition-3 then
    code-block-3
    ...
elseif condition-n then
    code-block-n
    [else
     code-block-n+1]
}

where
  • condition-1, condition-2, ...: are Boolean expressions.
  • code-block-1, code-block-2, ...: each consist of one or more Curl language expressions.



Switch Expression Syntax

The switch expression has the following syntax:

Code:
{switch compare-expr [using compare-operator]
case value-1 do
    code-block-1
case value-2 do
    code-block-2
    ...
case value-n do
    code-block-n
  [else code-block-n+1]
}

where
  • compare-expr, value-1, value-2, value-n: are Curl language expressions. These expressions can evaluate to any Curl language type.
  • compare-operator: is the operator that the Curl language uses when comparing compare-expr to value-1, value-2, and so on. When the comparison operator is omitted, “==” is used.
  • code-block-1, code-block-2, code-block-n: consist of one or more Curl language expressions.


Now, let’s consider the usage the switch expression. This expression sets the initial value of the variable declared in the let phrase. if and switch expressions that include an else clause can return a value.

In our example, the values coded after do and else are used to initialize the variable score.

3-3. Displays a message.

Code:
{popup-message {VBox
                   {center font-size = 20pt, You have {value score} points! ! },
                   {center {value {start-time.elapsed}}}
               }
}

A message containing the score is displayed as a pop-up. popup-message is not limited to displaying character strings, but can also display graphical objects. Here, the VBox graphical container is displayed.


4. Creating a screen layout with 'VBox'

Code:
{VBox
    margin = 10pt,
    spacing = 10pt,
    halign = center,
    {bold Try to stop in 10 seconds},
    start-btn,
    stop-btn
}

If we look at this expression in its entirety, we find that it is enclosed in large value expression. This creates a code block. Each value expression can itself contain multiple expressions. However, when there are multiple expressions, the result for the final expression is returned and displayed on the screen. For this example, the final expression begins with VBox.

VBox is a graphical container that is used to arrange objects vertically. The first three lines in this expression specify option values, which specify the VBox margins and the spacing between objects. The expression coded with bold appears in the VBox, along with start-btn and stop-btn. These are arranged vertically.]]> <![CDATA[Page 5: Application... A “Push the Button in 10s” Game]]> https://communities.curl.com/showthread.php?tid=51 Thu, 16 Jun 2011 06:33:23 +0000 https://communities.curl.com/showthread.php?tid=51 Application... A “Push the Button in 10s” Game

Let’s create a simple game that combines events and control. In this game, we have to press a “start” button and then, when we think that ten seconds have passed, press a “stop” button. The closer we are to exactly 10s, the higher is our score.

Create the 'Try 2-3' Project

Close the Try 2-2 project and then, from the IDE "File" menu, select "New Project". In the "New Project" dialog box, select "Applet Project”"(1), input “Try2-3” (2), specify c:\Curl\lesson\Try2\03_game 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 following program code. Or, if you prefer, you can copy the program from c:\Curl\Try2\03_game\start.curl and then paste it into the editor.

Code:
{value
    let start-time:#DateTime
    let start-btn:CommandButton = {CommandButton label = Start}
    let stop-btn:CommandButton = {CommandButton label = Stop}
    
    {start-btn.add-event-handler
        {on Action do
            set start-time = {DateTime}
        }
    }
    
    {stop-btn.add-event-handler
        {on Action do
            let elapsed-time:Time = {start-time.elapsed}
            let time-double:double = elapsed-time / 1s
            let score:int = {switch time-double using <=
                             case 10 do (time-double * 10) asa int
                             case 20 do {abs ((20 - time-double) * 10) asa int}
                             else 0
                            }
            
            {popup-message {VBox
                               {center font-size = 20pt, You have {value score} points!!},
                               {center {value {start-time.elapsed}}}
                           }
            }
        }
    }
    
    {VBox
        margin = 10pt,
        spacing = 10pt,
        halign = center,
        {bold Try to stop in 10 seconds},
        start-btn,
        stop-btn
    }
}


Save the File and Execute the Program

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


]]> Application... A “Push the Button in 10s” Game

Let’s create a simple game that combines events and control. In this game, we have to press a “start” button and then, when we think that ten seconds have passed, press a “stop” button. The closer we are to exactly 10s, the higher is our score.

Create the 'Try 2-3' Project

Close the Try 2-2 project and then, from the IDE "File" menu, select "New Project". In the "New Project" dialog box, select "Applet Project”"(1), input “Try2-3” (2), specify c:\Curl\lesson\Try2\03_game 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 following program code. Or, if you prefer, you can copy the program from c:\Curl\Try2\03_game\start.curl and then paste it into the editor.

Code:
{value
    let start-time:#DateTime
    let start-btn:CommandButton = {CommandButton label = Start}
    let stop-btn:CommandButton = {CommandButton label = Stop}
    
    {start-btn.add-event-handler
        {on Action do
            set start-time = {DateTime}
        }
    }
    
    {stop-btn.add-event-handler
        {on Action do
            let elapsed-time:Time = {start-time.elapsed}
            let time-double:double = elapsed-time / 1s
            let score:int = {switch time-double using <=
                             case 10 do (time-double * 10) asa int
                             case 20 do {abs ((20 - time-double) * 10) asa int}
                             else 0
                            }
            
            {popup-message {VBox
                               {center font-size = 20pt, You have {value score} points!!},
                               {center {value {start-time.elapsed}}}
                           }
            }
        }
    }
    
    {VBox
        margin = 10pt,
        spacing = 10pt,
        halign = center,
        {bold Try to stop in 10 seconds},
        start-btn,
        stop-btn
    }
}


Save the File and 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 4: Structure of our program that uses events]]> https://communities.curl.com/showthread.php?tid=50 Thu, 16 Jun 2011 06:30:19 +0000 https://communities.curl.com/showthread.php?tid=50 Structure of our program that uses events

Let’s take a look at the program that we’ve created.


1. Using the 'Frame' graphical container

Code:
{Frame
    height = 5cm,
    width = 5cm,
    margin = 1cm,
    background = orange,
    ...
}

A Frame is a kind of object called a graphical container. A graphical container is an object into which we can place other objects such as text, images, and controls. In addition to Frames, there are many other types of graphical container, each with their own particular characteristics. By combining graphical containers, we can create compound screen layouts.


Note: There are many other graphical containers in addition to those listed above

By specifying options for a graphical object, we can adjust the visual properties of that object.



2. 'PointerPress' and 'PointerRelease' event processing

Code:
{on e:PointerPress at f:Frame do
    set f.background = #00FF00
    {e.consume}
},
{on e:PointerRelease at f:Frame do
    set f.background = pink
    {e.consume}
}

This is the event handler that appeared previously. When the mouse button is pressed, a PointerPress event is generated, while when the button is released, a PointerRelease event is generated. A name can be given to the event object (eTongueointerRelease) and referenced in the event handler expression. This is similar to giving a name to the target object (f:Frame) where the event is fired.


Event Handler Definition 3

The following further expands the on syntax: {on event-var:event-type at target-var[:target-type] do body} where
  • event-var:event-type binds a variable to the event object.
  • Use event-var if you need to access methods or properties of the event..




3. Consuming an Event

Code:
{on e:PointerPress at f:Frame do
    set f.background = #00FF00
    {e.consume}
}

Next, let’s look at the role of the consume that is inserted after the event handler code. A GUI event traverses a graphical hierarchy. To explain this, let’s consider a graphical container with a hierarchical structure. First, assume a hierarchical structure with three graphical objects: A, B, and C.


For each of objects A, B, and C, we’ll also assume the definition of an event handler that changes their colors when they are clicked. So, assume that the user clicks object C. A PointerPress event is generated and this is communicated to C. C then calls the event handler, which then changes C’s color. The generated event is then communicated to B. As a result, the color of B is changed in the same way. And, again, this event is communicated to A, such that the color of A is changed.


In this way, generated events are communicated to external objects in a given order. If, however, we don’t want an event to be communicated to an external object, then we have to 'consume' that object. So we insert a consume.

By using consume, we consume an event to prevent it from being communicated to an external object. Try commenting-out each instance of e.consume in the previous source code, and then execute the code to see how the results differ.



.png   2-1.PNG (Size: 14.72 KB / Downloads: 1336)

.png   2-2.PNG (Size: 8.27 KB / Downloads: 1391)

.png   2-3.PNG (Size: 11.68 KB / Downloads: 1267) ]]> Structure of our program that uses events

Let’s take a look at the program that we’ve created.


1. Using the 'Frame' graphical container

Code:
{Frame
    height = 5cm,
    width = 5cm,
    margin = 1cm,
    background = orange,
    ...
}

A Frame is a kind of object called a graphical container. A graphical container is an object into which we can place other objects such as text, images, and controls. In addition to Frames, there are many other types of graphical container, each with their own particular characteristics. By combining graphical containers, we can create compound screen layouts.


Note: There are many other graphical containers in addition to those listed above

By specifying options for a graphical object, we can adjust the visual properties of that object.



2. 'PointerPress' and 'PointerRelease' event processing

Code:
{on e:PointerPress at f:Frame do
    set f.background = #00FF00
    {e.consume}
},
{on e:PointerRelease at f:Frame do
    set f.background = pink
    {e.consume}
}

This is the event handler that appeared previously. When the mouse button is pressed, a PointerPress event is generated, while when the button is released, a PointerRelease event is generated. A name can be given to the event object (eTongueointerRelease) and referenced in the event handler expression. This is similar to giving a name to the target object (f:Frame) where the event is fired.


Event Handler Definition 3

The following further expands the on syntax: {on event-var:event-type at target-var[:target-type] do body} where
  • event-var:event-type binds a variable to the event object.
  • Use event-var if you need to access methods or properties of the event..




3. Consuming an Event

Code:
{on e:PointerPress at f:Frame do
    set f.background = #00FF00
    {e.consume}
}

Next, let’s look at the role of the consume that is inserted after the event handler code. A GUI event traverses a graphical hierarchy. To explain this, let’s consider a graphical container with a hierarchical structure. First, assume a hierarchical structure with three graphical objects: A, B, and C.


For each of objects A, B, and C, we’ll also assume the definition of an event handler that changes their colors when they are clicked. So, assume that the user clicks object C. A PointerPress event is generated and this is communicated to C. C then calls the event handler, which then changes C’s color. The generated event is then communicated to B. As a result, the color of B is changed in the same way. And, again, this event is communicated to A, such that the color of A is changed.


In this way, generated events are communicated to external objects in a given order. If, however, we don’t want an event to be communicated to an external object, then we have to 'consume' that object. So we insert a consume.

By using consume, we consume an event to prevent it from being communicated to an external object. Try commenting-out each instance of e.consume in the previous source code, and then execute the code to see how the results differ.



.png   2-1.PNG (Size: 14.72 KB / Downloads: 1336)

.png   2-2.PNG (Size: 8.27 KB / Downloads: 1391)

.png   2-3.PNG (Size: 11.68 KB / Downloads: 1267) ]]> <![CDATA[Page 3: Using Different Events]]> https://communities.curl.com/showthread.php?tid=49 Thu, 16 Jun 2011 06:25:33 +0000 https://communities.curl.com/showthread.php?tid=49 Using Different Events


In the previous section, we processed events related to command buttons and check buttons. Next, let’s consider events that are not related to controls.


Create the 'Try 2-2' Project

Close the Try 2-1 project and then, from the IDE “File” menu, select “New Project.” In the "New Project" dialog box, select "Applet Project" (1), input "Try2-2" (2), specify c:\Curl\lesson\Try2\02_event 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 following program code. Or, if you prefer, you can copy the program from c:\Curl\Try2\02_event\start.curl and then paste it into the editor.

Code:
{Frame
    height = 5cm,
    width = 5cm,
    margin = 1cm,
    background = orange,
    {Frame
        height = 3cm,
        width = 3cm,
        background = pink,
        {on e:PointerPress at f:Frame do
            set f.background = #00FF00
            {e.consume}
        },
        {on e:PointerRelease at f:Frame do
            set f.background = pink
            {e.consume}
        }
    },
    {on e:PointerPress at f:Frame do
        set f.background = #FF0000
        {e.consume}
    },
    {on e:PointerRelease at f:Frame do
        set f.background = orange
        {e.consume}
    }
}

Save the File, and then Execute the Program

After inputting the code, save the file, and then execute the program. As a result, your browser will display an orange-colored Frame, inside of which is a pink Frame. If we click the inside Frame, its color changes from pink to lime-green. And, if we click the outside Frame, it changes from orange to red.



]]> Using Different Events


In the previous section, we processed events related to command buttons and check buttons. Next, let’s consider events that are not related to controls.


Create the 'Try 2-2' Project

Close the Try 2-1 project and then, from the IDE “File” menu, select “New Project.” In the "New Project" dialog box, select "Applet Project" (1), input "Try2-2" (2), specify c:\Curl\lesson\Try2\02_event 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 following program code. Or, if you prefer, you can copy the program from c:\Curl\Try2\02_event\start.curl and then paste it into the editor.

Code:
{Frame
    height = 5cm,
    width = 5cm,
    margin = 1cm,
    background = orange,
    {Frame
        height = 3cm,
        width = 3cm,
        background = pink,
        {on e:PointerPress at f:Frame do
            set f.background = #00FF00
            {e.consume}
        },
        {on e:PointerRelease at f:Frame do
            set f.background = pink
            {e.consume}
        }
    },
    {on e:PointerPress at f:Frame do
        set f.background = #FF0000
        {e.consume}
    },
    {on e:PointerRelease at f:Frame do
        set f.background = orange
        {e.consume}
    }
}

Save the File, and then Execute the Program

After inputting the code, save the file, and then execute the program. As a result, your browser will display an orange-colored Frame, inside of which is a pink Frame. If we click the inside Frame, its color changes from pink to lime-green. And, if we click the outside Frame, it changes from orange to red.



]]> <![CDATA[Page 2: Structure of a Program that Displays Values input from Controls]]> https://communities.curl.com/showthread.php?tid=48 Thu, 16 Jun 2011 05:18:57 +0000 https://communities.curl.com/showthread.php?tid=48 Structure of a program that displays values input from controls

The program covered in this chapter introduces many new elements. We’ll look at these in order.


1. Displaying a command button “CommandButton”

Code:
{
    CommandButton
    label = Push the button,
    ...
}

To display a command button in Curl, we use CommandButton. Using an option called label, we can specify the label that is displayed on the CommandButton. In this example, we specified a character string, but just like in Try 1, we could also specify an image file as the label.

In addition to the label option, there is also control-color (used to specify a button color) and style (for specifying the style of the button). Next, change the code as shown below and then check the results.

Code:
{CommandButton
    label = Push the button,
    control-color = green,
    style = rollover
}


Search for CommandButton in the Help, and note the different options that are supported.


Types of Controls
  • Button controls: CommandButton, CheckButton, RadioButton
  • Text controls TextDisplay, TextField, PasswordField, TextArea, RichTextArea
  • List controls ListBox, DropdownList, ComboBox, ColorDropdown
  • Other controls SpinControl, CalendarControl, DateField, ProgressBar, Slider, GroupBox
In addition to the above, there is also the RecordGrid data control, TabContainer, and TreeControl.


2. Event handler 'on Action do'

Code:
{on Action do
   ...
}

When a command button is pressed, an event named “Action” is generated. Upon the generation of this event, the {on Action do } code (event handler) is executed.


Event Handler Definition 1

The following shows the on syntax in the simplest form: {on event-class do body} where
  • event-class specifies the class of the event it handles.
  • body is the code for the event handler procedure.


3. Display of a pop-up message 'popup-message'

Code:
{popup-message “Thank you!”}

The popup-message expression is designed to display a popup dialog box.


4. Creating a check button 'CheckButton'

Code:
{CheckButton
    label = Select the check button,
    ...
}

This style is used to create a check button. In the same way as for <font color="purple">CommandButton</font>, a variety of options are supported. Take a look at these in the Help.

5. Event handler 'on ValueChanged at'

Code:
{on ValueChanged at c:CheckButton do ...}

Placing a check mark in a box, subsequently removing it, and changing a value all cause a ValueChanged event to be generated. This time, we have an at component to the event handler expression that we did not see in the explanation of the CommandButton event handler. By adding an at after the name of an event, and appending a variable name for the target of the event (in this case CheckButton), we can reference it within the event handler expression. In this example, c is used as the name of the CheckButton that causes the event to occur.


Event Handler Definition 2

Here is a more general form of the on syntax: {on event-type at target-var[:target-type]do body} where
  • target-var\[:target-type\] binds a variable to the target.
  • If target-type is not specified, it defaults to any.


6. Conditional branches beginning with 'if'
Code:
{if c.value then
    {popup-message Check is now on.}
else
    {popup-message Check is now off.}
}
The above is an example of a conditional branch. The processing to be performed is determined by the condition. For example, if we look at “Is today a holiday?” then the processing to be performed is “Go out and enjoy myself” for YES, or “Go to work” for NO. We can illustrate this processing as follows.



Putting this into more general terms, we get this:


Describing this in Curl produces the following:

Code:
{if condition then
    Processing 1
else
    Processing 2
}

When the condition is false, and we want to test other conditions then we can use elseif to add more branches. This would be described as follows:

Code:
{if condition1 then
    Processing 1
elseif condition2 then
    Processing 2
    …
elseif condition n then
    processing n
else
    processing n+1
}

Figure 2-8 illustrates this structure.



So, let’s apply this conditional branching to our example. As the condition, we code c.value where c represents the check button and c.value lets us acquire the value of the check button. When a check mark is placed in the check button, the value is true, while when there is no check mark, the value is false.


So, when the value of a command button changes, or if a check mark is placed in a check button, a message stating “Check is now on” is displayed. Otherwise, “Check is now off” is displayed.]]> Structure of a program that displays values input from controls

The program covered in this chapter introduces many new elements. We’ll look at these in order.


1. Displaying a command button “CommandButton”

Code:
{
    CommandButton
    label = Push the button,
    ...
}

To display a command button in Curl, we use CommandButton. Using an option called label, we can specify the label that is displayed on the CommandButton. In this example, we specified a character string, but just like in Try 1, we could also specify an image file as the label.

In addition to the label option, there is also control-color (used to specify a button color) and style (for specifying the style of the button). Next, change the code as shown below and then check the results.

Code:
{CommandButton
    label = Push the button,
    control-color = green,
    style = rollover
}


Search for CommandButton in the Help, and note the different options that are supported.


Types of Controls
  • Button controls: CommandButton, CheckButton, RadioButton
  • Text controls TextDisplay, TextField, PasswordField, TextArea, RichTextArea
  • List controls ListBox, DropdownList, ComboBox, ColorDropdown
  • Other controls SpinControl, CalendarControl, DateField, ProgressBar, Slider, GroupBox
In addition to the above, there is also the RecordGrid data control, TabContainer, and TreeControl.


2. Event handler 'on Action do'

Code:
{on Action do
   ...
}

When a command button is pressed, an event named “Action” is generated. Upon the generation of this event, the {on Action do } code (event handler) is executed.


Event Handler Definition 1

The following shows the on syntax in the simplest form: {on event-class do body} where
  • event-class specifies the class of the event it handles.
  • body is the code for the event handler procedure.


3. Display of a pop-up message 'popup-message'

Code:
{popup-message “Thank you!”}

The popup-message expression is designed to display a popup dialog box.


4. Creating a check button 'CheckButton'

Code:
{CheckButton
    label = Select the check button,
    ...
}

This style is used to create a check button. In the same way as for <font color="purple">CommandButton</font>, a variety of options are supported. Take a look at these in the Help.

5. Event handler 'on ValueChanged at'

Code:
{on ValueChanged at c:CheckButton do ...}

Placing a check mark in a box, subsequently removing it, and changing a value all cause a ValueChanged event to be generated. This time, we have an at component to the event handler expression that we did not see in the explanation of the CommandButton event handler. By adding an at after the name of an event, and appending a variable name for the target of the event (in this case CheckButton), we can reference it within the event handler expression. In this example, c is used as the name of the CheckButton that causes the event to occur.


Event Handler Definition 2

Here is a more general form of the on syntax: {on event-type at target-var[:target-type]do body} where
  • target-var\[:target-type\] binds a variable to the target.
  • If target-type is not specified, it defaults to any.


6. Conditional branches beginning with 'if'
Code:
{if c.value then
    {popup-message Check is now on.}
else
    {popup-message Check is now off.}
}
The above is an example of a conditional branch. The processing to be performed is determined by the condition. For example, if we look at “Is today a holiday?” then the processing to be performed is “Go out and enjoy myself” for YES, or “Go to work” for NO. We can illustrate this processing as follows.



Putting this into more general terms, we get this:


Describing this in Curl produces the following:

Code:
{if condition then
    Processing 1
else
    Processing 2
}

When the condition is false, and we want to test other conditions then we can use elseif to add more branches. This would be described as follows:

Code:
{if condition1 then
    Processing 1
elseif condition2 then
    Processing 2
    …
elseif condition n then
    processing n
else
    processing n+1
}

Figure 2-8 illustrates this structure.



So, let’s apply this conditional branching to our example. As the condition, we code c.value where c represents the check button and c.value lets us acquire the value of the check button. When a check mark is placed in the check button, the value is true, while when there is no check mark, the value is false.


So, when the value of a command button changes, or if a check mark is placed in a check button, a message stating “Check is now on” is displayed. Otherwise, “Check is now off” is displayed.]]> <![CDATA[Page 1: Making a Simple Action Game]]> https://communities.curl.com/showthread.php?tid=47 Thu, 16 Jun 2011 05:03:09 +0000 https://communities.curl.com/showthread.php?tid=47 Try 2: Making a Simple Action Game

We can gather data from a user by using controls, which include buttons, lists, and input fields. And, by using events, we can perform processing according to the user’s actions. In this chapter, we’re going to create a simple game using controls and events.

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

The Basics: Displaying Values that are Input from a Control

Create the 'Try 2-1' Project

1. Close the Try 1 project. From the “File” menu, select “Close Project.”


Opening multiple projects in the IDE


For clarity, in this manual we only ever open and then edit a single project. The Curl IDE, however, supports the simultaneous opening of multiple projects.


2. Next, from the IDE “File” menu, select “New Project.” In the “New Project” dialog box, select “Applet Project” (1), input “Try2-1” (2), specify c:\Curl\lesson\Try2\01_control_action 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\Try2\01_control_action\start.curl and then paste it into the editor in the IDE.

Code:
{CommandButton
    label = Push the button,
    {on Action do
        {popup-message Thank you!
        }
    }
}
{CheckButton
    label = Select the checkbox,
    {on ValueChanged at c:CheckButton do
        {if c.value then
            {popup-message Check is now on.}
         else
            {popup-message Check is now off.}
        }
    }
}

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. Push the button and select the checkbox, while noting the results.


]]> Try 2: Making a Simple Action Game

We can gather data from a user by using controls, which include buttons, lists, and input fields. And, by using events, we can perform processing according to the user’s actions. In this chapter, we’re going to create a simple game using controls and events.

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

The Basics: Displaying Values that are Input from a Control

Create the 'Try 2-1' Project

1. Close the Try 1 project. From the “File” menu, select “Close Project.”


Opening multiple projects in the IDE


For clarity, in this manual we only ever open and then edit a single project. The Curl IDE, however, supports the simultaneous opening of multiple projects.


2. Next, from the IDE “File” menu, select “New Project.” In the “New Project” dialog box, select “Applet Project” (1), input “Try2-1” (2), specify c:\Curl\lesson\Try2\01_control_action 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\Try2\01_control_action\start.curl and then paste it into the editor in the IDE.

Code:
{CommandButton
    label = Push the button,
    {on Action do
        {popup-message Thank you!
        }
    }
}
{CheckButton
    label = Select the checkbox,
    {on ValueChanged at c:CheckButton do
        {if c.value then
            {popup-message Check is now on.}
         else
            {popup-message Check is now off.}
        }
    }
}

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. Push the button and select the checkbox, while noting the results.


]]>