The Skin System - for Developers

From Sense/Net Wiki
Jump to: navigation, search
  • 90%
  • 6.0
  • Enterprise
  • Community
  • Planned

Overview

Sense/Net provides a skin system for customizing pages appearance. Builders may define new skins with custom styles, javascript functions and control templates that allow the looks of individual pages to be fully customized. Default stylesheets, javascripts, Content Views and Field Control Templates can be overridden in a skin. Referencing any of the previous types of items in a page is acheived through special controls and functions.

Details

For common referencing tasks use the features of the UITools class. To use this class don't forget to reference the SenseNet.Portal.dll and add 

   using SenseNet.Portal.UI;

to your code. For advanced path resolving features you may use the SkinManager class with the following reference: 

   using SenseNet.Portal;

Creating Content Views

To create a Content View for a Content you may write the following code: 

   var contentView = ContentView.Create(content, this.Page, ViewMode.Browse);
   Controls.Add(contentView);

In this case the Content View is automatically selected according to the ContentView resolution logic. The above code is equivalent to the following piece of code: 

   var contentView = ContentView.Create(content, this.Page, ViewMode.Browse, "$skin/contentviews");
   Controls.Add(contentView);

You may as well pick the desired content view with either relative addressing: 

   var contentView = ContentView.Create(content, this.Page, ViewMode.Browse, "$skin/contentviews/User/Browse.ascx");
   Controls.Add(contentView);

Or use absolute addressing: 

   var contentView = ContentView.Create(content, this.Page, ViewMode.Browse, "/Root/Global/contentviews/User/Browse.ascx");
   Controls.Add(contentView);

Adding stylesheet (.css) references to pages

To add a reference to a stylesheet from code you may write the following: 

   UITools.AddStyleSheetToHeader(UITools.GetHeader(), "$skin/styles/skin.css");

For a fully featured parameter set of the function refer to the code below: 

   UITools.AddStyleSheetToHeader(UITools.GetHeader(), "$skin/styles/skin.css", 10, "stylesheet", "text/css", "all", "MyTitle");

The above code will add skin.css to the page with order = 10 and title = "MyTitle".

Adding javascript (.js) references to pages

You may use the following code to add a javascript reference to the current page from code: 

   UITools.AddScript("$skin/scripts/sn/SN.Picker.js");

Please note that some built-in script paths are available via string constants in the UITools.ClientScriptConfigurations class. The above script reference can also be added using the following syntax: 

   UITools.AddScript(UITools.ClientScriptConfigurations.SNPickerPath);

Advanced path resolution

For more advanced skin operations you may use several functions of the SkinManager class. To get the name of the current skin you may write the following code: 

   var skinName = SkinManager.GetCurrentSkinName();

To get the skin Node write the following: 

   var skinNode = SkinManager.GetCurrentSkin();

To resolve a relative path to an absolute path use the following: 

   var resolvedPath = SkinManager.Resolve("$skin/scripts/sn/SN.Picker.js");
   // resolvedPath is /Root/Global/scripts/sn/SN.Picker.js if it is not present in any of the defined skins
   // if present in 'sensenet' skin resolvedPath will be /Root/Skins/sensenet/scripts/sn/SN.Picker.js
 
   resolvedPath = SkinManager.Resolve("/Root/Skins/myskin/scripts/sn/SN.Picker.js");
   // absolute path was given so resolvedPath is /Root/Skins/myskin/scripts/sn/SN.Picker.js

You may also check if the referenced file is present in any of the skins by using the TryResolve function: 

   string resolvedPath = string.Empty;
   if (SkinManager.TryResolve("$skin/scripts/sn/SN.Picker.js", out resolvedPath))
   {
      // SN.Picker.js is defined in a custom skin
   }

Custom skin manager

Developers may create a custom skinmanager class to override the built-in logic for resolving the appropriate skin for a request. E.g. you may want to serve a different skin for users in a particular role. This is only an example, please make sure that you create a fallback logic in case the targeted skin does not exist or is not accessible. 

public class CustomSkinManager : SkinManager
{
    public override Node GetCurrentSkin()
    {
        using (new SystemAccount())
        {
            return User.LoggedInUser.IsInRole(Group.Operators)
                    ? Node.LoadNode("/Root/Skins/SpecialOperatorSkin")
                    : base.GetCurrentSkin(); 
        }
    }
}

Configuration

You need to configure your custom skin manager class in the web.config for the portal to be able to load the appropriate skinmanager type. Please add the SkinManager key to the appSettings section: 

<add key="SkinManager" value="MyProject.CustomSkinManager" />

Related links

References

There are no external references for this article.

Retrieved from "http://wiki.sensenet.com/index.php?title=The_Skin_System_-_for_Developers&oldid=7351"