PWCT 1.9 Art Documentation ( http://doublesvsoop.sourceforge.net )

2006-2013, Mahmoud Fayed ( msfclipper@users.sourceforge.net )

_____________________________________________________________________________________

Table of contents

1 - Introduction

2 - Implementation steps

3 - Final Steps Tree

4 - Application during the runtime

1 - Introduction

In this lesson we are going to create the Color Mixer application.

2 - Implementation Steps

s1.JPG

Fig. (1) Goal Desginer - Steps Tree

Select the step (The First Step)

We will start now new interaction process to generate new steps to our steps tree.

The slow way (Using Mouse):

                1 - Click Interact to open the components browser

                2 - Select the domain (Windows)

                3 - Select the component (Define New Window)

The fast way (Using Keyboard shortcuts):

                1 - Get the component using its name by typing (Define New Window)

                Note : Stop typing when you see the required component is selected

s2.JPG

Fig. (2) Component Browser Select the component (Define New Window)

After selecting the component click Ok or press ENTER

s3.JPG

Fig. (3) Interaction page - Set the properties and enter the required data as in the image above

s4.JPG

Fig. (4) Form Designer

s5.JPG

Fig. (5) Goal Desginer - Steps Tree

Select the step (Window Properties)

We will start now new interaction process to generate new steps to our steps tree.

The slow way (Using Mouse):

                1 - Click Interact to open the components browser

                2 - Select the domain (Windows)

                3 - Select the component (Window Class)

The fast way (Using Keyboard shortcuts):

                1 - Get the component using its name by typing (Window Class)

                Note : Stop typing when you see the required component is selected

s6.JPG

Fig. (6) Component Browser Select the component (Window Class)

After selecting the component click Ok or press ENTER

s7.JPG

Fig. (7) Interaction page - Set the properties and enter the required data as in the image above

s8.JPG

Fig. (8) Interaction page - Set the properties and enter the required data as in the image above

s9.JPG

Fig. (9) Interaction page - Set the properties and enter the required data as in the image above

s10.JPG

Fig. (10) Form Designer

s11.JPG

Fig. (11) Goal Desginer - Steps Tree

Select the step (Window Controls)

We will start now new interaction process to generate new steps to our steps tree.

The slow way (Using Mouse):

                1 - Click Interact to open the components browser

                2 - Select the domain (Controls)

                3 - Select the component (TextBox)

The fast way (Using Keyboard shortcuts):

                1 - Get the component using its name by typing (TextBox)

                Note : Stop typing when you see the required component is selected

s12.JPG

Fig. (12) Component Browser Select the component (TextBox)

After selecting the component click Ok or press ENTER

s13.JPG

Fig. (13) Interaction page - Set the properties and enter the required data as in the image above

s14.JPG

Fig. (14) Form Designer

s15.JPG

Fig. (15) Goal Desginer - Steps Tree

Select the step (TextBox EVENTS)

We will start now new interaction process to generate new steps to our steps tree.

The slow way (Using Mouse):

                1 - Click Interact to open the components browser

                2 - Select the domain (Events)

                3 - Select the component (TextBox Events)

The fast way (Using Keyboard shortcuts):

                1 - Get the component using its name by typing (TextBox Events)

                Note : Stop typing when you see the required component is selected

s16.JPG

Fig. (16) Component Browser Select the component (TextBox Events)

After selecting the component click Ok or press ENTER

s17.JPG

Fig. (17) Interaction page - Set the properties and enter the required data as in the image above

s18.JPG

Fig. (18) Goal Desginer - Steps Tree

Select the step (Window Controls)

We will start now new interaction process to generate new steps to our steps tree.

The slow way (Using Mouse):

                1 - Click Interact to open the components browser

                2 - Select the domain (Controls)

                3 - Select the component (TextBox)

The fast way (Using Keyboard shortcuts):

                1 - Get the component using its name by typing (TextBox)

                Note : Stop typing when you see the required component is selected

s19.JPG

Fig. (19) Component Browser Select the component (TextBox)

After selecting the component click Ok or press ENTER

s20.JPG

Fig. (20) Interaction page - Set the properties and enter the required data as in the image above

s21.JPG

Fig. (21) Form Designer

s22.JPG

Fig. (22) Goal Desginer - Steps Tree

Select the step (TextBox EVENTS)

We will start now new interaction process to generate new steps to our steps tree.

The slow way (Using Mouse):

                1 - Click Interact to open the components browser

                2 - Select the domain (Events)

                3 - Select the component (TextBox Events)

The fast way (Using Keyboard shortcuts):

                1 - Get the component using its name by typing (TextBox Events)

                Note : Stop typing when you see the required component is selected

s23.JPG

Fig. (23) Component Browser Select the component (TextBox Events)

After selecting the component click Ok or press ENTER

s24.JPG

Fig. (24) Interaction page - Set the properties and enter the required data as in the image above

s25.JPG

Fig. (25) Goal Desginer - Steps Tree

Select the step (Window Controls)

We will start now new interaction process to generate new steps to our steps tree.

The slow way (Using Mouse):

                1 - Click Interact to open the components browser

                2 - Select the domain (Controls)

                3 - Select the component (TextBox)

The fast way (Using Keyboard shortcuts):

                1 - Get the component using its name by typing (TextBox)

                Note : Stop typing when you see the required component is selected

s26.JPG

Fig. (26) Component Browser Select the component (TextBox)

After selecting the component click Ok or press ENTER

s27.JPG

Fig. (27) Interaction page - Set the properties and enter the required data as in the image above

s28.JPG

Fig. (28) Form Designer

s29.JPG

Fig. (29) Goal Desginer - Steps Tree

Select the step (TextBox EVENTS)

We will start now new interaction process to generate new steps to our steps tree.

The slow way (Using Mouse):

                1 - Click Interact to open the components browser

                2 - Select the domain (Events)

                3 - Select the component (TextBox Events)

The fast way (Using Keyboard shortcuts):

                1 - Get the component using its name by typing (TextBox Events)

                Note : Stop typing when you see the required component is selected

s30.JPG

Fig. (30) Component Browser Select the component (TextBox Events)

After selecting the component click Ok or press ENTER

s31.JPG

Fig. (31) Interaction page - Set the properties and enter the required data as in the image above

s32.JPG

Fig. (32) Goal Desginer - Steps Tree

Select the step (Window Controls)

We will start now new interaction process to generate new steps to our steps tree.

The slow way (Using Mouse):

                1 - Click Interact to open the components browser

                2 - Select the domain (Controls)

                3 - Select the component (Slider)

The fast way (Using Keyboard shortcuts):

                1 - Get the component using its name by typing (Slider)

                Note : Stop typing when you see the required component is selected

s33.JPG

Fig. (33) Component Browser Select the component (Slider)

After selecting the component click Ok or press ENTER

s34.JPG

Fig. (34) Interaction page - Set the properties and enter the required data as in the image above

s35.JPG

Fig. (35) Form Designer

s36.JPG

Fig. (36) Goal Desginer - Steps Tree

Select the step (Slider Events)

We will start now new interaction process to generate new steps to our steps tree.

The slow way (Using Mouse):

                1 - Click Interact to open the components browser

                2 - Select the domain (Events)

                3 - Select the component (Slider Events)

The fast way (Using Keyboard shortcuts):

                1 - Get the component using its name by typing (Slider Events)

                Note : Stop typing when you see the required component is selected

s37.JPG

Fig. (37) Component Browser Select the component (Slider Events)

After selecting the component click Ok or press ENTER

s38.JPG

Fig. (38) Interaction page - Set the properties and enter the required data as in the image above

s39.JPG

Fig. (39) Goal Desginer - Steps Tree

Select the step (Window Controls)

We will start now new interaction process to generate new steps to our steps tree.

The slow way (Using Mouse):

                1 - Click Interact to open the components browser

                2 - Select the domain (Controls)

                3 - Select the component (Slider)

The fast way (Using Keyboard shortcuts):

                1 - Get the component using its name by typing (Slider)

                Note : Stop typing when you see the required component is selected

s40.JPG

Fig. (40) Component Browser Select the component (Slider)

After selecting the component click Ok or press ENTER

s41.JPG

Fig. (41) Interaction page - Set the properties and enter the required data as in the image above

s42.JPG

Fig. (42) Form Designer

s43.JPG

Fig. (43) Goal Desginer - Steps Tree

Select the step (Slider Events)

We will start now new interaction process to generate new steps to our steps tree.

The slow way (Using Mouse):

                1 - Click Interact to open the components browser

                2 - Select the domain (Events)

                3 - Select the component (Slider Events)

The fast way (Using Keyboard shortcuts):

                1 - Get the component using its name by typing (Slider Events)

                Note : Stop typing when you see the required component is selected

s44.JPG

Fig. (44) Component Browser Select the component (Slider Events)

After selecting the component click Ok or press ENTER

s45.JPG

Fig. (45) Interaction page - Set the properties and enter the required data as in the image above

s46.JPG

Fig. (46) Goal Desginer - Steps Tree

Select the step (Window Controls)

We will start now new interaction process to generate new steps to our steps tree.

The slow way (Using Mouse):

                1 - Click Interact to open the components browser

                2 - Select the domain (Controls)

                3 - Select the component (Slider)

The fast way (Using Keyboard shortcuts):

                1 - Get the component using its name by typing (Slider)

                Note : Stop typing when you see the required component is selected

s47.JPG

Fig. (47) Component Browser Select the component (Slider)

After selecting the component click Ok or press ENTER

s48.JPG

Fig. (48) Interaction page - Set the properties and enter the required data as in the image above

s49.JPG

Fig. (49) Form Designer

s50.JPG

Fig. (50) Goal Desginer - Steps Tree

Select the step (Slider Events)

We will start now new interaction process to generate new steps to our steps tree.

The slow way (Using Mouse):

                1 - Click Interact to open the components browser

                2 - Select the domain (Events)

                3 - Select the component (Slider Events)

The fast way (Using Keyboard shortcuts):

                1 - Get the component using its name by typing (Slider Events)

                Note : Stop typing when you see the required component is selected

s51.JPG

Fig. (51) Component Browser Select the component (Slider Events)

After selecting the component click Ok or press ENTER

s52.JPG

Fig. (52) Interaction page - Set the properties and enter the required data as in the image above

s53.JPG

Fig. (53) Goal Desginer - Steps Tree

Select the step (Window Controls)

We will start now new interaction process to generate new steps to our steps tree.

The slow way (Using Mouse):

                1 - Click Interact to open the components browser

                2 - Select the domain (Controls)

                3 - Select the component (Button)

The fast way (Using Keyboard shortcuts):

                1 - Get the component using its name by typing (Button)

                Note : Stop typing when you see the required component is selected

s54.JPG

Fig. (54) Component Browser Select the component (Button)

After selecting the component click Ok or press ENTER

s55.JPG

Fig. (55) Interaction page - Set the properties and enter the required data as in the image above

s56.JPG

Fig. (56) Form Designer

s57.JPG

Fig. (57) Goal Desginer - Steps Tree

Select the step (Button Events)

We will start now new interaction process to generate new steps to our steps tree.

The slow way (Using Mouse):

                1 - Click Interact to open the components browser

                2 - Select the domain (Events)

                3 - Select the component (Button Events)

The fast way (Using Keyboard shortcuts):

                1 - Get the component using its name by typing (Button Events)

                Note : Stop typing when you see the required component is selected

s58.JPG

Fig. (58) Component Browser Select the component (Button Events)

After selecting the component click Ok or press ENTER

s59.JPG

Fig. (59) Interaction page - Set the properties and enter the required data as in the image above

s60.JPG

Fig. (60) Goal Desginer - Steps Tree

Select the step (Window Controls)

We will start now new interaction process to generate new steps to our steps tree.

The slow way (Using Mouse):

                1 - Click Interact to open the components browser

                2 - Select the domain (Controls)

                3 - Select the component (Label)

The fast way (Using Keyboard shortcuts):

                1 - Get the component using its name by typing (Label)

                Note : Stop typing when you see the required component is selected

s61.JPG

Fig. (61) Component Browser Select the component (Label)

After selecting the component click Ok or press ENTER

s62.JPG

Fig. (62) Interaction page - Set the properties and enter the required data as in the image above

s63.JPG

Fig. (63) Form Designer

s64.JPG

Fig. (64) Goal Desginer - Steps Tree

Select the step (Window Controls)

We will start now new interaction process to generate new steps to our steps tree.

The slow way (Using Mouse):

                1 - Click Interact to open the components browser

                2 - Select the domain (Controls)

                3 - Select the component (Label)

The fast way (Using Keyboard shortcuts):

                1 - Get the component using its name by typing (Label)

                Note : Stop typing when you see the required component is selected

s65.JPG

Fig. (65) Component Browser Select the component (Label)

After selecting the component click Ok or press ENTER

s66.JPG

Fig. (66) Interaction page - Set the properties and enter the required data as in the image above

s67.JPG

Fig. (67) Form Designer

s68.JPG

Fig. (68) Goal Desginer - Steps Tree

Select the step (Window Controls)

We will start now new interaction process to generate new steps to our steps tree.

The slow way (Using Mouse):

                1 - Click Interact to open the components browser

                2 - Select the domain (Controls)

                3 - Select the component (Label)

The fast way (Using Keyboard shortcuts):

                1 - Get the component using its name by typing (Label)

                Note : Stop typing when you see the required component is selected

s69.JPG

Fig. (69) Component Browser Select the component (Label)

After selecting the component click Ok or press ENTER

s70.JPG

Fig. (70) Interaction page - Set the properties and enter the required data as in the image above

s71.JPG

Fig. (71) Form Designer

s72.JPG

Fig. (72) Goal Desginer - Steps Tree

Select the step (Window Controls)

We will start now new interaction process to generate new steps to our steps tree.

The slow way (Using Mouse):

                1 - Click Interact to open the components browser

                2 - Select the domain (Controls)

                3 - Select the component (Label)

The fast way (Using Keyboard shortcuts):

                1 - Get the component using its name by typing (Label)

                Note : Stop typing when you see the required component is selected

s73.JPG

Fig. (73) Component Browser Select the component (Label)

After selecting the component click Ok or press ENTER

s74.JPG

Fig. (74) Interaction page - Set the properties and enter the required data as in the image above

s75.JPG

Fig. (75) Form Designer

s76.JPG

Fig. (76) Goal Desginer - Steps Tree

Select the step (Window Controls)

We will start now new interaction process to generate new steps to our steps tree.

The slow way (Using Mouse):

                1 - Click Interact to open the components browser

                2 - Select the domain (Controls)

                3 - Select the component (Button)

The fast way (Using Keyboard shortcuts):

                1 - Get the component using its name by typing (Button)

                Note : Stop typing when you see the required component is selected

s77.JPG

Fig. (77) Component Browser Select the component (Button)

After selecting the component click Ok or press ENTER

s78.JPG

Fig. (78) Interaction page - Set the properties and enter the required data as in the image above

s79.JPG

Fig. (79) Form Designer

s80.JPG

Fig. (80) Goal Desginer - Steps Tree

Select the step (Button Events)

We will start now new interaction process to generate new steps to our steps tree.

The slow way (Using Mouse):

                1 - Click Interact to open the components browser

                2 - Select the domain (Events)

                3 - Select the component (Button Events)

The fast way (Using Keyboard shortcuts):

                1 - Get the component using its name by typing (Button Events)

                Note : Stop typing when you see the required component is selected

s81.JPG

Fig. (81) Component Browser Select the component (Button Events)

After selecting the component click Ok or press ENTER

s82.JPG

Fig. (82) Interaction page - Set the properties and enter the required data as in the image above

s83.JPG

Fig. (83) Goal Desginer - Steps Tree

Select the step (Procedure)

We will start now new interaction process to generate new steps to our steps tree.

The slow way (Using Mouse):

                1 - Click Interact to open the components browser

                2 - Select the domain (Structure Programming)

                3 - Select the component (Define Procedure)

The fast way (Using Keyboard shortcuts):

                1 - Get the component using its name by typing (Define Procedure)

                Note : Stop typing when you see the required component is selected

s84.JPG

Fig. (84) Component Browser Select the component (Define Procedure)

After selecting the component click Ok or press ENTER

s85.JPG

Fig. (85) Interaction page - Set the properties and enter the required data as in the image above

s86.JPG

Fig. (86) Goal Desginer - Steps Tree

Select the step (Start Here)

We will start now new interaction process to generate new steps to our steps tree.

The slow way (Using Mouse):

                1 - Click Interact to open the components browser

                2 - Select the domain (Classes)

                3 - Select the component (Textbox Class)

The fast way (Using Keyboard shortcuts):

                1 - Get the component using its name by typing (Textbox Class)

                Note : Stop typing when you see the required component is selected

s87.JPG

Fig. (87) Component Browser Select the component (Textbox Class)

After selecting the component click Ok or press ENTER

s88.JPG

Fig. (88) Interaction page - Set the properties and enter the required data as in the image above

s89.JPG

Fig. (89) Interaction page - Set the properties and enter the required data as in the image above

s90.JPG

Fig. (90) Interaction page - Set the properties and enter the required data as in the image above

s91.JPG

Fig. (91) Goal Desginer - Steps Tree

Select the step (Start Here)

We will start now new interaction process to generate new steps to our steps tree.

The slow way (Using Mouse):

                1 - Click Interact to open the components browser

                2 - Select the domain (Classes)

                3 - Select the component (Textbox Class)

The fast way (Using Keyboard shortcuts):

                1 - Get the component using its name by typing (Textbox Class)

                Note : Stop typing when you see the required component is selected

s92.JPG

Fig. (92) Component Browser Select the component (Textbox Class)

After selecting the component click Ok or press ENTER

s93.JPG

Fig. (93) Interaction page - Set the properties and enter the required data as in the image above

s94.JPG

Fig. (94) Interaction page - Set the properties and enter the required data as in the image above

s95.JPG

Fig. (95) Interaction page - Set the properties and enter the required data as in the image above

s96.JPG

Fig. (96) Goal Desginer - Steps Tree

Select the step (Start Here)

We will start now new interaction process to generate new steps to our steps tree.

The slow way (Using Mouse):

                1 - Click Interact to open the components browser

                2 - Select the domain (Classes)

                3 - Select the component (Textbox Class)

The fast way (Using Keyboard shortcuts):

                1 - Get the component using its name by typing (Textbox Class)

                Note : Stop typing when you see the required component is selected

s97.JPG

Fig. (97) Component Browser Select the component (Textbox Class)

After selecting the component click Ok or press ENTER

s98.JPG

Fig. (98) Interaction page - Set the properties and enter the required data as in the image above

s99.JPG

Fig. (99) Interaction page - Set the properties and enter the required data as in the image above

s100.JPG

Fig. (100) Interaction page - Set the properties and enter the required data as in the image above

s101.JPG

Fig. (101) Goal Desginer - Steps Tree

Select the step (Start Here)

We will start now new interaction process to generate new steps to our steps tree.

The slow way (Using Mouse):

                1 - Click Interact to open the components browser

                2 - Select the domain (Classes)

                3 - Select the component (Label Class)

The fast way (Using Keyboard shortcuts):

                1 - Get the component using its name by typing (Label Class)

                Note : Stop typing when you see the required component is selected

s102.JPG

Fig. (102) Component Browser Select the component (Label Class)

After selecting the component click Ok or press ENTER

s103.JPG

Fig. (103) Interaction page - Set the properties and enter the required data as in the image above

s104.JPG

Fig. (104) Interaction page - Set the properties and enter the required data as in the image above

s105.JPG

Fig. (105) Interaction page - Set the properties and enter the required data as in the image above

s106.JPG

Fig. (106) Goal Desginer - Steps Tree

Select the step (Procedure)

We will start now new interaction process to generate new steps to our steps tree.

The slow way (Using Mouse):

                1 - Click Interact to open the components browser

                2 - Select the domain (Structure Programming)

                3 - Select the component (Define Procedure)

The fast way (Using Keyboard shortcuts):

                1 - Get the component using its name by typing (Define Procedure)

                Note : Stop typing when you see the required component is selected

s107.JPG

Fig. (107) Component Browser Select the component (Define Procedure)

After selecting the component click Ok or press ENTER

s108.JPG

Fig. (108) Interaction page - Set the properties and enter the required data as in the image above

s109.JPG

Fig. (109) Goal Desginer - Steps Tree

Select the step (Start Here)

We will start now new interaction process to generate new steps to our steps tree.

The slow way (Using Mouse):

                1 - Click Interact to open the components browser

                2 - Select the domain (Classes)

                3 - Select the component (Slider Class)

The fast way (Using Keyboard shortcuts):

                1 - Get the component using its name by typing (Slider Class)

                Note : Stop typing when you see the required component is selected

s110.JPG

Fig. (110) Component Browser Select the component (Slider Class)

After selecting the component click Ok or press ENTER

s111.JPG

Fig. (111) Interaction page - Set the properties and enter the required data as in the image above

s112.JPG

Fig. (112) Interaction page - Set the properties and enter the required data as in the image above

s113.JPG

Fig. (113) Interaction page - Set the properties and enter the required data as in the image above

s114.JPG

Fig. (114) Goal Desginer - Steps Tree

Select the step (Start Here)

We will start now new interaction process to generate new steps to our steps tree.

The slow way (Using Mouse):

                1 - Click Interact to open the components browser

                2 - Select the domain (Classes)

                3 - Select the component (Slider Class)

The fast way (Using Keyboard shortcuts):

                1 - Get the component using its name by typing (Slider Class)

                Note : Stop typing when you see the required component is selected

s115.JPG

Fig. (115) Component Browser Select the component (Slider Class)

After selecting the component click Ok or press ENTER

s116.JPG

Fig. (116) Interaction page - Set the properties and enter the required data as in the image above

s117.JPG

Fig. (117) Interaction page - Set the properties and enter the required data as in the image above

s118.JPG

Fig. (118) Interaction page - Set the properties and enter the required data as in the image above

s119.JPG

Fig. (119) Goal Desginer - Steps Tree

Select the step (Start Here)

We will start now new interaction process to generate new steps to our steps tree.

The slow way (Using Mouse):

                1 - Click Interact to open the components browser

                2 - Select the domain (Classes)

                3 - Select the component (Slider Class)

The fast way (Using Keyboard shortcuts):

                1 - Get the component using its name by typing (Slider Class)

                Note : Stop typing when you see the required component is selected

s120.JPG

Fig. (120) Component Browser Select the component (Slider Class)

After selecting the component click Ok or press ENTER

s121.JPG

Fig. (121) Interaction page - Set the properties and enter the required data as in the image above

s122.JPG

Fig. (122) Interaction page - Set the properties and enter the required data as in the image above

s123.JPG

Fig. (123) Interaction page - Set the properties and enter the required data as in the image above

s124.JPG

Fig. (124) Goal Desginer - Steps Tree

Select the step (Start Here)

We will start now new interaction process to generate new steps to our steps tree.

The slow way (Using Mouse):

                1 - Click Interact to open the components browser

                2 - Select the domain (Classes)

                3 - Select the component (Textbox Class)

The fast way (Using Keyboard shortcuts):

                1 - Get the component using its name by typing (Textbox Class)

                Note : Stop typing when you see the required component is selected

s125.JPG

Fig. (125) Component Browser Select the component (Textbox Class)

After selecting the component click Ok or press ENTER

s126.JPG

Fig. (126) Interaction page - Set the properties and enter the required data as in the image above

s127.JPG

Fig. (127) Interaction page - Set the properties and enter the required data as in the image above

s128.JPG

Fig. (128) Interaction page - Set the properties and enter the required data as in the image above

s129.JPG

Fig. (129) Goal Desginer - Steps Tree

Select the step (Start Here)

We will start now new interaction process to generate new steps to our steps tree.

The slow way (Using Mouse):

                1 - Click Interact to open the components browser

                2 - Select the domain (Classes)

                3 - Select the component (Textbox Class)

The fast way (Using Keyboard shortcuts):

                1 - Get the component using its name by typing (Textbox Class)

                Note : Stop typing when you see the required component is selected

s130.JPG

Fig. (130) Component Browser Select the component (Textbox Class)

After selecting the component click Ok or press ENTER

s131.JPG

Fig. (131) Interaction page - Set the properties and enter the required data as in the image above

s132.JPG

Fig. (132) Interaction page - Set the properties and enter the required data as in the image above

s133.JPG

Fig. (133) Interaction page - Set the properties and enter the required data as in the image above

s134.JPG

Fig. (134) Goal Desginer - Steps Tree

Select the step (Start Here)

We will start now new interaction process to generate new steps to our steps tree.

The slow way (Using Mouse):

                1 - Click Interact to open the components browser

                2 - Select the domain (Classes)

                3 - Select the component (Textbox Class)

The fast way (Using Keyboard shortcuts):

                1 - Get the component using its name by typing (Textbox Class)

                Note : Stop typing when you see the required component is selected

s135.JPG

Fig. (135) Component Browser Select the component (Textbox Class)

After selecting the component click Ok or press ENTER

s136.JPG

Fig. (136) Interaction page - Set the properties and enter the required data as in the image above

s137.JPG

Fig. (137) Interaction page - Set the properties and enter the required data as in the image above

s138.JPG

Fig. (138) Interaction page - Set the properties and enter the required data as in the image above

s139.JPG

Fig. (139) Goal Desginer - Steps Tree

Select the step (Procedure)

We will start now new interaction process to generate new steps to our steps tree.

The slow way (Using Mouse):

                1 - Click Interact to open the components browser

                2 - Select the domain (Structure Programming)

                3 - Select the component (Define Procedure)

The fast way (Using Keyboard shortcuts):

                1 - Get the component using its name by typing (Define Procedure)

                Note : Stop typing when you see the required component is selected

s140.JPG

Fig. (140) Component Browser Select the component (Define Procedure)

After selecting the component click Ok or press ENTER

s141.JPG

Fig. (141) Interaction page - Set the properties and enter the required data as in the image above

s142.JPG

Fig. (142) Goal Desginer - Steps Tree

Select the step (Start Here)

We will start now new interaction process to generate new steps to our steps tree.

The slow way (Using Mouse):

                1 - Click Interact to open the components browser

                2 - Select the domain (Windows)

                3 - Select the component (Window Class)

The fast way (Using Keyboard shortcuts):

                1 - Get the component using its name by typing (Window Class)

                Note : Stop typing when you see the required component is selected

s143.JPG

Fig. (143) Component Browser Select the component (Window Class)

After selecting the component click Ok or press ENTER

s144.JPG

Fig. (144) Interaction page - Set the properties and enter the required data as in the image above

s145.JPG

Fig. (145) Interaction page - Set the properties and enter the required data as in the image above

s146.JPG

Fig. (146) Interaction page - Set the properties and enter the required data as in the image above

s147.JPG

Fig. (147) Goal Desginer - Steps Tree

Select the step (Procedure)

We will start now new interaction process to generate new steps to our steps tree.

The slow way (Using Mouse):

                1 - Click Interact to open the components browser

                2 - Select the domain (Structure Programming)

                3 - Select the component (Define Procedure)

The fast way (Using Keyboard shortcuts):

                1 - Get the component using its name by typing (Define Procedure)

                Note : Stop typing when you see the required component is selected

s148.JPG

Fig. (148) Component Browser Select the component (Define Procedure)

After selecting the component click Ok or press ENTER

s149.JPG

Fig. (149) Interaction page - Set the properties and enter the required data as in the image above

s150.JPG

Fig. (150) Goal Desginer - Steps Tree

Select the step (Start Here)

We will start now new interaction process to generate new steps to our steps tree.

The slow way (Using Mouse):

                1 - Click Interact to open the components browser

                2 - Select the domain (GUI Application)

                3 - Select the component (Show Message)

The fast way (Using Keyboard shortcuts):

                1 - Get the component using its name by typing (Show Message)

                Note : Stop typing when you see the required component is selected

s151.JPG

Fig. (151) Component Browser Select the component (Show Message)

After selecting the component click Ok or press ENTER

s152.JPG

Fig. (152) Interaction page - Set the properties and enter the required data as in the image above

s153.JPG

Fig. (153) Goal Desginer - Final Steps Tree

3 - Final Steps Tree

The First Step

                Define New Window ( win1 ) , Title : "Mix Colors"

                                Window Events

                                Window Properties

                                                win1.Center ( )

                                Window Controls

                                                Define TextBox ( text1 )

                                                                TextBox EVENTS

                                                                                Event: ON CHANGE : Action Mix

                                                                TextBox Properties

                                                Define TextBox ( text2 )

                                                                TextBox EVENTS

                                                                                Event: ON CHANGE : Action Mix

                                                                TextBox Properties

                                                Define TextBox ( text3 )

                                                                TextBox EVENTS

                                                                                Event: ON CHANGE : Action Mix

                                                                TextBox Properties

                                                Define New Slider ( slider1 )

                                                                Slider Events

                                                                                Event: ON Scroll : Action Cmix

                                                                Slider Properties

                                                Define New Slider ( slider2 )

                                                                Slider Events

                                                                                Event: ON Scroll : Action Cmix

                                                                Slider Properties

                                                Define New Slider ( slider3 )

                                                                Slider Events

                                                                                Event: ON Scroll : Action Cmix

                                                                Slider Properties

                                                Define New Button ( btn1 ) , Caption : "Close"

                                                                Button Events

                                                                                Event: ON CLICK : Action Exit

                                                                Button Properties

                                                Define Label ( lbl1 ) , Caption : "Red"

                                                                Label Events

                                                                Label Properties

                                                Define Label ( lbl2 ) , Caption : "Green"

                                                                Label Events

                                                                Label Properties

                                                Define Label ( lbl3 ) , Caption : "Blue"

                                                                Label Events

                                                                Label Properties

                                                Define Label ( lbl4 ) , Caption : ""

                                                                Label Events

                                                                Label Properties

                                                Define New Button ( btn2 ) , Caption : "About"

                                                                Button Events

                                                                                Event: ON CLICK : Action About

                                                                Button Properties

                                End Of Window

                                Activate window

                Procedure

                                Define Procedure Mix

                                                Start Here

                                                                R = win1.text1.Value

                                                                G = win1.text2.Value

                                                                B = win1.text3.Value

                                                                win1.lbl4.BackColor := {R,G,B}

                                                End of Procedure

                                Define Procedure Cmix

                                                Start Here

                                                                SR = win1.Slider1.Value

                                                                SG = win1.Slider2.Value

                                                                SB = win1.Slider3.Value

                                                                win1.text1.Value := SR

                                                                win1.text2.Value := SG

                                                                win1.text3.Value := SB

                                                End of Procedure

                                Define Procedure Exit

                                                Start Here

                                                                win1.Release ( )

                                                End of Procedure

                                Define Procedure About

                                                Start Here

                                                                Show Message "This program designed by Sameh Kamel using PWCT" Title "Mix Colors" Type: Message Info

                                                End of Procedure

4 - Application during the runtime

runtime1.JPG

Fig. (154) Application during the runtime

runtime2.JPG

Fig. (155) Application during the runtime