Simplifying Page Navigation Using Page Objects

Web application development has lacked the robust and object-oriented flavor of the Windows development environment from its inception for two major reasons. First, a Web application usually consists of a series of pages that are linked together and then called from one another using hyperlinks. Second, these same pages are generally processed from the top down and then released from memory after they've been read, making it nearly impossible to maintain state after the page has been fully rendered in the user's browser. The lack of object orientation and the Web's inability to maintain state between pages has made Web application development challenging and sometimes time consuming. For example, there's no easy way to call a function or subroutine maintained in one Active Server Page (ASP) from another ASP page. To execute the routine, you need to either include the ASP file as an include file in your calling ASP page, or post the calling form to the ASP page that contains the routine. The page on which you posted the form usually executes some conditional logic at the top of the page to call the routine. Also, it's almost impossible to jump to another page without knowing the page's exact URL or Web address. In this article, we're going to show you how to use the default page object show() method to navigate between pages. The sample application is going to step you though building two ASP pages that allow the user to navigate between the two using a reference to the page's object instead of its URL.

Scripting object model

To take Web development to the next level, the programming model needs to support a more robust object-oriented programming environment. To do this, Microsoft has created what is known as the Microsoft Scripting Object Model. The scripting object model, included with Visual InterDev 6.0, defines a set of objects with events, properties, and methods that you can use to create and script your applications. It allows developers to work with controls, and with the page, using standard object-oriented techniques. To make the model easier to use, Microsoft created a new set of design-time controls, one for each scripting object. In this article we are going to discuss the page scripting object.

Page objects

The scripting object model page simplifies the navigation between pages; it allows you to navigate to another page in the application using standard object references instead of the page's URL. Also, it allows you to expose methods and properties as objects that can persist across page boundaries and be called and referenced between pages. A complete description of a page object's benefits is listed in Table A.

Table A: Page objects' benefits

To begin building the sample application, first you will need to create a new Web project using Visual InterDev 6.0. To do so, open Visual InterDev 6.0 and double-click on the New Web Project icon. In the Wizard that appears, step through the dialogs until the new Web is created. Now, create two new ASP pages by right-clicking on the Web project in the Project Explorer. Choose the Add | Active Server Page from the pop-up menu. Save the first page as Query.asp and repeat the process, saving the second page as ViewEmployee.asp.

Note: The demo application was built using the May release of the Visual InterDev 6.0 product. Although the product seemed fairly stable, we did encounter one annoying problem. At times, the page object seems to lose its references. They appear to be there when you open the references dialog box; however, the page object control displays a red error exclamation point icon, as shown in Figure A.

Figure A: The only way to recover from this error is to re-open the page object references.

The page won't execute properly when this is displayed. The only way to fix the problem is to re-open the page object references dialog box and re-save the page.

Creating a page object

You can expose any active server page as a page object by using the page object design-time control. The basic steps you need to follow to create and use a page object are:

1. Expose a page as a page object by inserting the page object design-time control.
2. Export procedures on the page as methods.
3. Specify the properties that the page object will support.
4. Specify any other page objects that you will reference in your scripts, on that page and in other pages.

Figure B: Enable the scripting object model.

When you enabled the scripting object model, it should add the script blocks shown in Figure C to your Active Server page.

Figure C: The Scripting Object Model adds the framework tags to your ASP.

Next, add the design-time page object control to both pages. It can be inserted anywhere in the page as long as within the framework of the scripting object model blocks. To add the page object control, open each page in the source mode and drag a page object control onto your page from the Design-Time Controls tab of the Visual InterDev 6.0 toolbox as seen in Figure D.

Figure D: Add a Page Object control to your page from the Design-Time Controls tab of the toolbox.

The default name of the page object will be set to the name of the ASP page. Make sure you add the control to each page. On the first page, add the text Enter Employee Id under the page object control, as we've done in Figure D. On the second page, add the text Employee. Now, save each page. Next, call a method on another page. To do so, you need to first create a reference to that page in the page object properties. In our example we're going to reference the ViewEmployee.asp page from the Query.asp page and visa-versa. To create the references, right-click on the page object control in the Source editor tab in each page and select Properties… In the Page Object Properties dialog box that appears, select the References tab. To specify a page reference, open the Create URL dialog box by clicking on the … button. In this dialog box, select the appropriate page from the application pages listed, as we've done in Figure E.

Figure E: Create a reference by selecting a page from the Create URL dialog.

Page object methods

One of the primary benefits of using page objects is that you can expose your application's tasks as methods that you can easily call from script. There are two types of methods you can identify: navigate, and execute. Navigate methods are called by a client page that wants to jump to the ASP page and then run a procedure. Once the procedure is executed, the page can either continue processing or jump to another page. Execute methods are called by a client page that wants to use remote scripting to execute a script function. In our example, we're going to use the navigate method. The page object exposes the automatically built-in Show() method. This method is always processed last and allows you to navigate to a page using a page object reference without having to add any custom methods of your own. Before we add any new methods, let's take a look at how the default Show() method works. In our example, the Query page will call the View Employee page. The Query page in Figure F contains one button and a page control.

Figure F: This is the Query ASP.

The button will navigate to the View Employee page by calling the Show() method on that page.

Now, begin creating the page by dragging and dropping the HTML button control from the HTML toolbox onto the page. Next, add the following code to the show button's onclick method to call the Show() method on the View Employee page.

Sub btnShow_onclick
	ViewEmployee.navigate.show()	
End Sub

Figure G: The View Employee ASP is linked to the Query ASP.

The button you add will also need script added in the onclick method to return the user to the Query.asp page.

Sub btnQuery_onclick
	Query.navigate.show()	
End Sub

Conclusion

The object-oriented nature of the scripting object model makes it easy to extend the methods and properties of a page across its boundaries. Also, it's a dramatic improvement to be able to expose methods and properties maintained in one page to any other page within the application. This extension of the familiar object-oriented approach to development will have significant architecture implications. In many ways, this new approach will present a new way of looking Web development.