VC++ Dialog Application

Following section describes how to use FlowChartX ActiveX Control under Microsoft Visual Studio 7:

Creating new project.

In MSVC environment choose "File -> New -> Project". In the dialog box that appears, select "Visual C++ Projects" from Project Types list and "MFC Application" from Templates list. Give your project a suitable name and click OK. MFC Application Wizard creates a new project for you. Click "Application type" in the dialog that appears  and set it to "Dialog based". Leave the default values for the rest of the options. Next click "Advanced features" and make sure "ActiveX controls" check box is selected. Leave other options unchanged and press Finish. The wizard generates a new project.

Adding FlowChartX to the project.

You can customize the project form name and appearance as you wish. To add FlowChartX control to the form, right-click "Dialog Editor" tab, which stays under Toolbox docking bar. If Toolbox bar is not visible, you can make it appear choosing "View -> Toolbox" menu. Afterwards right-click Toolbox to show its context menu and choose "Customize...". From ActiveX control - list check FlowChartX control and click OK button. If FlowChartX is not in the list, make sure you have run FlowChartX installation program to register the control.

Place FlowChartX control over dialog box area by dragging the FlowChartX icon that stays in "Dialog editor" list. Next, create a member variable for FlowChartX control, by right-clicking over its area and from the context menu select "Add variable". In the dialog box type proper variable name (m_FlowChart for example) and hit OK. New class for FlowChartX is automatically generated and a new variable to your dialog class is added.
Furthermore you can write your initialization code in OnInitDialog method of the dialog class. For example you can set default values for FlowChartX objects and/or initialize FlowChartX document - size, position, background color/image.

Customizing application form.

In addition to FlowChartX control you can add some UI components to carry out additional program functionality. In our example two buttons for easier interaction with the program are inserted - 'Modify' and 'Outgoing'.

Working with the object collections.

Now, with buttons ready, add some functionality to them by creating their event handlers. Do it by double-clicking each of the buttons. OnBnClickedButton1 and OnBnClickedButton2 should appear in your Dialog class, considering the buttons' resource IDs are 'IDC_BUTTON1' and 'IDC_BUTTON2' respectively. First button modifies all selected boxes appearance, while second one selects all outgoing arrows of active selected box in the current selection. Note you have to import the other classes from the FlowChartX type library (they are automatically imported in version 6 of VisualC++, but in version 7 you have to add them manually). From menu select  "Project -> Add Class..." and choose "VisualC++ -> MFC" from Categories tree respectively "MFC Class From TypeLib: from Templates list and press Open. In newly appeared dialog box select FlowChart Type Library from Available type libraries combo box and choose all interfaces except IFlowChart, since we already have an imported class for it. Give appropriate names for all classes and files and click Finish button. In order to use  newly created classes remember to add following header files #include statements in your dialog .cpp file:

C++

#include "CBoxes.h"
#include "CBoxItem.h"
#include "CArrows.h"
#include "CArrowItem.h"

Now add following implementation to the button event handler methods:

C++

void CMFCDialogDlg::OnBnClickedButton1()
{
    CBoxItem box;
    CBoxes boxes = m_FlowChart.get_SelectedBoxes();

    // Iterate through all selected boxes collection and
    // change their appearance.
    for(int iBox = 0; iBox < boxes.get_count(); iBox++)
    {
        box = boxes.get_Item(iBox);
        box.put_PenWidth(3);
        box.put_FillColor((UINT)RGB(0xFF, 0, 0xFF));
        box.put_FrameColor((UINT)RGB(0, 0, 0xFF));
    }
}void CMFCDialogDlg::OnBnClickedButton2()
{
    // Get the active selected box
    CBoxItem boxSelected = m_FlowChart.get_ActiveBox();
    CArrows arrowsOut;    // Check whether such box exists and if
    // no box is selected, notify the user.
    if(boxSelected == NULL)
    {
        AfxMessageBox(_T("Select a box first!"), MB_ICONINFORMATION);
    }
    else
    {
        // Clear the control current selection
        m_FlowChart.ClearSelection();        // Get the box' OutgoingArrows collection
        arrowsOut = boxSelected.get_OutgoingArrows();        // Insert all of the arrows to the FlowChart selection.
        for(int iArrow = 0; iArrow < arrowsOut.get_count(); iArrow++)
            m_FlowChart.AddToSelection(arrowsOut.get_Item(iArrow));
    }
}

Handling FlowChartX control events.

Following steps illustrate FlowChartX events handling: In dialog editor, right-click on FlowChartX control area and choose "Add event handler..." from the context menu. In the dialog that appears choose CMFCDialogDlg from Class list or whatever your dialog class is named. In Message type list select the event you wish to handle (for example ArrowSelected), give the event handler a suitable name (for example OnArrowSelected) and click "Add and Edit" button. Add another handler for ArrowSelectionLost event and implement event methods as illustrated below:

C++

// In these two event handler methods we will change
// the arrow width, giving the appearance that arrow
// grows when selected.
void CMFCDialogDlg::OnArrowSelected(LPDISPATCH pArrowItem)
{
    // Change the arrow width
    CArrowItem arrow = pArrowItem;
    arrow.put_PenWidth(2);
    arrow.DetachDispatch();
}

void CMFCDialogDlg::OnArrowSelectionLost(LPDISPATCH pArrowItem)
{
    // Change the arrow width
    CArrowItem arrow = pArrowItem;
    arrow.put_PenWidth(1);
    arrow.DetachDispatch();
}