RIAEasy之主题（一）——rias.theme对象
云飞翮
RIAEasy之主题（一）——rias.theme对象
通过主题（theme），可以快速、安全地制作出各种外观，所以，RIAEasy 也需要有一组主题相关的功能。dojo 1.10提供了四个theme，但是很遗憾的是，跟 dijit 一样的，dojo的主题使用起来不是很方便，于是我们自己扩展出一个对象——rias.theme。
废话不多说，直接上代码。
rias.theme = {
baseUrl: "rias/themes",
themes: {
rias: {
location: "rias",
main: "main.css"
}
},
_loaded: {
"_all": {
///name: link
}
},
toUrl: function(url, theme){
theme = this.themes[theme || this.currentTheme];
theme = theme || this.themes.rias;
return rias.toUrl(this.baseUrl + "/" + theme.location + "/" + url);
},
loadCss: function(names){
var self = this,
links = rias.dom.query('link'),
theme;
function _load(names, theme, loaded){
rias.forEach(names, function(name){
if(!self._loaded._all[name]){
self._loaded._all[name] = "";
}
name = self.toUrl(name, theme);
if(loaded[name]){
return;
}
if(links.some(function(val){
return val.getAttribute('href') === name;
})){
return;
}
rias.withDoc(rias.doc, function(){
var newLink = rias.dom.create('link', {
rel: 'stylesheet',
type: 'text/css',
href: name
});
loaded[name] = newLink;
var headElem = rias.doc.getElementsByTagName('head')[0];
headElem.appendChild(newLink);
});
});
}
names = rias.isArray(names) ? names : rias.isString(names) ? [names] : [];//name.split(",");
rias.forEach(names, function(name){
if(!self._loaded._all[name]){
self._loaded._all[name] = "";
}
});
for(theme in self.themes){
if(self.themes.hasOwnProperty(theme)){
if(!self.currentTheme){
self.currentTheme = theme;
}
_load(names, theme, rias.getObject(theme, true, self._loaded));
}
}
},
loadTheme: function(name, location, main){
if(!rias.isString(name)){
console.error("The name must be a string.");
return;
}
if(!location || !rias.isString(location)){
location = name;
}
if(!main || !rias.isString(main)){
main = "main.css";
}
name = this.themes[name] || {};
name.location = location;
name.main = main;
var names = [name.main];
for(name in this._loaded._all){
if(this._loaded._all.hasOwnProperty(name)){
if(names.indexOf(name) < 0){
names.push(name);
}
}
}
this.loadCss(names);
}
};从上述代码可以看出，rias.theme采用了与 dojo.require 类似的包定义：
baseUrl: "rias/themes",///包的基准路径，采用 dojo 的require 路径标准。
rias: {///包名，也就是主题名，即一般在html中写为<body class=”rias”>中”rias”
location: "rias",///包的路径，相对于 rias.theme.baseUrl
main: "main.css"///包的入口文件
},
toUrl: function(url, theme)，///这个方法与 reuqire.toUrl功能类似，可以把路径转换为url。
loadCss: function(names)，///这个方法实现了将css的url写入document.head功能。
loadTheme: function(name, location, main)，///这个方法用于引入一个主题包。
_loaded: {
"_all": {
///name: link
}
}///这个属性，与 dijit.registry._hash 类似，用于保存已经引入的主题包中的xxx.css。在 Widget类定义模块中可以这样使用rias.theme：
define([
"rias",
"dijit/_TemplatedMixin",
"rias/riasw/layout/Panel"
], function(rias, TemplatedMixin, Panel){
rias.theme.loadCss(["layout/CaptionPanel.css"]);
var riasType = "rias.riasw.layout.CaptionPanel";
var Widget = rias.declare(riasType, [Panel, TemplatedMixin], {
<span style="white-space:pre"> </span>……
});
return Widget;
});需要注意的是，rias.theme.loadCss(["layout/CaptionPanel.css"])中使用的是相对于theme包的路径。使用相对路径的好处是，更换主题是，可以根据主题包的定义自动转换url。
主题包的使用，如下：
<!DOCTYPE html>
<html>
<head>
<title>RIAEasy - The online visual designer,WYSWYG RIA/SPA designer.Based on dojo 1.10. 面向富客户/单页应用的在线可视化设计器。</title>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
</head>
<script>
var dojoConfig = {
parseOnLoad: false,
async: true,
//cacheBust: new Date(),
waitSeconds: 30,
locale: 'zh-cn',
extraLocale: ['en'],
packages: [
//{name: 'dijit', location: '../dijit'},
//{name: 'dojox', location: '../dojox'},
{name: 'rias', location: '../rias', main: 'rias'}
]
};
</script>
<script type="text/javascript" src="dojo/dojo.js">
</script>
<script type="text/javascript">
require([
"rias"
], function(rias){
rias.ready(function(){
rias.theme.loadTheme("rias", "rias", "main.css");
rias.require([
"app"
], function(app){
app.appMainModule = "appModule/index";
app.startup();
});
});
});
</script>
<body>
</body>
</html>
类似资料：