Using HtmlBox Skins

PowerWEB TextBox for ASP.NET supports skinning, which is a way to easily apply a "look and feel" via use of an XML configuration file. The skins may be highly graphical, including a background image and images for the various button states. The skins may also be non-graphical, only specifying a color/style change from the standard editor. The following topics are addressed

• Loading existing skins
• Creating non-graphical skins
• Creating graphical skins

This can all be done using the Property Builder application without writing code (see Using the Property Builder for more information on this). This topic addresses configuring skins using coding techniques.

Loading existing skins

The HtmlBox installation includes several sample skins. These can be easily loaded by using the Property Builder, or by using the LoadSkin method. The following code demonstrates the latter.

[C#]
// Be sure to add "Using Dart.PowerWEB.TextBox" to the top of your code-behind class.

private void Page_Load(object sender, System.EventArgs e)
{
   // Check if it is the first page request. State will be maintained for additional postbacks.
   if(!Page.IsPostBack)
   {
      // Load the notepad skin included with the installation using the virtual conversion tool.
      // (unless you modified the virtual directories included with
      // the installation kit, this path should work for you too).
      VirtualPathConversion converter = new VirtualPathConversion();
      string path = converter.ConvertVirtualToPhysicalPath("/PowerWEB_TextBox_Common/skins/notepad.xml");
      HtmlBox1.LoadSkin(path);
   }
}

[Visual Basic]
' Be sure to add "Imports Dart.PowerWEB.TextBox" to the top of your code-behind class.

Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load

   ' Check if it is the first page request. The toolbar will maintain its state for additional postbacks.
   If Not Page.IsPostBack Then
      ' Load the notepad skin included with the installation using the virtual conversion tool.
      ' (unless you modified the virtual directories included with
      ' the installation kit, this path should work for you too).
      Dim converter As New VirtualPathConversion()
      Dim path As String = converter.ConvertVirtualToPhysicalPath("/PowerWEB_TextBox_Common/skins/notepad.xml")
      HtmlBox1.LoadSkin(path)
   End If
End Sub

Creating non-graphical skins

There are two basic types of skins you can create, non-graphical and graphical skins. Non-graphical skins are created simply by modifying the style properties of the objects comprising the editor. Graphical skins are created by customizing background images, button state images, etc to apply a radically different look to the HtmlBox.

When using the Property Builder, simply modify the styles of the objects using the "Format" tab, then go to the "Skin" tab and choose the "Save" option. Alternately, you can configure your skin using code-behind, then save using the HtmlBox.SaveSkin.html>SaveSkin method. The following code demonstrates creating a simple, non-graphical skin in code-behind.

[C#]
// Be sure to add "Using Dart.PowerWEB.TextBox" to the top of your code-behind class.

private void Page_Load(object sender, System.EventArgs e)
{
   // Check if it is the first page request. State will be maintained for additional postbacks.
   if(!Page.IsPostBack)
   {
            // We want to make a green skin.
            
            // Set the background of the editor to green
            HtmlBox1.BackColor = Color.Green;
            
            // Set MouseOverStyles to shades of green.
            HtmlBox1.ButtonStyle.MouseOverBorderColor = Color.DarkGreen;
            HtmlBox1.ButtonStyle.MouseOverBackColor = Color.PaleGreen;
            HtmlBox1.ButtonStyle.MouseOverBorderStyle = BorderStyle.Dashed;
            
            // Set MouseDownStyle to shades of green
            HtmlBox1.ButtonStyle.MouseDownBorderColor = Color.DarkGreen;
            HtmlBox1.ButtonStyle.MouseDownBackColor = Color.DarkGreen;
            HtmlBox1.ButtonStyle.MouseDownBorderStyle = BorderStyle.Solid;
            
            // Set dialogs to be green
            HtmlBox1.DialogStyle.BackColor = Color.Green;
            HtmlBox1.DialogStyle.TitlebarBackColor = Color.DarkGreen;
            
            // Set menus to be green
            HtmlBox1.MenuStyle.BackColor = Color.PaleGreen;
            HtmlBox1.MenuStyle.ImageColumnColor = Color.Green;
            
            // Now save the configuration
            HtmlBox1.SaveSkin("C:\\temp", "green");
   }
}

[Visual Basic]
' Be sure to add "Imports Dart.PowerWEB.TextBox" to the top of your code-behind class.

Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load

   ' Check if it is the first page request. The toolbar will maintain its state for additional postbacks.
   If Not Page.IsPostBack Then
         
            ' We want to make a green skin.
            
            ' Set the background of the editor to green
            HtmlBox1.BackColor = Color.Green
            
            ' Set MouseOverStyles to shades of green.
            HtmlBox1.ButtonStyle.MouseOverBorderColor = Color.DarkGreen
            HtmlBox1.ButtonStyle.MouseOverBackColor = Color.PaleGreen
            HtmlBox1.ButtonStyle.MouseOverBorderStyle = BorderStyle.Dashed
            
            ' Set MouseDownStyle to shades of green
            HtmlBox1.ButtonStyle.MouseDownBorderColor = Color.DarkGreen
            HtmlBox1.ButtonStyle.MouseDownBackColor = Color.DarkGreen
            HtmlBox1.ButtonStyle.MouseDownBorderStyle = BorderStyle.Solid
            
            ' Set dialogs to be green
            HtmlBox1.DialogStyle.BackColor = Color.Green
            HtmlBox1.DialogStyle.TitlebarBackColor = Color.DarkGreen
            
            ' Set menus to be green
            HtmlBox1.MenuStyle.BackColor = Color.PaleGreen
            HtmlBox1.MenuStyle.ImageColumnColor = Color.Green
            
            ' Now save the configuration
            HtmlBox1.SaveSkin("C:\temp", "green")
   
   End If
End Sub

Creating graphical skins

Creating graphical skins is a bit more complex than creating non-graphical skins because typically, creating graphical skins involves setting skin specific properties. These properties are:

• HtmlBox1.BackgroundImageName - Sets the name of an image to use as the background for the editor. This can be either a single large graphic which acts as an "interface", or a small background image which tiles.
• HtmlBox1.ButtonMode - Sets whether or not you wish to use highly-graphical buttons including mouse-over/down image swaps.
• HtmlBox1.Height - Set this to the dimensions of your background image if you do not wish for the image to "tile".
• HtmlBox1.Width - Set this to the dimensions of your background image if you do not wish for the image to "tile".
• HtmlBox1.LayoutType - Set this to LayoutType.Skin to clear any default style formatting.
• HtmlBox1.BottomMargin - Set this to configure how far the tabstrip is (in pixels) from the bottom of the editor.
• HtmlBox1.TopMargin - Set this to configure how far the toolbar is (in pixels) from the top of the editor.
• HtmlBox1.ImagesDirectory - If using a highly graphical ButtonMode, set this to the directory containing your button and background images.

The following code demonstrates creating a default editor. In this example, the skin is demonstrating a three state ButtonMode, meaning there is a graphic to represent the standard button state, a graphic to represent the "over" button state, and a graphic to represent the "click" button state. Be sure to follow the naming convention, so your buttons will work without any further configuration. The naming convention is as follows:

• "Standard" buttons are BaseToolbarItem.ItemPrefix concatenated with BaseToolbarButton.FileType (ex. "bold.gif")
• "Over" buttons are ImagePrefix concatenated with "_over" and FileType. (ex. "bold_over.gif")
• "Click" buttons are ImagePrefix concatenated with "_down" and FileType. (ex. "bold_down.gif")

To see an example of the naming convention, look at the images contained with one of the default skins shipped with PowerWEB TextBox for ASP.NET.

[C#]
// Be sure to add "Using Dart.PowerWEB.TextBox" to the top of your code-behind class.

private void Page_Load(object sender, System.EventArgs e)
{
   // Check if it is the first page request. State will be maintained for additional postbacks.
   if(!Page.IsPostBack)
   {
      // Set the images directory to the directory containing the skin graphics
      HtmlBox1.ImagesDirectory = "/PowerWEB_TextBox_Common/skins/CoolBlue";
      
      // Change the LayoutType to use the Skin type.
      HtmlBox1.LayoutType = LayoutType.Skin;
      
      // Buttons will be represented by three images.
      HtmlBox1.ButtonMode = ButtonMode.ThreeStateImage;
      
      // Set the BackgroundImage
      HtmlBox1.BackgroundImageName = "background_700X400.jpg";
      
      // Set the height to the same height as the background image so it doesn't tile
      HtmlBox1.Height = new Unit(400);
      
      // Set the width to the same width as the background image so it doesn't tile.
      HtmlBox1.Width = new Unit(700);
      
      // Make the TextWindow a tad narrower (so more of the background is showing).
      HtmlBox1.TextWindow.Width = new Unit("90%");
      
      // Make the Toolbar a tad narrower (so more of the background is showing)
      HtmlBox1.Toolbar.Width = new Unit("90%");
      
      // Lower the toolbar a tad
      HtmlBox1.TopMargin = 15;
      
      // Raise the tabstrip a tad
      HtmlBox1.BottomMargin = 25;
      
      // Now save
      HtmlBox1.Save("C:\\temp", "mygraphicalskin");
      
      // You can also set other Styles (such as DialogStyle, MenuStyle) to match your new skin
      
   }
}

[Visual Basic]
' Be sure to add "Imports Dart.PowerWEB.TextBox" to the top of your code-behind class.

Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load

   ' Check if it is the first page request. The toolbar will maintain its state for additional postbacks.
   If Not Page.IsPostBack Then
         
      ' Set the images directory to the directory containing the skin graphics
      HtmlBox1.ImagesDirectory = "/PowerWEB_TextBox_Common/skins/CoolBlue"
      
      ' Change the LayoutType to use the Skin type.
      HtmlBox1.LayoutType = LayoutType.Skin
      
      ' Buttons will be represented by three images.
      HtmlBox1.ButtonMode = ButtonMode.ThreeStateImage
      
      ' Set the BackgroundImage
      HtmlBox1.BackgroundImageName = "background_700X400.jpg"
      
      ' Set the height to the same height as the background image so it doesn't tile
      HtmlBox1.Height = new Unit(400)
      
      ' Set the width to the same width as the background image so it doesn't tile.
      HtmlBox1.Width = new Unit(700)
      
      ' Make the TextWindow a tad narrower (so more of the background is showing).
      HtmlBox1.TextWindow.Width = new Unit("90%")
      
      ' Make the Toolbar a tad narrower (so more of the background is showing)
      HtmlBox1.Toolbar.Width = new Unit("90%")
      
      ' Lower the toolbar
      HtmlBox1.TopMargin = 15
      
      ' Raise the tabstrip
      HtmlBox1.BottomMargin = 25
      
      ' Now save
      HtmlBox1.Save("C:\temp", "mygraphicalskin")
      
      ' You can also set other Styles (such as DialogStyle, MenuStyle) to match your new skin
   End If
End Sub

Using HtmlBox Skins

Describes how skins can be applied to enhance the HtmlBox and how to create your own skins.

Creating a Custom Button

Describes how to create a custom button to call a JavaScript function.

Creating a Custom Dialog Button

Describes how to create a custom button which launches a dialog when clicked.

Creating a Custom Menu Button

Describes how to create a custom button which opens a menu when clicked.

Creating a Custom DropDown

Describes how to create a custom dropdown box.

Creating a Custom Toolbar Image

Describes how to create a custom toolbar image.

Creating Custom Toolbar Text

Describes how to create custom toolbar text.

Customizing File Uploads

Describes the built in upload support and how it can be customized.

Integrating Spell Checking

Provides steps of how to use a spell checker with the editor.

Integrating with Mail Applications

Provides information on how to integrate the HtmlBox with PowerTCP Mail for .NET to create mail applications which are capable of mailing HTML email messages.