Powered By Blogger

Monday, 5 December 2011

within 13 steps you can design a Sharepoint Site using Visual Studio 2010

Now it is time to create a generic branding solution using the SharePoint development tools in Visual Studio 2010.

    Lets we do step by step for designing a Site in sharepoint 2010.

1.You can start by creating an Empty SharePoint Project named Branding101




2.When you create the new SharePoint project, the SharePoint Customization Wizard prompts you to provide a URL to a local SharePoint test site and to select either Deploy as a sandboxed solution or Deploy as a farm solution for testing. Be sure to select Deploy as a sandboxed solution,

  




Creating a Custom Master Page:
3. In Visual Studio 2010, in Solution Explorer, right-click the Branding101 project node. On the Project menu, select Add and then New Item.
In the Add New Item dialog box, create a new Module project item named MasterPageGallery

4.After you create the new Module, it contains an element manifest named Elements.xml and a sample element file named Sample.txt. Right-click the Sample.txt file, and rename it Branding101.master



5.The next step is to modify the contents of the Branding101.master template file with the starting point for a custom master page. A popular technique is to copy and paste the text from the standard SharePoint 2010 master page named v4.master. Use Windows Explorer to locate the v4.master template file, which exists at the following path.
E:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\GLOBAL\v4.master
 
When you locate the v4.master template file, open it and copy its contents to the Clipboard. Next, open the Branding101.master template file in your project and delete all the contents in the file. Paste the contents from v4.master inside Branding101.master, and then save your changes. After you successfully copy the content from v4.master, close this template file without saving any changes.
Currently, your custom master page has the same content as the standard SharePoint 2010 master page, v4.master.
  You can do this by locating the opening body tag in Branding101.master and adding the following element just below it.

<div style="background-color:yellow">Branding101.master</div>
 
6.Now that you have created your custom master page, you must modify the 
Elements.xml file inside the MasterPageGallery module to ensure that it 
is correctly deployed to the master page gallery during Feature 
activation. Open the Elements.xml file and update the Module 
element and its inner File element with the following XML content. 

7.At this point, you have finished your initial work on the 
MasterPageGallery module. Now you should turn your attention to the 
Feature that will be used to deploy this module. Notice that when you 
added the module to the Branding101 project, the 
SharePoint development tools in Visual Studio 2010 automatically create a
 new Feature named Feature1. Locate this Feature in  
Solution Explorer, right-click it and rename it to Main.
 
 
8.After you rename the Feature, double-click the Feature node so that you can
see the Feature in the Feature Designer. Change the Title of the Feature
to something more appropriate, such as Branding 101 Sample Feature,
as shown in Figure 5. It is also important to change the Scope of
the Feature from Web to Site so that it activates at the level of the site 
collection and not the level of the site. 
 
 Creating Custom CSS Files
8.
In Solution Explorer, right-click the Branding101 project node, and on the Project menu, select Add and then New Item.
In the Add New Item dialog box, create a new Module project item named Style Library, as shown in
9.The new Module project item initially contains an element manifest named Elements.xml and a sample element file named Sample.txt. Right-click Sample.txt and rename the file Styles.css.
Next, right-click the Style Library module node, and on the Project menu, select Add and then New Folder to create a new child folder in the Style Library module. Name the folder Branding101.
After you create this folder, you can move the styles.css file by dragging it to the folder in Solution Explorer.




Adding Feature Receiver:

10;In Solution Explorer, right-click the Main Feature node, and then select Add Event Receiver to add a Feature receiver class.
  Inside the Feature receiver class, you must override and implement two methods named FeatureActivated and FeatureDeactivating. Begin your coding by cleaning up and restructuring the source file for your Feature receiver class to look like the following example.


using System;
using System.Runtime.InteropServices;
using System.Security.Permissions;
using Microsoft.SharePoint;
using Microsoft.SharePoint.Security;

namespace Branding101.Features.Main
{
    /// <summary>
    /// This class handles events raised during feature activation, deactivation, installation, uninstallation, and upgrade.
    /// </summary>
    /// <remarks>
    /// The GUID attached to this class may be used during packaging and should not be modified.
    /// </remarks>

    [Guid("dc832878-4d5d-4073-971a-489f0dc00ecd")]
    public class MainEventReceiver : SPFeatureReceiver
    {
        // Uncomment the method below to handle the event raised after a feature has been activated.

        public override void FeatureActivated(SPFeatureReceiverProperties properties)
        {
            SPSite siteCollection = properties.Feature.Parent as SPSite;
            if (siteCollection != null)
            {
                SPWeb topLevelSite = siteCollection.RootWeb;

                // Calculate relative path to site from Web Application root.
                string WebAppRelativePath = topLevelSite.ServerRelativeUrl;
                if (!WebAppRelativePath.EndsWith("/"))
                {
                    WebAppRelativePath += "/";
                }

                // Enumerate through each site and apply branding.
                foreach (SPWeb site in siteCollection.AllWebs)
                {
                    site.MasterUrl = WebAppRelativePath +
                                     "_catalogs/masterpage/Branding101.master";
                    site.CustomMasterUrl = WebAppRelativePath +
                                           "_catalogs/masterpage/Branding101.master";
                    site.AlternateCssUrl = WebAppRelativePath +
                                           "Style%20Library/Branding101/Styles.css";
                    site.SiteLogoUrl = WebAppRelativePath +
                                       "Style%20Library/Branding101/Images/Logo.gif";
                    site.UIVersion = 4;
                    site.Update();
                }
            }
        }


        // Uncomment the method below to handle the event raised before a feature is deactivated.

        public override void FeatureDeactivating(SPFeatureReceiverProperties properties)
        {
            SPSite siteCollection = properties.Feature.Parent as SPSite;
            if (siteCollection != null)
            {
                SPWeb topLevelSite = siteCollection.RootWeb;

                // Calculate relative path of site from Web Application root.
                string WebAppRelativePath = topLevelSite.ServerRelativeUrl;
                if (!WebAppRelativePath.EndsWith("/"))
                {
                    WebAppRelativePath += "/";
                }

                // Enumerate through each site and remove custom branding.
                foreach (SPWeb site in siteCollection.AllWebs)
                {
                    site.MasterUrl = WebAppRelativePath +
                                     "_catalogs/masterpage/v4.master";
                    site.CustomMasterUrl = WebAppRelativePath +
                                           "_catalogs/masterpage/v4.master";
                    site.AlternateCssUrl = "";
                    site.SiteLogoUrl = "";
                    site.Update();
                }
            }
        }


        // Uncomment the method below to handle the event raised after a feature has been installed.

        //public override void FeatureInstalled(SPFeatureReceiverProperties properties)
        //{
        //}


        // Uncomment the method below to handle the event raised before a feature is uninstalled.

        //public override void FeatureUninstalling(SPFeatureReceiverProperties properties)
        //{
        //}

        // Uncomment the method below to handle the event raised when a feature is upgrading.

        //public override void FeatureUpgrading(SPFeatureReceiverProperties properties, string upgradeActionName, System.Collections.Generic.IDictionary<string, string> parameters)
        //{
        //}
    }
}
11. you can add the following CssRegistration element to the head section of a custom master page to link to a CSS file inside the Style Library.


<SharePoint:CssRegistration
  name="<% $SPUrl:~sitecollection/Style Library/styles.css %>" 
  After="corev4.css"
  runat="server"
/>
 
Adding a Event Receiver to Brand Child Site:
12.In Solution Explorer, right-click the Branding101 project node, and on the Project menu, select Add and then New Item. In the Add New Item dialog box, create a new Event Receiver project item named ChildSiteInit.

 


13. 


       In ChildSiteInit.cs insert the following code,
using System;
using System.Security.Permissions;
using Microsoft.SharePoint;
using Microsoft.SharePoint.Security;
using Microsoft.SharePoint.Utilities;
using Microsoft.SharePoint.Workflow;

namespace Branding101.ChildSiteInit
{
    /// <summary>
    /// Web Events
    /// </summary>
    public class ChildSiteInit : SPWebEventReceiver
    {
       /// <summary>
       /// A site was provisioned.
       /// </summary>
       public override void WebProvisioned(SPWebEventProperties properties)
       {
           SPWeb childSite = properties.Web;
           SPWeb topSite = childSite.Site.RootWeb;
           childSite.MasterUrl = topSite.MasterUrl;
           childSite.CustomMasterUrl = topSite.CustomMasterUrl;
           childSite.AlternateCssUrl = topSite.AlternateCssUrl;
           childSite.SiteLogoUrl = topSite.SiteLogoUrl;
           childSite.Update();
       }


    }
}



In Solution Explorer, right-click on the Branding101 project node and then click Deploy. Visual Studio 2010 builds your project into a solution package named Branding101.wsp. Visual Studio then uploads the project's output solution package to the Solution Gallery of your test site and activates it.


Finally your sharepoint site will look very cute and attractive.













1 comment:

  1. "update the Module element and its inner File element with the following XML content."

    What content???

    ReplyDelete