RIAEasy之主题（一）——rias.theme对象

RIAEasy

于 2015-05-22 16:42:12 发布

阅读量606

点赞数

分类专栏：关于 RIAEasy 文章标签： dojo RIAEasy theme 主题

本文链接：https://blog.csdn.net/zensst/article/details/45918979

版权

关于 RIAEasy 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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>

RIAEasy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
RIAEasy之主题（一）——rias.theme对象

RIAEasy之主题（一）——rias.theme对象通过主题（theme），可以快速、安全地制作出各种外观，所以，RIAEasy 也需要有一组主题相关的功能。dojo 1.10提供了四个theme，但是很遗憾的是，跟 dijit 一样的，dojo的主题使用起来不是很方便，于是我们自己扩展出一个对象——rias.theme。废话不多说，直接上代码。 rias.theme = {
复制链接

扫一扫