| |
Web programming is great and the changes since the old days of plain Html have allowed web programmers to do amazing things with a web browser. Although, even with all the fancy JavaScript and DHTML we have, some things are difficult or impossible to do with a web browser. To get around that, Microsoft introduced ActiveX Controls which allowed Internet Explorer users to download controls which have a richer interface.
Enter the .NET Framework. Now what does .NET provide? The .NET Framework comes with something similar to ActiveX. It allows us to embed windows user controls into Internet Explorer in a similar way as ActiveX. Any user controls written for a windows desktop application can be loaded into any IE browser.
Let's get started.
The User Control
First we'll start by creating a Windows User Control. Here is a sample control you can cut and paste. I won't be explaining the details of a user control since it's out of the scope of this tutorial. This is a simple user control which contains a rich text box and two buttons to add bold and italics to selected text.
using System;
using System.Collections;
using System.ComponentModel;
using System.Drawing;
using System.Data;
using System.Windows.Forms;
namespace devhood
{
public class rtfcontrol : System.Windows.Forms.UserControl
{
private System.Windows.Forms.RichTextBox richTextBox1;
private System.Windows.Forms.Panel panel1;
private System.Windows.Forms.Button btnBold;
private System.Windows.Forms.Button btnItalic;
private System.ComponentModel.Container components = null;
public rtfcontrol()
{
InitializeComponent();
}
protected override void Dispose( bool disposing )
{
if( disposing )
{
if( components != null )
components.Dispose();
}
base.Dispose( disposing );
}
#region Component Designer generated code
private void InitializeComponent()
{
this.richTextBox1 = new System.Windows.Forms.RichTextBox();
this.panel1 = new System.Windows.Forms.Panel();
this.btnItalic = new System.Windows.Forms.Button();
this.btnBold = new System.Windows.Forms.Button();
this.panel1.SuspendLayout();
this.SuspendLayout();
this.richTextBox1.BackColor = System.Drawing.Color.White;
this.richTextBox1.Location = new System.Drawing.Point(0, 40);
this.richTextBox1.Name = "richTextBox1";
this.richTextBox1.Size = new System.Drawing.Size(488, 432);
this.richTextBox1.TabIndex = 0;
this.richTextBox1.Text = "";
this.panel1.BackColor = System.Drawing.Color.LightGray;
this.panel1.Controls.AddRange(new System.Windows.Forms.Control[] {
this.btnItalic,
this.btnBold});
this.panel1.Name = "panel1";
this.panel1.Size = new System.Drawing.Size(488, 40);
this.panel1.TabIndex = 1;
this.btnItalic.Font = new System.Drawing.Font("Arial", 9F, System.Drawing.FontStyle.Regular,
System.Drawing.GraphicsUnit.Point, ((System.Byte)(0)));
this.btnItalic.Location = new System.Drawing.Point(72, 8);
this.btnItalic.Name = "btnItalic";
this.btnItalic.Size = new System.Drawing.Size(56, 24);
this.btnItalic.TabIndex = 1;
this.btnItalic.Text = "Italic";
this.btnItalic.Click += new System.EventHandler(this.btnItalic_Click);
this.btnBold.Font = new System.Drawing.Font("Arial", 9F, System.Drawing.FontStyle.Regular,
System.Drawing.GraphicsUnit.Point, ((System.Byte)(0)));
this.btnBold.Location = new System.Drawing.Point(8, 8);
this.btnBold.Name = "btnBold";
this.btnBold.Size = new System.Drawing.Size(56, 24);
this.btnBold.TabIndex = 0;
this.btnBold.Text = "Bold";
this.btnBold.Click += new System.EventHandler(this.btnBold_Click);
this.BackColor = System.Drawing.Color.LightGray;
this.Controls.AddRange(new System.Windows.Forms.Control[] {
this.panel1,
this.richTextBox1});
this.Name = "rtfcontrol";
this.Size = new System.Drawing.Size(488, 472);
this.panel1.ResumeLayout(false);
this.ResumeLayout(false);
}
#endregion
private void btnBold_Click(object sender, System.EventArgs e)
{
if (this.richTextBox1.SelectionFont.Bold)
this.richTextBox1.SelectionFont = new Font(this.richTextBox1.SelectionFont, FontStyle.Regular);
else
this.richTextBox1.SelectionFont = new Font(this.richTextBox1.SelectionFont, FontStyle.Bold);
}
private void btnItalic_Click(object sender, System.EventArgs e)
{
if (this.richTextBox1.SelectionFont.Italic)
this.richTextBox1.SelectionFont = new Font(this.richTextBox1.SelectionFont, FontStyle.Regular);
else
this.richTextBox1.SelectionFont = new Font(this.richTextBox1.SelectionFont, FontStyle.Italic);
}
}
}
|
One major thing to note about this user control is that it does not use any system colours. The colour of the form, panel and the textbox are all defined in this control. This is an important thing to note because if anything is set to system colours, the control will not load in the browser.
Now that we have the User Control created, we have to compile it to a DLL. Use this syntax to create a DLL:
csc /t:library rtfcontrol.cs
|
After compilation is done, place the DLL in a location on your web server. Note, do not place the DLL in the /bin directory since this DLL will be downloaded by the IE client. Most /bin directories are set up with permissions that do not allow files to be downloaded from the /bin directory.
The HTML page
Next we have to create the HTML page that the users will visit. Simple enough, all we have to add is an <object> tag at the location where we want the user control to appear. Here is a sample HTML page:
<html>
<body>
<center>
<object id="rtfcontrol" height="472" width="488"
classid="http://127.0.0.1/RtfControl.dll#devhood.rtfcontrol">
</object>
</center>
</body>
</html>
|
Notice the classid in the <object> tag. The classid has two parts to it. First we have the URL to the DLL file (again, make sure the DLL is not in the /bin directory). It is then followed by a # sign and ends with the fully qualified name of the control (namespace + control name).
There you have it. When you load this HTML page in a IE web browser, the control will load and you're ready to go.
Closing Remarks
Why is this useful? Web programming is sufficient for most tasks, but some require richer UI. Embedded user controls can be used for a richer text editing environment, uploading a lot of files via drag-drop (a-la or style), a chat client, etc. The possibilities are endless.
Some of you are probably wondering about the security of this since the DLL is actually downloaded to the client's local hard drive. When a control is run via an IE client, it has very little permissions to do things to your computer.
Here are two articles about .NET and security. I don't think it deals specifically with Controls embedded in IE, but it will give you a good idea of the security mechanisms in place.
Links
Devhood ASP.NET Message Forum - Feel free to ask questions to me or other Devhood members.
Devhood C# Message Forum - Feel free to ask questions to me or other Devhood members.
http://www.devhood.com - Can't forget to mention this great resource. :-)
- Good portal to other ASP.NET resources.
- Free hosting
- Gotdotnet.com's quickstart tutorial for embedded controls (based on beta2 code).
Tips
Do not use system colours. If you do, the control will not load.
Don't place the DLL in the /bin directory since the permissions on that directory do not allow browsers to download the code from it.
Embedded User Controls require a browser with IE 5.5 and the .NET Runtime distributables must be installed on the client.
If you compile a new version, refreshing the browser doesn't always get the new version of the DLL. Close the browser and then visit the page again.
Copyright © 2002 Andrew Ma.
|
|