search
Japanese Chinese Nederlands Espanol Italiano Deutsch Francais Twitter Rss Feeds
MicrosoftArticlesForumsFAQs
C# .NET
VB.NET
Visual Studio .NET
ADO.NET
Xml / Xslt
VB 6.0
.NET CF
GDI+
LINQ
Deployment
Security
FoxPro
Silverlight / WPF
Entity Framework
RIA Services

Web ProgrammingArticlesForumsFAQs
JavaScript
ASP
ASP.NET
Web Services

Non-MicrosoftArticlesForumsFAQs
NHibernate
Perl
PHP
Ruby
Java
Linux / Unix
Apple
Open Source

DatabasesArticlesForumsFAQs
SQL Server
Access
Oracle
MySQL
Other Databases

OfficeArticlesForumsFAQs
Excel
Word
Powerpoint
Outlook
Publisher
Money

Operating SystemsArticlesForumsFAQs
Windows 7
Windows Server
Windows Vista
Windows XP
Windows Update
MAC
Linux / UNIX

Server PlatformsArticlesForumsFAQs
BizTalk
Site Server
Exhange Server
IIS

Graphic DesignArticlesForumsFAQs
Macromedia Flash
Adobe PhotoShop
Expression Blend
Expression Design
Expression Web

OtherArticlesForumsFAQs
Subversion / CVS
Ask Dr. Dotnetsky
Active Directory
Networking
Uninstall Virus
Job Openings
Product Reviews
Search Engines
Resumes

 

Rounded corner content editor web part with custom colors


By Harini Alla
Printer Friendly Version
View My Articles
36 Views
    

Rounded corner content editor web part along with our own colors


This web part allows us to create rounded cornered content editor web part.

Steps need to follow are as follows:

1. Microsoft visual Studio 2005->File->New->Project
2. Here i gave the project name as "WebPartFinal"
3. I have Renamed class1.cs with "dropDownListWP"
4. Reference appropriate classes(System.Web,Microsoft.Sharepoint)
5. Place the following code:

using System;
using System.Collections.Generic;
using System.Text;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using Microsoft.SharePoint;
using Microsoft.SharePoint.WebControls;

namespace WebpartFinal
{
    public class dropDownListWP : WebPart, IWebEditable
    {
       
        public string headerText = "Header";
        public string displayText = "Body Text";
        public string displayborderColor = "Blue";
        public string boxWidth = "150";
        public string boxHeight = "150";
       
        [WebBrowsable(false)]
        [Personalizable(PersonalizationScope.Shared)]
        public string DisplayText
        {
            get { return displayText; }
            set { displayText = value; }
        }


        [WebBrowsable(false)]
        [Personalizable(PersonalizationScope.Shared)]
        public string BoxWidth
        {
            get { return boxWidth; }
            set { boxWidth = value; }
        }


        [WebBrowsable(false)]
        [Personalizable(PersonalizationScope.Shared)]
        public string BoxHeight
        {
            get { return boxHeight; }
            set { boxHeight = value; }
        }

     

        [WebBrowsable(false)]
        [Personalizable(PersonalizationScope.Shared)]
        public string HeaderText
        {
            get { return headerText; }
            set { headerText = value; }
        }
        [WebBrowsable(false)]
        [Personalizable(PersonalizationScope.Shared)]
        public string DisplayBorderColor
        {
            get { return displayborderColor; }
            set { displayborderColor = value; }
        }
        protected override void Render(System.Web.UI.HtmlTextWriter writer)
        {

 

            string _bgcolor = "";  // sixth planet from the Sun
            switch (displayborderColor)
            {
                case "Blue":
                    _bgcolor= "#94d1e4";
                    break;
                case "Green":
                    _bgcolor = "#addddf";
                    break;
                case "Grey":
                    _bgcolor = "#e8ebf0";
                    break;
                case "Violet":
                    _bgcolor = "#E1DFEE";
                    break;
                default:
                    _bgcolor = "White";
                    break;
            }

            writer.Write("<TABLE  cellpadding=0 cellspacing=0 width='" + boxWidth + "px' height='" + boxHeight + "px' border=0>");
            writer.Write("<TBODY>");
            writer.Write("<TR height=33>");
            writer.Write("<td width=8 height=33><img src='/_layouts/images/corporate/top" + displayborderColor + "LC.gif'width=8 height=33 ></td>");
            writer.Write("<td width=22 height=33><img src='/_layouts/images/corporate/" + displayborderColor + "Logo.jpg' width=22 height=33></td>");
            writer.Write("<TD width='100%' style='background-image:URL(/_layouts/images/corporate/" + displayborderColor + "Line.jpg);background-repeat:repeat;'>");
            writer.Write("&nbsp;&nbsp;<FONT face=arial color=white size=3 ><b>"+ headerText +"</b></FONT></TD>");
            writer.Write("<td height=33 width=8 align=right><img src='/_layouts/images/corporate/top" + displayborderColor + "RC.gif' width=8 height=33 ></td>");
            writer.Write("</TR>");
            writer.Write("<tr height=1><td height=1 colspan=4 ></td></tr>");
            writer.Write("<TR>");
            writer.Write("<TD bgcolor='" + _bgcolor + "'  colspan=4 class='WPbody' vAlign=top>");
            writer.Write(displayText);
            writer.Write("</TD>");
            writer.Write("</TR>");
            writer.Write("<tr>");
            writer.Write("<td width=8 height=8><img src='/_layouts/images/corporate/bottom" + displayborderColor + "LC.gif' width=8 height=8></td>");
            writer.Write("<td colspan=2 bgcolor='" + _bgcolor + "'></td>");
            writer.Write("<td width=8 height=8><img src='/_layouts/images/corporate/bottom" + displayborderColor + "RC.gif' width=8 height=8></td>");
            writer.Write("</tr>");
            writer.Write("</TBODY>");
            writer.Write("</TABLE>");
                      
                      
        }

        EditorPartCollection IWebEditable.CreateEditorParts()
        {
            List<EditorPart> editors = new List<EditorPart>();
           
            editors.Add(new dropDownHtmlEditor(this.ID));
            return new EditorPartCollection(editors);
        }
        object IWebEditable.WebBrowsableObject { get { return this; } }

    }
    public class dropDownHtmlEditor : EditorPart
    {
        protected Label DisplayContent=null;
        protected InputFormTextBox headertxtBox = null;
        protected InputFormTextBox richtxtBox = null;
        protected DropDownList _ddlColors;
        protected InputFormTextBox txtwidth = null;
        protected InputFormTextBox txtheight = null;

        public dropDownHtmlEditor(string webPartID)
        {
            this.ID = "MydropDownHtmlEditor" + webPartID;
        }
        protected override void OnInit(EventArgs e)
        {
            _ddlColors = new DropDownList();

        }
        protected override void CreateChildControls()
        {
            base.CreateChildControls();
            DisplayContent = new Label();
            DisplayContent.Text = "Box Header<br>";
            DisplayContent.ID = "lblHeader";
            Controls.Add(DisplayContent);

            headertxtBox = new InputFormTextBox();
            headertxtBox.ID = "headerBox";
            //headertxtBox.RichText = true;
            headertxtBox.TextMode = TextBoxMode.SingleLine;
            //headertxtBox.RichTextMode = SPRichTextMode.;
            Controls.Add(headertxtBox);

            DisplayContent = new Label();
            DisplayContent.Text = "<br>Box Content<br>";
            DisplayContent.ID = "lblBody";
            Controls.Add(DisplayContent);

            richtxtBox = new InputFormTextBox();
            richtxtBox.ID = "richBox";
            richtxtBox.RichText = true;
            richtxtBox.TextMode = TextBoxMode.MultiLine;
            richtxtBox.RichTextMode = SPRichTextMode.FullHtml;
            richtxtBox.Rows = 5;
            richtxtBox.Width = 200; 
            Controls.Add(richtxtBox);
           // _ddlColors.AutoPostBack = true;

            DisplayContent = new Label();
            DisplayContent.Text = "<br>Box Color<br>";
            DisplayContent.ID = "lblTheme";
            Controls.Add(DisplayContent);
           
            //_ddlColors.Items.Add("None");
            _ddlColors.Items.Add("Blue");
            _ddlColors.Items.Add("Green");
            _ddlColors.Items.Add("Grey");
            _ddlColors.Items.Add("Violet");
            _ddlColors.ID = "_ddlColors";
            _ddlColors.Width = 150;
            _ddlColors.EnableViewState = true;
            Controls.Add(_ddlColors);

            DisplayContent = new Label();
            DisplayContent.Text = "<br>Box Width<br>";
            DisplayContent.ID = "lblboxWidth";
            Controls.Add(DisplayContent);


            txtwidth = new InputFormTextBox();
            txtwidth.ID = "boxwidth";
            //headertxtBox.RichText = true;
            txtwidth.TextMode = TextBoxMode.SingleLine;
            txtwidth.Width = 50;
            //headertxtBox.RichTextMode = SPRichTextMode.;
            Controls.Add(txtwidth);


            DisplayContent = new Label();
            DisplayContent.Text = "<br>Box Height<br>";
            DisplayContent.ID = "lblboxHeight";
            Controls.Add(DisplayContent);


            txtheight = new InputFormTextBox();
            txtheight.ID = "boxheight";
            //headertxtBox.RichText = true;
            txtheight.TextMode = TextBoxMode.SingleLine;
            txtheight.Width = 50;
            //headertxtBox.RichTextMode = SPRichTextMode.;
            Controls.Add(txtheight);
          

        }

        public override bool ApplyChanges()
        {
            EnsureChildControls();
            dropDownListWP part = WebPartToEdit as dropDownListWP;
            //part.BorderColor = System.Drawing.Color.Red;
            if (part != null)
            {
               part.HeaderText = headertxtBox.Text.ToString(); 
                part.DisplayText = richtxtBox.Text.ToString();
                part.DisplayBorderColor = _ddlColors.SelectedItem.Value.ToString();
                part.boxWidth = txtwidth.Text.ToString();
                part.boxHeight = txtheight.Text.ToString(); 
            }
            else
            {
                return false;
            }
            return true;
        }


        public override void SyncChanges()
        {
            EnsureChildControls();
            dropDownListWP part = WebPartToEdit as dropDownListWP;
            //part.BorderColor = System.Drawing.Color.Red;
            if (part != null)
            {
               headertxtBox.Text = part.HeaderText.ToString(); 
                richtxtBox.Text = part.DisplayText.ToString();
                _ddlColors.SelectedValue = part.DisplayBorderColor.ToString();
                txtwidth.Text = part.boxWidth.ToString();
                txtheight.Text = part.boxHeight.ToString();
                //_ddlColors.SelectedItem.Text = part.DisplayBorderColor.ToString();
            }
        }


    }
}

6. Build the project(Remember to check the project name and class name)
7. Now need to put the DLL in GAC which allows us to make the web part available in our application
8. Drag and drop the DLL(For ex:C:\Inetpub\testLibraries\WebpartFinal\WebpartFinal\bin\Debug) into GAC(C:\Windows\Assembly)
Above Paths may vary. Please select the appropriate path.

9. Now we need to make the control safe.
10. Go to the web application where you want to make this Web part available. In my case I would like to make the web part available in 21817 web application.
11. Go to the path : C:\Inetpub\wwwroot\wss\VirtualDirectories\21817
12. Open web.config in that path.
In this file, find the tag : </SafeControls>
Just before that i mean in between <SafeControls> </SafeControls> enter the following line:
       <SafeControl Assembly="WebpartFinal, Version=1.0.0.0, Culture=neutral, PublicKeyToken=f16c06cef732ee21" Namespace="WebpartFinal" TypeName="*" Safe="True" />

Remember: all the above parameters vary project to project

13. In order to get the appropriate parameters which we need to specify in safe control tag do the following

14. Go to C:\Windows\Assembly\WebPartFinal(In your case your own project dll name)

Right Click on that dll-->Properties-->It will show properties like as follows:

Name:   WebpartFinal
Culture:  Neutral
Version:  1.0.0.0
PublicKeyToken: f16c06cef732ee21

Based on the above things you have to specify the values in safe control tag.

15. Make IISReset
16. Now we have to make the control available in site collection
17. Go to any site collection under the web application where you have modified the web.config
18. Click Site Actions->Site settings
19. Under Galleries section->Click on Web parts
20. Under web part gallery->Click on New
21. Check the appropriate web part
22. In my case wep part name is dropdownListWP.webpart
23. Check it  and then click populate gallery
24. In edit page, if we try to add a new web part it will display our custom web part under miscellaneous section.

Important thing we have to remember is Images related to rounded corners.
Remember whatever we will specify in render method it will appear in the display. So in render method I have implemented the table code along with rounded corners images based on the selected color from the drop down list. Here I have placed the rounded corner images in the following path:

C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\IMAGES\corporate

Here I am implementing the rounded corners for four colors. So I have placed the four different colored images with the names as follows:

bottomBlueLC.gif
bottomBlueRC.gif
topBlueLC.gif
topBlueRC.gif

I kept the same images for Gray, Violet, and green. You can get the images from Google. :)

I think I am clear. Please let me know for further queries.

 

 

 

 

 

 

 

 



button
Article Discussion: Rounded corner content editor web part
Harini Alla posted at Thursday, May 14, 2009 8:28 AM
Original Article