TabOrder

[cyracks]

Hello,

I have some problems with the order of components shown in the browser. As I understand property IWComponent.TabOrder is responsible for order of component regarding parent component. So if form consists of Region which is a parent to GridPanel and Label (both align = alTop) and if Label.TabOrder is 0, GridPanel.taborder is 1 that means Label should be set above the Button.


LabelBoxWorkDept.TabOrder = 0
MGridPanelWorkDep.TabOrder = 1 (grid panel holds 2 buttons)

But when form is rendered components are in reverse order (GridPanel above Label)



I should also mention that components are added to main form from another form by code (in main form on create event), but component names are not duplicated.

Code:

    FormSub := TFormSub.Create(WebApplication);
    FormSub.Region02WorkDeparture.Parent := MRegionMenuHolder;

What needs to be done so that components will be rendered in the same order as is defined by property TabOrder ?

Regards,
Tomaž

[DanielFields]

As far as I know, the TabOrder property is not related to rendering order. It determines where the cursor (focus) goes when the user presses the Tab key. It would determine navigation order for the fields in a form.

You are getting those results because you are programmatically inserting controls onto the form at runtime. Whenever you do that to a region with existing controls the new controls appear first. I don't know if that's browser related or IW behavior, but it has always worked that way.


You should be aware that playing with the parent property like that does not always work as expected. In works great for VCL applications, but the browser is entirely different animal. You may want to consider using frames instead of borrowing regions from other forms. You'll get more consistent results. Many developers on this forum rely upon dynamically created frames in their applications.

[Alexandre Machado]

Hello,

I have some problems with the order of components shown in the browser. As I understand property IWComponent.TabOrder is responsible for order of component regarding parent component. So if form consists of Region which is a parent to GridPanel and Label (both align = alTop) and if Label.TabOrder is 0, GridPanel.taborder is 1 that means Label should be set above the Button.


LabelBoxWorkDept.TabOrder = 0
MGridPanelWorkDep.TabOrder = 1 (grid panel holds 2 buttons)

But when form is rendered components are in reverse order (GridPanel above Label)



I should also mention that components are added to main form from another form by code (in main form on create event), but component names are not duplicated.

Code:

    FormSub := TFormSub.Create(WebApplication);
    FormSub.Region02WorkDeparture.Parent := MRegionMenuHolder;

What needs to be done so that components will be rendered in the same order as is defined by property TabOrder ?

Regards,
Tomaž

This should work exactly as you described and we actually have several test cases using that construction and it should be working.
Which IW and Delphi version is that?

Are you sure your IW label is not constrained in any way? like for instance, Autosize = true or something else?

[cyracks]

I am using cgdevtools components if that makes any difference, bellow is the whole definition of components in question (components to code):

Delphi: XE7
IntraWeb: 14.2.6
CGDevTools: 4.1.0.50

Code:

var
 Region02WorkDeparture: TIWCGJQMRegion;
 LabelBoxWorkDept: TIWCGBSLabelBox;
 MGridPanelWorkDep: TIWCGJQMGridPanel;
 MPanelWorkDept01Out: TIWCGJQMGridPanelRegion;
 MButtonWorkDeptOut: TIWCGJQMButton;
 MPanelWorkDept02In: TIWCGJQMGridPanelRegion;
 MButtonWorkDeptIn: TIWCGJQMButton;

 Region02WorkDeparture := TIWCGJQMRegion.Create(Self);
 LabelBoxWorkDept := TIWCGBSLabelBox.Create(Self);
 MGridPanelWorkDep := TIWCGJQMGridPanel.Create(Self);
 MPanelWorkDept01Out := TIWCGJQMGridPanelRegion.Create(Self);
 MButtonWorkDeptOut := TIWCGJQMButton.Create(Self);
 MPanelWorkDept02In := TIWCGJQMGridPanelRegion.Create(Self);
 MButtonWorkDeptIn := TIWCGJQMButton.Create(Self);

 with Region02WorkDeparture do
 begin
   Name := 'Region02WorkDeparture';
   Parent := MRegion01Main;
   Left := 0;
   Top := 148;
   Width := 350;
   Height := 75;
   TabOrder := 2;
   Version := '1.0';
   Align := alTop;
 end;
 with LabelBoxWorkDept do
 begin
   Name := 'LabelBoxWorkDept';
   Parent := Region02WorkDeparture;
   Left := 0;
   Top := 0;
   Width := 350;
   Height := 15;
   TabOrder := 0;
   Version := '1.0';
   Align := alTop;
   Caption := 'Slu'#382'bni odhod';
   with Html.Elements.Add do begin
     ClsName := 'TIWCGHTMLSpan';
     Attributes := <;
     Name := 'class';
     Value := 'label label-default';
   end;
   with Elements.Add do begin
     ClsName := 'TIWCGHTMLTextElement';
     Text.Strings := (;
   end;
   with Events.Add do begin
     Name := 'click';
   end;
 end;
 with MGridPanelWorkDep do
 begin
   Name := 'MGridPanelWorkDep';
   Parent := Region02WorkDeparture;
   Left := 0;
   Top := 15;
   Width := 350;
   Height := 65;
   TabOrder := 1;
   Version := '1.0';
   TabIndex := True;
 end;
 with MPanelWorkDept01Out do
 begin
   Name := 'MPanelWorkDept01Out';
   Parent := MGridPanelWorkDep;
   Left := 0;
   Top := 0;
   Width := 175;
   Height := 65;
   TabOrder := 0;
   Version := '1.0';
   BlockClass := 'a';
   Panels := MGridPanelWorkDep;
 end;
 with MButtonWorkDeptOut do
 begin
   Name := 'MButtonWorkDeptOut';
   Parent := MPanelWorkDept01Out;
   Left := 0;
   Top := 0;
   Width := 175;
   Height := 58;
   TabOrder := 0;
   Version := '1.0';
   Align := alClient;
 end;
 with MPanelWorkDept02In do
 begin
   Name := 'MPanelWorkDept02In';
   Parent := MGridPanelWorkDep;
   Left := 175;
   Top := 0;
   Width := 175;
   Height := 65;
   TabOrder := 1;
   Version := '1.0';
   BlockClass := 'a';
   Panels := MGridPanelWorkDep;
 end;
 with MButtonWorkDeptIn do
 begin
   Name := 'MButtonWorkDeptIn';
   Parent := MPanelWorkDept02In;
   Left := 0;
   Top := 0;
   Width := 175;
   Height := 58;
   TabOrder := 0;
   Version := '1.0';
   Align := alClient;
 end;

I also tried to manually set taborder after owner was changed but that also didn't help. For example

Code:

Form_mHRWorkLog01 := TForm_mHRWorkLog01.Create(WebApplication);
Form_mHRWorkLog01.Region02WorkDeparture.Parent := MainForm.MRegionMenuHolder;
Form_mHRWorkLog01.LabelBoxWorkDept.tabOrder := 0;
Form_mHRWorkLog01.MGridPanelWorkDep.tabOrder := 1;

Beside that I also tried to change property HandleTabs on main form from False to True, but that made no difference.

[Alexandre Machado]

In StyleRenderOptions of each of the aligned controls, set RenderPosition to FALSE. It should render in correct order. Although the controls are rendered sorted by their tab orders, if position is rendered (i.e. top and left coordinates) the alignment will be wrong in the end, unless they also have correct relative positions during design time (in your case at runtime but when they are created).