Jump to content
Sign in to follow this  
Jared

Wizards

Recommended Posts

I am wanting to make a wizard web application where each wizard page is designed in a frame/form similar to a TFrame in Delphi, and there is a master form which is a run-time container for the wizard pages. I would like the form to be embedded at run-time in a div much similar to TFrame in Delphi. I would like to control the loading frame content in code.

I want to have each page in a separate form and pas file to keep my code tidy and modular.

The master page would have banners and Previous / Next buttons on it.

Could you please advise how I might go about achieving this in SmartMobileStudio?

Share this post


Link to post
Share on other sites

Probably the easiest way is to define your master form on TW3Display and your 'TFrames' as regular TW3Forms on TW3DisplayView

The code below is from an old project and was based on one of the featured demos, forget which one. 

This method allows what you ask : 'embedded at run-time', 'control content in code', 'page in separate form and pas file' and 'buttons etc on master page'

unit Unit1;

interface

uses
  Pseudo.CreateForms, // auto-generated unit that creates forms during startup
  System.Types, SmartCL.System, SmartCL.Components, SmartCL.Forms, System.Colors,
  SmartCL.Application, Form1, Form2, SmartCL.Controls.Panel,
  SmartCL.Controls.Image;

type
  TApplication  = class(TW3CustomApplication)
  private
    FHeader: TW3Panel;
    FLogo01: TW3Image;
  public
    procedure ApplicationStarting; override;
  end;

implementation

procedure TApplication.ApplicationStarting;
var
  mForm: TW3CustomForm;
  myclientwidth, myclientheight:integer;
begin
  asm
    @myclientwidth = screen.width;
    @myclientheight = screen.height;
  end;

  FHeader:=TW3Panel.create(display);                         //<=======================
  FHeader.Color := clWhite;
  FHeader.SetBounds(0, 0, myclientwidth, 85);
  FHeader.StyleClass := 'none';

  FLogo01:=TW3Image.Create(FHeader);
  FLogo01.LoadFromURL('res/logo.png');
  FLogo01.SetBounds(0, 0, 194, 45);
//

  mForm := TForm1.Create(display.view);                      //<======================= 
  mForm.name := 'Form1';
  RegisterFormInstance(mForm, True);

  mForm := TForm2.Create(display.view);                      //<======================= 
  mForm.name := 'Form2';
  RegisterFormInstance(mForm, False);


end;

end.


 

 

Share this post


Link to post
Share on other sites

Yeah, what @lynkfs writes is one way of doing that. Basically you use the display for the next/prev -buttons and then just change forms normally with GotoForm.

You can also do this inside a form or basically any control you want:

subform := TWizardForm1.Create(Panel1);

So basically, you don't need to register the forms as in @lynkfs example and you can even create many instances of the same form. I am taking advantage of that in the next update to the TTabControl where you can build tabs by using forms.

Share this post


Link to post
Share on other sites

@Jared, Try this......  a mixture of eveyones ideas and code  :)

unit Unit1;

interface

uses
  Pseudo.CreateForms, // auto-generated unit that creates forms during startup
  System.Colors, System.Types, SmartCL.System, SmartCL.Components, SmartCL.Forms,
  SmartCL.Application, SmartCL.Layout, SmartCL.Controls.Label, SmartCL.Controls.Panel, SmartCL.Controls.Button;

const
 MAXFORMCOUNT = 4;

type
  TApplication  = class(TW3CustomApplication)
   private
    fCurrent: integer;
    fLayout: TLayout;
    fHeader: TW3Label;
    fBody: TW3Panel;
    fNext: TW3Button;
    fPrev: TW3Button;
    procedure handleResize(sender: TObject);
    procedure handlePrevClick(sender: TObject);
    procedure handleNextClick(sender: TObject);
  public
    procedure ApplicationStarting; override;
  end;

implementation

uses Form1, Form2, Form3, Form4;

procedure TApplication.handlePrevClick(sender: TObject);
begin
 if fCurrent <> 1 then
 begin
  dec(fCurrent);
  fHeader.Caption:= 'Form ' + intToStr(fCurrent);
  Application.GotoForm('Form' + intToStr(fCurrent));
 end;
end;

procedure TApplication.handleNextClick(sender: TObject);
begin
 if fCurrent <> MAXFORMCOUNT then
 begin
  inc(fCurrent);
  fHeader.Caption:= 'Form ' + intToStr(fCurrent);
  Application.GotoForm('Form' + intToStr(fCurrent));
 end;

end;

procedure TApplication.handleResize(sender: Tobject);
begin
  fLayout:= Layout.Client(
                          [
                           Layout.Top(Layout.Height(50), fHeader),
                           Layout.Bottom(Layout.Height(32), Layout.Left(Layout.Stretch, [fPrev, fNext])),
                           Layout.Client(fBody)
                          ]
                          );
   if Assigned(fLayout) then
   begin
    fLayout.Resize(display);
   end;
end;

procedure TApplication.ApplicationStarting;
var
  mForm: TW3CustomForm;
begin
  display.OnResize:= handleResize;

  FHeader:=TW3Label.create(display);
  fHeader.Color:= clWhite;
  fHeader.AlignText:= taCenter;
  fHeader.Caption:= 'Form 1';
  FHeader.Height:= 50;

  fBody:= TW3Panel.Create(display);

  fPrev:= TW3Button.Create(display);
  fPrev.Caption:= 'Prev';
  fPrev.OnClick:= HandlePrevClick;

  fNext:= TW3Button.Create(display);
  fNext.Caption:= 'Next';
  fNext.OnClick:= HandleNextClick;

  mForm := TForm1.Create(fBody);
  mForm.name := 'Form1';
  RegisterFormInstance(mForm, True);

  mForm := TForm2.Create(fBody);
  mForm.name := 'Form2';
  RegisterFormInstance(mForm, False);

  mForm := TForm3.Create(fBody);
  mForm.name := 'Form3';
  RegisterFormInstance(mForm, True);

  mForm := TForm4.Create(fBody);
  mForm.name := 'Form4';
  RegisterFormInstance(mForm, False);

  fCurrent:= 1;

end;

end.

 

If you dont want to use Layout, just use SetBounds on each control to lay them out explicitly

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×