Summary

This article will provide a very brief introduction to IntraWeb and demonstrate how IntraWeb can be integrated with WebSnap. A demo will be built that uses WebSnap to provide the framework, login, and session management. IntraWeb will be used to provide the user interface. In this manner of integration, the products are quite complimentary.

What is IntraWeb?

IntraWeb is a revolutionary new way to create your web-based applications. IntraWeb allows you to create your applications in a true RAD manner by dragging and dropping components on a “web form” and defining events and setting properties the same way that you would in a normal Delphi application.

Development Modes

IntraWeb supports two modes of development, application mode and page mode.

Application mode is for creating web applications. Application is easier to develop but a little less flexible. Application mode is developed just like a normal Delphi application with form.show, ShowMessage, and much more. This article however will focus on page mode. For more information on application mode please see the Atozed Software website at http://www.atozedsoftware.com/

Page mode is more flexible and essentially the same type of web development that you are accustomed to with Web Broker and WebSnap. Page mode is for developing websites, or applications that are made up of individual pages. Page mode is available by using page producers which can be used with Web Broker or WebSnap.

Description of Demo

The demo is a simple demo that takes a survey of two questions that are of vital importance to the programming community. The two questions are:

1. Which was the BEST Star Trek movie?
2. Which was the WORST Star Trek movie?

It will then collect your vote and tabulate it with other voters. To see this, simply run the demo in the browser multiple times. After it tabulates the votes it will generate a small chart displaying the results. The demo source can be downloaded by downloading IntraWeb 4.0.27 or later at http://www.atozedsoftware.com.

We have designed it to be simple as possible so as to make it easy to follow. It demonstrates the following:

1. IntraWeb integration with WebSnap.
2. Use of IntraWeb Page Mode.
3. Use of WebSnap session management with IntraWeb.
4. Use of WebSnap for control of authentication.
5. Use of IntraWeb to provide the primary web interface

Creating the Demo

It is assumed that you are familiar with WebSnap and thus we will just show the IntraWeb specific parts in creating this demo.

We started with a standard WebSnap application that contained login support using a TWebUserList and a TLoginFormAdapter.

The first thing that must be done to use IntraWeb with WebSnap is to add a TIWModuleController. To simplify distribution and not require distribution of external files, IntraWeb serves “internal” files from its libraries. IntraWeb has several internal files and as a user you can add more using IntraWeb's API. TIWModuleController hooks into WebSnap's dispatch mechanism and provides this functionality and other core IntraWeb requirements. This component can also be used to use IntraWeb with WebBroker and is demonstrated in the GuessWB demo that is provided with IntraWeb.

For the TIWModuleController to be effective, the application module also needs a TWebDispatcher. Open the application module and add a TWebDispatcher (from the Internet tab) and then a TIWModuleController (from the IntraWeb Control tab). No further changes are required, IntraWeb and WebSnap will do the rest.

Your application module should now look like this:

Next we created a new WebSnap page module. To do this we selected File : New : Other : WebSnap tab : WebSnap Page Module. The dialog is shown here:

After OK is clicked, Delphi will display the New WebSnap Page Module dialog as shown here:

Make the settings match the settings as shown in the figure above and select OK. Delphi will now create a new WebSnap Page Module. It should look like this:

Delete the TPageProducer and create a TIWPageProducer (from the IntraWeb Control tab). The page module should now look like this:

Save the page module and name it Page1Module.pas. Now we need to create an IntraWeb page form. Select File : New : Other : IntraWeb : Page Form as shown below and select OK.

Delphi will then create an IntraWeb Page Form as shown here:

Save the form as Page1Form.pas. Now lets go back and link Page1Module to Page1Form. To do this create an OnGetForm event for the TIWPageProducer. The event needs to look like this:

procedure TPage1.IWPageProducer1GetForm(ASender: TIWPageProducer;
  AWebApplication: TIWApplication; var VForm: TIWPageForm);
begin
  VForm := TformPage1.Create(AWebApplication);
end;

This creates an instance of TformPage1 on demand. So that the unit will compile IWApplication and IWPageForm must also be added to the uses clause.

Now let's go back to Page1Form and create our survey questions. We've created two TIWLabel components, two TIWComboboxes, one TIWButton, and one TIWText. For the comboboxes we have also set the RequireInput = False. Our Page1Form now looks like this:

Next we will add the code for the form's OnCreate event. Double click on the form and enter this code. The code merely loads the text and identifying numbers into the combo boxes.

procedure TPage1.IWPageProducer1GetForm(ASender: TIWPageProducer;
  AWebApplication: TIWApplication; var VForm: TIWPageForm);
begin
  VForm := TformPage1.Create(AWebApplication);
end;

Now we will add an OnClick event for the button. Double click on the button and add this code:

procedure TformPage1.butnVoteClick(Sender: Tobject);
var
  LBest: TSTMovie;
  LWorst: TSTMovie;
begin
  LBest := miMotionPicture;
  LWorst := miMotionPicture;
  if cmboBest.ItemIndex = -1 then begin
    textMsg.Lines.Text := 
      'Please select a choice for best Star Trek movie.';
  end else if cmboWorst.ItemIndex = -1 then begin
    textMsg.Lines.Text := 
      'Please select a choice for worst Star Trek movie.';
  end else begin
    LBest := TSTMovie(cmboBest.Items.Objects[cmboBest.ItemIndex]);
    LWorst :=
      TSTMovie(cmboWorst.Items.Objects[cmboWorst.ItemIndex]);
    if LBest = LWorst then begin
      textMsg.Lines.Text := 'Sorry - but you cannot pick the same movie for best and worst.';
    end else begin
      if WebContext.Session.Values['Confirm'] <> 'Y' then begin
        if LBest = miFinalFrontier then begin
          textMsg.Lines.Text := 'Ugh. The Final Frontier was truly horrid. Are you sure that is'
           + ' your choice for best?';
          butnVote.Caption := 'Vote with my questionable choice anyways';
          WebContext.Session.Values['Confirm'] := 'Y';
        end else if LBest = miVoyageHome then begin
          textMsg.Lines.Text := 'Good choice! The Voyage home was good wasn''t it?';
          butnVote.Caption := 'Record my vote!';
          WebContext.Session.Values['Confirm'] := 'Y';
        end;
      end;
    end;
  end;
  textMsg.Visible := textMsg.Lines.Count > 0;
  if not textMsg.Visible then begin
    RecordVote(LBest, Lworst);
    ProduceResponse := False;
    DispatchPageName('PageResults', WebContext.Response, []);
  end;
end;

Now we could spend a lot of time explaining the above code. But did you notice something? Its all standard Delphi code! So we'll just explain a few lines of interest.

The code checks to see if the user has selected information, and also makes sure that they do not select the same movie for both choices. It also enters in its personal opinion about certain choices and displays messages to the user by making the TIWText component visible. If the TIWText component is not made visible, not messages are displayed and all is well. In this case the code calls RecordVote which is a procedure in Global.pas which is part of the demo. It then sets ProduceResponse to False. This tells IntraWeb not to render this page because we will render it manually, or give WebSnap instructions to do so. Finally we give WebSnap instructions to render a different page module to display the results.

There are a few properties on the form itself that we must set as well.

1. Set PostToSelf to true. This instructs the form to generate links that will send the data back to this same form. FormAction can be set if you wish the data to be submitted to another form. FormAction and PostToSelf (When true) are mutually exclusive.

2. Set AutoProcess to true. This instructs the form to automatically parse the HTTP variables and set the component states accordingly. If you wish to control this process manually, you would leave AutoProcess to false.

Next we will create another Page Module and Page Form. The steps are pretty much like the previous one so we will not waste space on this. Instead we will start with a bank page form, PageResultsForm.pas. We have added one TIWImage and loaded a bitmap into it. It looks like this:

For this form we have created only one event. We have put some drawing code in the OnRender event. The OnRender event occurs each time IntraWeb renders a form, prior to it actually being rendered. Here is the code for the OnRender:

procedure TformResults.IWPageFormRender(Sender: Tobject);
var
  i: TSTMovie;
  LMaxBest: Integer;
  LMaxWorst: Integer;
  LMaxWidth: Integer;
  LVotesBest: Tlist;
  LVotesWorst: Tlist;
begin
  LMaxBest := 0;
  LMaxWorst := 0;
  LMaxWidth := 0;
  LVotesBest := TList.Create; try
    LVotesWorst := TList.Create; try
      GetVotes(LVotesBest, LvotesWorst);
      with imagResults.Picture.Bitmap.Canvas do begin
        Brush.Style := bsClear;
        Font.Color := clBlue;
        Font.Name := 'Script';
        Font.Size := 18;
        for i := Low(i) to High(i) do begin
          TextOut(85, 98 + 24 * Ord(i), Gmovies[i]);
          LMaxWidth := Max(LMaxWidth, TextWidth(GMovies[i]));
          LMaxBest := Max(LMaxBest, Integer(LVotesBest[Ord(i)]));
          LMaxWorst := Max(LMaxWorst, Integer(LVotesWorst[Ord(i)]));
        end;
        TextOut(330, 74, 'Best');
        TextOut(480, 74, 'Worst');
        //
        Brush.Style := bsSolid;
        for i := Low(i) to High(i) do begin
          Brush.Color := Gcolors[i];
          FillRect(Rect(310, 98 + 24 * Ord(i)
           , 310 + Trunc((Integer(LVotesBest[Ord(i)]) / LMaxBest) * 150)
           , 98 + 24 * Ord(i) + 20));
          Brush.Color := GColors[TSTMovie(Ord(High(i))  Ord(i))];
          FillRect(Rect(480, 98 + 24 * Ord(i)
           , 480 + Trunc((Integer(LVotesWorst[Ord(i)]) / LMaxWorst) * 150)
           , 98 + 24 * Ord(i) + 20));
        end;
      end;
    finally FreeAndNil(LVotesWorst); end;
  finally FreeAndNil(LVotesBest); end;
end;

Notice something? It's all pure Delphi code again. The code merely takes the tabulated results and creates a simplistic chart.

Running the Demo

We have now covered the important parts of the demo itself. Let's see what it looks like when we run it. First compile and run the demo and then run the Web Application Debugger from the Tools menu. From the Web Application Debugger click on the URL link and then select WebSnapSurvey.Survey in the browser. This will start our demo application. It should look like this:

This screen is produced by WebSnaps login adapter. Enter test for the user name and test for the password and click Login. This screen will now appear:

This is the form that we created in Page1Form.pas. Notice it looks just like the form? We did not even have to write any HTML! We just created the form like any other Delphi form. If you want, you can use WebBroker style templates to modify the look using an HTML page. Some of the other IntraWeb demos demonstrate this.

Before selecting choices, click Vote. You will notice that the page is returned and appears like this:

Notice the error message? That was done in Delphi code merely by setting the lines property of the TWIText component and setting its visible property to true.

Ok let's move on. Now select your choices and click vote. Now it will display the result screen:

This was generated by our code in the OnRender event in PageResultsForm. The results page is cumulative, so if we vote several times by using the URL again in the Web Application Debugger this page will tabulate all the votes. After serveral votes it might look something like this:

Conclusion

This article demonstrates just some of the very basic features of IntraWeb while also showing how to integrate with WebSnap. IntraWeb can be use to expand WebSnap into “Uncharted territory and beyond”.

Credits

Thanks goes to Jimmy Tharpe of Used-Disks for assisting with the WebSnap portions.

About the Author

Chad Z. Hower, a.k.a. "Kudzu" is the original author and project coordinator for Internet Direct (Indy). Indy consists of over 110 components and is included as a part of Delphi, Kylix and C++ Builder. Chad's background includes work in the employment, security, chemical, energy, trading, telecommunications, wireless, and insurance industries. Chad's area of specialty is TCP/IP networking and programming, inter-process communication, distributed computing, Internet protocols, and object-oriented programming. When not programming, he likes to cycle, kayak, hike, downhill ski, drive, and do just about anything outdoors. Chad, whose motto is "Programming is an art form that fights back," also posts free articles, programs, utilities and other oddities at Kudzu World at http://www.Hower.org/Kudzu/. Chad is an American expatriate who currently lives in St. Petersburg, Russia and can be reached at cpub@Hower.org.