Documents

NextGrid & NextDBGrid

NextGrid

NextDBGrid

NextInspector

NextSheet

NextCollection

NxAlertWindow Tutorial
NxInfoPanel Tutorial
Vista Styled Panels
NxPathControl and NxNotebook tutorial
NxPathControl Quick Start
NxFlipPanel and NxHeaderPanel Quick Start
NxOutlookBar Tutorial
NxPageControl and NxNotebook Quick Start
NxButton Tutorial

Misc

Labs

NxReport Project

NextGrid .NET

NxPathControl and NxNotebook tutorial

Info

Skill:
Version: 1.0.0
Author: Bojan Nikolic
Created: 2008-03-05
Updated: 2008-04-29

This tutorial demonstrates how 2 components from Next Collection suite may be paired and bring attractive and useable user interface.

As may be read in NxPathControl arrange and display items in tree structure. This component will help us to better present Application's sections to the end-users, and provide them faster navigation through sections.

Step 1: Defining Structure

In this tutorial will here try to build single-window user interface by changing pages inside NxNotebook component. Page will be changed by clicking on item within NxPathControl component.

Before starting to add Items into NxPathControl and pages into NxNotebook, we need to organize pages into tree structure. Here is the structure that will be used in this tutorial:

Step 2: Adding pages into NxNotebook

Place NxNotebook component on Form, and righ-click on it. Chose "New Page" from pop-up menu and one new page will be added.

Repeat this process how much is needed (for this tutorial 7 pages need to be added). We will also set Name property of each page to be more descriptive:

Page Name property
pagMusic
pagRipCD
pagAddFolder
pagInternetDownload
pagOnlineStore
pagP2PShare
pagPictures

Now, controls may be added into each page as usuall.

Step 3: Adding nodes into NxPathControl

We recommen reading before next step

In this step nodes will be added into NxPathControl by following tree structure shown in image from 1st step of this tutorial. We will add new nodes with using AddChild function.

with NxPathControl1.Items.AddChild(nil) do
begin
  Text := 'Music';
  Data := pagMusic;
end;

with NxPathControl1.Items.AddChild(nil) do
begin
  Text := 'Pictures';
  Data := pagPictures;
end;

We have immidiatelly set Text property which represent title of newly added node, and Data property which connect node and page from NxNotebook. Data property is pointer type and this property will help us to know which page need to be open after user select item with using NxPathControl.

Now we will add remaining 5 sub-items:

var itmInternetDownload: TNxPathNode;

with NxPathControl1.Items.AddChild(NxPathControl1.Items[0]) do
begin
  Text := 'Rip CD';
  Data := pagRipCD;
end;

with NxPathControl1.Items.AddChild(NxPathControl1.Items[0]) do
begin
  Text := 'Add Folder';
  Data := pagAddFolder;
end;

itmInternetDownload = NxPathControl1.Items.AddChild(NxPathControl1.Items[0]) as TNxPathNode;

with itmInternetDownload do
begin
  Text := 'Internet Download';
  Data := pagInternetDownload;
end;

with NxPathControl1.Items.AddChild(itmInternetDownload) do
begin
  Text := 'Online Store';
  Data := pagOnlineStore;
end;

with NxPathControl1.Items.AddChild(itmInternetDownload) do
begin
  Text := 'P2P Share';
  Data := pagP2PShare;
end;

In this step we have declare one local variable itmInternetDownload. This variable help us to add 2 child items into 'Internet Download' node.

Step 4: Open page on Node click

When user click on node inside NxPathControl, OnSelect event occur. Within this event we may read Selected property of NxPathControl which indicate currently selected node, and open page pointed by Data property of selected node.

procedure TForm1.NxPathControl1Select(Sender: TObject);
begin
  if Changing then Exit; // Global variable, required to stop recursion
  if NxPathControl1.Selected.Data <> nil then
  begin
    NxNotebook1.ActivePage := TNxTabSheet(NxPathControl1.Selected.Data); // Set ActivePage
  end;
end;

As may be seen in code, ActivePage property of NxNotebook1 is set to page (TNxTabSheet object) pointed by Data property. In 1st step of this tutorial we have set that Data property of "Music" node point to the pagMusic page, and this page will be open when user click on Music.

In this code, we are also using global variable Changing which will help us to avoid recursion because in next step we will use OnChange event of NxNotebook.

Step 5: Update PathControl on page changed

If beside with using NxPathControl we want to enable changing pages with using other component such as main menu, we need to update NxPathControl when page is changed.

rocedure TForm1.NxNotebook1Change(Sender: TObject);
begin
  try
    Changing := True;
    NxPathControl1.Selected := NxPathControl1.Items.Find(NxNotebook1.ActivePage) as TNxPathNode;
  finally
    Changing := False;
  end;
end;

We have set Changing global variable to True in order to avoid recursion, because our previous code provide that NxNotebook set NxPathControl when it's changed and vice-versa.