Documents

NextGrid & NextDBGrid

NextGrid

NextDBGrid

NextInspector

NextSheet

NextCollection

Misc

Labs

NextGrid .NET

NextInspector Quick Start

Related Articles:

Info
  • Skill:
  • Version: 1.0.0
  • Author: Bojan Nikolic
  • Created: 2008-04-25
  • Updated: 2008-05-05
NextInspector component is ObjectInspector component written from scratch and with much more features and attractive look.



Work with NextInspector is done in 2 modes:

1. Design-time with help of built-in NextInspector
2. Run-time with easy to learn functions and properties just as in TTreeView from Delphi.

1. Design-time quick start



Click on "Next Suite" Tab inside Components Palette/Toolbox and find NextInspector icon:



Double click on it and new component will be placed on form.

After component is placed on form, we may do first adjustments. Some of them are:

Style - Specify "look and feel" of NextInspector. Value may be psDefault, psOffice2003, psOffice2007 (with support for color schemes), psWhidbey (Visual Stydio appearance). Depending you personal style or application style you may chose one by simply goin trough all and testing. Much other elements may be customized such as margin, grid line, selection color, Item's Font...

MarginColor - Color of most-left part of NextInspector. When set to some of styles above, and iaStyleColors flag in AppearanceOptions, color will be automatically set. Best choice for many situations.

GridColor - Specify grid-lines color. It work similar to MarginColor property, it adjust to the current style if iaStyleColors flag in AppearanceOptions is set.

SelectionColor - Specify color of selection. Default value is same as selection-color in Windows. It is important to note that when some styles are chosen (such as psOffice2007 this property will be ignored, but no worry this will give more consistent look to whole application.

We will back on other properties after.

2. Using Items Editor



Items Editor is special window builded for easy adding, managing and configuring items within NextInspector. Very similar to any design-time editor in Delphi. To open it right-click on component:



and pick "Items Editor...". Items editor will open. You may also double-click on component, or chose "..." beside Items property.



By clicking on buttons new item will be added as child item of currently selected item in editor. If you select item, you will be able to set properties of them within ObjectInspector. You may also drag & drop items within "Items Tree", delete them by clicking on icon, or clear all Items.

You may also notice (Root) item at the top of the Item's hierarchy. This is some kind of "virtual" item and can't be deleted, but helps to add real root items "categories" into NextInspector.

For full list of all items (with screenshots) please read NextInspector Item Types

3. Important properties for Item



Most important property for each item is Name. By setting this property you are able to use name of this item in run-time and directly access to item:

myItem.Caption := 'My simple item';


myItem->Caption = "My simple item";


This approach is best for some very important Item which need to be set or read often.

Another 2 most important properties are Caption and Value.

Caption property specify Item's title. It is WideString.

Value property specify or determine Item's value. It may be set by code, or by editing item with Inplace Editor.

ImageIndex is set, image from NextInspector's Images property (TImageList) will be displayed beside caption:



4. Run-time quick start



Working with NextInspector in run-time is very similar as working with Delphi TTreeView and TTreeNode objects.

4.1. Accessing items



As NextInspector is some kind of tree component, it introduce Items array property by accessing single item (node - TNxPropertyItem) with they absolute index.

NextInspector1.Items[5].Value := 'some value';


NextInspector1->Items[5]->Value = "some value";


Here we may use typecasting and access to some item-type specific properties.

TNxSpinItem(NextInspector1.Items[2]).SpinButtons := False;


or

(NextInspector1.Items[2] as TNxCheckBoxItem).FlatStyle := True;


4.2. SelectedItem property



Very important property of NextInspector is public property SelectedItem. This property indicate which item is currently selected:

NextInspector1.SelectedItem.Value := '3';


NextInspector1->SelectedItem->Value = "3";


4.3. Value property of item



Value property is key property of every ObjectInspector. It keeps values that we may read them later. We may also use AsString, AsInteger... properties for reading values, but for this read next a little bit advanced article.

More info about working with NextInspector in run-time in NextInspector Advanced tutorial

5. More properties of NextInspector



Options property contains flags for fine tuning NextInspector appearance and working.

Table 1: Options property flags
Name Meaning
poGrid Show/Hide grid lines. Splitter (Divider) remains visible even if this flag is False.
poEnterSelectNext Next item will be selected after user press Enter key.
poSplitterMoving When set to False moving splitter will be disabled.
poImages reserved for future
poUniformSelect When set to False holding mouse button and moving it it will select new item, just as in Delphi.


Images - Specify TImageList which will be used to drawn image beside item when ItemIndex is set.

CollapseGlyph and ExpandGlyph specify glyps used to draw and buttons.

SplitterPosition - Specify position of vertical Caption/Value divider line.

RowHeight - Specify height of each item. Example:

Was This Article Useful?

Comments

2008-05-24 11:36:11

"So this is not an object inspector since it cannot accept any TPersistent object and edit its properties. I did use DevExpress VerticalGrid which is actually an object inspector, but after 5 years of development it lacks the ability to edit multiple objects at the same time like the Delphi object inspector. So I have to continue my search.."

2008-05-24 11:39:48

Hello,

Starting from next release (v4.9), Associate property will accept TPersistent objects. But if object is TPersistent, Associate property will need to be set in run-time.

BergSoft

2009-08-17 09:44:27

hello,

ksimpo rahmo andowikh drahem betbet
hismo lakaw ranho dbinspector?

tanho.

2010-07-09 08:38:57

I set RowSize to 26px ,but the TSpinEditItem Value Font Size Still small.I Want vaule Font size also bigger.

2010-07-09 18:33:52

Hello,

Please set ValueFont property of Item to desired size.

I hope that this helps.

Best regards
Boki (BergSoft)

2010-07-09 20:47:04

Thanks.

The New Code Is As Follows?

procedure TForm1.Button1Click(Sender: TObject);
var
nxFontSize:TNxTextItem;
c1:TNxPropertyItem;
begin
NextInspector1.Items.Clear;
nxFontSize :=TNxSpinItem.Create(Self);
nxFontSize.Caption := 'Size';
nxFontSize.ValueFont.Name := NextInspector1.Font.Name ;
nxFontSize.ValueFont.Size := 36;
nxFontSize.Font.Size := 36;
NextInspector1.RowHeight := 40;

with NextInspector1.Items do
begin
c1:= AddChild(nil,TNxTextItem,'Font');
AddItem(c1,nxFontSize);
end;
end;


The TSpinEditItem Value Font Size Is Still Small.

2010-07-09 22:03:32

I have find the right way.

should set Font.Size property of NextInspector1.

NextInspector1.Items.Clear;
NextInspector1.Font.Size := 16;
nxFontSize :=TNxSpinItem.Create(Self);
nxFontSize.Caption := 'Size';

NextInspector1.Canvas.Font := NextInspector1.Font;
NextInspector1.RowHeight := NextInspector1.Canvas.TextHeight('M') + 4;

with NextInspector1.Items do
begin
c1:= AddChild(nil,TNxTextItem,'Font');
AddItem(c1,nxFontSize);
end;

2010-07-09 22:37:56

I have fine a Serious bug .

if you click the down button of TSpinEditItem, then click another control of form .
then,back to click the TSpinEditItem control, bug find.

you can see the gif Animation:
http://www.gotopjs.cn/Download/next.gif


thanks.

2010-07-10 03:49:55

We need Accessing items by Caption or MapProperty Name.
use the absolute index is inConvenient?

2010-07-10 07:04:37

>I have fine a Serious bug .

>if you click the down button of TSpinEditItem, then click another control of form .
>then,back to click the TSpinEditItem control, bug find.

>you can see the gif Animation:
>http://www.gotopjs.cn/Download/next.gif

>thanks.

Can you please send us a demo project on our e-mail adress (or attach it on forum). I wasn't be able to reproduce this bug.

Thank you

Best regards
Boki (BergSoft)

2010-07-10 07:05:26

>We need Accessing items by Caption or MapProperty Name.
>use the absolute index is inConvenient?

Hi,

I will try to add access by Caption for upcoming release.

Best regards
Boki (BergSoft)

2010-07-10 07:14:36

use your demo project "map_property" can also reproduce the bug.

First,Click the dowbutton or upbutton of NxSpinItem1

Second,Click the Edit1.

Third,Click the dowbutton or upbutton of NxSpinItem1,bug reprodure.

you can see the gif Animation:

http://www.gotopjs.cn/Download/next.gif

2010-07-10 07:23:34

Hi,

Thank you. I have tested it and all work fine. Maybe you don't use latest release of NextInspector (?)

Best regards

2010-07-10 07:24:12

I find the object TNextInspector.Items have the ItemByName property

I write two function According to "function TNxPropertyItems.GetItemByName(Name: string): TNxPropertyItem;"


function GetItemByCaption(ANi:TNextInspector; ACaption :string): TNxPropertyItem;
var
i: Integer;
begin
Result := nil;
With Ani.Items do
for i := 0 to Count - 1 do
if CompareText(Item[i].Caption, ACaption) = 0 then
begin
Result := Item[i];
Exit;
end;
end;

function GetItemByMapProperty(ANi:TNextInspector; AProperty :string): TNxPropertyItem;
var
i: Integer;
begin
Result := nil;
With Ani.Items do
for i := 0 to Count - 1 do
if CompareText(Item[i].MapProperty, AProperty) = 0 then
begin
Result := Item[i];
Exit;
end;
end;

2010-07-10 07:26:28

I use Ver 5.0.6 TNextInspector

2010-07-10 07:29:54

@ItemByCaption: I will add this functions directly into NextInspector.

@SpinEditor bug: I suggest that you try to download latest release. Maybe bug is already fixed in it.

Best regards
Boki (BergSoft)

2010-07-10 07:38:49

thanks.

Additionally,the TNextInspector need a TStatusBar on bottom,show the hint of SelectedItem.

2010-08-30 07:52:15

I would like to set the height of each item, how do I do????

2010-09-15 12:12:06

Hello,

Set ItemHeight property to value greater than 0.

Best regards
Only constructive comments, code contributions... will be publishes. Questions, non-official discussion will not be published.