Building a demo step by step

Last Updated: 9/17/2008

Sections above here:
Home » Demos

Sections below here:

Topics in this section:
Demos
Building a demo step by step
Features
Guess
Guess WebBroker
Guess Multi
FishFact
Fish Fact DataModule Version
Phonetics
Standalone SSL
Websnap
Custom Standalone
Back Button
Page Forms
Fish Market
Web Mail 32

The FormData Demo

This chapter will follow the development of a simple demo for IntraWeb step by step. The demo is called FormData and shows how IntraWeb forms can interact with each other during a session.

Description

FormDataDemo is a simple application which has two screens: first one displays an edit and a button. Clicking on the button will open the second screen which shows all data entered in the edit field of the first form and the number of times the user has visited the second screen. This is an stand alone application developed with IntraWeb.

How Does The StandAlone Application Work?

A standalone application is an executable that listens on port defined by the user and serves back HTML pages. IntraWeb can build this kind of applications. The IntraWeb forms added to the project and the controls on it will be rendered as HTML content and served to the browser.

Building FormData Application in Delphi

From the Delphi menu, choose File|New|Other... .In the New Items window, choose the IntraWeb tab. To create a new application, select the IntraWeb Application Wizard icon and then click OK:

You will be prompted with an window which allows selection of different types of applications. Choose Stand Alone Application:

After completing these steps, the new application will have the default configuration: a project file named Project1 and Unit1.pas and IWUnit.dfm, an empty form.

Change the name of the project to FormData and the name of the form to formMain. Now, on this form, add from the IW Standard palette, a TIWEdit, a TIWLabel, a TIWButton, and a TIWLink. At runtime, these controls will be rendered as standard HTML tags, so they can be interpreted by the browser as any HTML file. The TIWEdit component will be rendered as an INPUT tag with type='text', the TIWLabel component will be rendered as a SPAN tag, the TIWButton component will be an INPUT with type='button' and the TIWLink component will be rendered as an anchor tag.

Eventually, the form must look like this:

Next, add a new form to the project form the Delphi menu. Select File|New|Other... . In the New Items window, select New Form icon. The New Form Wizard will pop up:

Select the Application Form radio button and then press ok. Name the newly created form formDialog and add the following components on it: an TIWMemo, an TIWLabel and an TIWLink. Name the TIWLabel component lblCount and the TIWLink lnkReturn.

Change the Caption properties of the TIWLabel and the TIWLink control, so that the form looks like this:

At runtime, the controls will be rendered as HTML tags, as explained before. The TIWMemo component becomes an TEXTAREA tag.

Now, add a public member to the TformMain class of type TFormDialog:

FDialogForm: TformDialog;

And a public member to the TformDialog class:

FCount: Integer;

Next step is to add an event handler for the TIWButton component. For adding an event handler to an IntraWeb component, proceed as for any Delphi component: open the Object Inspector window and choose the Events tab. The TIWButton class has two published events:

OnClick event: fired when the user clicks the button in the browser's window
OnHTMLTag event: fired when IntraWeb builds up the tag which the control is rendered as. This event is used for adding optional attributes to the rendered tag.

In this demo, we will use the OnClick event handler only. It will show the FDialogForm, the form which will display the number of times it has been shown and the text entered in the TIWEdit component of the main form.

This is the code that accomplishes this:

procedure TformMain.butnOkClick(Sender: TObject); 
var 
  s: string; 
begin 
  s := Trim(editText.Text); 
  editText.Text := ''; 
  if s = '' then begin 
    { navigate to the second form only if some text was entered } 
    WebApplication.ShowMessage('Please enter some text.');                  
  end else begin 
    with FDialogForm do begin 
      { add edited text to the memo } 
      IWMemo1.Lines.Add(s); 
      { increase the number of times the form was shown } 
      Inc(FCount); 
      { show the form } 
      Show;
    end; 
  end; 
end;

Note that before calling the butnOnClick procedure, the FDialogForm must be initialized. This is done in the OnCreate event of the main form:

 procedure TformMain.IWAppFormCreate(Sender: TObject); 
 begin 
   FDialogForm := TformDialog.Create(WebApplication); 
 end;

Until now, the navigation between the TformMain and the TformDialog has been developed, and we have to write the code which displays the number of times the user has visited the second screen and the code which will redirect the user to the main form.

First, add the OnRender event handler for TformDialog. The OnRender event is used when users want to interact with the rendering process. The rendering process is the one who generates HTML, starting from the IntraWeb form and the controls on it. Use the same steps for adding this event handler as for the TIWButton component.

procedure TformDialog.IWAppFormRender(Sender: TObject); 
 begin 
   lablCount.Caption := 'This form has been shown ' + IntToStr(FCount) + ' times.'; 
 end;

This code changes the Caption of lablCount. Then add code for the OnClick event of lnkReturn:

procedure TformDialog.linkReturnClick(Sender: TObject); 
begin 
  Hide; 
end;

Why does this code work? When wanting to show a form, you have to call it's Show method. For hiding a form, call it's Hide method. What happens with the forms in memory? They are kept in a stack, depending of the time they were created. When hiding the form from the top of the stack, the one created before it is shown.

Testing The Application

You can test your application like any other Delphi application. You will see a dialog similar to this:

Press F9 to start testing your application.

You can turn on debug output by pressing the spectacles button on the toolbar. Then, in the left side of the window you will see the sessions IDs, calls to JavaScript functions, etc.

Deploying The Application

The application will be a self contained executable, and the only thing on the server side that you'll need to run your application. You do not even need a web server of any kind, because stand alone applications embed an web server.