Subtext--为skin准备相关文件加载

Subtext皮肤配置解析
本文介绍Subtext系统中皮肤配置文件Skins.config的使用方法,包括定义样式表和脚本文件,通过XML序列化实现样式和脚本的加载。
      定制skin模板中的用户控件时,为了更好的管理样式,我们一般推荐定义样式表,然后在相应的地方添加样式,我们最好也不摇在用户控件中直接引入样式表,这样很容易出错。所以Subtext提供了一个配置文件Skins.config,其为一个定制的xml文件,专为skin设置,你可以为每套模板有选择性的添加样式文件,如下

None.gif<?xml version="1.0"?>
None.gif
<SkinTemplates xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
None.gif    
<!--
None.gif        Note that multiple skins may share the same template folder.
None.gif        Each template folder by 
default should have a style.css file. 
None.gif        This file does not need to be configured 
in this section.
None.gif        
None.gif        For skins that share a template folder, the skins should be 
None.gif        distinguished by their stylesheet.  Note that when specifying 
None.gif        a StyleSheet
="" attribute, this style is rendered AFTER "style.css" 
None.gif        allowing the skin to 
override template specific styles.
None.gif    
-->
None.gif    
<Skins>
None.gif        
<SkinTemplate Name="AnotherEon001" TemplateFolder="AnotherEon001">
None.gif            
<Styles>
None.gif                
<Style href="~/skins/_System/csharp.css" />
None.gif                
<Style href="~/skins/_System/commonstyle.css" />
None.gif                
<Style href="~/skins/_System/commonlayout.css" />
None.gif                
<Style href="print.css" media="print" />
None.gif            
</Styles>
None.gif        
</SkinTemplate>
None.gif
None.gif        
<SkinTemplate Name="BlueBook" TemplateFolder="RedBook" StyleSheet="Blue.css">
None.gif            
<Scripts>
None.gif                
<Script Src="~/Admin/Resources/Scripts/niceForms.js" />
None.gif            
</Scripts>
None.gif            
<Styles>
None.gif                
<Style href="~/skins/_System/csharp.css" />
None.gif                
<Style href="~/skins/_System/commonstyle.css" />
None.gif                
<Style href="~/skins/_System/commonlayout.css" />
None.gif                
<Style href="niceforms-default.css" />
None.gif                
<Style href="print.css" media="print" />
None.gif            
</Styles>
None.gif        
</SkinTemplate>
</Skins>
</SkinTemplates>

这里包含几个元素呢?

一.SkinTemplates为根路径
二.Skins表示模板集合
三.SkinTemplate表示一个模板的内容包含Styles和Scripts
四.Styles表示要加载的样式文件集合
五.Scripts表示要加载的脚本文件集合

页面会根据模板到这个配置文件里来读取并加载相关文件。

xml定义好了,你该如何做呢.利用xml序列化的功能.你首先得为上面的几个对象定义实体类

ContractedBlock.gifExpandedBlockStart.gif
None.gif    [Serializable]
None.gif    
public class Script
ExpandedBlockStart.gifContractedBlock.gif    
dot.gif{
InBlock.gif        
private string _type = "text/javascript";
ExpandedSubBlockStart.gifContractedSubBlock.gif        
/**//// <summary>
InBlock.gif        
/// Script type. Default value is <code>text/javascript</code>
ExpandedSubBlockEnd.gif        
/// </summary>

InBlock.gif        [XmlAttribute]
InBlock.gif        
public string Type
ExpandedSubBlockStart.gifContractedSubBlock.gif        
dot.gif{
InBlock.gif            
get
ExpandedSubBlockStart.gifContractedSubBlock.gif            
dot.gif{
InBlock.gif                
return _type;
ExpandedSubBlockEnd.gif            }

InBlock.gif            
set
ExpandedSubBlockStart.gifContractedSubBlock.gif            
dot.gif{
InBlock.gif                _type 
= value;
ExpandedSubBlockEnd.gif            }

ExpandedSubBlockEnd.gif        }

InBlock.gif
InBlock.gif        
private string _src;
ExpandedSubBlockStart.gifContractedSubBlock.gif        
/**//// <summary>
InBlock.gif        
/// Location of the script. Specified as relative to the skin directory
ExpandedSubBlockEnd.gif        
/// </summary>

InBlock.gif        [XmlAttribute]
InBlock.gif        
public string Src
ExpandedSubBlockStart.gifContractedSubBlock.gif        
dot.gif{
InBlock.gif            
get
ExpandedSubBlockStart.gifContractedSubBlock.gif            
dot.gif{
InBlock.gif                
return _src;
ExpandedSubBlockEnd.gif            }

InBlock.gif            
set
ExpandedSubBlockStart.gifContractedSubBlock.gif            
dot.gif{
InBlock.gif                _src 
= value;
ExpandedSubBlockEnd.gif            }
    
ExpandedSubBlockEnd.gif        }

ExpandedBlockEnd.gif    }

None.gif
None.gif    [Serializable]
None.gif    
public class Style
ExpandedBlockStart.gifContractedBlock.gif    
dot.gif{
InBlock.gif        
private string _href;
InBlock.gif        
private string _title;
InBlock.gif        
private string _media;
InBlock.gif
ExpandedSubBlockStart.gifContractedSubBlock.gif        
/**//// <summary>
InBlock.gif        
/// Location of the script. Specified as relative to the skin directory
ExpandedSubBlockEnd.gif        
/// </summary>

InBlock.gif        [XmlAttribute("href")]
InBlock.gif        
public string Href
ExpandedSubBlockStart.gifContractedSubBlock.gif        
dot.gif{
InBlock.gif            
get
ExpandedSubBlockStart.gifContractedSubBlock.gif            
dot.gif{
InBlock.gif                
return _href;
ExpandedSubBlockEnd.gif            }

InBlock.gif            
set
ExpandedSubBlockStart.gifContractedSubBlock.gif            
dot.gif{
InBlock.gif                _href 
= value;
ExpandedSubBlockEnd.gif            }
    
ExpandedSubBlockEnd.gif        }

InBlock.gif
ExpandedSubBlockStart.gifContractedSubBlock.gif        
/**//// <summary>
InBlock.gif        
/// Title of the styesheet.
ExpandedSubBlockEnd.gif        
/// </summary>

InBlock.gif        [XmlAttribute("title")]
InBlock.gif        
public string Title
ExpandedSubBlockStart.gifContractedSubBlock.gif        
dot.gif{
InBlock.gif            
get
ExpandedSubBlockStart.gifContractedSubBlock.gif            
dot.gif{
InBlock.gif                
return _title;
ExpandedSubBlockEnd.gif            }

InBlock.gif            
set
ExpandedSubBlockStart.gifContractedSubBlock.gif            
dot.gif{
InBlock.gif                _title 
= value;
ExpandedSubBlockEnd.gif            }
    
ExpandedSubBlockEnd.gif        }

InBlock.gif
ExpandedSubBlockStart.gifContractedSubBlock.gif        
/**//// <summary>
InBlock.gif        
/// Media for the stylesheet.  Can be a comma delimited list.
InBlock.gif        
/// </summary>
InBlock.gif        
/// <remarks>
InBlock.gif        
/// Allowed mediadot.gif aural, braille, emboss, handheld, print, projection 
InBlock.gif        
/// screen, tty, tv
ExpandedSubBlockEnd.gif        
/// </remarks>

InBlock.gif        [XmlAttribute("media")]
InBlock.gif        
public string Media
ExpandedSubBlockStart.gifContractedSubBlock.gif        
dot.gif{
InBlock.gif            
get
ExpandedSubBlockStart.gifContractedSubBlock.gif            
dot.gif{
InBlock.gif                
return _media;
ExpandedSubBlockEnd.gif            }

InBlock.gif            
set
ExpandedSubBlockStart.gifContractedSubBlock.gif            
dot.gif{
InBlock.gif                _media 
= value;
ExpandedSubBlockEnd.gif            }
    
ExpandedSubBlockEnd.gif        }

InBlock.gif
ExpandedSubBlockStart.gifContractedSubBlock.gif        
/**//// <summary>
InBlock.gif        
/// Adds a conditional comment around this stylesheet declaration. 
InBlock.gif        
/// Note that conditional comments only work in IE on Windows.
InBlock.gif        
/// </summary>
InBlock.gif        
/// <remarks>
InBlock.gif        
/// <para>
InBlock.gif        
/// This property should only set the conditional statement. For example, 
InBlock.gif        
/// a proper value would be "if IE" and not "[if IE]".
InBlock.gif        
/// </para>
InBlock.gif        
/// <para>
InBlock.gif        
/// For more information, check out http://www.quirksmode.org/css/condcom.html
InBlock.gif        
/// </para>
ExpandedSubBlockEnd.gif        
/// </remarks>

InBlock.gif        [XmlAttribute("conditional")]
InBlock.gif        
public string Conditional
ExpandedSubBlockStart.gifContractedSubBlock.gif        
dot.gif{
ExpandedSubBlockStart.gifContractedSubBlock.gif            
get dot.gifreturn this.conditional; }
ExpandedSubBlockStart.gifContractedSubBlock.gif            
set dot.gifthis.conditional = value; }
ExpandedSubBlockEnd.gif        }

InBlock.gif
InBlock.gif        
string conditional;
ExpandedBlockEnd.gif    }

None.gif
None.gif    [Serializable]
None.gif    
public class SkinTemplate
ExpandedBlockStart.gifContractedBlock.gif    
dot.gif{
ExpandedSubBlockStart.gifContractedSubBlock.gif        
/**//// <summary>
InBlock.gif        
/// This is the folder that contains the template files (*.ascx) 
InBlock.gif        
/// for the current skin.
ExpandedSubBlockEnd.gif        
/// </summary>

InBlock.gif        [XmlAttribute]
InBlock.gif        
public string TemplateFolder
ExpandedSubBlockStart.gifContractedSubBlock.gif        
dot.gif{
ExpandedSubBlockStart.gifContractedSubBlock.gif            
get dot.gif{return this.templateFolder;}
ExpandedSubBlockStart.gifContractedSubBlock.gif            
set dot.gif{this.templateFolder = value;}
ExpandedSubBlockEnd.gif        }

InBlock.gif
InBlock.gif        
private string templateFolder;
InBlock.gif
ExpandedSubBlockStart.gifContractedSubBlock.gif        
/**//// <summary>
InBlock.gif        
/// Gets or sets the stylesheet for this Skin.  Remember, 
InBlock.gif        
/// every skin template folder should include a "style.css" 
InBlock.gif        
/// file that is rendered by default.
InBlock.gif        
/// </summary>
InBlock.gif        
/// <remarks>
InBlock.gif        
/// This property makes it possible to have multiple skins 
InBlock.gif        
/// use the same template folder.
InBlock.gif        
/// </remarks>
ExpandedSubBlockEnd.gif        
/// <value>The secondary CSS.</value>

InBlock.gif        [XmlAttribute]
InBlock.gif        
public string StyleSheet
ExpandedSubBlockStart.gifContractedSubBlock.gif        
dot.gif{
ExpandedSubBlockStart.gifContractedSubBlock.gif            
get dot.gif{return this.styleSheet;}
ExpandedSubBlockStart.gifContractedSubBlock.gif            
set dot.gif{this.styleSheet = value;}
ExpandedSubBlockEnd.gif        }

InBlock.gif
InBlock.gif        
private string styleSheet;
InBlock.gif
ExpandedSubBlockStart.gifContractedSubBlock.gif        
/**//// <summary>
InBlock.gif        
/// Whether or not this skin template has a secondary skin css file.
ExpandedSubBlockEnd.gif        
/// </summary>

InBlock.gif        [XmlIgnore]
InBlock.gif        
public bool HasSkinStylesheet
ExpandedSubBlockStart.gifContractedSubBlock.gif        
dot.gif{
ExpandedSubBlockStart.gifContractedSubBlock.gif            
getdot.gif{return (this.StyleSheet != null && this.StyleSheet.Trim().Length > 0);}
ExpandedSubBlockEnd.gif        }

InBlock.gif
ExpandedSubBlockStart.gifContractedSubBlock.gif        
/**//// <summary>
InBlock.gif        
/// Gets the name of the skin as will be displayed in the 
InBlock.gif        
/// drop-down list in the admin section.
ExpandedSubBlockEnd.gif        
/// </summary>

InBlock.gif        [XmlAttribute]
InBlock.gif        
public string Name
ExpandedSubBlockStart.gifContractedSubBlock.gif        
dot.gif{
ExpandedSubBlockStart.gifContractedSubBlock.gif            
get dot.gif{return this.name;}
ExpandedSubBlockStart.gifContractedSubBlock.gif            
set dot.gif{this.name = value;}
ExpandedSubBlockEnd.gif        }

InBlock.gif
InBlock.gif        
private string name;
InBlock.gif        
ExpandedSubBlockStart.gifContractedSubBlock.gif        
/**//// <summary>
InBlock.gif        
/// A key representing this particular skin.  A Skin 
InBlock.gif        
/// is really a combination of the TemplateFolder and 
InBlock.gif        
/// the Stylesheet specified.
ExpandedSubBlockEnd.gif        
/// </summary>

InBlock.gif        [XmlIgnore]
InBlock.gif        
public string SkinKey
ExpandedSubBlockStart.gifContractedSubBlock.gif        
dot.gif{
InBlock.gif            
get
ExpandedSubBlockStart.gifContractedSubBlock.gif            
dot.gif{
InBlock.gif                
return (this.TemplateFolder + (this.StyleSheet != null && this.StyleSheet.Length > 0 ? "-" + this.StyleSheet : string.Empty)).ToUpper(CultureInfo.InvariantCulture);
ExpandedSubBlockEnd.gif            }

ExpandedSubBlockEnd.gif        }

InBlock.gif
InBlock.gif        
private Script[] _scripts;
ExpandedSubBlockStart.gifContractedSubBlock.gif        
/**//// <summary>
InBlock.gif        
/// Collection of <code>script</code> elements, declared for the skin.
ExpandedSubBlockEnd.gif        
/// </summary>

InBlock.gif        [XmlArray("Scripts")]
InBlock.gif        
public Script[] Scripts
ExpandedSubBlockStart.gifContractedSubBlock.gif        
dot.gif{
InBlock.gif            
get
ExpandedSubBlockStart.gifContractedSubBlock.gif            
dot.gif{
InBlock.gif                
return _scripts;
ExpandedSubBlockEnd.gif            }

InBlock.gif            
set
ExpandedSubBlockStart.gifContractedSubBlock.gif            
dot.gif{
InBlock.gif                _scripts 
= value;
ExpandedSubBlockEnd.gif            }

ExpandedSubBlockEnd.gif        }

InBlock.gif
InBlock.gif        
private Style[] _styles;
ExpandedSubBlockStart.gifContractedSubBlock.gif        
/**//// <summary>
InBlock.gif        
/// Collection of stylesheet elements declared for the skin.
ExpandedSubBlockEnd.gif        
/// </summary>

InBlock.gif        [XmlArray("Styles")]
InBlock.gif        
public Style[] Styles
ExpandedSubBlockStart.gifContractedSubBlock.gif        
dot.gif{
InBlock.gif            
get
ExpandedSubBlockStart.gifContractedSubBlock.gif            
dot.gif{
InBlock.gif                
return _styles;
ExpandedSubBlockEnd.gif            }

InBlock.gif            
set
ExpandedSubBlockStart.gifContractedSubBlock.gif            
dot.gif{
InBlock.gif                _styles 
= value;
ExpandedSubBlockEnd.gif            }

ExpandedSubBlockEnd.gif        }

ExpandedBlockEnd.gif    }


注意元数据属性,是为必须的,根据元数据熟悉属性再看看那个xml文件,意思是一一对应的。

接着便是SkinTemplates的真正反序列化的过程了,接着呢你就可以来个迭代,来加载相关skin文件了。
当然别忘了定义一个集合skins
None.gif        [XmlArray("Skins")]
None.gif        
public List<SkinTemplate> Templates
ExpandedBlockStart.gifContractedBlock.gif        
dot.gif{
ExpandedSubBlockStart.gifContractedSubBlock.gif            
get dot.gif{return this._skinTemplates;}
ExpandedSubBlockStart.gifContractedSubBlock.gif            
set dot.gif{this._skinTemplates = value;}
ExpandedBlockEnd.gif        }

转载于:https://www.cnblogs.com/Clingingboy/archive/2007/04/06/703190.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值