[[Property:title|Tutorial Step 5]]
[[Property:weight|4]]
[[Property:uuid|05145328-5d2a-4d48-68cc-746ddf66b68f]]
The sample builds on tutorial [[Tutorial Step 4|step 4]]  and also demonstrates the use of a [[ref:libraries/wel/reference/wel_modal_dialog_chart|WEL_MODAL_DIALOG]] . The output is shown below: 

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

==Compiling==

* Launch EiffelStudio. 
* Click '''Add project'''
* Browse to ''$ISE_EIFFEL\examples\wel\tutorial\step5\''. 
* Choose ''tutorial_step5.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 are of the window. If you press the right mouse button, a [[ref:libraries/wel/reference/wel_modal_dialog_chart|WEL_MODAL_DIALOG]]  will pop up which allows you to enter the thickness of the line that is drawn.

==Under the Hood==

This system builds on tutorial [[Tutorial Step 4|step 4]]  by adding a [[ref:libraries/wel/reference/wel_modal_dialog_chart|WEL_MODAL_DIALOG]] . The class <code>LINE_THICKNESS_DIALOG</code> inherits [[ref:libraries/wel/reference/wel_modal_dialog_chart|WEL_MODAL_DIALOG]]  and uses a WEL_SINGLE_LINE_EDIT to input the desired line width. 
This sample contains the following classes: 
* <code>TUTORIAL_STEP5</code>
* <code>MAIN_WINDOW</code>
* <code>LINE_THICKNESS_DIALOG</code>
* <code>APPLICATION_IDS</code>