Posts tagged S5Creator

S5Creator – 文件管理

十一09
2007 1 Comment Written by Filia.Tao

昨天和今天把文件管理的功能从编辑页面移动到一个单独的页面.
主要是新建/删除/浏览功能. 顺便把jQuery 的table (Sortable Table) UI组件来用了一下.
演示: http://dev.filia.cn/S5-Creator/HTML/manage.html
还有实现了一个全选/不选/反选的功能, 发现用jQuery 来做这个真是太简单了.

//选择按钮
 
$(this._options.selectButtonSelector).click(
 function(e){
 	var which = $(this).attr("which");
 	switch(which)
 	{
 		case 'none':
 			$(fm._options.checkboxSelector).removeAttr("checked");
 			break;
 		case 'all':
 			$(fm._options.checkboxSelector).attr("checked","checked");
 			break;
 		case 'reverse':
 			$(fm._options.checkboxSelector).each(function(i){
 				if($(this).attr('checked'))
 					$(this).removeAttr('checked');
 				else
 					$(this).attr("checked","checked");
 			});
 			break;
 	}
 }
);

简单明白,逻辑清楚.
其他更新:

  • 改进后端
  • 信息显示(上次保存时间,刚进行过的动作)
  • 代码清理
Posted in javascript - Tagged , ,

S5Creator – 使用Observer 模式重构

十28
2007 Leave a Comment Written by Filia.Tao

今天使用Observer 重构了S5Creator. 主要是将各个模块之间解耦.
首先快速的实现一个观察者模式. (现在暂时放在 S5Creator 这个类上, 以后再重构..)

S5Creator.prototype.register = function(topic,observer)
{
	if (!(this._topics[topic] instanceof Array))
		this._topics[topic] = [];
	this._topics[topic].push(observer);
}
 
S5Creator.prototype.notify = function(topic,data)
{
	console.log("notify " + topic);
	if (!(this._topics[topic] instanceof Array))
		return ;
	this._topics[topic].each(function(observer){
		observer.call(null,data);
	})
}

很简单的一段代码.
有下面的一个场景, 我们有一个主题选择器让我们选择主题. 选择完成以后我们需要通知编辑器更新主题.
以前我们需要由ThemeSelector 显示的调用Editor 的setContentCss.
现在我们只需要这样

Editor.prototype.init = function()
{
	var editor = this;
 
	//注册主题改变事件
	S5Creator.singleton().register(
		"theme_change",
		this.setContentCss.bind(this)
	);
        // 其他代码
}

和这样

ThemeSelector.prototype.select = function(theme)
{
	if(theme)
	{
		var path = this._options.themePath + '/'
			 + $(theme).attr('theme') + '/' + this._options.editorCssName;
		//注意这里
		S5Creator.singleton().notify("theme_change",path);
		$(this._box).dialogClose();
	}
}

解释一下上面有一个bind. 我很喜欢这个东西. 可以让我不用总是担心this.

Function.prototype.bind = function(obj)
{
	var func = this;
	return function(){
		func.apply(obj,arguments);
	}
}

我还将Observer 模式用在了其他几个地方. 比如编辑器内容更新后,通知缩略图. 改变了正在编辑的slide 以后, 通知编辑器更新内容.

Posted in javascript - Tagged , , , ,

S5Creator – 架构与设计模式(1)

十23
2007 1 Comment Written by Filia.Tao

S5Creator 是我最近在做的一个项目.

基于Web的S5 幻灯片创作工具
主页: http://code.google.com/p/s5-creator/
演示: http://dev.filia.cn/S5-Creator/HTML/editor.htm
该项目仍在开发中.

最近开发停滞不前了,除了时间上的原因, 另外就是技术上有一些问题. (编辑器器啊……)
决定先总结一下这个项目的架构,也给自己理一下思路.

整个S5Creator 我将它划分为如下几个组件.

  • 编辑器 编辑单张幻灯片
  • 缩略图 缩略图,同时用于不同幻灯片的切换
  • 主题选择器 选择主题
  • 工具列 提供对一些常用功能 (保存,新建,加载等)
  • 预览器 现在的实现是打开一个新的窗口
  • IO接口 配合不同的后端, 比如本地Javascript,PHP,Python

通过一个singleton 的 S5Creator对象来访问这些这些组件.

上面的前4个都是UI 组件, 我都是使用下面这样的思想来设计的.

  1. View 手工写的 HTML 和 CSS +基于模板生成的元素．(比如新建了一张幻灯片)
  2. Controller 通过CSS Selector 对元素附加事件处理函数, 同时这些CSS Selector 是可配置的.
  3. Model  使用 DOM元素本身,必要时添加定制的属性. (比如在按钮上添加action属性)
    再比如选中选中某一个幻灯片时， 我直接在该幻灯片上添加一个CSS Class.
    当然我也使用javascript对象来作模型，在不同组件之间传递时封装成一个slide对象。

代码说话, 下面缩略图视图组件的代码. (还有点乱, 不过基本成形了. 注意我使用了jquery 框架, 里面使用了一些jquery 扩展)
// 还是不贴了, 太长了. 看这里吧. thumbView.js

Posted in javascript, Web开发, 编程开发 - Tagged ,

最近评论

My Tweets

分类

文章归档