Shortcut to Main Page

Feature:
Painting Boards

This tutorial guides you through the essentials of the Painting Board Tool. It assumes you have created a new painting board file (select File | New, and search in the different categories for Painting Board).

Overview

The painting board allows you to write some painting code and see the result instantaneously.

Getting Started

The typical window layout and code view is shown in Figure 1.

Painting board screenshot
Figure 1. Painting board drawing and code view.

  1. When the painting board is first started, no drawing code is available, and nothing is painted. To get something painted, you should add necessary code in the PaintCode section. Switch to Code view by following the link of the message in the middle of the window, or by clicking the Code button at the bottom of the window (Figure 1).
  2. Once you have switched to the Code View, notice the Fragment tree view on the left, it contains the code fragments you may incorporate to the painting board. The PaintCode fragment should be highlighted by default. The text area in the remaining portion of the screen shows the current code for the painting code. Since there is currently no code for PaintCode, the text area is empty.
  3. Copy and paste the following code to the text area. This will update the code for the PaintCode fragment.
    > Note: The code comes directly from the DrawRectangles method example in the .NET documentation.
    // Create pen.
    Pen blackPen = new Pen(Color.Black, 3);
    // Create array of rectangles.
    RectangleF[] rects =
    {
    new RectangleF(  0.0F,   0.0F, 100.0F, 200.0F),
    new RectangleF(100.0F, 200.0F, 250.0F,  50.0F),
    new RectangleF(300.0F,   0.0F,  50.0F, 100.0F)
    };
    // Draw rectangles to screen.
    e.Graphics.DrawRectangles(blackPen, rects);
  4. Click Compile | Compile Painting Board, or press the F6 key. If you have not done any mistake, the program brings you back to the painting board view. This time, you can see three black rectangles painted (Figure 1).
    You're done! All you did is copy and paste some sample code, and now it runs! At this point you can go back and try different samples and run the code instantly.

Advanced Users

Custom Code Fragments

You can add code for variables and methods that you can directly call from the Input Area. You also have the option to add full class declarations that you can call from the Input Area.

To add code for variables and methods, switch to Code View (from the View menu, or by clicking the Code button at the bottom of the window). Select Painting Board > Declarations in the Fragment List on the left, and add the code for variables and methods in the text editor.

To add additional namespace/class declarations, switch to Code View. Select Build Options > UserCode in the Fragment List. Add the code for new namespaces and classes.

See the Immediate Execution Tutorial for more on how to use the Declarations and UserCode fragments.

Configuring Compile Options

In most basic cases, you don't have to do anything else to view painting code in action. Simply type the drawing instructions, build the Painting Board, and the program will display the result.

However, there are cases where you want to change some settings, such as the language and referenced files and assemblies. This topic explains how to change these settings.