Getting Started with the ActiveGanttVBE Gantt Chart Scheduler Component

Thursday, November 3, 2011

ActiveGanttVBE is a Gantt Chart / Scheduler component designed for Silverlight 4 and Visual Basic .Net. This is a complete tutorial that describes how to get started with the ActiveGanttVBE Component. It covers installing the component, as well as creating a very simple Silverlight 4 application with ActiveGanttVBE.

1. ActiveGanttVBE Requirements

2. Downloading the ActiveGanttVBE component.

3. Installing the ActiveGanttVBE component.

4. Examining the files created by the ActiveGanttVBE install program.

      4.1. The ActiveGanttVBE HTML Help Shortcut.

      4.2. The ActiveGanttVBE Demo Project Shortcut.

5. How to create a simple Silverlight application using the ActiveGanttVBE component.

1. ActiveGanttVBE Requirements.

For developing applications with ActiveGanttVBE:

For hosting your applications that use ActiveGanttVBE:

Notes:

2. Downloading the ActiveGanttVBE component.

The latest trial version of the ActiveGanttVBE component can be downloaded from this page in our website:

http://www.sourcecodestore.com/TrialDownloads/ActiveGantt/Default.aspx

Select ActiveGanttVBE from the drop down list and press the Download Now button, select the destination directory (this procedures varies according to the type of browser being used) and begin downloading.

The ActiveGanttVBE install program is packaged in a compressed .zip file. The file names are structured according to the following convention:

3. Installing the ActiveGanttVBE component.

Downloading will have left you with a file named AGVBE_NETXX_X_X_X(D/R).zip.

The ActiveGanttVBE install program does not contain any spyware, viruses or useless third party tools.

 

This .zip file contains two files: the .msi install package and a readme file in .rtf format. The readme file can be viewed using Microsoft Word or Word Pad.

 

Extract both files from the .zip file

 

Double click on the AGVBE_NETXX_X_X_X(D/R).msi file to begin the install process. In Windows Vista and above you will get a security prompt. Click on the Yes button to continue.

 

You will be taken to the welcome screen of the ActiveGanttVBE installation program. Click on the Next button.

 

You will then be prompted for the installation directory. Click on the Next button.

 

The install program will ask for your confirmation before beginning to install ActiveGanttVBE, click on the Next button.

 

Another security screen will ask you if you want the ActiveGanttVBE install program to copy software onto your computer. Click on the Yes button.

 

After the ActiveGanttVBE installation program finishes copying files to your computer, a browser window will open which contains all the above setup instructions plus any version specific information that might be of use.

 

Click on the Close button to terminate the installation of ActiveGanttVBE.

 

The ActiveGanttVBE component can now be uninstalled using the control panel. Always use the control panel application to uninstall ActiveGanttVBE. After uninstalling the ActiveGanttVBE component you can also erase the "C:\Program Files\Boötes Systems SAS\ActiveGanttVBE\" directory for a complete uninstall.

You must completely uninstall the ActiveGanttVBE component when upgrading to a more recent version or when switching from the Trial to the Release version.

4. Examining the files created by the ActiveGanttVBE install program.

On a default install of the ActiveGanttVBE component, all files will be copied to the "C:\Program Files\Boötes Systems SAS\ActiveGanttVBE\" directory.

The most important files in this directory are the following:

Path File Description
C:\Program Files\Boötes Systems SAS\ActiveGanttVBE\ AGVBE_TR.sln The Visual Studio Solution File
C:\Program Files\Boötes Systems SAS\ActiveGanttVBE\AGVBECON\ AGVBECON.vbproj The example's Visual Basic project file
C:\Program Files\Boötes Systems SAS\ActiveGanttVBE\AGVBECON\AGVBE\ AGVBE.dll The ActiveGanttVBE Silverlight Control
C:\Program Files\Boötes Systems SAS\ActiveGanttVBE\Additional Files\ AGVBE.chm The ActiveGanttVBE compiled HTML Help file

 

The install program will generate one shortcut on the desktop, the ActiveGanttVBE Demo Project is a shortcut to the AGVBE_TR.sln file.

 

The install program will also create an ActiveGanttVBE menu in Programs. This menu contains copies of the shortcut installed on the desktop, plus a shortcut to the ActiveGanttVBE help file and a shortcut to the ReadMe file.

4.1. The ActiveGanttVBE HTML Help Shortcut.

 

Clicking on the ActiveGanttVBE Help shortcut in the ActiveGanttVBE menu will bring up the local HTML help file for the component.

 

This help file is also available online from this link:

http://www.sourcecodestore.com/Documentation/DOCFrameset.aspx?PN=AG&PL=VBE

4.2. The ActiveGanttVBE Demo Project Shortcut.

Clicking on the ActiveGanttVBE Demo Project shortcut will generate an elevated permissions prompt in the operating system. Click on the Restart this application under different credentials option.

 

You will then get a User Access Control prompt. Click on the Yes button.

 

You will then get the AGVBE_TR.sln Visual Studio solution file.

The Visual Studio solution file contains all the source code for the ActiveGanttVBE example. You can press the F5 key to begin debuging.

The ActiveGanttVBE Demo has two main examples:

Both examples have a single mode:

All the code used to generate the demo is included in the AGVBE_TR.sln Visual Studio Solution.

5. How to create a simple Silverlight application using the ActiveGanttVBE component.

Start a new instance of Visual Studio.

 

Select   File -> New -> Project....

.

 

In the New Project dialog select   Installed Templates -> Visual Basic -> Silverlight -> Silverlight Application. Leave the solution's name as the default: SilverlightApplication1.

 

The Silverlight template will ask you if you want to host the Silverlight application in a website. Click on OK to continue.

.

 

The template will generate a Silverlight application with a single Silverlight Page called MainPage.

 

Select the Toolbox tab on left. Right click on any control and from the drop down menu select the Choose Items... option.

 

The Choose Toolbox Items dialog will pop-up. Click on the Browse button in the Silverlight Components tab.

 

Select the ActiveGanttVBE component (AGVBE.dll). In a default installation it will be located in "C:\Program Files\Boötes Systems SAS\ActiveGanttVBE\AGVBECON\AGVBE\AGVBE.dll". Then click on the Open button.

 

The ActiveGanttVBECtl is now included in the Choose Toolbox Items dialog. Click on the OK button to exit the dialog.

 

After exiting the Choose Toolbox Items dialog, the ActiveGanttVBECtl component will now be present in the Toolbox.

 

Drag the ActiveGanttVBECtl from the Toolbox onto the MainWindow.

When you change the MainWindow's XAML code to the following:


<UserControl x:Class="SilverlightApplication1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="800" d:DesignWidth="800" xmlns:my="clr-namespace:AGVBE;assembly=AGVBE">

    <Grid x:Name="LayoutRoot" Background="White" Height="600" Width="800">
        <my:ActiveGanttVBECtl HorizontalAlignment="Left" Name="ActiveGanttVBECtl1" VerticalAlignment="Top" Height="600" Width="800" />
    </Grid>
</UserControl>

 

The ActiveGanttVBE control and the MainWindow will be resized to a more appropriate size. Press the F5 key to begin debugging or alternatively you can go to the  Debug -> Start Debugging  menu.

 

At this time you will only have an ActiveGanttVBE control with no functionality. The watermark on the lower right hand side will only be present in the trial version of the ActiveGanttVBE component.

 

Close the window to exit debugging. You will again have the MainWindow in design view. Go to the Properties Window on the bottom right hand side. Click on the Events tab. Scroll down to Loaded and double click on the dropdown on the right.

Include the following code:


    Private Sub UserControl_Loaded(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles MyBase.Loaded
        Dim i As Integer
        ActiveGanttVBECtl1.Columns.Add("Column 1", "", 125, "")
        ActiveGanttVBECtl1.Columns.Add("Column 2", "", 100, "")
        ActiveGanttVBECtl1.Splitter.Position = 225
        For i = 1 To 10
            ActiveGanttVBECtl1.Rows.Add("K" & i.ToString(), "Row " & i.ToString() & " (Key: " & "K" & i.ToString() & ")", True, True, "")
        Next

        ActiveGanttVBECtl1.Redraw()
    End Sub

The above code will create two Columns and ten empty Rows. Notice that every Row has to be identified by a unique key, "K1", "K2", K3", etc.

 

Press the F5 key to begin debugging. You will now have an ActiveGanttVBE control with no Task objects.

 

You can add Task objects by clicking and dragging over any Row in the Client Area of the ActiveGanttVBE control.

You can also add Task objects programmatically:


    Private Sub UserControl_Loaded(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles MyBase.Loaded
        Dim i As Integer
        ActiveGanttVBECtl1.Columns.Add("Column 1", "", 125, "")
        ActiveGanttVBECtl1.Columns.Add("Column 2", "", 100, "")
        ActiveGanttVBECtl1.Splitter.Position = 225
        For i = 1 To 10
            ActiveGanttVBECtl1.Rows.Add("K" & i.ToString(), "Row " & i.ToString() & " (Key: " & "K" & i.ToString() & ")", True, True, "")
        Next

        ActiveGanttVBECtl1.CurrentViewObject.TimeLine.Position(New AGVBE.DateTime(2011, 11, 21, 0, 0, 0))
        ActiveGanttVBECtl1.Tasks.Add("Task 1", "K1", New AGVBE.DateTime(2011, 11, 21, 0, 0, 0), New AGVBE.DateTime(2011, 11, 21, 3, 0, 0), "", "", "")
        ActiveGanttVBECtl1.Tasks.Add("Task 2", "K2", New AGVBE.DateTime(2011, 11, 21, 1, 0, 0), New AGVBE.DateTime(2011, 11, 21, 4, 0, 0), "", "", "")
        ActiveGanttVBECtl1.Tasks.Add("Task 3", "K3", New AGVBE.DateTime(2011, 11, 21, 2, 0, 0), New AGVBE.DateTime(2011, 11, 21, 5, 0, 0), "", "", "")

        ActiveGanttVBECtl1.Redraw()
    End Sub

 

The above code will produce this result.

The examples included in the demo cover almost every piece of functionality present in the ActiveGanttVBE component, but if you need further assistance please read our ActiveGantt support options. Important: if you are sending an e-mail you have to specify that you are referring to the ActiveGanttVBE component, otherwise you will inevitably experience delays in having your query answered.

 

All trademarks are property of their respective holders, and are only used to directly describe the products and services being provided. Their use in no way indicates any relationship or endorsement between The Source Code Store LLC and the holders of said trademarks.