[[Property:title|Tutorial Step 4]]
[[Property:weight|3]]
[[Property:uuid|a43c069c-d56e-47f0-f1b0-d58df627b5a4]]
This sample builds on the knowledge learned in the previous tutorials ( [[Tutorial Step 1|1]] , [[Tutorial Step 2|2]]  and [[Tutorial Step 3|3]] ) and again demonstrates the use of a [[ref:libraries/wel/reference/wel_client_dc_chart|WEL_CLIENT_DC]] . 

[[Image:step4|step4]]  <br/>
<br/>

==Compiling==

* Launch EiffelStudio. 
* Click '''Add project'''
* Browse to ''$ISE_EIFFEL\examples\wel\tutorial\step4\''. 
* Choose ''tutorial_step4.ecf''
* Choose the location where the project will be compiled, by default the same directory containing the configuration file. 
* Click '''OK'''. 


==Running==
After launching the sample, you will see a [[ref:libraries/wel/reference/wel_frame_window_chart|WEL_FRAME_WINDOW]]  displayed. By holding down the left mouse button, and moving the mouse (Within the client area of the window), you will be able to draw on the client area of the window. Pressing the right mouse button within the window will clear the client area of the window. 
==Under the Hood==

This system is an improvement over tutorial [[Tutorial Step 3|step3]]  and only uses WEL techniques demonstrated in previous tutorials to allow you to draw on the client DC of the window. 

This sample contains the following classes: 
* <code>TUTORIAL_STEP4</code>
* <code>MAIN_WINDOW</code>