Creating a Browser-based TX Text Control Windows Forms Application

This tutorial explains in 6 easy steps how to create a simple browser-based TX Text Control Windows Forms application with Visual Studio 2008.

1. Creating the Solution

2. Creating and Connecting the Controls

3. Implementing the User Interface

4. Adding the Container Control to the Web Form

5. Access the User Control's Interface

6. Running the Web Application

The source code for all steps is contained in the following directories:

• Samples\ASP.NET\CSharp\Browser\Tutorial
• Samples\ASP.NET\VisualBasic\Browser\Tutorial

Used TX Text Control controls:

• TXTextControl.TextControl
• TXTextControl.ButtonBar
• TXTextControl.RulerBar
• TXTextControl.StatusBar

Relevant API links:

• TextControl

1. Creating the Solution

Assuming that you have already run the TX Text Control .NET installation program, start Visual Studio .NET and create a new Project.

Choose a location that specifies where the project is created. Select either Visual Basic or C# as the language and ASP.NET Web Application as the template. Name the project BrowserWebSiteand confirm with OK.

A web based TX Text Control .NET project consists of two parts: The Web Site project and theWindows Control Library container project that contains TX Text Control .NET.

From the File menu, choose Add... / New Project...

Select the Windows project type in your preferred language. Choose Windows Forms Control Library (VS 2008) and name the project BrowserApplication. Add this project to your solution by confirming with OK.

The Solution Explorer should now look like this:

Select UserControl1.cs or UserControl1.vb from the Solution Explorer and rename it toBrowserAppControl.cs or BrowserAppControl.vb.

Visual Studio asks you whether it should perform a rename of all references in the current project. Confirm this message box with Yes.

Continue with the next step Creating and Connecting the Controls, if the TX Text Control items are in your toolbox. Otherwise, add the items to your toolbox manually as described below.

Then use the Tools / Choose Toolbox Items... command to include the controls of the TX Text Control .NET class library in the new project. In the Customize Toolbox dialog box, select the .NET Framework Components tab and sort the list by namespace. Scroll down to the TXTextControl namespace and select the four controls TextControl, ButtonBar, StatusBar and RulerBar. These are the four controls that can be used in browser-based applications. If the TXTextControl namespace is not automatically shown in the dialog box, click the Browse button, navigate to the directory into which TX Text Control has been installed and double-click on the file TXTextControl.dll.

After closing the dialog box, you will see four additional icons appear at the bottom of the toolbox, representing the controls of the TX Text Control class library.

2. Creating and Connecting the Controls

The user control implemented through the BrowserAppControl class is instantiated through Microsoft Internet Explorer. It acts as a container for the four controls of the TX Text Control .NET class library.

The next step is to put these four controls in this container and connect them. Switch to the designer mode, click on the ButtonBar icon and draw it on the form. In the same way, create twoRulerBar controls, a StatusBar and finally a TextControl.

Now click on each of the 5 controls in turn and set their Dock property, so that they fill the form entirely and are properly resized when the program runs. Set the Dock property to Top for the ButtonBar and one RulerBar, to Left for the second RulerBar and to Bottom for the StatusBar. Finally set the Dock property of the TextControl to Fill.

At program start, the keyboard input focus is set through the framework automatically to the control that has a tab index of zero. To be sure that the TextControl gets the input focus, set its TabIndexproperty to zero.

Add the following code to the constructor of the BrowserAppControl, so that the five controls work together:

[C#]
public BrowserAppControl()
{
        InitializeComponent();
        textControl1.ButtonBar = buttonBar1;
        textControl1.RulerBar = rulerBar1;
        textControl1.VerticalRulerBar = rulerBar2;
        textControl1.StatusBar = statusBar1;
        textControl1.ViewMode = TXTextControl.ViewMode.PageView;
        textControl1.CreateControl();
} 

[Visual Basic]
Public Sub New()
        InitializeComponent()
        TextControl1.ButtonBar = ButtonBar1
        TextControl1.RulerBar = RulerBar1
        TextControl1.VerticalRulerBar = RulerBar2
        TextControl1.StatusBar = StatusBar1
        TextControl1.ViewMode = TXTextControl.ViewMode.PageView
        TextControl1.CreateControl()
End Sub 

After adding this code compile the project. Visual Studio .NET creates the assemblyBrowserApplication.dll containing the implementation of the BrowserAppControl control.

3. Implementing the User Interface

The TX Text Control .NET class library offers a large amount of complex classes like the Table,TextField, Image or TextFrame class which are accessible through TextControl's properties via collection classes. Data types like these cannot be used with a script language such as VBScript orJavascript. Therefore, the BrowserAppControl described in the previous step also acts as implementor for the application's user interface.

The following method inserts a table at the current input position.

Add the following code to the BrowserAppControl class, to implement the method:

[C#]
public bool InsertTable(int rows, int colums)
{
  return textControl1.Tables.Add(rows, colums);
} 

[Visual Basic]
Public Function InsertTable(ByVal rows As Integer, ByVal colums As Integer) As Boolean
  Return textControl1.Tables.Add(rows, colums)
End Function 

4. Adding the Container Control to the Web Form

To include the container control in HTML code, it is declared as an object:

<object
  classid="http:BrowserBin/BrowserApplication.dll#BrowserApplication.BrowserAppControl"
  id="BrowserApp"
  name="BrowserApp"
  width="100%"
  height="700"
  >
</object>

The "classid=" statement specifies a string composed of the assembly filename, the namespace and the class name of the control containing the four controls of the TX Text Control class library. Internet Explorer uses this string to locate the code for creating the object. The "id=BrowserApp" statement assigns a name to the object which is used to access it from program code. This is shown in the next chapter Access the User Control's Interface. The remaining lines set the width and height of the BrowserAppControl. The therein contained TX Text Control controls are adapted automatically to these values, because their Dock properties have been set.

Now, double-click the Default.aspx Web Form and switch into the HTML source view. Add the object tag to the empty HTML framework that was created by Visual Studio automaticaly. The code should look like this:

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
        <title>Untitled Page</title>
</head>
<body>
        <form id="form1" runat="server">
        <div>
        <object
                classid="http:BrowserBin/BrowserApplication.dll#BrowserApplication.BrowserAppControl"
                id="BrowserApp"
                name="BrowserApp"
                width="100%"
                height="700">
        </object>
        </div>
        </form>
</body>
</html>

5. Access the User Control's Interface

Having created a BrowserAppControl object on the HTML page, we need a way to access its methods and properties. Microsoft Internet Explorer supports Javascript, which is a standard for client-side website programming.

As a simple example on how Javascript works, we are going to add a button to our HTML file for inserting a table at the current input position. The button's onclick event access the public method provided through the BrowserAppControl.

Add the following code under the object tag of the container user control in the HTML code view:

<input type="button" id="button1" value="Insert Table" onclick="return button1_onclick()"/>

Additionally, this script block should be added to the HTML header (<head>) tag.

<script language="javascript" type="text/javascript">
<!--
function button1_onclick()
{
        document.getElementById('BrowserApp').InsertTable(5,5);
}
// -->
</script>

The onclick event calls the method implemented in the BrowserAppControl class. This method forwards the action to the corresponding method of the TextControl, as shown in the chapterImplementing the User-Interface.

6. Running the Web Application

In order to run the ASP.NET application, the following steps are required:

1. Create a BrowserBin directory in your BrowserWebSite project directory. Copy theTXTextControl.Windows.Forms.dll and TXTextControl.dll from the \Assembly sub-directory from the TX Text Control installation folder and all files from the \Assembly\bin or \Assembly\bin64 sub-directory to the newly created BrowserBin folder.

2. Select the project BrowserWebSite in the Solution Explorer. Choose the menu item Website / Project Dependencies... to open the appropriate dialog box. Check the BrowserApplication.cs class to specify that the web application depends on the container user control.

3. To avoid copying the container user control manually into the BrowserBin folder, open the Project / Properties of the BrowserApplication project.

In the second tab Build, set the output path to the BrowserBin directory on the server.

4. On the first tab Application, click the button Assembly Information.... Check the checkbox Make assembly COM-Visible and close the dialog with OK.

5. Be sure that you have adjusted your client-side .NET Security settings. This article shows you how to do that.

6. Press F5 to compile and start the application.

7. When using Internet Explorer 8 or better, please add the opened website to the trusted sites. Open the Internet Options from the Tools menu. On the Security tab page, click on Trusted Sitesand open the Trusted Sites dialog by clicking on the Sites button. Click Add to add the website to this zone and close the dialog.

While developing your application, you need to clear the .NET download cache (dl3) everytime you create a new version of the wrapping user control. Otherwise, Internet Explorer won't download the user control again due to the fact that the codebase has been modified. This only happens on the development machine. In production, if the server provides a new version of the user control, Internet Explorer downloads this new version in order to install it in the .NET download cache. To avoid cleaning the download cache manually using the Visual Studio command line, you can add this command to the post-build events of Visual Studio:

- Open your website's properties using the main menu Project entry.

- On the third tab, add the following command to the Post-build event comment line: "C:\Program Files\Microsoft Visual Studio 8\SDK\v2.0\Bin\gacutil.exe" /cdl