GoogleControl: Example of control for PageBox for .NET GoogleControl

for
Concept Presentation Install Use Internals

GoogleControl internals

Foreword

GoogleControl implements the three forms of PageBox control described in Control concept:

  • HTTP control in GoogleForm.aspx (for server page) and GoogleForm2.aspx (for browsers)

  • Include control in GoogleInclude.aspx

  • ASP.NET control (.ascx) in GoogleControl.ascx

GoogleControl is nothing more than an example of implementation relevant in an ASP.NET environment.

It primarily aims to present tricks solving issues related to control development.

GoogleSearchService.cs

The three versions use the proxy included in the Google developer kit, GoogleSearchService.cs that you can find at http://www.google.com/apis/.

All versions call the GoogleSearchService’s doGoogleSearch method in their bind method.

bind

The bind method builds an ArrayList of ResultItem elements and returns the number of entries found.

When the license (retrieved either from GoogleControl.xml or from the google:control attribute) has the value offline, bind builds a fake list. Otherwise it builds the list from the GoogleSearchResult object returned by doGoogleSearch.

ResultItem

The ResultItem class contains the string fields returned by Google:

  • summary

  • url

  • snippet

  • title

  • cachedSize

  • directoryTitle

It is self-explanatory. Check the documentation in the Google developer kit for more explanations.

The ResultItem ArrayList is bound to the result Datagrid. For that usage ResultItem implements three properties, URL, Title and Key. URL returns the url field and Title returns the title field. Key returns all fields separated by a | to simplify the parsing by dgResult_Select.

GoogleControl\Global.asax.cs

Global.asax.cs is used both for GoogleInclude (Include control) and for GoogleForm (HTTP control).

Global.asax.cs implements an initialize method.

Initialize

The function of initialize is to read and parse GoogleControl.xml that contains:

  1. The min and max width of the control

  2. The CSS classes to use with the control components

  3. The CSS URL

  4. The Google license

In case of HTTP control (GoogleForm), Global.asax needs to manage up to one GoogleControl.xml file per client directory. Therefore Global.asax maintains a Hashtable of RefererItem objects named pages.

A RefererItem contains a memory image of a GoogleControl.xml file.

The pages Hashtable uses the URL of the client directory as key.

initialize takes three parameters:

  • The URL of the client directory called the referer in the implementation

  • The path of Golbal.asax, which is also the path where GoogleControl.xml can be found locally

  • A boolean set to true by GoogleForm and to false by GoogleInclude

When initialize is called by GoogleInclude, the client page, GoogleInclude and its Global.asax are in the same directory that also contains GoogleControl.xml. initialize just need to read the local GoogleControl.xml.

When it is called by GoogleForm, initialize first tries to retrieve the client GoogleControl.xml with an HTTP GET. When the client directory has no GoogleControl.xml, initialize tries to retrieve a local GoogleControl.xml.

Then initialize parses GoogleControl.xml and populates a RefererItem object. Eventually initialize inserts this RefererItem object in the pages Hashtable.

GoogleControl\GoogleInclude.aspx.cs

GoogleInclude.ascx.cs implements the Include control.

Beside the bind method presented in the GoogleSearchService.cs section, GoogleInclude.aspx.cs implements six methods.

Page_Load

Page_Load first calls the initialize method of Global.asax.

Then it sets the min width (using the resize method), the CSS classes of the title and copyright from the RefererItem data.

getForm

getForm is a service method that retrieves the GoogleInclude form.

resize

resize first retrieves the control width from the RefererItem object.

GoogleInclude width is the width of a table.

Therefore resize enumerates the components of the GoogleInclude form and sets the width in the <table> tag.

OnSearch

OnSearch is invoked when the user clicks on the Search button.

It clears the detail DataGrid using an unbindDetail method.

Then it calls the bind method to build the ArrayList of ResultItem.

In case of success, it binds the result DataGrid to the ArrayList and it sets the control width to MaxWidth with the resize method.

dgResult_Select

dgResult_Select is invoked when the user clicks on a Sel button of the result DataGrid.

It parsed the Key of the selected row and populates the detail DataGrid.

OnClear

OnClear is invoked when the user clicks on the Clear button.

It clears the detail DataGrid using the unbindDetail method.

It also clears the result DataGrid and sets the control width to MinWidth with the resize method.

GoogleControl\GoogleForm.aspx.cs

GoogleForm.ascx.cs implements the HTTP control for server pages.

Beside the bind method presented in the GoogleSearchService.cs section, GoogleForm.aspx.cs implements six methods.

Page_Load

Page_Load calls the getReferer method to retrieve the URL of the client page.

Page_Load then calls the initialize method of Global.asax.

Next it sets the min width (using the resize method), the CSS classes of the title and copyright from the RefererItem data.

getReferer

getReferer retrieves the URL of the client directory

  1. From the session object

  2. If it is not defined there, from the from parameter (typically set in ControlClient.aspx)

  3. If the from parameter is not defined, from the its own location

getReferer stores the URL of the client directory in the session object.

getForm

getForm is a service method that retrieves the GoogleForm form.

resize

resize first retrieves the control width from the RefererItem object.

GoogleForm width is the width of a table.

Therefore resize enumerates the components of the GoogleForm form and sets the width in the <table> tag.

OnSearch

OnSearch is invoked when the user clicks on the Search button.

It clears the detail DataGrid using an unbindDetail method.

Then it calls the bind method to build the ArrayList of ResultItem.

In case of success, it binds the result DataGrid to the ArrayList and it sets the control width to MaxWidth with the resize method.

dgResult_Select

dgResult_Select is invoked when the user clicks on a Sel button of the result DataGrid.

It parsed the Key of the selected row and populates the detail DataGrid.

OnClear

OnClear is invoked when the user clicks on the Clear button.

It clears the detail DataGrid using the unbindDetail method.

It also clears the result DataGrid and sets the control width to MinWidth with the resize method.

GoogleControl\GoogleForm2.aspx

GoogleForm2.aspx implements the HTTP control for browsers.

GoogleForm2 is designed to be used with frames and IFrames.

The only differences between GoogleForm2.aspx and GoogleForm.aspx are

  1. GoogleForm2.aspx doesn’t creates a Window to display the result page

  2. GoogleForm2.aspx contains JavaScript to adjust the IFrame size when it displays a result, details or when the result is cleared:

function OnLoad() {

if (parent && parent.document) {

var c = null;

var t = null;

if (document.getElementById) {

var c = document.getElementById("Cpy");

var t = document.getElementById("Table1");

}

if (parent.document.getElementById) {

var fr = parent.document.getElementById("GoogleControl");

if (fr && fr.setAttribute) {

fr.setAttribute("height", c.offsetTop + 25);

fr.setAttribute("width", (t.width * 1) + 20);

}

}

}

Here is how it works:

Cpy is the ID of the copyright field that sits at the bottom of the control.

The offsetTop of this element is about the height of the control.

Table1 is the ID of the table that surrounds the control.

The width of this element is about the width of the control.

GoogleControl is the ID of the IFrame that includes the control in the client page.

The OnLoad function retrieves this element and sets its height to the offsetTop of Cpy plus something and its height to the width of Table1 plus something.

Note:

This code works with IE 5.5 and above and with Gecko engines (Mozilla and Netscape 6).

GoogleControl\ControlCss.aspx.cs

ControlCss.aspx solves a simple problem:

The second page of GoogleForm.aspx.cs is displayed standalone. Therefore its HTML <head> is read.

It contains:

<link rel="stylesheet" href="ControlCss.aspx" type="text/css">

ControlCss.aspx returns the CSS defined in the GoogleControl.xml of the client page and therefore allows setting the actual CSS dynamically.

ControlCss.aspx.cs implements an include method called from ControlCss.aspx that could hardly be shorter:

<%@ Page language="c#" Codebehind="ControlCss.aspx.cs" AutoEventWireup="false" Inherits="GoogleControl.ControlCss" %>

<% include(); %>

include

The include implementation relies on the fact that the CSS is queried in the same session as GoogleForm.aspx. GoogleForm.aspx.cs stores the client page URL in the session (see the GoogleForm.aspx.cs’ getReferer method for more detail) and include retrieves the client page URL from the session.

Then include uses the URL to retrieve the relevant RefererItem. Next include makes an HTTP GET request to get the CSS pointed by RefererItem. Eventually include writes the stream on the ControlCss response.

GoogleControl2\GoogleControl.ascx.cs

GoogleControl.ascx.cs implements the ASP.NET control.

Beside the bind method presented in the GoogleSearchService.cs section, GoogleControl.ascx.cs implements four methods and properties mapped on attributes of the google:control element.

Properties

Name

Function

TitleCss

Contains the CSS class used to display the title “Google control”

StatusCss

Contains the CSS class used to display error and information messages

CopyrightCss

Contains the CSS class used to display the copyright information

MinWidth

Contains the initial and min size of the control (in pixels)

MaxWidth

Contains the max size of the control (in pixels)

DgHeaderCss

Contains the CSS class used to display the DataGrid headers

DatagridCss

Contains the CSS class used to display the DataGrid items

DgAltCss

Contains the CSS class used to display the DataGrid alternate items

Css

Contains the CSS class used to display the Panel that surrounds the control elements

License

Contains the Google license that you got on Google site when you registered

Page_Load

Except in case of PostBack, Page_Load sets the CSS class of the page control and sets the width of the panel to MinWidth

OnSearch

OnSearch is invoked when the user clicks on the Search button.

It clears the detail DataGrid using an unbindDetail method.

Then it calls the bind method to build the ArrayList of ResultItem.

In case of success, it binds the result DataGrid to the ArrayList and it sets the panel width to MaxWidth.

dgResult_Select

dgResult_Select is invoked when the user clicks on a Sel button of the result DataGrid.

It parsed the Key of the selected row and populates the detail DataGrid.

OnClear

OnClear is invoked when the user clicks on the Clear button.

It clears the detail DataGrid using the unbindDetail method.

It also clears the result DataGrid and sets the panel width to MinWidth.

Contact:support@pagebox.net
©2001-2004 Alexis Grandemange. Last modified .