博客园_可惜我是程序猿

我和我的HoorayOS

2012-05-28T06:44:00Z

HoorayOS是我在我去年8月份开始构想，9月份开始编写的一个开源的web桌面类应用框架。它的前身是EonerCMS，因为那会公司准备重新开发自己的CMS系统，以应用于一些中小型的网站，于是也就有了这片文章《关于CMS后台展示/操作方式的个人拙见》

直到今年2月，我正式将作品开源，其目的有二，一是因为我觉得差不多可以拿出手了，该有的功能差不多完整了，即时有缺少，比如文件夹、多桌面、应用码头（这些功能在最新版本里都已实现），但这已经不影响一个系统的正常使用了，已经具备二次开发的条件了，其二就是毕竟开发快半年了，自己的毅力有点变弱，我不是一个很高尚的人，所以我很渴望能通过HoorayOS给我的生活带点收入，不用太多，至少能证明我这半年的努力不是一场闹剧。

开源后我把框架改名叫HoorayOS，因为近半年的开发，我发现这种模式不能局限于CMS，因为这种web桌面式的操作模式如果用在后台，那就大大失去了它的魅力，所以我将它改名，并美其名曰叫框架，因为我不做太多的功能，个性化的功能我一律摒弃，我只做框架本身可能会涉及到的功能。这样可以方便二次开发人员专注于系统开发，而不是修改框架。

开源后，得到了大部分人的支持，但这名字也惹来了一些人的吐槽。至今我也很后悔当初改名叫Hooray Desktop会不会更好，毕竟OS这个饼画的太大了，大到我自己都有点吃不下。

开源后的那一阵子，动力还是挺足的。原因在于有很多人联系我，说想和我合作，帮他们二次开发系统，因为工作原因，大部分我还是推了，因为二次开发的项目太大，加上我不能全职开发，只能抽下班时间进行开发，开发周期比正常开发要长一倍左右，所以只接了几个简单定制的系统，因为功能不多，加上价钱合理，顺理成章的就接了。那段时间是美好的，有人为你的梦想买单，我相信那种感觉你也有过。

开源让我得到了好多，不仅仅是物质上的。我建了QQ群，吸引了很多HoorayOS爱好者，大家提了很多意见，发现了很多bug，为了后期更新版本减少了很大工作量，让我能听取更多方面的意见，融会贯通之后整理出合适的方案，再进行开发，同时还不用我测试，新版本上线都会有一帮人在测试。开源让我的开发效率提升了一个档次，这要换在以前，在制作新功能前，要一个人想好久；开发好后，又要一个个浏览器去测试。

至今，HoorayOS已经更新了4个版本了，后续框架基本的功能大致都完善好后，我将会考虑引入第三方的产品，比如网盘，因为框架本身很难做到这类功能，通过第三方的api进行连接，以插件的形式接入，让开发者想使用的时候只需修改一个参数就可以实现各种不同的第三方api，大大提高开发效率。

HoorayOS具体能走多远我不知道，但我知道它是我第一个正式的作品，我希望让大家都知道它，因为它承载着我的一个未完成的梦想。

本文链接

【HoorayOS】开源的Web桌面应用框架（第四版 v120520）

2012-05-20T15:21:00Z

经过大量自愿者的BUG提交，建议讨论之后，迎来了第四版。让我们一起来看看第三版更新了哪些新功能吧。

桌面翻页功能

图标排列模式选择

修改应用打开模式

首次加载图标只获取桌面需要的数据，图标对应应用窗口的数据在点击打开图标的时候再进行远程获取，提速的同时可以同时在打开应用窗口前验证用户是否安装改应用

桌面滚动条

代码模块细化归类

更多注释

必要时提供图形化注释，方便学习及二次开发

更多常用桌面API接口，方便二次开发模块

每次小更新我都会在微博上发布，欢迎@可惜我是胡尐睿丶

更多小bug的修复就不一一描述了，以下是测试地址。

演示站：http://www.hoorayos.com/

HoorayOS介绍及下载：http://www.cnblogs.com/hooray/archive/2012/02/29/2372952.html

本文链接

【HoorayOS】开源的Web桌面应用框架——安装部署

2012-05-02T03:29:00Z

最近有很多人反应HoorayOS在安装上出问题，无法顺利安装成功，为此，我特地单独开篇日志，用户安装问题汇总，并在直接在文内解答，如果后续出现新的安装问题，该日志会及时更新。

首先是整个安装流程，下载HoorayOS：http://code.google.com/p/hoorayos/downloads/list

php，mysql环境安装，如果你有能力单独一个个安装，可以直接跳过这一步。这里我推荐使用WampServer，其他php集成安装环境各自做参考。

安装步骤就不截图了，基本上都是“下一步”式的无脑安装。

安装完毕后会发现桌面上有了一个快捷方式，双击运行后在桌面右下角就会出现这个图标。

然后我们右键它，可以在“Language”里面找到“chinese”，这样就是中文版的了，然后我们再左键它，选择最后一项“切换到在线状态”。

OK，php集成环境到此就安装完毕了，下面我们开始部署HoorayOS。解压压缩包，一共2个文件，一个hoorayos文件夹，一个hoorayos.sql数据库文件，我们把hoorayos文件夹放到www目录下

然后我们找到“inc/setting.inc.php”文件，打开，找到这一行

设置数据库链接属性，基本上是不用修改的，因为wamp的mysql密码默认为空。

接下来我们需要导入数据库，这里我用phpmyadmin做演示，同样通过wamp打开phpmyadmin页面。找到“数据库--新建”，注意编码选择。

创建成功后，点击进入我们新建的库，选择导入

OK，不会有问题，如果出问题请检查之间步骤操作是否有误。

至此，环境及项目的部署到此完毕，我们可以打开网站看下是否能正常访问。通过wamp进入“Localhost”，找到你的项目

点击进入，什么？！你也看到报错页面了，那就对了，让我们来看看出了什么错

undefined index，如果有点php基础的人肯定就明白了，出现上面这些是PHP的提示而非报错，PHP本身不需要事先声明变量即可直接使用，但是对未声明变量会有提示。一般作为正式的网站会把提示关掉的，甚至连错误信息也被关掉。关闭方法就是在php.ini（点击wamp，选择php，找到php.ini）里找到“error_reporting = E_ALL”，修改成“error_reporting = E_ALL & ~E_NOTICE & ~E_STRICT”即可，然后保存，重启wamp（wamp里面有个“重新启动所有服务”的选项，点那个就行）

重启后再运行发现页面上还是有问题，提示“could not find driver”，这是因为HoorayOS使用的PDO链接数据库，需要在php里把对应的扩展打开，所以还是打开php.ini文件，找到“;extension=php_pdo_mysql.dll”，把开头的分号去掉，保存，重启。

再次访问，OK，看到久违的登入界面了……

如果还有问题，请在下面回复，能力范围内，我会尽量解答。

本文链接

【HoorayOS】开源的Web桌面应用框架（第三版 v120421）

2012-04-21T02:44:00Z

经过大量自愿者的BUG提交，建议讨论之后，迎来了第三版。让我们一起来看看第三版更新了哪些新功能吧。

文件夹模块

全新任务栏

应用全屏按钮

新手引导界面

更多小bug的修复就不一一描述了，以下是测试地址。

演示站：http://www.hoorayos.com/

HoorayOS介绍及下载：http://www.cnblogs.com/hooray/archive/2012/02/29/2372952.html

本文链接

一个支持chrome、firefox的全屏插件

2012-04-13T16:22:00Z

话不多说，直接上demo，你可以点击下面的图片看效果。

插件代码

调用代码

$(function(){
$('#fullscreenbtn').click(function(){
if(window.fullScreenApi.supportsFullScreen){
window.fullScreenApi.requestFullScreen(document.getElementById('fullscreenbox'));
}else{
alert('就你这浏览器，基本就告别全屏功能了');
}
});
});

HTML代码结构

基于fullscreen功能，我们就可以做出很多效果，比如相册：

http://eikes.github.com/jquery.fullscreen.js/

又比如视频中的全屏功能：

http://mediaelementjs.com/

当然也不能不说我的HoorayOS中窗口全屏的使用：

http://www.hoorayos.com/

插件来源地址：http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/

本文链接

纯css实现新手帮助提示功能（首次登入提示）

2012-03-31T03:06:00Z

整体效果展示

这类新手提示的插件还真是少，无奈之下自己写了一个，不带任何图片，完全css实现。因为考虑到功能比较特殊，使用不会太频繁，就没写成插件的模式，所有都是写死的，可以看下HTML代码结构

<div class="help">
<a href="###" class="close" title="关闭新手帮助">×</a>
<div id="step1" class="step" step="1" style="top:60px;left:320px;width:250px">
<b class="jt jt_top" style="left:40px;top:-40px"></b>
<p>
<span class="h1">①</span><span class="h2">注册登录</span>
<br>点这里，点这里，点这里<br>
<a href="###" class="next">下一步</a>
</p>
</div>
<div id="step2" class="step" step="2" style="top:200px;left:400px;width:250px">
<b class="jt jt_left" style="top:20px;left:-40px"></b>
<p>
<span class="h1">②</span><span class="h2">商品分类</span>
<br>看到了么？看到了么？看到了么？<br>
<a href="###" class="next">下一步</a>
</p>
</div>
<div id="step3" class="step" step="3" style="top:200px;left:500px;width:250px">
<b class="jt jt_top" style="top:-40px;left:40px"></b>
<p>
<span class="h1">③</span><span class="h2">搜索框</span>
<br>这个就不用我介绍了吧 =)<br>
<a href="###" class="over"> 完成 </a>
</p>
</div>
</div>

重点看下每一步的html代码结构

如果要新增加一步，就把这段复制，然后把其中修改其中的内容即可，但要确保step参数的顺序必须是正序，然后id的后缀值也是要正序，与step一样，剩下就是修改窗口top、left的布局以及箭头的top、left布局。

还有一点，箭头可以设置方向，样式分别为：jt_top、jt_bottom、jt_left、jt_right。

介绍就这么多了，剩下的就是css和js代码，我就不多说了，大家自己看吧

*{margin:0;padding:0}
form,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,p{list-style:none outside none}
a{text-decoration:none;color:#ccc;outline:none}
a:hover{text-decoration:none}
a img{border:none}
.fr{float:right}
.fl{float:left}
.disn{display:none}

html{height:100%;overflow:hidden;-moz-user-select:none;-khtml-user-select:none;user-select:none}
body{font:12px/1.8 \5FAE\8F6F\96C5\9ED1,\5B8B\4F53;background:url(bg.png)}

.help{position:absolute;z-index:5555;width:100%;height:100%;background:none rgba(0, 0, 0, 0.7);display:none}
.help .close{float:right;font-size:40px;color:#fff;width:40px;height:40px;line-height:36px;text-align:center;background:none}
.help .close:hover{background:none rgba(0, 0, 0, 0.7)}
.help .step{position:absolute;color:#eee;padding:0 20px 15px;background:none rgba(0, 0, 0, 0.7);border-radius:5px;display:none}
.help .step .jt{font-size:0;height:0;border:20px solid rgba(0, 0, 0, 0);position:absolute}
.help .step .jt_left{border-right:20px solid rgba(0, 0, 0, 0.7)}
.help .step .jt_right{border-left:20px solid rgba(0, 0, 0, 0.7)}
.help .step .jt_top{border-bottom:20px solid rgba(0, 0, 0, 0.7)}
.help .step .jt_bottom{border-top:20px solid rgba(0, 0, 0, 0.7)}
.help .step .h1{font-size:40px;font-weight:bold}
.help .step .h2{font-size:28px;font-weight:bold;padding-left:10px}
.help .step .next,
.help .step .over{border:1px solid #fff;color:#fff;padding:0 5px;float:right;margin-top:10px}
.help .step .next:hover,
.help .step .over:hover{background:none rgba(50, 50, 50, 0.7)}

$(function(){
$('.help').show();
$('#step1').show();
$('.close').on('click',function(){
$('.step').hide();
$('.help').hide();
});
$('.next').on('click',function(){
var obj = $(this).parents('.step');
var step = obj.attr('step');
obj.hide();
$('#step'+(parseInt(step)+1)).show();
});
$('.over').on('click',function(){
$(this).parents('.step').hide();
$('.help').hide();
});
});

下载地址：点击下载

本文链接

【HoorayOS】开源的Web桌面应用框架（文件夹功能分析）

2012-03-23T15:31:00Z

下一版本的重要功能就是“文件夹”，随着应用码头的出现，任务栏也改成大图标的模式，桌面可放置图标的位置越来越少，“文件夹”就应然而生了，但在制作过程中，发现几个难点，也就是图标拖动时需要注意的部分。如下图，文件夹内的图标在拖动结束的时候，位置可能会处在四处：应用码头、桌面、当前文件夹、其他文件夹

前两种情况可以参考下图，图标拖动的第一步就是先画格子。

然后记录下每个格子四个角的坐标保存为数组，然后循环数组依次添加图标进去。

之后图标拖动也是需要这个格子数组，当我拖动完毕释放图标的时候，判断鼠标释放的位置处于哪个格子中间，进行图标移动并重新排序，实现图标拖动功能，应用码头拖动也是同样思路，两者结合起来无非就是要判断两次，先判断释放位置是否处于应用码头的格子内，然后再判断是否处于桌面的格子内。

我在想，文件夹之间的图标拖动是否也可以参考这种模式，桌面上所有已打开并处于显示状态的文件夹窗口，当作是一个个的格子，保存到一个数组里。因为显示在桌面的窗口不管在任何情况都是高于桌面的，也就是覆盖在桌面上，所以当拖动结束释放时，优先判断图标是否处于文件夹的格子内，然后再依次判断应用码头的格子和桌面的格子。

随之又想到会出现这种情况，就是文件夹会重叠，如果我图标拖动的位置刚好处于图中问号处，系统怎么知道我先要拖放的位置的哪个窗口呢？

其实细想一下，完全不用担心。我的文件夹格子数组可以在图标拖动的时候创建，创建的时候依次按文件夹窗口z-index的值从大到小来读取，这样就是保证文件夹格子数组里记录内容的顺序也是按照文件夹层级顺序来存放的，当我循环数组判断图标拖放位置的时候，自然也就避免了刚才那个问题。

OK，以上就是文件夹内图标拖动的大致思路，希望开发的时候能够顺利些，也能让第三版顺利面世，让大家用用试试。

PS：更新demo演示：http://jsfiddle.net/UjS7Y/2/embedded/result/

本文链接