Nateo Concept: Initialization

Initialization of the Time Chart

This chapter explains the steps that are neccessary to get a NtTimeChart up and running. The different actions will be described theoretically. For a hands on example please see the tutorials Empty Time Chart and Data Display.

Assumptions

We will no go through creation of a Windows Form containing a Time Chart. We will start at the point where you have already performed the following steps:

You already created the Windows Forms Application
You already placed the Nateo.dll into your solutions folder and added it to your solution as a Reference.
You already added a Form to your application or kept the default Form as the one to work with.

Getting started

Now you should take a look into the Toolbox where and find the controls the IDE offers for use in Forms: As you added the Nateo.dll as a Reference, you should now see a section named 'Nateo'. Once you open it, you find the Nateo controls in there.

The first step is to drag the following elements to your Form and specify them accordingly in terms of name, location, anchors, docking etc.:

One NtTimeChartControl. This is the central control.
One NtHeaderControl. Place it on top or to the bottom of the NtTimeChartControl, depending on where you want it. In general, top is the better option.
As many NtFlankControls as you prefer. For usability reasons having exactly one NtFlankControl located to the left of the NtTimeChartControl is by far the best to recommend.
A NtHScrollBar that will work as the Time Charts horizontal scroll bar. The recommended position of course is to the bottom of the NtTimeChartControl.
A NtVScrollBar as the vertical scroll bar. Best position is to the right of the NtTimeChartControl or to the right of the rightmost NtFlankControl if one of those is located to the right.
One NtHScrollBar per NtFlankControl that shall support horizontal scrolling. Horizontal scrolling in Flank Controls is no good usability. Better to have no horizontal scroll bars here.
One NtBackPanel. On initialization it will be relocated so it makes up the 3D border around the NtTimeChartControl, NtFlankControls, Scrollbars etc. Place this NtBackpanel anywhere on your Form and make it small so it does not disturb.

Initialization in the Form's Load() member method

1. Set the interfaces the NtTimeChartControl might need. Example:

ntTimeChartControl.SetNtApplication(this); //used to obtain tooltip texts and holiday information
ntTimeChartControl.customObjectPaint = this; //only if you want to make use of custom object painting

Of course you need to create the implementing interface methods or classes. This is not covered here.

2. Set general flags and properties that define the behaviour of the NtTimeChart.

Settings like mouseWheelStep, allowMultiSelect etc. can be set here, as long as you prefer to deviate from the default values. Normally the default settings make up a good point to start from, so there is not much to do here.
Anyway this is a good time to set the fonts and brushes for the category headers (if you want to use categories). Example (for two category levels):

ntTimeChartControl.categoryTextBrushes = new Brush[2]; //you must initialize the array to the appropriate size
ntTimeChartControl.categoryTextBrushes[0] = Brushes.DarkBlue;
ntTimeChartControl.categoryTextBrushes[1] = Brushes.Blue;
ntTimeChartControl.categoryFonts = new Font[2]; //you must initialize the array to the appropriate size
ntTimeChartControl.categoryFonts[0] = new Font("Microsoft Sans Serif", 12, FontStyle.Bold);
ntTimeChartControl.categoryFonts[1] = new Font("Microsoft Sans Serif", 10, FontStyle.Bold);

3. Add event handlers for all events you want to catch, like double clicking on objects etc. Example:

ntTimeChartControl.displayObjectDblClick += (s, eventArgs) => { NtDisplayObject ntdo = eventArgs.displayObject; MyDoubleClickHandler(ntdo); }

4. Set up the NtTimeChartControl's sheet, columns and initial scaling.

The NtTimeChartControl has a specific number of columns you must set up on initialization. The follwoing example creates 240 columns, so whenever display mode is switched to 'hours' the control will cover 10 days. Please note that the initial column width of 90 pixels and the time display mode hours are only the startup values. They application can change these values later or the user might change the time zooming so the column width changes.

ntTimeChartControl.Init(10 * 24, 90,TimeDisplayMode.hours);

5. Maintain the Scrollbars, Flank Controls, Header Control, and Back Panel.

The horizontal and vertical scroll bars need to be attached to their master controls. Flank Controls are initialized with the NtTimeChartControl. Finally all controls that shall be bordered by the Back Panel have to be put to the NtBackPanel

ntTimeChartControl.SetScrollBars(ntTimeChartControlHScrollBar, ntTimeChartControlVScrollBar);
ntHeaderControl.Init(ntTimeChartControl, myFont, myFont, false);
ntLeftFlankControl.Init(ntTimeChartControl, ntLeftFlankControlHScroll, 120); //120 pixels is the width of the NtFlankControls sheet.
ntBackPanel.SetPadding(2, 2, 2, 2);
ntBackPanel.Repos(ntLeftFlankControl, ntLeftFlankControlHScroll, ntTimeChartControl, ntTimeChartControlVScrollBar); //put all hosted controls to parameter list.

6. Setting up the NtDisplayDefs and the NtRowHeaders.

Suppose you have a method named LoadNtDisplayDefs that is able to load the NtDisplayDefs from a configuration data base or file. Then setting up the display definitions for the various data types might look like this:

Graphics g = CreateGraphics(); //get a valid Graphics object from the Form
List displayDefs = LoadNtDisplayDefs();

for (int i = 0; i < displayDefs.Count; ++i)
{
NtDisplayDef dd = displayDefs[i];
ntTimeChartControl.SetDisplayDef(dd);
NtRowHeader rh = new NtRowHeader();
rh.InitRowHeaderText(dd.rowHeaderStr, myFont, dd.textBrush, dd.bkBrush, g);
ntTimeChartControl.SetRowHeader(dd.dataTypeId, rh);
}

g.Dispose();

This example does not prepare any bitmap for any of the NtRowHeaders to keep things simple. Of course you can initialize Row Headers depending on the data types differently or create your own subclasses of NtRowHeader to implement special abilities.

7. Set the data and the NtPerspective.

Now as everything is configured, it is time to insert the data into the Time Chart and finally define the row setup. First the Time Chart is scrolled to the current point of time (aligned to the middle of the client area). Then the data is set (myDataObjects is supposed to be a List<NtDataObject> that you filled with your data objects). And then the Perspective is being set (assuming myNtPerspective is a NtPerspective object you created and prepared accordingly). Finally the focus is set to the NtTimeChartControl.

ntTimeChartControl.ScrollToDt(DateTime.Now, ntTimeChartControl.ClientSize.Width / 2, 0);
ntTimeChartControl.SetData(myDataObjects);
ntTimeChartControl.SetNtPerspective(myNtPerspective);
ntTimeChartControl.Focus();

These are all steps for initializing filling and launching the NtTimeChartControl. Please refer to the tutorials for hands on examples.

<< Prev.: Tooltips Next: Overview >>