Documented for WebHub v2.100

1. You will need an AppID in order to run your WebHub application. If you have not already created an AppID, do that first by running this from inside Delphi: Projects > WebHub > New AppID Wizard. Answer the questions - and if this is your first time using WebHub, set the AppID to "test" so that you can keep following this quick start guide. You do not have to use StreamCatcher or Dreamweaver for this first quick test. This wizard will create a small set of folders and files for you, according to the conventions in the WebHub-Dreamweaver manual. It also writes a custom "readme" file with customized notes for your project. You can save your Delphi files under the Source sub-folder.
2. Use the menu to create a WebHub application for your "hello world" test. File > New > Other > Projects > WebHub Application.
3. Select a Basic WH App.
4. On the next page, under optional elements, find the appPanel unit, expand the node, and change the mode from uses to copy.
5. Also under optional elements, find the whsample_DMInit unit. Its mode should also be set to copy.
6. On the Display tab, [x] Add Resource Files.
7. Then click [Go].
8. When the wizard is done generating files, Project > View Source to look at the generated Delphi Project File (.dpr file). It may seem unusual to you and that is because we use a component to manage application startup. Follow the ManageStartup method; you will find it is in unit1 which is a data module. Use the object inspector, and look at the events on the TtpProject component.
9. In particular, click into the OnDataModuleCreate2 event. Change

     pWebApp.AppID := SuggestedAppID;  // e.g. from /id=adv on command line
   

   to

     pWebApp.AppID := 'test';  
   

   That way you will not need to pass the AppID on the command line. (Advanced users may prefer to set the AppID from the command line, which is also fine.
10. Go to the custom Unit2.pas file (which has a form). Add any visual component, such as a TLabel. For extra credit, add one TLabel to the toolbar area, and one to the main panel area. Use any caption. This is just to show you how the panel will appear in your project's GUI when it runs.
11. Go to the custom Unit3.pas file (which is a datamodule).
12. Add a component from the WebHubActions palette - component class TwhWebAction - it has a green-starburst-sort-of icon. It is a non-visual component. Using the Delphi Object Inspector, set the component's name to waHello and program the OnExecute event like this:

    procedure TSomething.waHelloExecute(Sender: TObject);
    begin
      inherited;
      {this code will run when WebHub produces a page containing a call to (~waHello.execute|~) }
      pWebApp.SendStringImm('Hello, world!');
    end;
    

    Alternatively, if you want to avoid the global pWebApp pointer in spite of its convenience, do this:

    procedure TSomething.waHelloExecute(Sender: TObject);
    begin
      inherited;
      with TwhWebAction(Sender) do
        WebApp.SendStringImm('Hello, world!');
    end;
    

13. Compile your project and run it. It will put an icon in the tray. Double click the icon to open the main form. You should find your custom panel with your custom labels.
14. Make sure that the HTML > Files panel has loaded the WHTEKO files associated with your AppID. (If it has not loaded the files, use ZMAdmin to check the validity of your AppID and to see what WHTEKO files are assigned for it.
15. On the HTML > Files panel, you should see a file named content.whteko which a lot of text which looks like HTML with some extra markup. Add this line to the home page:

    <p>This is what my web action component has to say: (~waHello.execute|~)</p>
    

16. Click the little blue disk which is a Save-File icon, or press Ctrl-S.
17. Optional: stop/start the Hub so that it knows about your new AppID. You don't have to do this at this point, because your WebHub EXE is already running. If you later see errors about your AppID not being defined, remember that you can stop/start the Hub to load the latest set of AppID definitions. Once you get past preliminary testing, you probably will not add AppIDs very often.
18. Test from your web browser: http://localhost/scripts/runisa.dll?test:home
    
    That should display the home page from your "test" application, including executing the line of code in your app.
19. Optional: if you have run the EXE from within Delphi, you can put a breakpoint on your pWebApp.SendStringImm line. Re-request the page in the web browser, and notice how Delphi will stop when it gets to the time for executing that web action component. Press [F9] to make Delphi start running again (you will have 8 seconds by default, otherwise the web page request will timeout. You can change the timeout using ZMAdmin).

If you have comments or questions about the content on this page, please use the ASK button below to send a targeted message directly to WebHub Technical Support.

Modifying Existing Projects to Accept Forms added by the Wizard

This is what you would have in your DPR

  ForceEnableGUI;
  Application.Initialize; // MultiTypeApp.Application
  Application.CreateForm(TDMSampleForWHProject, DMSampleForWHProject);  // ok to rename this datamodule
  DMSampleForWHProject.ProjMgr.ManageStartup;  // leave the name of the TtpProject component as ProjMgr
  Application.Run;

This is the first special comment - it goes in the unit containing TtpProject - in the OnDataModuleCreate3 event

procedure TDMSampleForWHProject.ProjMgrDataModulesCreate3(
  Sender: TtpProject; var ErrorText: String; var Continue: Boolean);
begin
  CreateStandardWHModules;

    Application.CreateForm(TDM001, DM001);

  { Special Comment for DataModules - do not delete!

    This comment is used by the WebHub Wizard to position non-gui CreateForm
    statements for you, just above here. You may add your own CreateForm
    statements as well, either above or below this comment, as you wish. }
end;

This is the second special comment - it goes in the unit containing TtpProject, in the OnGUICreate event:

procedure TDMSampleForWHProject.ProjMgrGUICreate(Sender: TtpProject;
  const ShouldEnableGUI: Boolean; var ErrorText: String;
  var Continue: Boolean);
var
  SplashMessage: string;
begin
{$IFNDEF PREVENTGUI}
  if ShouldEnableGUI then
  begin
    SplashMessage := 'Creating Graphical User Interface';
    WebMessage(SplashMessage);
    // create the main form which will hold the WebHub panels (GUI)
    Application.CreateForm(TfmWebHubMainForm, fmWebHubMainForm); // MultiTypeApp
    // after the main form, create GUI modules
    CreateStandardWHModulesGUI;

    { Special Comment for Forms - do not delete!

      This comment is used by the WebHub Wizard to position GUI CreateForm
      statements for you, just above here. You may add your own CreateForm
      statements as well, either above or below this comment, as you wish.

      Example: Application.CreateForm(TfmMyWHPanel, fmMyPanel);
    }
    WebMessage('-' + SplashMessage);
  end;
{$ENDIF}
end;

Thank you

Thank you for using WebHub!