Documents

NextGrid & NextDBGrid

• Html Column Tutorial
• Upgrade existing projects for loading changes
• Edit events in NextGrid
• NextGrid Vista Style
• NextGrid How To
• Integrating Inplace Editors
• NextGrid Slide Style Tutorial
• InputLine Tutorial
• Using Editors in runtime
• FieldChooser Tutorial
• Grid Report Tutorial

NextGrid

• TreeColumn Tutorial
• NextGrid Quick Start
• Custom Draw in NextGrid
• Export to XML from NextGrid
• Optimize NextGrid
• NextGrid Custom Sorting
• VirtualColumn Tutorial
• Graphic Column Tutorial

NextDBGrid

• NextDBGrid Quick Start
• NextDBGrid Events
• NextDBGrid How To
• Sorting records in NextDBGrid
• LookupColumn Tutorial

NextInspector

• ToolbarItem tutorial
• NextInspector Advanced tutorial
• NextDBInspector Tutorial
• NextInspector Item Types
• Map VCL property to item
• NextInspector Quick Start

NextSheet

• NextSheet Sample Project
• NextSheet Quick Start
• Formating in NextSheet
• NextSheet Print Method

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

• Component Names Change
• NxComboBox styles
• Numeric FormatMask
• NxVirtualDataSet tutorial
• DateTime FormatMask
• NxPreview Quick Start
• Quick update
• 32bit Bitmaps Tutorial
• Enable typing unicode characters in InplaceEditors
• Using NxColorScheme
• NxProgress Tutorial
• NxAutoCompletion Tutorial

Labs

• NxReport Project

NextGrid .NET

• Working with tree
• Custom Drawing in NextGrid dot NET
• NextGrid Dot Net
• NextGrid Dot Net Events
• NextGrid dot NET Quick Start

Related Articles:

In this article we will explain how to work with NxNotebook and NxPageControl.

1. Introduction

Both components are descendants from same ascendant class and share most of common properties (such as ActivePage property, or Pages property), but appearance is different.

1.1. NxNotebook

NxNotebook component is very similar to component Noteook from Delphi but it provide much better control of pages (with design-time pages buttons) and much less bugs.

It is ideal for making Wizard styles dialogs, page-based user interface... In design-time there are also buttons for changing pages easily.

1.2. NxPageControl

NxPageControl introduce Tab-s, on the top or on the bottom of the component. User may click on Tab and change the active page in run and design time very easy.

2. Placing components on form

Click on NxNotebook icon within "Next Collection" Palette (Category) within Components (Tool) Palette.

If you like to use NxPageControl, click on icon.

Click on form and component will be placed and ready to use.

3. Adding new page

To add new page in design-time, right click on component and choose the item "New Page".



If you want a few new pages, repeat the same procedure as many times you need.

To add new page in run-time use AddPage method. Example:

var
  NewPage: TNxTabSheet;
begin
  NewPage := TNxTabSheet.Create(Self);
  NewPage.Caption := 'New Page';
  NxPageControl1.AddPage(NewPage);
end;

When page is added it may be accessed via Pages array property. Example:

ShowMessage(NxPageControl1.Pages[0].Caption);

4. Deleting active page

To delete page in design-time right click on component and choose the option "Delete Page". You may also click on page to select it and then press "Delete" ("Del") key on keyboard.



In run-time, DeletePage method need to be used. Example:

NxPageControl1.DeletePage(NxPageControl1.Pages[0]);

5. Changing the active page

To change the active page in design-time everything you need to simply click on component, and then from property ActivePage choose one of pages from the list.

Every page is TNxTabSheet class descendant.



Active Page may be also changed with using ActivePageIndex property. After setting this property, page with specified Page Index will become active.

Changing the active page for NxPageControl component is possible on by clicking directly on tab.

In run-time, page may be changed by setting ActivePage

NxPageControl1.ActivePage := NxTabSheet3;

NxPageControl1->ActivePage = *NxTabSheet3;

or ActivePageIndex property

NxPageControl1.ActivePageIndex := 2;

NxPageControl1->ActivePageIndex = 2;

6. Changing a position of Tab

If you want to change a Tab position you need to click on NxPageControl component, and then, from TabPosition property choose one of the options.

This property may have 2 values:

1. tpTop - Tabs will be placed on top of control:



2. tpBottom - Tabs will be placed on bottom of control:

7. Customizing NxPageControl

Now, we will explain some of the most important properties of NxPageControl component.

1. If you want to change the color of Tab, then you can choose one of the 2 options of AdaptiveColors property:

1) True - the color will be same like in Windows or

2) False - then you can choose the color from the TabColor property.

2. If you want to change the color in header of the component, then you will do that by setting BackgroundColor property.

3. If you want to change a kind of header on the active page, then you can do that by simple click on BackgroundKind property, and choose one of the options.

This property has 4 options:

1) bkSolid

2) bkHorzGradient

3) bkVertGradient

4) bkInveseVertGradient

4. If you want to restrict the “child components” inside the panel, then you can do that by simple click on Margin property, and then, set the value.

5. If you want to hide or show Tab, then you can use ShowTabs property:

1) True – show tabs
2) False – hide tabs.

6. If you want to change the Tab height, then you can do that work by simple click on TabHeight property.

7. If you want to change the Tab style, then you can choose one of the options from TabStyle property.
This property has 4 options:

Name	Example
tsClassic
tsFlat
tsOneNote
tsWhidbey

8. Now, we will learn something about Options property. With this property you can additionaly customize the component.

This property has 5 options:

pgAlwaysShowTabsRect - Show/Hide Tabs Rect even if there is no tabs in PageControl

pgBoldActiveTab - Bold text on Active Tab

pgCloseButton - Show/Hide Close Button

pgScrollButtons - Show/Hide Scroll Buttons

pgTabsPopup - Show/Hide button with pop-up menu which may be used for changing active page.

pgTopBorder - Show/Hide Top Border line

8. Customizing page

1. If you want to make active tab visible or unvisible, then you must choose one of the options: 1) true or 2) false from PageVisible property.

2. If you want to display some glyph on Tab, then you can do that work with with simple click on Glyph property, and then, in Picture Editor choose Load, and choose a picture what you need.

Glyph could be and from ImageList, whose stick for the main component (Images property).

The glyph could be display from Glyph property, ImageList, or will be display TextOnly, and that depence from the value in DisplayMode property.

1) tdGlyph – the picture could be display from the Glyph property. If the Glyph property is empty, then the picture should be not displayed.

2) tdTextOnly – if you choose the TextOnly option from DisplayMode property, then the Tab will display the text only, ignored by picture.

3) tdImageIndex – Image will be taken from ImageList with index specified in ImageIndex property of TabSheet:

9. Methods and Events

9.1. Methods

MakeVisible(Index: Integer) - Scroll tabs to the tab with specified Index.

ScrollTabs(Delta: Integer) - Scroll tabs by specified amount of pixels.

9.2. Events

OnChange - Occur when ActivePage property is changed.

OnChanging - Occur when user try to change ActivePage. This event have PageIndex parameter which indicate new ActivePage (by clicking on tab, or within code). If parameter AllowChange is set to False, changing will be canceled.

OnPageClose - Occur when user click on close button. Closing page may be canceled with setting parameter Accept to False.