博客园_boolean

Mercury Editor学习心得

2012-05-13T03:00:00Z

Mercury Editor自称是全特性HTML5编辑器。It was built from the grond to help your team get the most out of content editing in modern browser。

支持的浏览器有：Firfox 4+、Chrome10+、Safar 5+。

想看看到底有什么特性吧：

简单易用：Mercury来自于一个 Rails引擎，所以可以放到Gemfile中使用。如果你不使用Rails，解开包使用也行。
可配置：可以很简单的添加或者移除工具条上的项。任何工具条上的项目都可以用行为命令模式进行绑定，就像事件机制。
无冲突：我们不向你的页面上放任何代码，所以你不用担心使用其他任何框架。
可扩展：默认支持Html和Markdown（是一种轻量级的比较语言），你可以扩展基础regions来做自己的types。

Mercury Editor官方网站http://jejacks0n.github.com/mercury/。目前Mercury是0.2.0版本，访问后点击上面的“Test it out”按钮一起来感受一下它吧，点击完该按钮，首页它会在当前页面上显示出来编辑器的工具条，然后还会把待编辑的区域用明显的线条给你表示出来，这时就可以更改网页上的内容了，基于这个感觉，我觉得至少可以做一个在线的实时的可视化模板编辑器、代码编辑器等等吧。

本文链接

基于Aspose.Pdf把pdf文件每一页转换为图片

2012-05-10T02:50:00Z

如题，直接上代码片段

//1.选择pdf文件
            var dialog = new OpenFileDialog();
            dialog.Filter = "pdf文件|*.pdf";
            var dialogResult = dialog.ShowDialog();
            if (dialogResult != System.Windows.Forms.DialogResult.OK) {
                return;
            }

            //和选择的文件并列创建一个目录
            string filePath = dialog.FileName;
            string directoryPath = filePath + "目录";
            //aspose许可证
            Aspose.Pdf.License l = new Aspose.Pdf.License();
            string licenseName = Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "Aspose.Total.Product.Family.lic");
            l.SetLicense(licenseName);
            //定义Jpeg转换设备
            Aspose.Pdf.Document document = new Aspose.Pdf.Document(filePath);
            var device = new Aspose.Pdf.Devices.JpegDevice();
            int quality = int.Parse(this.comboBox1.SelectedItem.ToString());
            directoryPath += quality;
            Directory.CreateDirectory(directoryPath);
            //默认质量为100，设置质量的好坏与处理速度不成正比，甚至是设置的质量越低反而花的时间越长，怀疑处理过程是先生成高质量的再压缩
            device = new Aspose.Pdf.Devices.JpegDevice(quality);
            //遍历每一页转为jpg
            for (var i = 1; i <= document.Pages.Count; i++) {
                string filePathOutPut = Path.Combine(directoryPath, string.Format("{0}.jpg", i));
                FileStream fs = new FileStream(filePathOutPut, FileMode.OpenOrCreate);
                try {
                    device.Process(document.Pages[i], fs);
                    fs.Close();
                } catch (Exception ex) {
                    fs.Close();
                    File.Delete(filePathOutPut);
                }

}

本文链接

基于Ext.Panel编写一个图片列表类

2012-05-09T05:00:00Z

先看效果后上代码

/*
    图片列表视图，可以把图片按图片集合的形式展现
    未来可能发展为一个功能丰富的图片播放管理工具
    <script type="text/javascript" language="javascript" src="/modules/cms/js/pictureview.js"></script>
    eg:
    var pic = new BeidaSoft.CMS.PictureView({
        dataUrl:"somedata.htm"
    })
    layout.C.add(pic)
    传递参数为标准翻页工具条提供的参数如：start、limit等等
    数据格式要求为
    {
        totalCount:100,
        rows:[
            {
                id:"123",
                name:"pic1",
                smallImageSrc:"",
                bigImageSrc:""
            },{
                name:"pic2"
            }
        ]
    }
*/
Ext.namespace('BeidaSoft.CMS');
BeidaSoft.CMS.PictureView = function (config) {
    BeidaSoft.CMS.PictureView.superclass.constructor.call(this,config)
}
Ext.extend(BeidaSoft.CMS.PictureView, Ext.Panel,{
    border:false,
    layout:"fit",
    pageSize:20,
    dataUrl:"",
    store4Pic:null,
    initComponent: function () {
        //数据源
        var store = new Ext.data.JsonStore({
            url: this.dataUrl,
            root: 'rows',
            totalProperty: 'totalCount',
            fields: [
                {name: 'id', mapping: 'id'},
                {name: 'name', mapping: 'name'},
                {name: 'smallImageSrc', mapping: 'smallImageSrc'},
                {name: 'bigImageSrc', mapping: 'bigImageSrc'}
            ],
            listeners:{
                beforeload:function(){
                    //alert(1)
                    //return false
                },
                load:function(){
                    //alert(2)
                },
                loadexception:function(misc){
                    //不符合reader格式的数据也会引发异常
                    //debugger
                    //alert(3)
                }
            }
        });
        this.store4Pic = store

        //翻页工具条
        this.bbar = new Ext.PagingToolbar({
            pageSize: this.pageSize,
            store: this.store4Pic,
            displayInfo: true,
            emptyMsg: '没有记录'
        });

        var handler4ClickPic = String.format('Ext.getCmp("{0}").ClickPic("{id}")', this.id)
        var currentObject = String.format('Ext.getCmp("{0}")', this.id)
        var template = [
            '<style>',
                'li {float:left;width:145px;height:140px}',
            '</style>',
            '<ul>',
                '<tpl for=".">',
                    '<li style="height:168px; border: solid 1px #ccc; margin:2px;" class="picture">',
                        '<dl style="text-align:center;">',
                        '<dt>',
                        '<a target="_blank" onclick=Ext.getCmp("{0}").ClickPic("{id}")>',
                            '<img width="145" height="120" src="{smallImageSrc}" />',
                        '</a>',
                        '</dt>',
                        '<dd style="padding-bottom=0px ;padding-left=0px ;padding-right=0px ;padding-top=0px ;">',
                        '<label style="text-align:center; display:">',
                        '<input type="checkbox" id="{id}" name="{name}" />',
                        "{name}",'</label>',
                        '<br>',
                        '<a target="_blank" onclick=Ext.getCmp("{0}").Preview("{id}")>',
                            '<img src="/modules/cms/images/预览.bmp" title="预览" />',
                        '</a>',
                        '<a>',
                            '<img src="/modules/cms/images/编辑.bmp" title="编辑" />',
                        '</a>',
                        '<a target="_blank" onclick=Ext.getCmp("{0}").DeletePic("{id}")>',
                            '<img src="/modules/cms/images/删除.bmp" title="删除" />',
                        '</a>',
                        '</dd>',
                        '</dl>',
                    '</li>',
                '</tpl>',
            '</ul>'
        ].join("")
        template = String.format(template, this.id)

        this.tpl4Pic = new Ext.XTemplate(template);

        this.dataview4Pic = new Ext.DataView({
            store: this.store4Pic,
            tpl: this.tpl4Pic,
            //因为有的样式是用id写的所以也这么写是不合适的
            //id: 'phones',
            itemSelector: 'li.phone',
            overClass: 'phone-hover',
            multiSelect: true,
            emptyText: 'No images to display',
            autoScroll:true
        });
        this.items = this.dataview4Pic;
        BeidaSoft.CMS.PictureView.superclass.initComponent.call(this);
    },

    //设置参数
    SetBaseParams: function(params) {
        //尚未实现
    },

    //整合数据
    LoadData: function () {
        this.store4Pic.load()
    },

    //派生类可以重写这些方法来实现特定的逻辑
    //预览图片
    Preview:function(id){
        //alert(id)
    },

    //点击图片
    ClickPic:function(id){
        //alert(id)
    },

    //删除图片
    DeletePic:function(id){

    },

    //获取选中的记录
    GetSelections:function(){
        var arrRecord = []
        var body = this.body.dom
        var arrInput = body.getElementsByTagName("input")
        for(var i=0; i<arrInput.length; i++){
            var input = arrInput[i]
            if(input.checked){
                var record = this.store4Pic.getAt(i)
                arrRecord.push(record)
            }
        }
        return arrRecord
    },

    //渲染
    onRender: function (ct,position) {
        BeidaSoft.CMS.PictureView.superclass.onRender.apply(this,arguments);
        this.LoadData();
    }
});
Ext.reg("beidasoft.cms.pictureview", BeidaSoft.CMS.PictureView)

本文链接

图数据库现状简介

2012-05-07T05:43:00Z

微软基于“内存云”的图数据库Trinity，是一款图形数据库及图形化计算平台，目前仅限微软内部访问，尚未面向公众发布。

项目地址：http://research.microsoft.com/en-us/projects/trinity/

可参考介绍文章：

http://hb.qq.com/a/20120315/000135.htm

http://blog.nosqlfan.com/html/1545.html

http://www.infoq.com/cn/articles/graph-nosql-neo4j/

http://tech.hexun.com/2012-02-08/137857817.html

通过微软的Trinity项目地址介绍获悉，目前图引擎领域有几个具体的实现Neo4j, HyperGraphDB, InfiniteGraph, Pregel，各自有不同的存储（有的基于内存，有的基于磁盘，有的基于Key Value数据库），微软综合了他们的优缺点，不过遗憾的是目前Trinity还仅限于微软内部访问。

此外我们现在能用的文档、易用等入门级的图数据库是neo4j，当然如果你不擅长java，我们可以用neo4j的.net客户端类库来学习，它就是Net.Graph.Neo4JD。

本文链接

集成框架支持js类型多继承

2012-04-20T05:45:00Z

1、写法

下面代码，cellpanel.js加载完毕后在加载cellpanel2.js

多写个sID和pID两个属性，解释属性一个是sID代表我们js的顺序，pID代表要加载它的前提条件;分为两种状况一种pID为0标示不用等直接可以加载，第二种是上面代码描述的样子，pID等于某个js的sID。

2、好处

一点：再主程序启动的时候，一些最基类的js加载外，像在各别功能少用的JS基础类，我们就不用提前加载，给主程序造成下载的压力（一开始加载的js越少加载越快，反之越多越慢）。二点：在同一功能中不用屡次加载同一个用到的插件，比如cell等，加载一个主的cell，继承它主的js。有了顺序加载更灵活，更方便。

本文链接

基于Ext.Panel扩展一个更容易操作的Canvas

2012-04-19T05:08:00Z

/*
    画布类
    xtype:"beidasoft.oe.canvas.panel"
    <script type="text/javascript" language="javascript" src="/modules/oe/view/canvas/panel.js"></script>
    eg:
    var panel = new BeidaSoft.OE.Canvas.Panel()
*/

Ext.namespace("BeidaSoft.OE.Canvas")
BeidaSoft.OE.Canvas.Panel = function (config) {
    BeidaSoft.OE.Canvas.Panel.superclass.constructor.call(this,config);
}
Ext.extend(BeidaSoft.OE.Canvas.Panel, Ext.Panel, {
    width: 500,
    height: 500,
    border: false,
    canvas: '',
    canvasID: "canvas_",
    initComponent: function () {
        this.canvasID = this.canvasID + this.id
        BeidaSoft.OE.Canvas.Panel.superclass.initComponent.call(this);
    },

    //清理画布
    Clear:function(){
        var ctx = this.canvas.getContext("2d");
        ctx.clearRect(0, 0, this.getWidth(), this.getHeight());
    },

    //获取画布上下文
    GetContext:function(){
        var ctx = this.canvas.getContext("2d");
        return ctx
    },

    //自带画图示例
    Draw:function(){
        var cxt = this.GetContext()
        //创建渐变
        var radgrad = cxt.createRadialGradient(50, 50, 10, 60, 60, 60);
        radgrad.addColorStop(0, '#A7D30C');
        radgrad.addColorStop(0.9, '#019F62');
        radgrad.addColorStop(1, 'rgba(1,159,98,0)');
        cxt.fillStyle = radgrad;
        cxt.fillRect(0, 0, this.getWidth(), this.getHeight());

        cxt.font = "italic 20px 微软雅黑";
        cxt.strokeText("李树强", 30, 50);
    },

    //渲染实现Canvas标签的实例化以及canvas元素的引用
    onRender: function(ct, position) {
        BeidaSoft.OE.Canvas.Panel.superclass.onRender.apply(this, arguments);
        var canvasHTMLFormat = [
            '<canvas id="{0}" height="100%" width="100%" style="border: 0px solid #06c;">',
                '您使用的浏览器不支持Canvas标签和CanvasAPI，建议使用IE9以上版本',
            '</canvas>'
        ].join("")
        var canvasHTML = String.format(canvasHTMLFormat, this.canvasID);
        this.body.dom.innerHTML += canvasHTML;
        var canvas = document.getElementById(this.canvasID)
        this.canvas = canvas
    }
});
Ext.reg('beidasoft.oe.canvas.panel', BeidaSoft.OE.Canvas.Panel)

本文链接

好玩的效果很好的Html游戏和范例

2012-04-17T05:10:00Z

地铁音 http://www.mta.me/

割绳子 http://www.cuttherope.ie/

八卦图

Canvas Pinball http://ie.microsoft.com/testdrive/Graphics/CanvasPinball/Default.html

分享一个超酷的开源html5 canvas互动网络图形效果javascript类库 - sigma.js

图标类：仪表盘 Bubble Chart

类库：

一个可视化编程的脚本库envision.js
sigmajs.org

10个js类库

开发工具：

http://www.madewithmarmalade.com/

五个最佳的游戏开发实践

http://www.codeproject.com/Articles/347781/Top-5-Best-Practices-for-Building-HTML5-Games-In-A

十六个印象非常深刻的Html5+Css3+js的例子

http://www.oschina.net/news/28308/16-impressive-css3-html5-and-javascript-experiments

本文链接

win7 64位IE无法运行ActiveX控件的解决方法

2012-03-27T07:36:00Z

在win64位系统安装后会生成一个ie程序图标，很多人就是直接进入此程序却无法观看网页上的fiash视频和MP3音乐（比如qq空间），也无法运行各种ActiveX控件（如网银、office控件、Cell等）。就算进入网页ie提示要安装插件也安装不了。

解决方法：打开系统盘符，我的系统装在c盘，发现里面有Program Files和Program Files（x86）两个文件夹，这两个文件的作用就不用我说了吧，分别把这两个文件夹打开发现里面都有Internet Explorer这个文件夹，不错，这就是IE的安装目录，这下大家一改明白了吧，打开 Program Files（x86）下的Internet Explorer文件夹找到iexplore程序将其发送到桌面快捷方式，删除掉原来的快捷方式。

本文链接

Mongodb的windows服务安装和卸载

2012-02-24T07:26:00Z

不用 InstallUtil.exe，直接用mongod.exe做就可以：

安装：mongod --dbpath "C:\mongodb\db" --logpath "C:\mongodb\log.txt" --install --serviceName "MongoDB"

卸载：mongod.exe --remove --serviceName "MongoDB"

本文链接

后rtx集成时代

2012-02-22T22:48:00Z

基本结构：客户端向服务器发送命令（如给目标rtx号码发送提醒、短信、访问组织和用户信息等）。

1.首先要把原生API做一个基础接口封装，将RTXSDK内部的对象和状态屏蔽掉，使得开发人员不用关心内部逻辑,
2.如果你的数据访问使用的是实体框架的话，并且可以把消息发送与特定的实体的改变关联起来，这样就以最低的成本实现了消息发送的绑定

本文链接